在APP的(de)UI設計中，如何做(zuò)好圖标的(de)設計？

 

圖标（icon）在APP的(de)界面UI中是經常會用(yòng)到的(de)元素，圖标也(yě)可(kě)以傳遞信息，在一定程度上可(kě)以取代文字，圖标設計的(de)好壞可(kě)以直接影(yǐng)響整個(gè)APP的(de)調性和(hé)用(yòng)戶體驗。那麽，UI設計師要如何才能做(zuò)好圖标的(de)設計呢(ne)？

 

設計師在日常工作中經常會設計或收集很多(duō)圖标，可(kě)見設計師對(duì)于圖标的(de)運用(yòng)很頻(pín)繁也(yě)非常重視，圖标的(de)風格也(yě)很多(duō)，随著(zhe)收集的(de)圖标越來(lái)越多(duō)，會發現對(duì)圖标的(de)分(fēn)類會變得(de)越來(lái)越混，做(zuò)設計時(shí)也(yě)不清楚到底該參考或運用(yòng)哪種風格最合适。

 

首先将圖标按尺寸大(dà)小分(fēn)爲兩類；細分(fēn)對(duì)應的(de)面性、線性、線面結合、扁平、拟物(wù)化(huà)等類型；最後選擇标準、容器、漸變、3D、手繪、陰影(yǐng)等風格。利用(yòng)這(zhè)樣的(de)結構層級，可(kě)以明(míng)确定義圖标的(de)類别。

 

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

 

圖标尺寸越小，展示的(de)細節越有限；相比于大(dà)圖标，小圖标的(de)尺寸有一定局限性，圖标組成包括标準和(hé)容器兩種。大(dà)圖标利用(yòng)尺寸上的(de)優勢能展示更多(duō)内容，分(fēn)爲多(duō)種組成形式。簡單的(de)圖像可(kě)以更具包容性，圖标的(de)尺寸越小，越考驗設計師傳達信息的(de)能力。

 

面性圖标易于識别，适合應用(yòng)在小尺寸圖标中。注意要确保圖标有清晰的(de)邊緣，避免羽化(huà)；圖标複雜(zá)程度随著(zhe)尺寸變小而靈活調整。

 

帶有背景色的(de)面性圖标爲簡約設計帶來(lái)了(le)更多(duō)可(kě)能。通(tōng)過這(zhè)個(gè)技巧使面性圖标更友好，更具吸引力。爲背景選擇4-12種顔色。考慮圖标是淺色還(hái)是深色，是否适用(yòng)于所有背景色。在彩色背景上使用(yòng)白色圖标比黑(hēi)色效果更好。

 

線性圖标因爲簡潔性和(hé)現代性而受到用(yòng)戶的(de)歡迎；随著(zhe)屏顯越來(lái)越清晰，我們可(kě)以更加大(dà)膽地使用(yòng)線性圖标。線性圖标要确保輪廓像素清晰。越簡單越好。追求更簡單的(de)細節。

 

通(tōng)過以上對(duì)各種圖标的(de)分(fēn)析，希望大(dà)家能對(duì)圖标的(de)分(fēn)類及設計有更全面深入的(de)認識，從而構建一套完整的(de)圖标思維體系。