如今的用戶界面中，圖標(biāo)絕對(duì)是不可或缺的元素。雖然絕大多數(shù)的圖標(biāo)都很小，甚至不被人注意到，但是它們幫助設(shè)計(jì)和用戶解決了許多問(wèn)題。

合理的運(yùn)用與設(shè)計(jì)圖標(biāo)，是UI設(shè)計(jì)師必備的技能。今天我們就來(lái)歸納一下常見(jiàn)的UI設(shè)計(jì)圖標(biāo)類型。

1、圖標(biāo)的類別

廣義來(lái)說(shuō)，圖標(biāo)可以分為以下兩個(gè)類別。

應(yīng)用圖標(biāo)

應(yīng)用圖標(biāo)是各種應(yīng)用程序的識(shí)別標(biāo)志，我們?cè)趹?yīng)用商店里下載的一些應(yīng)用程序的標(biāo)志。應(yīng)用圖標(biāo)的設(shè)計(jì)風(fēng)格也有很多種，這里不做延伸。

功能圖標(biāo)

功能圖標(biāo)可理解為界面上表示指代意義的圖形。今天我們主要講的就是這類圖標(biāo)分類。

2、圖標(biāo)風(fēng)格分類

圖標(biāo)的風(fēng)格有很多種，設(shè)計(jì)的技法也是千千萬(wàn)，總的來(lái)說(shuō)常用的圖標(biāo)可以分為三大類：

2.1、面性圖標(biāo)

面性圖標(biāo)比線性圖標(biāo)更能表達(dá)出圖標(biāo)的力量感和重量感，比線性圖標(biāo)會(huì)更加容易吸引用戶目光。在識(shí)別度上，面性圖標(biāo)更加依賴于外輪廓的清晰度，因此在設(shè)計(jì)時(shí)對(duì)于外形的打磨是重中之重，清晰的外輪廓可以幫助提高識(shí)別度。

技法分析

風(fēng)格延伸

極簡(jiǎn)風(fēng)格

整體風(fēng)格極為簡(jiǎn)約，沒(méi)有多余的線條，通過(guò)線條還原圖形的本質(zhì)，在視覺(jué)感知上輕松、干凈。

雙色

相較于“純色的圖標(biāo)”更具表現(xiàn)力，細(xì)節(jié)上也會(huì)更加豐富，形態(tài)感知上多了一層變化。

透明度變化

通過(guò)透明度的疊加和變化，提升圖標(biāo)的層次感和空間感，降低圖標(biāo)的壓迫性。

漸變層次疊加

漸變帶出了圖標(biāo)的質(zhì)感，結(jié)合“不同深度”或“不同飽和度”的變化，讓圖標(biāo)更具有細(xì)節(jié)和層次。

黑白+品牌色

黑白色作為主色調(diào)，結(jié)合品牌色作為點(diǎn)綴色。

線性漸變

結(jié)合漸變的顏色，豐富了整個(gè)圖標(biāo)的視覺(jué)表達(dá)，并提升了圖標(biāo)的視覺(jué)沖擊力和設(shè)計(jì)感。

一筆成形

此類圖標(biāo)在視覺(jué)表達(dá)上具有較高的線性流暢度和設(shè)計(jì)感，關(guān)注點(diǎn)在于整組圖標(biāo)的“開(kāi)口起始點(diǎn)”設(shè)定上需保持一致。

斷點(diǎn)圖標(biāo)

在線形圖標(biāo)基礎(chǔ)上面，尋找一個(gè)缺口來(lái)打破“全包邊圖標(biāo)”的沉悶感，使得圖標(biāo)具有透氣性和線條的變化。缺口的位置盡量保持統(tǒng)一的方向及大小，另外需要控制開(kāi)口個(gè)數(shù)避免過(guò)多導(dǎo)致圖標(biāo)外形過(guò)于零碎。

2.2面性圖標(biāo)

面性圖標(biāo)比線性圖標(biāo)更能表達(dá)出圖標(biāo)的力量感和重量感，比線性圖標(biāo)會(huì)更加容易吸引用戶目光。在識(shí)別度上，面性圖標(biāo)更加依賴于外輪廓的清晰度，因此在設(shè)計(jì)時(shí)對(duì)于外形的打磨是重中之重，清晰的外輪廓可以幫助提高識(shí)別度。

