在尺寸有限的移動端界面上，小小的icon可以更加簡單高效的表達含義，并且給用戶正確和友好的指引。所以對于UI設計師來說，與icon們相愛相殺無疑是每天日常。下面就來總結一下，如何使我們設計的icon表意清晰、符合標準。

一. 如何表意清晰：畫什么？

1. 在不同的場景選擇不同的風格

目前在主流App內，icon大多使用較為簡潔的扁平化設計風格，這些icon有的由線構成，有的由面構成，還有的是線面結合而成的。下文里我將主要以融360App中的一些圖標來舉例。

首頁上的第一部分是主要業務的一級入口，第二部分是二級入口也就是各種小工具。在一級入口上我們選擇了彩色的面性icon，并且在反白的圖形上加了一些質感，為的是讓這組icon更突出。下面的二級入口的icon，在層級上要弱于主入口，所以我們選擇使用純色的不同透明度的面來組成這些icon。

圖左中list里的icon是作為展示功能，而非入口，因此我們都采用了線圈+彩色面狀的小圖標；圖右為賬戶頁，在這個場景中我們更希望用戶注意訂單的狀態，也就是寫了數字的角標，所以把圖標做成了線型的，整個頁面也會更加清爽。

2. 相同的功能要選擇相同的元素

雖然在不同的頁面和場景中，icon可以用不同的風格來表現，但當他們表示相同功能的時候，記得使用同樣的視覺元素，再套上當前頁面的風格。這樣可以保持同App內圖標元素的統一性，降低用戶的學習成本。例如在不同頁面出現的公積金相關圖標，用的都是同樣形狀的小樓。

3. 對于功能型icon來說，最好選擇用戶熟悉的icon元素

對于App中的操作功能，以上都是被無數產品反復利用的，已經約定俗成的icon，除此之外還有「放大鏡=搜索」「小房子=首頁」等等，用戶已經潛移默化的接受這些icon的意思，并沒有學習成本，所以使用這些熟悉的元素是十分必要的。

4. 對于入口或展示型icon來說，我們要選擇主要的元素，表意要簡潔，可以適當聯想

在這些例子中，「信用卡分期」一定要畫卡片嗎？「附近銀行」一定要畫銀行嗎？「網貸評級」一定要畫網貸嗎？我們還是會具體情況具體分析，對關鍵詞做一些取舍。在這里作為一個工具的「附近銀行」的功能點在于定位，而非強調銀行本身，所以最后還是選擇了定位符號來表達了這項功能。假設要設計的入口換成「附近銀行」+「附近商場」+「附近加油站」等等，那么主要功能就變成了搜索附近不同的場所，這種情況下我們就會選擇畫銀行、商場和加油站了。再比如「公積金查詢」「社保查詢」都是查詢，「征信報告」「收支水平報告」都是報告，同理我們不可能給滿屏的查詢功能入口都畫一個放大鏡，也不能給所有的報告入口都畫一份報告，為了表意簡潔、突出重點，在這里我們選擇合并同類項，著重表達每個功能不同于其他的點。

很多時候我們要表達的內容并不具象，在這個時候就可以進行適當的聯想，去畫一個相關的物體。比如「公積金」就很抽象，但是它與房子有關；「記賬」是個動作，但是「賬本」是個東西，這樣表達起來就簡單多了，也更親切。

5. 附上文案：表達足夠準確，消除理解上的差異

我們以Airbnb的App底部icon來舉個例子，他們選用了一個很有意思的小樹葉icon，當沒有文案說明的時候，想必一千個用戶心里有一千個哈姆雷特，大家都會有自己的理解。所以說icon是輔助的表達，文字才是標準答案，除了前面所說的大眾完全熟知的icon，其他的最好附上相應文案，以免用戶理解誤差。

6. 進行可用性測試

用戶是否能準確的理解所用的圖標？用戶是否需要進行猜測和嘗試？用戶能否記住這些圖標？必要的時候還是應該把用戶關小屋里看看他們的反應。

二. 如何符合標準：怎么畫？

1. 單色icon多用布爾運算：只有一個圖層方便后期調整，方便交接使用。

舉個例子，左邊的黑色icon的外圈是用了描邊描出3px的寬度，這樣導致圖層變多，修改起來很麻煩，而且描邊的圓角很難控制，如果想把外圈切一個斷口將會更麻煩。右邊都用布爾運算的icon相對整潔得多。

編者注：讓你快速掌握布爾運算的小教程→《PS熱門教程！教你5分鐘快速繪制超火的MBE風格圖標》

2. 像素要對齊

3. 合適的大小：保證一組圖標視覺上大小一致

畫icon之前，我們可以把表示最大尺寸的框畫出來，在這個框框內，icon不要畫得太滿，要有適當留白。同時，為了視覺上的統一，圓要略大于方形。遇到傾斜的圖標，可以先正著畫好了再旋轉角度。

4. 抓住有特點的小細節

簡單來說就是，保證線的粗細、圓角的大小一致，圖形是否分割、線是否有斷點等細節也要大體上保持一致。這樣的一套icon是有整體性的，風格才算統一。

編者注：那么，怎樣做出一套風格統一的icon呢？方法在這 ↓↓↓

1. 《用品牌基因法做圖標設計，這是高級UI設計師才會的手法》
2. 《用品牌基因法做圖標設計，高級UI設計師才會的手法！（升級篇）》
3. 《從零基礎到合格，我總結了這5個圖標設計實戰方法》

三. 小結

沿著UI的發展趨勢，icon的風格經過了各種各樣的變遷，從擬物到扁平、從靜到動，有的化繁為簡，有的更加多變有個性，不過道理仍舊是萬變不離其宗的。icon設計看似簡單但是講究一點不少，既要表達準確，還要設計精確，相信一波一波的設計師都是在實戰中摸爬滾打過來的。

歡迎關注微信公眾號：「 融360RUX」

「還有哪些可以遵循的圖標設計規范」

• 《傳承設計經驗！圖標設計初階的3大關鍵入門知識點！》
• 《小身材，大影響！設計師應該知道的圖標基礎知識》
• 《沒掌握圖標的繪制規范之前，別說自己會畫圖標了》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com