在UI設(shè)計(jì)中，圖標(biāo)主要分為兩類：一種是APP的啟動圖標(biāo)，每個APP獨(dú)一份（例如：應(yīng)用商店、時鐘、天氣等）；另一種則是系統(tǒng)icon，部分圖標(biāo)需要搭配文字使用，方便用戶在使用過程中快速的去理解圖標(biāo)代表的信息和功能，也是本文章重點(diǎn)講解的內(nèi)容

風(fēng)格

圖標(biāo)常見的風(fēng)格：線性、面性、彩色、擬物、立體（3D和2.5D）等，圖標(biāo)風(fēng)格的選擇會因?yàn)轫撁娴脑O(shè)計(jì)風(fēng)格，以及圖標(biāo)所處的位置產(chǎn)生差異，主要的作用還是反饋動作和吸引用戶注意力

l   線性/面性：最基本同時也是最常用的風(fēng)格，廣泛應(yīng)用在APP的頁面設(shè)計(jì)中

l   彩色：通常用于反饋用戶的操作行為，增加用戶注意力

l   擬物/立體：通常用于頁面中某個內(nèi)容需要引起用戶高度注意使用，抓住用戶視線

（從簡單到復(fù)雜）

重量

簡單的線性圖標(biāo)，會讓人感覺重量很輕；但是看起來更簡約，不會給頁面增添太大的視覺負(fù)擔(dān)。例如頁面中的圖片和內(nèi)容元素已經(jīng)很豐富了，而簡單的圖標(biāo)，本身筆畫少，所以看起來更輕快、簡約一些，不會給頁面帶來太大的視覺負(fù)擔(dān)，要選擇更適合的簡約、輕量化的線性（面性）圖標(biāo)，防止頁面過于雜亂無章

相反，如果頁面中文字占比很大，信息量很少，這種頁面就適合使用重量大的彩色圖標(biāo)，甚至是使用3D（2.5D）類型的圖標(biāo)來增加頁面的豐富程度，讓頁面看起來沒有那么呆板，增加設(shè)計(jì)感，給用戶帶來視覺上的愉悅，簡約而不簡單

（由輕到重）

屬性

構(gòu)成圖標(biāo)的元素有：描邊的寬度、端點(diǎn)（節(jié)點(diǎn)）的樣式、圓角的大小、顏色的輕重等，表達(dá)式規(guī)則是統(tǒng)一的，以便只給觀看者識別圖標(biāo)所需的最小更改

l   描邊的寬度：描邊寬度就是指的描邊的像素大小，手機(jī)上常用的寬度尺寸。

l   端點(diǎn)（節(jié)點(diǎn)）的樣式：圖標(biāo)的端點(diǎn)，分為三種：平頭、圓頭、方頭；圖標(biāo)的節(jié)點(diǎn)，有斜接、圓角、斜角，具體的使用樣式要根據(jù)頁面情況統(tǒng)一進(jìn)行設(shè)置。

l   圓角的大?。?方形的圖標(biāo)邊角過于尖銳，用戶看起來會感覺很不舒服，圓角的圖標(biāo)更加圓滑，相對來說跟容易讓用戶接受。雖然基本情況都是使用圓角，但是具體的情況，還是要從頁面的整體情況出發(fā)再做決定

網(wǎng)格

圖標(biāo)的外形，有圓形、方形、三角形以及不規(guī)則形狀，所以我們很難講不同形狀的圖標(biāo)尺寸完全統(tǒng)一。

網(wǎng)格在這種情況下就起到了很關(guān)鍵的作用，相當(dāng)于在圖標(biāo)的外面限定了圖標(biāo)最大的范圍，然后在網(wǎng)格的范圍內(nèi)根據(jù)圖標(biāo)的重量和重心靈活調(diào)整大小，這樣會讓不同形狀的圖標(biāo)看起來更統(tǒng)一。

以上就是部分常用卻容易忽略的圖標(biāo)設(shè)計(jì)細(xì)節(jié)，希望通過這些內(nèi)容能幫助你對圖標(biāo)設(shè)計(jì)有更深的認(rèn)識。