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

 

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

 

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

 

圖標(biāo)的大小取決于具體功能。例如帶有漸變和陰影的圖標(biāo)看起來很酷，但把它縮小到16px，這些酷炫的效果都無法呈現(xiàn)出來。在對圖標(biāo)歸類時，首先要考慮圖標(biāo)用在什么位置需要多大尺寸。大尺寸圖標(biāo)通常指標(biāo)志性圖標(biāo)，例如App啟動圖標(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)勢能展示更多內(nèi)容，分為多種組成形式。簡單的圖像可以更具包容性，圖標(biāo)的尺寸越小，越考驗設(shè)計師傳達(dá)信息的能力。

 

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

 

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

 

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

 

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