圖標(biāo)是UI頁(yè)面中最關(guān)鍵的部分之一。它是一種視覺(jué)語(yǔ)言，代表信息、內(nèi)容并揭示功能背后的含義。
圖標(biāo)應(yīng)該使用簡(jiǎn)單的視覺(jué)隱喻，讓用戶快速理解和識(shí)別。
好的圖標(biāo)也會(huì)賦予產(chǎn)品獨(dú)特的個(gè)性，這里提供8條簡(jiǎn)單實(shí)用的設(shè)計(jì)建議，大伙可以直接運(yùn)用到日常設(shè)計(jì)中去～
1.設(shè)置網(wǎng)格
通常我們會(huì)設(shè)計(jì)一組icon而不是單獨(dú)一個(gè)。為了使整組圖標(biāo)更統(tǒng)一，我們首先需要設(shè)置一個(gè)網(wǎng)格。
定義安全區(qū)域并設(shè)置關(guān)鍵線，使用相同的邊框作為模板來(lái)保持所有圖標(biāo)的比例和大小。
2.保持一致?
設(shè)計(jì)圖標(biāo)時(shí)要使用相同的描邊、圓角和填充樣式，確保圖標(biāo)看起來(lái)更統(tǒng)一且易于識(shí)別。
▲?描邊2px、圓角3px的一組圖標(biāo)設(shè)計(jì)。
3.明確說(shuō)明?
圖標(biāo)設(shè)計(jì)中少即是多。使用清晰的隱喻和有限的細(xì)節(jié)，使每個(gè)圖標(biāo)易于識(shí)別和理解。
▲?icon設(shè)計(jì)并不是細(xì)節(jié)越多越好，相反更應(yīng)該在表意清晰的基礎(chǔ)上保持最簡(jiǎn)潔。
4.使用相同間距
在圖標(biāo)元素之間使用相同的間距，可以讓圖標(biāo)看起來(lái)和諧。
Tips：在Figma、Sketch、XD中按住ALT鍵可以顯示元素之間的距離。
5.視覺(jué)對(duì)齊
不能只依靠軟件來(lái)對(duì)齊圖標(biāo)，更多時(shí)候需要平衡圖標(biāo)重量保持視覺(jué)上的對(duì)齊。
▲最常見(jiàn)的例子就是播放icon，居中對(duì)齊的視覺(jué)效果并不好，需要將播放圖標(biāo)向右移動(dòng)才能保持平衡。
6.填補(bǔ)空白
通過(guò)旋轉(zhuǎn)窄樣式的圖標(biāo)使圖標(biāo)充滿整個(gè)容器，可以提高圖標(biāo)的可讀性。
7.組合樣式?
組合使用面性和線性兩種樣式的圖標(biāo)來(lái)描述頁(yè)面狀態(tài)，幫助用戶找到正確的圖標(biāo)或按鈕。
▲?在App底部導(dǎo)航欄中通常使用面性圖標(biāo)代表選中狀態(tài)，使用線性圖標(biāo)代表未選中狀態(tài)。
8.圖標(biāo)資源
Icons8.com—擁有海量的圖標(biāo)、插畫(huà)、照片，使用方便
iconfinder.com——好看好用的圖標(biāo)設(shè)計(jì)庫(kù)
flaticon.com——提供三百多萬(wàn)海量免費(fèi)圖標(biāo)的素材庫(kù)
iconfont.cn——阿里巴巴體驗(yàn)團(tuán)隊(duì)打造的矢量圖標(biāo)庫(kù)
精彩推薦：
2、案例分析：柵格系統(tǒng)的布局設(shè)計(jì)
