圖標(biāo)（icon）在APP的界面UI中是經(jīng)常會(huì)用到的元素，圖標(biāo)也可以傳遞信息，在一定程度上可以取代文字，圖標(biāo)設(shè)計(jì)的好壞可以直接影響整個(gè)APP的調(diào)性和用戶體驗(yàn)。那么，UI設(shè)計(jì)師要如何才能做好圖標(biāo)的設(shè)計(jì)呢？

 

設(shè)計(jì)師在日常工作中經(jīng)常會(huì)設(shè)計(jì)或收集很多圖標(biāo)，可見設(shè)計(jì)師對(duì)于圖標(biāo)的運(yùn)用很頻繁也非常重視，圖標(biāo)的風(fēng)格也很多，隨著收集的圖標(biāo)越來(lái)越多，會(huì)發(fā)現(xiàn)對(duì)圖標(biāo)的分類會(huì)變得越來(lái)越混，做設(shè)計(jì)時(shí)也不清楚到底該參考或運(yùn)用哪種風(fēng)格最合適。

 

首先將圖標(biāo)按尺寸大小分為兩類；細(xì)分對(duì)應(yīng)的面性、線性、線面結(jié)合、扁平、擬物化等類型；最后選擇標(biāo)準(zhǔn)、容器、漸變、3D、手繪、陰影等風(fēng)格。利用這樣的結(jié)構(gòu)層級(jí)，可以明確定義圖標(biāo)的類別。

 

圖標(biāo)的大小取決于具體功能。例如帶有漸變和陰影的圖標(biāo)看起來(lái)很酷，但把它縮小到16px，這些酷炫的效果都無(wú)法呈現(xiàn)出來(lái)。在對(duì)圖標(biāo)歸類時(shí)，首先要考慮圖標(biāo)用在什么位置需要多大尺寸。大尺寸圖標(biāo)通常指標(biāo)志性圖標(biāo)，例如App啟動(dòng)圖標(biāo)或代表品牌形象；小尺寸圖標(biāo)用作UI控件，起到引導(dǎo)功能或裝飾目的。

 

圖標(biāo)尺寸越小，展示的細(xì)節(jié)越有限；相比于大圖標(biāo)，小圖標(biāo)的尺寸有一定局限性，圖標(biāo)組成包括標(biāo)準(zhǔn)和容器兩種。大圖標(biāo)利用尺寸上的優(yōu)勢(shì)能展示更多內(nèi)容，分為多種組成形式。簡(jiǎn)單的圖像可以更具包容性，圖標(biāo)的尺寸越小，越考驗(yàn)設(shè)計(jì)師傳達(dá)信息的能力。

 

面性圖標(biāo)易于識(shí)別，適合應(yīng)用在小尺寸圖標(biāo)中。注意要確保圖標(biāo)有清晰的邊緣，避免羽化；圖標(biāo)復(fù)雜程度隨著尺寸變小而靈活調(diào)整。

 

帶有背景色的面性圖標(biāo)為簡(jiǎn)約設(shè)計(jì)帶來(lái)了更多可能。通過(guò)這個(gè)技巧使面性圖標(biāo)更友好，更具吸引力。為背景選擇4-12種顏色?？紤]圖標(biāo)是淺色還是深色，是否適用于所有背景色。在彩色背景上使用白色圖標(biāo)比黑色效果更好。

 

線性圖標(biāo)因?yàn)楹?jiǎn)潔性和現(xiàn)代性而受到用戶的歡迎；隨著屏顯越來(lái)越清晰，我們可以更加大膽地使用線性圖標(biāo)。線性圖標(biāo)要確保輪廓像素清晰。越簡(jiǎn)單越好。追求更簡(jiǎn)單的細(xì)節(jié)。

 

通過(guò)以上對(duì)各種圖標(biāo)的分析，希望大家能對(duì)圖標(biāo)的分類及設(shè)計(jì)有更全面深入的認(rèn)識(shí)，從而構(gòu)建一套完整的圖標(biāo)思維體系。