圖標(biāo)是基本但重要的表達(dá)元素，在UI設(shè)計(jì)中有著不可替代的作用。
常見(jiàn)的分類是簡(jiǎn)單的線性分類，缺少立體化的圖標(biāo)分類思維。文章通過(guò)梳理來(lái)幫助大家對(duì)不同類型及風(fēng)格的圖標(biāo)有一個(gè)體系化的認(rèn)知。
一、定義圖標(biāo)類型
對(duì)圖標(biāo)進(jìn)行分類時(shí)，普遍會(huì)遇到的問(wèn)題是一個(gè)圖標(biāo)有多種風(fēng)格。例如下面這個(gè)水滴圖標(biāo)，樣式很簡(jiǎn)單，但可以劃分到多個(gè)類別中。
首先將圖標(biāo)按尺寸大小分為兩類； 繼續(xù)細(xì)分對(duì)應(yīng)的面性、線性、線面結(jié)合、扁平、擬物化等類型； 最后選擇標(biāo)準(zhǔn)、容器、漸變、3D、手繪、陰影等風(fēng)格。
利用這種結(jié)構(gòu)層級(jí)，可以明確定義圖標(biāo)類別。
二、圖標(biāo)尺寸
圖標(biāo)的大小取決于具體功能。例如帶有漸變和陰影的圖標(biāo)看起來(lái)很酷，但把它縮小到16px，這些酷炫的效果都無(wú)法呈現(xiàn)出來(lái)。
大尺寸圖標(biāo)通常指標(biāo)志性圖標(biāo)，例如App啟動(dòng)圖標(biāo)或代表品牌形象； - 小尺寸圖標(biāo)用作UI控件，起到引導(dǎo)功能或裝飾目的。
三、圖標(biāo)類型
- 面性圖標(biāo)
- 線性圖標(biāo)
- 線面結(jié)合圖標(biāo)
- 扁平化圖標(biāo)
- 擬物化圖標(biāo)
利用這種簡(jiǎn)單的分類方式就能避免圖標(biāo)發(fā)生重疊。另外擬物化這種細(xì)膩的風(fēng)格不適用于小尺寸圖標(biāo)中，所以在小圖標(biāo)分類中沒(méi)有展示。
四、圖標(biāo)組成
圖標(biāo)尺寸越小，展示的細(xì)節(jié)越有限。相比于大圖標(biāo)，小圖標(biāo)的尺寸有一定局限性，圖標(biāo)組成包括標(biāo)準(zhǔn)和容器兩種。
大圖標(biāo)利用尺寸上的優(yōu)勢(shì)能展示更多內(nèi)容，分為多種組成形式。
五、小尺寸圖標(biāo)樣式
1.1 標(biāo)準(zhǔn)面性圖標(biāo)
- 確保圖標(biāo)有清晰的邊緣，避免羽化；
- 圖標(biāo)復(fù)雜程度隨著尺寸變小而靈活調(diào)整。
1.2 帶有背景色的面性圖標(biāo)
- 為背景選擇4-12種顏色。
- 考慮圖標(biāo)是淺色還是深色，是否適用于所有背景色。
- 在彩色背景上使用白色圖標(biāo)比黑色效果更好。
2、線性圖標(biāo)
2.1 標(biāo)準(zhǔn)線性圖標(biāo)
- 確保輪廓像素清晰。
- 越簡(jiǎn)單越好。
- 追求更簡(jiǎn)單的細(xì)節(jié)。
2.2 雙色線性圖標(biāo)
- 使用兩種搭配和諧的顏色。
- 考慮將一種顏色用于主要形狀，另一種顏色用于細(xì)節(jié)。
- 少即是多。
- 使用粗線條。
3、線面結(jié)合圖標(biāo)
- 最好使用深色而不是純黑色描邊。
- 限制圖標(biāo)的顏色種類。
- 避免過(guò)多細(xì)節(jié)。
4、扁平化圖標(biāo)
- 避免在<20px的尺寸中使用此圖標(biāo)樣式。
- 選擇2-3種顏色，可以一起使用。
- 一種顏色為主色，另一種顏色應(yīng)為高光/細(xì)節(jié)色。
六、大尺寸圖標(biāo)樣式
1.1標(biāo)準(zhǔn)線性圖標(biāo)
- 這類圖標(biāo)最容易制作。
- 避免出現(xiàn)輪廓羽化。
- 線條粗細(xì)要一致。
- 不要害怕添加細(xì)節(jié)。
1.2 漸變線性圖標(biāo)
- 在小尺寸圖標(biāo)中添加漸變會(huì)降低圖標(biāo)的可視性。
- 選擇漸變時(shí)，首先考慮鄰近色。
- 線條越粗，漸變?cè)矫黠@。
- 線條細(xì)節(jié)越多，漸變?cè)矫黠@。
1.3 等距線性圖標(biāo)
- 同一組圖標(biāo)要使用相同的等軸測(cè)網(wǎng)格。
- 2.5D等軸圖標(biāo)很復(fù)雜，在較小的尺寸下會(huì)失去作用。
- 如果可以，讓所有圖標(biāo)都朝向同一個(gè)方向。
1.4 手繪線性圖標(biāo)
- 手繪圖標(biāo)掃描后，再用數(shù)字方式重新繪制，這樣可以保證線條粗細(xì)一致。
- 盡量讓所有的線條保持相同的顏色，這會(huì)使文件更小。
1.5 斷線圖標(biāo)
- 斷線粗細(xì)應(yīng)該相同。
- 圖標(biāo)的中斷次數(shù)盡可能保持一致。
1.6 雙色線性圖標(biāo)
- 確保兩種顏色具有相同的對(duì)比度，否則可能會(huì)導(dǎo)致用戶看不清其中一種顏色，因此無(wú)法識(shí)別完整的圖標(biāo)。
例如左下角的淺綠色對(duì)于視力弱的用戶來(lái)說(shuō)就很不友好。
2.1 標(biāo)準(zhǔn)線面結(jié)合圖標(biāo)
- 使用有限的顏色和統(tǒng)一的線條風(fēng)格，使圖標(biāo)具有品牌性。
- 使用線條和點(diǎn)來(lái)添加更多細(xì)節(jié)。
- 避免使用純黑色描邊。
2.2 帶有背景色的線面結(jié)合圖標(biāo)
- 描邊斷開(kāi)時(shí)，圖標(biāo)效果很更好。
- 避免在小尺寸時(shí)使用。
- 使用有限的調(diào)色板。
- 考慮使用較淺的描邊/背景色。
- 考慮在圖標(biāo)下方添加一條水平線，使圖形具有相同的位置(中間的圖標(biāo)示例)
2.3 錯(cuò)位線面結(jié)合圖標(biāo)
- 考慮使用斷線描邊。
- 使用有限的調(diào)色板。
- 確保描邊和填充色簡(jiǎn)單且一致。
2.4 色塊圖標(biāo)
- 選擇有限的調(diào)色板。
- 先關(guān)注輪廓再關(guān)注顏色，顏色僅用于裝飾。
- 避免形狀色和背景色過(guò)于相似，降低可見(jiàn)度。
2.5 單色線面結(jié)合圖標(biāo)
- 避免使用暖色調(diào)尤其是紅色，會(huì)讓用戶感到壓抑。
- 首先確定合適的描邊顏色，再考慮填充色。
3.1 標(biāo)準(zhǔn)扁平化圖標(biāo)
- 使用柔和的調(diào)色板，避免明亮的顏色。
- 分清簡(jiǎn)化和添加細(xì)節(jié)之間的界限。
3.2 帶有容器的扁平化圖標(biāo)
- 嘗試讓圖形從容器中凸出來(lái)，以增加深度。
- 因?yàn)樵谌萜髦校梢蕴砑痈嗟募?xì)節(jié)而不用擔(dān)心圖形變得混亂。
- 嘗試使用正方形、橢圓形或與品牌相關(guān)的容器形狀。
3.3 等距圖標(biāo)
- 保持所有圖標(biāo)朝向同一方向。
- 選擇恰當(dāng)?shù)恼{(diào)色板能讓圖標(biāo)看起來(lái)更一致。
- 避免小尺寸使用。
3.4 半陰影扁平圖標(biāo)
- 小尺寸圖標(biāo)不起作用。
- 使用有限的調(diào)色板。
- 確保所有的圖標(biāo)色調(diào)相似。
3.5 長(zhǎng)陰影扁平圖標(biāo)
- 使容器具有相同的顏色或類似的色調(diào)。
- 只在大尺寸圖標(biāo)中使用。
- 將半陰影與長(zhǎng)陰影組合使用效果更好。
擬物化圖標(biāo)實(shí)際上已經(jīng)包含了大部分的樣式，例如它們是立體的，有豐富的漸變和陰影。
- 考慮添加底部陰影。
- 使光源來(lái)自同一方向。
- 確保圖標(biāo)都朝向相同的方向。
- 目前絕大多數(shù)界面不在有這種風(fēng)格的圖標(biāo)，可以考慮使用3D建模來(lái)實(shí)現(xiàn)這種效果。
希望大家能對(duì)圖標(biāo)的分類及設(shè)計(jì)有更全面深入的認(rèn)識(shí)，從而構(gòu)建一套完整的圖標(biāo)思維體系。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。