風(fēng)格延伸

單色面+點(diǎn)綴色

整體的外形使用統(tǒng)一的顏色，結(jié)合圖標(biāo)的屬性感知使用不同的顏色進(jìn)行點(diǎn)綴，提亮圖標(biāo)的視覺(jué)效果，達(dá)到既統(tǒng)一又具有差異化。

多彩雙色

通過(guò)對(duì)比色、鄰近色的搭配來(lái)營(yíng)造整體的圖標(biāo)氛圍，提升了圖標(biāo)的層次和豐富度，雙色的表達(dá)也增添了圖形的趣味性。

微質(zhì)感漸變

微弱的漸變提升了圖標(biāo)的質(zhì)感。漸變的方向會(huì)影響整體圖標(biāo)的視覺(jué)效果，因此可以根據(jù)不同設(shè)計(jì)的需要進(jìn)行調(diào)整。

透明度/灰度變化

透明度/灰度的變化，讓原來(lái)單色的圖標(biāo)變得更加具有層次感和空間感，設(shè)計(jì)細(xì)節(jié)更加豐富，降低了單色面性圖標(biāo)的厚重感。

透明度變化+漸變

在漸變的基礎(chǔ)上對(duì)組合型做透明度差異化，使得圖標(biāo)具有了層次感。

透明疊加的圖標(biāo)+漸變的背景

此類圖標(biāo)常常被應(yīng)用在 UI 界面中的列表或者頂部入口的位置。

顏色疊加穿透

圖標(biāo)透明疊加之后產(chǎn)生了交錯(cuò)的負(fù)形，疊加出第三個(gè)面。

漸變層次疊加

通過(guò)漸變的深淺變化，使得形狀的銜接處出現(xiàn)了明暗對(duì)比，因此圖標(biāo)也具有了厚度感和層次感。

高斯模糊

更具層次感和空間感，同時(shí)圖標(biāo)也具有較強(qiáng)的設(shè)計(jì)感。

2.3、線面結(jié)合

結(jié)合了線性和面性的優(yōu)點(diǎn)，既保持了面性的重量感，同時(shí)具有線性的精致、細(xì)膩。因此在設(shè)計(jì)時(shí)可以根據(jù)圖標(biāo)具體想要表達(dá)的感覺(jué)對(duì)線面比例進(jìn)行把控，不同比例可以呈現(xiàn)出不同的視覺(jué)感知。

技法分析

風(fēng)格延伸

黑白線+面性品牌色

統(tǒng)一的線性顏色疊加品牌色的透出。

線面雙色

在線和面的顏色上做差異。具體做法與線性或面性的雙色接近。

線面結(jié)合-陰陽(yáng)

線和面的結(jié)合按 50% 的比例進(jìn)行設(shè)計(jì)，整體圖標(biāo)的視覺(jué)效果較為跳躍，非常規(guī)。

線面雙色+錯(cuò)位

在雙色圖標(biāo)的基礎(chǔ)上，線和面按照統(tǒng)一的“百分比” 進(jìn)行縮放，并進(jìn)行透視和位移的設(shè)計(jì)，呈現(xiàn)出一種交錯(cuò)疊加的視覺(jué)效果。

線面錯(cuò)位+漸變

基于上一種風(fēng)格，對(duì)面或者線的顏色進(jìn)行漸變?cè)O(shè)計(jì)，豐富了圖標(biāo)的質(zhì)感和顏色更加細(xì)膩。

線面透明度變化

如下圖案例，“弱線強(qiáng)面”的第一識(shí)別度較弱，而“弱面強(qiáng)線” 的外形識(shí)別度較高，也更符合圖標(biāo)的表達(dá)。

基于三種基礎(chǔ)的類型表達(dá)，可以拓展出多種多樣的風(fēng)格。這里再展示一些，希望能激發(fā)你的靈感，在圖標(biāo)設(shè)計(jì)上有更多思路。

插畫

圖標(biāo)的分類遠(yuǎn)不止如此，但是萬(wàn)變不離其宗，都是“線性、面性、線面結(jié)合”再結(jié)合透明度、漸變、顏色疊加、質(zhì)感、多維空間等表達(dá)方式設(shè)計(jì)出來(lái)的。我們除了需要掌握這些內(nèi)容之外，更需要日積月累的練習(xí)和思考，從量到質(zhì)的變化。