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

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

1. 在不同的場景選擇不同的風(fēng)格

目前在主流App內(nèi)，icon大多使用較為簡潔的扁平化設(shè)計風(fēng)格，這些icon有的由線構(gòu)成，有的由面構(gòu)成，還有的是線面結(jié)合而成的。下文里我將主要以融360App中的一些圖標(biāo)來舉例。

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

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

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

雖然在不同的頁面和場景中，icon可以用不同的風(fēng)格來表現(xiàn)，但當(dāng)他們表示相同功能的時候，記得使用同樣的視覺元素，再套上當(dāng)前頁面的風(fēng)格。這樣可以保持同App內(nèi)圖標(biāo)元素的統(tǒng)一性，降低用戶的學(xué)習(xí)成本。例如在不同頁面出現(xiàn)的公積金相關(guān)圖標(biāo)，用的都是同樣形狀的小樓。

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

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

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

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

很多時候我們要表達(dá)的內(nèi)容并不具象，在這個時候就可以進(jìn)行適當(dāng)?shù)穆?lián)想，去畫一個相關(guān)的物體。比如「公積金」就很抽象，但是它與房子有關(guān)；「記賬」是個動作，但是「賬本」是個東西，這樣表達(dá)起來就簡單多了，也更親切。

5. 附上文案：表達(dá)足夠準(zhǔn)確，消除理解上的差異

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

6. 進(jìn)行可用性測試

用戶是否能準(zhǔn)確的理解所用的圖標(biāo)？用戶是否需要進(jìn)行猜測和嘗試？用戶能否記住這些圖標(biāo)？必要的時候還是應(yīng)該把用戶關(guān)小屋里看看他們的反應(yīng)。

二. 如何符合標(biāo)準(zhǔn)：怎么畫？

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

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

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

2. 像素要對齊

3. 合適的大?。罕ＷC一組圖標(biāo)視覺上大小一致

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

4. 抓住有特點的小細(xì)節(jié)

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

編者注：那么，怎樣做出一套風(fēng)格統(tǒng)一的icon呢？方法在這 ↓↓↓

1. 《用品牌基因法做圖標(biāo)設(shè)計，這是高級UI設(shè)計師才會的手法》
2. 《用品牌基因法做圖標(biāo)設(shè)計，高級UI設(shè)計師才會的手法?。ㄉ壠?/a>
3. 《從零基礎(chǔ)到合格，我總結(jié)了這5個圖標(biāo)設(shè)計實戰(zhàn)方法》

三. 小結(jié)

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

歡迎關(guān)注微信公眾號：「 融360RUX」

「還有哪些可以遵循的圖標(biāo)設(shè)計規(guī)范」

• 《傳承設(shè)計經(jīng)驗！圖標(biāo)設(shè)計初階的3大關(guān)鍵入門知識點！》
• 《小身材，大影響！設(shè)計師應(yīng)該知道的圖標(biāo)基礎(chǔ)知識》
• 《沒掌握圖標(biāo)的繪制規(guī)范之前，別說自己會畫圖標(biāo)了》

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

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

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com