每個(gè)想開(kāi)始他的網(wǎng)站設計旅程的人，都必須訓練審美能力。
我們經(jīng)常上Dribbble設計網(wǎng)站，看各種好的設計，這樣會(huì )對我們提升設計非常有幫助，但是有時(shí)，你只能是欣賞設計，卻不明白為什么要這么設計。
今天，錦州網(wǎng)站建設華睿科技將向你分享20個(gè)極其簡(jiǎn)單的設計技巧，這些技巧不需要任何特殊技能，但是，可以幫助你如何改善丑陋的設計，提升你的審美。
但是，請記住，這些不是規則，而是在大多數情況下使用的有效技巧。
01、黑白相間
沒(méi)有主意嗎？沒(méi)有好的圖像？那就黑白相間。你就可以獲得具有正確構圖的野獸派設計。這可以幫助你了解平衡空白以及如何使用文本和幾何形狀。
02、創(chuàng )建一個(gè)“平衡方案”。
我喜歡使用我可能發(fā)明的“事物”來(lái)測試我的設計。我稱(chēng)其為“平衡方案”，它是概念的黑白版本，其中，我使用簡(jiǎn)單的幾何圖形代替內容。
目標是在左右，上，下都帶來(lái)相同數量的黑色。如果將原理應用于簡(jiǎn)單設計組合，則會(huì )得到以下信息：
用黑色矩形替換項目，灰色的放柔軟物體。
你必須多加注意，但讓我們看一下一些計算。
左側區域黑色矩形的總和約為：
（236 * 138）+（934 * 132）+（313 * 69）+（674 * 44）= 207109像素
當右大矩形數不勝數：
446 x 446 = 198916像素。
它們的差異很小，只有3.9558％！
注意：是的，墨水點(diǎn)比矩形小，但是非常清晰銳利的細節吸引了更多的注意力。
我在設計之前沒(méi)有計算過(guò)它。經(jīng)過(guò)多年的實(shí)踐，由于你的眼睛會(huì )感覺(jué)到它好像是平衡的，這個(gè)是一種錯覺(jué)。
03、設計背景
我之前介紹的示例以灰色背景顯示，但你可以嘗試其他操作。這有助于你的設計創(chuàng )建一些深度和上下文。
但要注意：在真實(shí)的網(wǎng)站中，你將沒(méi)有多余的空間，因此，這只是一個(gè)演示技巧！
04、使用尺寸指南。
你不必浪費一整天的時(shí)間來(lái)設計測量尺寸。只要最后，你的段落文本將在14–18pt左右即可，你的小標題需要大一些，可以為24–36pt之間，并且你的大標題還要更大一點(diǎn)，我個(gè)人為它們可以使用96-144pt。而Figma的默認大小非常適合排版。
它們看起來(lái)太小了，但這是正常的：你無(wú)法全屏工作。
注意：某些字體比其他字體小或大。你應該以Roboto作為標準字體的基礎：如果字體較大，如14–18pt Roboto，則非常適合段落。
05、使用Z-Index，分層設計
如果你有一些具有透明性的圖像，則可以利用它們來(lái)創(chuàng )建一些分層。如果沒(méi)有，則可以使用remove.bg
作為CSS中的Z-index，n可以將圖像置于其他項目的前面或后面，從而產(chǎn)生三維感。這是非常有效的。
讓我們來(lái)看看我使用這個(gè)技巧后的簡(jiǎn)單設計效果。示例如下：
06、嘗試使用柔和的顏色
鮮艷的色彩很棒，但常常導致激進(jìn)的設計和糟糕的組合。此外，如今柔和的設計非常流行，因此，我們可以多嘗試使用柔和的顏色選擇器。
07、使用空白設計
在我看來(lái)，空白多比空白少要好。雜亂無(wú)章的設計真的很糟。不過(guò)，你可以通過(guò)多種方式獲得：
保持大背景圖可見(jiàn)。
避免帶有間隔的文本墻。
不要使用不會(huì )吸引太多注意力的圖像。
減少文本的內容，并保留醒目的短語(yǔ)即可。
08、發(fā)現噪點(diǎn)的力量
通常，當我們想到設計時(shí)，就會(huì )想到干凈，平滑，清晰的概念。但是，完美在于缺陷。
噪音是你設計中的堅強朋友，尤其是當你要使網(wǎng)站外觀(guān)優(yōu)雅或藝術(shù)化時(shí)。
此外，施加細微的噪點(diǎn)會(huì )使你的構圖具有電影效果，這非常適合視頻和動(dòng)態(tài)網(wǎng)站。
你可以使用Photoshop并在白色背景上創(chuàng )建2–4K高斯噪波，然后將其應用到畫(huà)板上，從而獲得一些噪波紋理。
09、尋找并使用好的字體
有很多可怕的字體，尤其是我們計算機上預裝的字體。要找到好的字體，請開(kāi)始瀏覽網(wǎng)絡(luò )或觀(guān)看youtube視頻，以了解出色的字體。
但請注意：許多字體不是免費的，并且在沒(méi)有許可的情況下使用它們可能會(huì )給你帶來(lái)麻煩。不過(guò)，也不用擔心：大多數字體都有免費版本！
有許多不同的風(fēng)格，但總的來(lái)說(shuō)，我將其分為三個(gè)主要類(lèi)別：
優(yōu)雅的字體
現代字體
正文的字體
通常，前兩個(gè)也是顯示字體 ：其創(chuàng )建者希望你將它們用作標題。
你可以尋找優(yōu)雅的字體，例如，Abril Fatface，Playfair Display，Volux，Chalga等。
現代字體包括，Metropolis，ITC Avant Garde，Redwing，Takota，Gotham…。
10、使用幾何體
這可能是最難使用的技巧，但如果正確應用，它會(huì )幫助你提升設計效果。
使用幾何圖形有助于增強布局中的概念和順序，甚至不需要圖像。找到正確的幾何形狀很困難，但我仍然無(wú)法很好地掌握它。
一個(gè)非常實(shí)用的技巧是，將文案中的字母，數字和標題變換成作幾何體圖形，使其巨大而微妙，或者將某些特定的字母用直接當作形狀使用，像下面示例中的A字母，就應用的很好。
11、單色圖像背景
一種極其簡(jiǎn)單但有效的技巧是使用單色圖像作為背景，而不是使用純色。
這個(gè)技巧可以幫助你將設計圖的紋理增強，同時(shí)還留出一些空間。
具體怎么做？
這個(gè)過(guò)程也非常簡(jiǎn)單：你可以在圖像上方放置一個(gè)簡(jiǎn)單的填充層，然后將其混合模式更改為“顏色”。
在Figma，Photoshop和所有其他不錯的圖形軟件中都可以得到相同的效果。
找到正確的色調后，請記住嘗試圖像不透明度！
在此示例中，我可以同時(shí)增強“空間”和“技術(shù)”的概念，同時(shí)，使讀者有品嘗美味的漢堡的感覺(jué)。
12、利用圖像中的顏色進(jìn)行設計
我見(jiàn)過(guò)很多不知道如何使用圖像本身調色板的初學(xué)者設計師。
從你正在處理的圖像中找到所需的每種顏色。
有時(shí)，立即找到顏色可以幫助你提出新的想法。讓我們以圖像色調決定樣式的示例為例。
使用常見(jiàn)的顏色有助于減輕對比度，并保持設計流程的順暢。
13、三種顏色合理分配
在前面，我談到了黑白設計，但從長(cháng)遠來(lái)看，這是極其有限的。
基本上，每個(gè)設計師也都知道這一點(diǎn)，但是，下一步就是利用一種最常見(jiàn)的設計策略：僅使用三種顏色。
顯然，這三種顏色不是隨機使用的。他們每個(gè)人都有特定的角色，你必須知道：
主要背景。占填充圖像的60％。
主體顏色。占填充圖像的30％。
強調色。占填充圖像的10％。
讓我們來(lái)看看這種技巧的具體示例，即使是室內設計師，這個(gè)也是一條通用規則！并且還需要知道加以利用。
你可以清楚地看到三色組合的方式和顏色。
藏青色適合作為背景。
白色與背景形成鮮明對比，并發(fā)揮了車(chē)身顏色的作用。
在紅色色調口音引人關(guān)注設計的重要部分，如商品交易顧問(wèn)，大字體文本等。
14、對數字和文本使用不同的字體
一個(gè)常見(jiàn)的錯誤就是強迫自己把數字和文本使用相同的字體。盡管這通常可以工作，但某些字體不是為數字設計的。
如果要在數字中使用它，請不要害怕在設計中使用第三個(gè)字體。當你正在使用的兩種字體應用于你正在設計的具有百年歷史的公司網(wǎng)站的漂亮日期覆蓋物中時(shí)，可能會(huì )很爛。
讓我們看一個(gè)示例，其中，我使用了3種不同的字體。
15、注意黃色或避免黃色
黃色，是一種漂亮的顏色，但是，它帶有一系列你可能不想面對的問(wèn)題。
簡(jiǎn)而言之，黃色是我們眼睛最敏感的顏色，這使它非常明亮：由于你不想使客戶(hù)蒙蔽，因此，你可能會(huì )使用黃色作為強調色。
在現代網(wǎng)頁(yè)設計中，強調色通常必須與白色配合使用，就像下面示例中的按鈕一樣，由于其亮度，它的對比度過(guò)低，而造成文本可讀性偏低。
為避免對比度問(wèn)題，當使用較大的文本時(shí)（如我在模型中所做的那樣），黃色的常見(jiàn)用法是黑色和白色。
黃色的另一個(gè)問(wèn)題是，在他的柔和色版本中效果不佳：柔和的黃色變成棕色或金色，示例如下：
16、使用網(wǎng)格參考線(xiàn)
你可能知道960網(wǎng)格系統或Twitter的Bootstrap，并且已經(jīng)多次使用12列網(wǎng)格布局進(jìn)行設計。
但是，你是否曾經(jīng)嘗試過(guò)讓這些網(wǎng)格可見(jiàn)？使用網(wǎng)格通常會(huì )增強精確度和專(zhuān)業(yè)精神。
這是偉大的網(wǎng)頁(yè)設計師Shashank ，直接將其用于構圖的一個(gè)很好的例子。@holy_architect。
你唯一要注意的是對比度：對比度太高的線(xiàn)條會(huì )分散注意力，會(huì )讓用戶(hù)從版面中更有意義的部分中將注意力分散開(kāi)來(lái)。
17、不對稱(chēng)性
一旦知道了規則，我們有時(shí)候也需要打破它們。現代藝術(shù)設計包含很多不對稱(chēng)性。嘗試四處移動(dòng)并破壞標準的網(wǎng)格布局。 但是，這是最難把握的技巧之一，而創(chuàng )建不平衡的合成非常容易。
這是幾分鐘內進(jìn)行的兩次設計的嘗試。
對齊仍然是基本的，但是，你可以看到還有更多的事情要做。嘗試通過(guò)添加相反的內容來(lái)保持不對稱(chēng)的平衡，并引起注意。
讓我們看一下第一個(gè)設計的“平衡方案”。
我想讓用戶(hù)的眼睛直接進(jìn)入菜單，為此，我做了兩件事：
有一個(gè)從左到右的假想箭頭，箭頭的形狀和角度與圖片和文字的角度相似。
突出菜單上的主要選項。
我可以假設用戶(hù)的眼光是這樣的：
這僅僅是一個(gè)理論，我的設計可能會(huì )有缺陷。
18、設計有用的組件
人們認為可用的網(wǎng)站更令人愉悅。設計用戶(hù)所需的一切，并快速完成每項任務(wù)。
如果你要設計一個(gè)網(wǎng)站，人們會(huì )經(jīng)常使用它，那么，請不要看上那些花哨的美感，而要嘗試引入一些有用的組件。讓我們看看，我為網(wǎng)站設計和開(kāi)發(fā)的兩個(gè)示例。
這個(gè)網(wǎng)站不漂亮，但是非常有用。
在此屏幕快照中，你可以在右側看到我如何實(shí)現一個(gè)舒適的按字母搜索小部件，因為該頁(yè)面非常長(cháng)，包含300多種不同的蝴蝶種類(lèi)。
如果沒(méi)有此功能，滾動(dòng)將非常繁瑣，人們會(huì )討厭它。
讓我們看看另一個(gè)屏幕截圖。
此功能也得到了極大的贊賞：用戶(hù)發(fā)現能夠同時(shí)查看蝴蝶的圖像和文本非常實(shí)用。
19、同時(shí)考慮設計PC端和移動(dòng)端
設計移動(dòng)版和臺式機版對于每種設計都是必須的，但經(jīng)常在培訓時(shí)，我們只專(zhuān)注于一個(gè)框架，而全神貫注于此。
通過(guò)將兩個(gè)版本添加到相同的組成中，你將至少獲得三個(gè)有益的效果：
在設計時(shí)，考慮網(wǎng)頁(yè)的響應式設計。
設計時(shí)，看看這樣設計是否更明智，更專(zhuān)業(yè)
你也可以玩分層設計
舉個(gè)例子：我做過(guò)的這種速度設計，有一個(gè)非常糟糕且不完整的移動(dòng)應用程序版本，但是，即使很糟糕，它也使完整的設計更加完整和專(zhuān)業(yè)。
20、將其設為3D
自從我與Blender和Maya一起玩了兩年以來(lái)，這是我最喜歡的藝術(shù)技巧之一。
通過(guò)使用Blender，可以將有效的SVG導入，你可以通過(guò)幾個(gè)步驟將2D設計轉換為3D模型。
盡管它不是“純”設計，但你可以將其發(fā)送給開(kāi)發(fā)人員，將其轉換為3D，可能會(huì )在演示和營(yíng)銷(xiāo)階段非常有用。
我目前正在設計和開(kāi)發(fā)健身應用程序，在業(yè)余時(shí)間，我將其轉變?yōu)閳怨痰氖謾C！
如果你不想學(xué)習Blender，但你又想將你的設計帶入3D中，則可以使用Vectary或Threed.io！
如果你對此有興趣的話(huà)，我后面可以寫(xiě)一篇文章，介紹如何使用Blender在2D模式下轉換3D設計。
結論
這個(gè)些設計技巧已經(jīng)分享完畢，除了這些技巧外，你還可以從美學(xué)的角度嘗試并改進(jìn)網(wǎng)站設計。
一旦掌握了這些知識，接下來(lái)的步驟，就是網(wǎng)站的動(dòng)畫(huà)，信息架構和用戶(hù)行為心理學(xué)方面的知識，你也可以嘗試著(zhù)學(xué)習了解一下。
最后，感謝你的閱讀！
遼寧華睿科技有限公司是專(zhuān)業(yè)軟件開(kāi)發(fā)、高端錦州網(wǎng)站建設、云店商城開(kāi)發(fā)公司，歡迎建站咨詢(xún)。
（一）、全網(wǎng)推廣——錦州網(wǎng)站建設-華睿科技，整合公眾號、朋友圈，全面推廣、宣傳。
（二）、專(zhuān)業(yè)網(wǎng)站建設、淘寶、京東開(kāi)店傳圖運營(yíng)指導。
（三）、公眾號、小程序開(kāi)發(fā)運營(yíng)。
（四）、財務(wù)、進(jìn)銷(xiāo)存、生產(chǎn)管理軟件銷(xiāo)售、服務(wù)。
華睿科技咨詢(xún)電話(huà)：13394162255 、13941609031。微信號同。公司地址:錦州市經(jīng)濟技術(shù)開(kāi)發(fā)區金山大街51號、遼寧省錦州市中央大街二段52號
本文內容來(lái)源于網(wǎng)絡(luò )，如有侵權請立即聯(lián)系刪除
