揭秘，你作的圖為什麼顯得很亂？

兄弟們！ 姐妹們！！

干淘寶 干天貓 干京東

干唯品會 干著干那的所有電商美工兄弟們！！

618會戰已經結束！ 你們店賣的好嗎！！

舵主來也！！

GIF/1926K

曾經有一個粉絲問我，你的夢想是什麼？

我說：我想成為美工王。

GIF/6K

不閑扯了… 下面說正經的。

很多朋友在入門的時候做頁面毫無秩序，對設計的一些原理也一知半解，導致做出來的頁面，看起來非常凌亂，也無法形成頁面統一風格。今天要說的內容就是設計中的規範問題。

啥叫規範？ 百度百科的解釋就是明文規定或約定俗成的標準。

關於網格輔助

常見的設計規範有哪些？

一、色彩規範

有句話說頁面中的顏色不超過三種。當然並不是絕對的，其實主要說是非促銷頁色系最好不超三種，黑和白不算，黑白屬於無色相。算色系的時候還應把產品的顏色也歸於在內，色彩越多越不好控制，同時色彩比例也要分主色和輔色，如同主角和配角。除此之外，顏色的明度和純度值也要保持統一，之前也說過，不多贅述…

下面大家可以看看京東無線的色彩規範，主要是根據內容的重要層級劃分不同的色彩，從標題到按鈕，對我們做電商頁面也有一定的參考意義。（單擊圖片可以放大看）

二、字體規範

字體的選擇與頁面的風格保持一致，主要是選擇標題字體。正文部分還是建議用便於閱讀的非襯線體比如思源或者微軟雅黑字體。字體選擇上建議不超三種，可以標題選擇一個字體，正文一個字體，價格一個字體。

三、字型大小規範

字型大小建議也控制3-5種左右，大家想想你開頭標題用100號，中間用10號，最下面用50號，整個頁面大大小小字都有，頁面肯定很混亂。所以字型大小控制非常關鍵。

字型大小大小主要是根據內容層級的重要程度，比如說主標題統一一個大小，二級標題統一大小等等。

下面這個是京東無線的文字規範包含字型大小，行距，和使用場景，邏輯結構很清晰。

下面這個是知乎web的文字規範， 可以參考借鑒一下。當然文字的字型大小都要根據自家的情況來定，並沒有一個固定標準，但是確立了一個正文的字型大小後，各級標題都要與之有比例倍數關係，從而整個頁面形成統一標準。（單擊圖片可以放大看）

四、間距/行距規範

字體與字體之間的距離，以及行與行之間的距離都要做出規範，包括一級標題與二級標題之間的間距整個頁面都要統一。默認字元間距100太鬆散，一般來說字體間距最好是負值，不要用默認的。PS里的行距自動默認是1.75倍，就是字型大小×1.75倍=行距。一般電商頁面文字比較少，我建議可以採用1.2、1.5或者1.618倍，不要用自動默認的。

基本就是這四條，只要你的頁面確立清楚這些規範，我們的作品就會風格上達成一致，內容和形式也會統一。看起來就是一個完整的設計作品，而不再是亂糟糟的，無規矩無標準。

下期再見！Good，bye ~

GIF/966K

—————end—————

超100000+電商美工已經關注！

沒靈感沒創意就關注超級美工！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！