圖標設計五部曲

圖標在一個App中有著舉足輕重的地位,圖標直接決定了這款App的精緻程度。經本文作者研究發現，一個精緻的圖標和一個不夠好的圖標區別其實非常的小，但這些細微的區別對設計質量的影響卻特別大。這篇文章我會從三個屬性和五個步驟來給大家分析如何設計一個看上去還不錯的優質圖標。

三個屬性

1.形狀

忽略一個圖標的細節，它的組成是不是變成了最基礎的幾何形狀。就像我們最開始學素描頭像一樣，把頭想像成一個長方體、眼睛想像成一個球體、鼻子想像成一個圓柱體等。從簡至繁會比較容易，先確定大體形狀，再添加更多的細節。

這個糖果圖標由5個大小不同的圓形組成，清楚它的構造後再添加細節會容易很多。

2.統一

一款App多達幾十個圖標，讓他們細節保持統一非常重要。比如都是方角或者圓角（2px、4px等)、使用線的粗細一致（2px、4px等)、風格（面、線、線面結合等）。

這一組圖標使用了統一的顏色、圓角、一樣粗細的線以及線性風格。所以我們認為它們是統一的。

3.可識別

可識別可以理解為兩層意思：

一是大家對事物的普遍看法。比如首頁用一所房子表示、個人中心用一個人表示。

二是這個圖標的元素是獨特的，大家看到這個圖標就知道所處這個App。比如閑魚的個人中心是用一個笑臉表示的，黑線和黃色的塊面大家一看就知道是閑魚風。

京東的導航欄是很常規的圖標，可識別性很高。閑魚則更多的強調了自己的風格。

分析了優質圖標的三個屬性。下面分五個步驟讓大家快速設計出一個看上去還不錯的優質圖標。

五個步驟

這裡借用了Iconfinder的設計師Scott Lewis設計出來的表格和大家簡單說明一下。

1.建立一個網格

我們使用一個32x32px的網格。

這個網格分為28x28px的內容區，用2px的邊界留出喘息的空間，繪製圖標時盡量避免圖標出現在這個區域。圓形的圖標會接觸到內容區域的邊緣。因為方形的視覺重量比圓形大，如果方形需要和圓形以及三角形圖標視覺保持一致時，需要向內容區再縮小2px左右，如圖中的橙色區域。

如果是比較長或者是比較寬的圖標，如圖所示，調整為28x20px的的大小。

網格的作用只是為了保持圖標的大小統一，不用嚴格遵循。練習多了自然會有自己的設計直覺。

2.從簡單的形狀著手

用簡單的幾何形狀開始圖標的設計，比如圓形、方形、三角形。這樣圖標的邊緣更加清晰，而且可以方便快速的對圖標進行調整。確保設計的圖標遵循了網格和形式的設計。

3.邊, 線, 角保持統一

使用嚴格的數字來設計圖標。

（1）用45°的角或者它的倍數，會有清晰的邊緣線，抗鋸齒性很好。看上去比較舒服。

（2）使用精確的圓角。無論你規定的圓角2px或者4px，或者是方角。都一定要貫徹整個設計。

（3）線的粗細保持統一。最好保持在3種以下，超過三種會讓圖標失去統一性。

4.使用一致的設計風格

在很多時候，即使一個圖標集的風格發生了改變，他們之間統一的元素仍然能夠使它們看起來是一個整體。

比如這一組圖標，風格是圓潤的，顏色是統一的黑色和黃色。即使圖標之間的細節差別很大，但他們看上去仍然是統一的。

5.讓它有個性

雖然現在很多App風格千篇一律，圖標也越來越像。畢竟我們是創意行業的工作者，獨特的設計一定會讓我們的作品大放異彩。

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