如何畫出一個100分的圖標

畫圖標的功力對於視覺設計師來講，相當於50%的功力。原因有如下2點：

1. 工作中，50%的設計內容都涉及到圖標。

2.設計一個界面，花費時間最多的，也是圖標。

所以，把繪製圖標的功力提升起來，對於一個設計師而言十分關鍵。

既然我們要在圖標上花費這麼多時間和精力，就要搞清楚，圖標為什麼重要。

人類識別各類元素的速度

可以看出，人類對於形狀的識別速度快於文字，ICON能夠加快用戶獲取信息的速度。

UI（User Interface），直譯過來是用戶介面，用戶與機器的介面，人機交互的信息傳輸通道。那麼，能夠提高用戶獲取信息的圖標，權重自然十分重大。

畫好一個圖標，有三點需要做好：

1. 大小。

2. 造型。

3. 氛圍。

一、大小

為什麼我們需要關注大小？因為我們不確定用戶需要什麼，假如我們知道用戶要什麼，有優先順序大小之分，放大優先順序高的縮小優先順序低的便可。但很多時候，我們需要一整套平級的圖標，如何去把控一整套圖標的大小，使得平級的圖標等大，不讓某個圖標過大或過小而影響界面元素優先順序的原意，十分關鍵。

大小對齊

但，人類卻並不具備如此精細的圖像分析能力，人類視覺對事物的感知是綜合的。如果不加輔助線，我們對於三個等高等寬的圖形感知是這樣的： 正方形 > 圓形 > 三角形。

數學上的統一併不能帶來視覺上的統一，為了視覺上的統一，需要增加圓形和三角形的大小。

我們如何在畫圖標的過程中，解決這個問題？

畫限定框。

通過限定框，畫圖表前先規定好不同圖形的視覺等大框。

限定框可參考 Iconfont-阿里巴巴矢量圖標庫 下的矢量圖形設計模板。

位置對齊

如下圖所示，相機位置的數學對齊並不能帶來視覺上的對齊。人類的視覺會感知重心，機體承載了相機90%的重心，故要想做到視覺對齊，需要將機體放置在中心上。

顏色大小

畫圖表需要考慮顏色上的平衡。顏色具備重量，也會影響圖標的大小。不同色值，相同大小的圖標給予人類的重量感是不同的，左邊的相機相對右邊會顯得更輕更小些。

位置大小

看下圖的一排人，你最先關注到哪個人，其次呢？

圖標的排列位置也會影響最後的視覺大小。人類的視覺習慣，凡在觀察事物時，第一眼都會聚焦在重心上，所以第一眼會看到的是中間的那個。之後，會受到人類從小到大的閱讀習慣，看到最左端的人，然後會看到最右端的人。再才是看到介於重心和兩端中間的人。而先後順序影響著人類的視覺在不同人上的停留時間，我們以為理論上視覺在並排著的每個元素上的停留時間都是1，其實並不是如此。

而停留時間也會影響大小，視覺在元素上停留的時間越久，該元素的視覺重量便會越大。所以，為了視覺上的等重，我們可以用【顏色大小】來平衡【位置大小】。

回顧圖標的大小問題上，我們需要注意4個方面：

1. 大小對齊
2. 位置對齊
3. 顏色大小
4. 位置大小

能在大小問題上做好，你畫的圖標已經達到60分了，及格。

二、造型

通常，在畫圖標時最簡單的做法就是找參考，比如畫一個相機，可以去找一張相機的照片來參考，抽象出相機的造型和特點。再不濟，可以去 iconfinder 或 iconfont 上面參考別人的圖標。人類有個特點，我們很難想像出不曾見過的事物。

但隨著移動互聯網和O2O的發展，線下的場景越來越多地出現在移動端上，圖標也越來越抽象。比如，「分期理財」，「小額儲蓄」，「積分」。

我們可以怎麼做？有一套方法流程可以考慮：

1. 解釋文字所要表達的意思，或用該文字描繪某個場景。
2. 提取元素。
3. 組合。

這樣講比較抽象，舉幾個例子：

這樣，我們便能有思路有方法去畫一個圖標了，那一系列的圖標呢？在動手開始畫一系列圖標前，我們需要先定義兩個問題。

1. 定義共性。都有什麼共同的視覺元素，如圓角度數、線條粗細等。
2. 定義規則。規定什麼情況下用什麼元素，如所有圖標一筆勾勒，娛樂類的圖標用紅色，或按照圖標的點擊頻率定義顏色。

例如，去年我繪製的一套圖標，按照圖標的性質定義了紅綠藍三種顏色，右下角放置較重的視覺元素。

例如，我們公司APP標籤欄所有的圖標normal狀態均為一筆勾勒，selected狀態均帶有細節。

一套優秀的圖標，不僅是統一系列圖標的風格，還要創造出屬於這套圖標的特性，要有與整個APP統一的視覺語言，更優秀地，能從品牌調性上考慮，強調品牌特性，在小小的圖標中做品牌宣傳。

這方面，國內這方面做得不錯的，有騰訊，蘑菇街等公司。

Mogu_Design的個人主頁 - 站酷 (ZCOOL)

將造型做好，你的圖標已經達到80分。那如何達到100分？

三、氣氛

一套圖標最後的點睛之筆——氣氛，可以將你的圖標升華到100分。

如何營造氣氛？

1. 思考具體的氣氛。
2. 該氣氛下特有的事物。
3. 思考點擊圖標的心情是如何的。

比如，在一個女性時尚穿搭的APP中，一個 「贊」 的圖標，跟微信一樣的大拇指。一個 「喜歡」 的圖標，是否是愛心？

我們可以將喜歡做成磚石，磚石在女性心中都有時尚高雅的意思；而贊，可以做成一個吻。同時思考點贊的心情，生動活潑的？心情愉悅的？故可以在贊的selected狀態上加了一個美人痣，營造出相應的氛圍。

營造氛圍有個小訣竅：把用戶在點擊這個圖標時心裡會說的話視覺化出來。

總結起來，只要做到這三點，就算是幾近100分的圖標了。而最後對氣氛的要求，對於設計師而言可遇不可求，看靈感，不必強求。只要做到前2點，便算是不錯的圖標了。

以上內容大部分源自JimSoup的live，版權歸屬JimSoup，所有內容供學慣用途，均不得商用。

推薦閱讀：