看到好的圖標(biāo)我們會(huì)習(xí)慣性地截圖保存，但隨著收集的圖標(biāo)越來(lái)越多，會(huì)發(fā)現(xiàn)對(duì)圖標(biāo)的分類(lèi)會(huì)變得越來(lái)越混亂…做設(shè)計(jì)時(shí)也不清楚到底該參考或運(yùn)用哪種風(fēng)格最合適。來(lái)看看如何解決這些問(wèn)題！

圖標(biāo)是基本但重要的表達(dá)元素，在 UI 設(shè)計(jì)中有著不可替代的作用。

常見(jiàn)的分類(lèi)是簡(jiǎn)單的線(xiàn)性分類(lèi)，缺少立體化的圖標(biāo)分類(lèi)思維。文章通過(guò)梳理來(lái)幫助大家對(duì)不同類(lèi)型及風(fēng)格的圖標(biāo)有一個(gè)體系化的認(rèn)知。

圖片定義圖標(biāo)類(lèi)型

對(duì)圖標(biāo)進(jìn)行分類(lèi)時(shí)，普遍會(huì)遇到的問(wèn)題是一個(gè)圖標(biāo)有多種風(fēng)格。例如下面這個(gè)水滴圖標(biāo)，樣式很簡(jiǎn)單，但可以劃分到多個(gè)類(lèi)別中。

面對(duì)這樣的問(wèn)題，推薦使用系統(tǒng)性的結(jié)構(gòu)來(lái)劃分圖標(biāo)類(lèi)別：

• 首先將圖標(biāo)按尺寸大小分為兩類(lèi)；
• 繼續(xù)細(xì)分對(duì)應(yīng)的面性、線(xiàn)性、線(xiàn)面結(jié)合、扁平、擬物化等類(lèi)型；
• 最后選擇標(biāo)準(zhǔn)、容器、漸變、3D、手繪、陰影等風(fēng)格。

利用這種結(jié)構(gòu)層級(jí)，可以明確定義圖標(biāo)類(lèi)別。

圖標(biāo)尺寸

圖標(biāo)的大小取決于具體功能。例如帶有漸變和陰影的圖標(biāo)看起來(lái)很酷，但把它縮小到 16px，這些酷炫的效果都無(wú)法呈現(xiàn)出來(lái)。

在對(duì)圖標(biāo)歸類(lèi)時(shí)，首先要考慮圖標(biāo)用在什么位置需要多大尺寸。這里將圖標(biāo)分為兩大類(lèi)：

• 大尺寸圖標(biāo)通常指標(biāo)志性圖標(biāo)，例如 App 啟動(dòng)圖標(biāo)或代表品牌形象；
• 小尺寸圖標(biāo)用作 UI 控件，起到引導(dǎo)功能或裝飾目的。

圖標(biāo)類(lèi)型

確定圖標(biāo)尺寸后，進(jìn)一步細(xì)分圖標(biāo)類(lèi)型：

• 面性圖標(biāo)
• 線(xiàn)性圖標(biāo)
• 線(xiàn)面結(jié)合圖標(biāo)
• 扁平化圖標(biāo)
• 擬物化圖標(biāo)

每個(gè)類(lèi)型對(duì)應(yīng)的圖標(biāo)繪制方法看 → https://www.uisdc.com/zt/icon-drawing-guide

利用這種簡(jiǎn)單的分類(lèi)方式就能避免圖標(biāo)發(fā)生重疊。另外擬物化這種細(xì)膩的風(fēng)格不適用于小尺寸圖標(biāo)中，所以在小圖標(biāo)分類(lèi)中沒(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)樣式

簡(jiǎn)單的圖像可以更具包容性。圖標(biāo)的尺寸越小，越考驗(yàn)設(shè)計(jì)師傳達(dá)信息的能力。

1. 面性圖標(biāo)

標(biāo)準(zhǔn)面性圖標(biāo)

面性圖標(biāo)易識(shí)別，適合應(yīng)用在小尺寸圖標(biāo)中。

關(guān)鍵點(diǎn)：

• 確保圖標(biāo)有清晰的邊緣，避免羽化；
• 圖標(biāo)復(fù)雜程度隨著尺寸變小而靈活調(diào)整。

帶有背景色的面性圖標(biāo)

彩色背景為簡(jiǎn)約設(shè)計(jì)帶來(lái)了更多可能。通過(guò)這個(gè)技巧使面性圖標(biāo)更友好，更具吸引力。

關(guān)鍵點(diǎn)：

• 為背景選擇 4-12 種顏色。
• 考慮圖標(biāo)是淺色還是深色，是否適用于所有背景色。
• 在彩色背景上使用白色圖標(biāo)比黑色效果更好。

2. 線(xiàn)性圖標(biāo)

標(biāo)準(zhǔn)線(xiàn)性圖標(biāo)

線(xiàn)性圖標(biāo)因?yàn)楹?jiǎn)潔性和現(xiàn)代性而受到用戶(hù)的歡迎。隨著屏顯越來(lái)越清晰，我們可以更加大膽地使用線(xiàn)性圖標(biāo)。

關(guān)鍵點(diǎn)：

• 確保輪廓像素清晰。
• 越簡(jiǎn)單越好。
• 追求更簡(jiǎn)單的細(xì)節(jié)。

雙色線(xiàn)性圖標(biāo)

設(shè)計(jì)小尺寸圖標(biāo)時(shí)，必須放棄細(xì)節(jié)并強(qiáng)調(diào)簡(jiǎn)單的形狀。但當(dāng)使用一種顏色效果不太理想時(shí)，可以考慮添加一些顏色。

關(guān)鍵點(diǎn)：

• 使用兩種搭配和諧的顏色。
• 考慮將一種顏色用于主要形狀，另一種顏色用于細(xì)節(jié)。
• 少即是多。
• 使用粗線(xiàn)條。

3. 線(xiàn)面結(jié)合圖標(biāo)

線(xiàn)面結(jié)合擁有更多細(xì)節(jié)，提升用戶(hù)的愉悅感。

關(guān)鍵點(diǎn)：

• 最好使用深色而不是純黑色描邊。
• 限制圖標(biāo)的顏色種類(lèi)。
• 避免過(guò)多細(xì)節(jié)。

4. 扁平化圖標(biāo)

扁平化圖標(biāo)既簡(jiǎn)單又巧妙，表達(dá)品牌形象的同時(shí)具有豐富的內(nèi)涵。

關(guān)鍵點(diǎn)：

• 避免在<20px 的尺寸中使用此圖標(biāo)樣式。
• 選擇 2-3 種顏色，可以一起使用。
• 一種顏色為主色，另一種顏色應(yīng)為高光/細(xì)節(jié)色。

大尺寸圖標(biāo)樣式

大尺寸圖標(biāo)在界面中使用較少，更多用于產(chǎn)品標(biāo)識(shí)或品牌宣傳。

1. 線(xiàn)性圖標(biāo)

標(biāo)準(zhǔn)線(xiàn)性圖標(biāo)

在設(shè)計(jì)任何圖標(biāo)前，都可以先創(chuàng)建一個(gè)線(xiàn)性輪廓，確保形狀看起來(lái)足夠美觀后再添加顏色。

關(guān)鍵點(diǎn)：

• 這類(lèi)圖標(biāo)最容易制作。
• 避免出現(xiàn)輪廓羽化。
• 線(xiàn)條粗細(xì)要一致。
• 不要害怕添加細(xì)節(jié)。

漸變線(xiàn)性圖標(biāo)

添加一些漸變能讓原本單一的線(xiàn)性圖標(biāo)賦予更多的個(gè)性。

關(guān)鍵點(diǎn)：

• 在小尺寸圖標(biāo)中添加漸變會(huì)降低圖標(biāo)的可視性。
• 選擇漸變時(shí)，首先考慮鄰近色。
• 線(xiàn)條越粗，漸變?cè)矫黠@。
• 線(xiàn)條細(xì)節(jié)越多，漸變?cè)矫黠@。

等距線(xiàn)性圖標(biāo)

2.5D 圖標(biāo)做起來(lái)會(huì)花費(fèi)很多時(shí)間，但效果往往會(huì)很好。在設(shè)計(jì)汽車(chē)、房屋、家具等實(shí)體產(chǎn)品時(shí)，建議優(yōu)先使用 2.5D 圖標(biāo)。

關(guān)鍵點(diǎn)：

• 同一組圖標(biāo)要使用相同的等軸測(cè)網(wǎng)格。
• 2.5D 等軸圖標(biāo)很復(fù)雜，在較小的尺寸下會(huì)失去作用。
• 如果可以，讓所有圖標(biāo)都朝向同一個(gè)方向。

手繪線(xiàn)性圖標(biāo)

隨著設(shè)計(jì)趨勢(shì)向簡(jiǎn)約化、扁平化發(fā)展，很多設(shè)計(jì)師喪失了手繪圖標(biāo)的能力。實(shí)際上手繪圖標(biāo)讓品牌更真實(shí)甚至更有趣。

關(guān)鍵點(diǎn)：

• 手繪圖標(biāo)掃描后，再用數(shù)字方式重新繪制，這樣可以保證線(xiàn)條粗細(xì)一致。
• 盡量讓所有的線(xiàn)條保持相同的顏色，這會(huì)使文件更小。

斷線(xiàn)圖標(biāo)

標(biāo)準(zhǔn)的線(xiàn)性圖標(biāo)看起來(lái)可能會(huì)很單調(diào)，而簡(jiǎn)單靈活的斷線(xiàn)處理能為圖標(biāo)增加更多個(gè)性。

關(guān)鍵點(diǎn)：

• 斷線(xiàn)粗細(xì)應(yīng)該相同。
• 圖標(biāo)的中斷次數(shù)盡可能保持一致。

雙色線(xiàn)性圖標(biāo)

關(guān)鍵點(diǎn)：

確保兩種顏色具有相同的對(duì)比度，否則可能會(huì)導(dǎo)致用戶(hù)看不清其中一種顏色，因此無(wú)法識(shí)別完整的圖標(biāo)。例如左下角的淺綠色對(duì)于視力弱的用戶(hù)來(lái)說(shuō)就很不友好。

2. 線(xiàn)面結(jié)合圖標(biāo)

線(xiàn)面結(jié)合圖標(biāo)可以看作是添加顏色后的線(xiàn)性圖標(biāo)。線(xiàn)面結(jié)合具有很強(qiáng)的輪廓，讓圖標(biāo)能夠清晰可見(jiàn)。

標(biāo)準(zhǔn)線(xiàn)面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn)：

• 使用有限的顏色和統(tǒng)一的線(xiàn)條風(fēng)格，使圖標(biāo)具有品牌性。
• 使用線(xiàn)條和點(diǎn)來(lái)添加更多細(xì)節(jié)。
• 避免使用純黑色描邊。

帶有背景色的線(xiàn)面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn)：

• 描邊斷開(kāi)時(shí)，圖標(biāo)效果很更好。
• 避免在小尺寸時(shí)使用。
• 使用有限的調(diào)色板。
• 考慮使用較淺的描邊/背景色。
• 考慮在圖標(biāo)下方添加一條水平線(xiàn)，使圖形具有相同的位置(中間的圖標(biāo)示例)

錯(cuò)位線(xiàn)面結(jié)合圖標(biāo)

當(dāng)填充色與描邊錯(cuò)位時(shí)，顏色移到右邊圖標(biāo)左上角留出高光，帶來(lái)一種清新的感覺(jué)。

關(guān)鍵點(diǎn)：

• 考慮使用斷線(xiàn)描邊。
• 使用有限的調(diào)色板。
• 確保描邊和填充色簡(jiǎn)單且一致。

色塊圖標(biāo)

這種風(fēng)格的圖標(biāo)的特點(diǎn)在于并不依賴(lài)于顏色，僅將其用于裝飾。

關(guān)鍵點(diǎn)：

• 選擇有限的調(diào)色板。
• 先關(guān)注輪廓再關(guān)注顏色，顏色僅用于裝飾。
• 避免形狀色和背景色過(guò)于相似，降低可見(jiàn)度。

單色線(xiàn)面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn)：

• 避免使用暖色調(diào)尤其是紅色，會(huì)讓用戶(hù)感到壓抑。
• 首先確定合適的描邊顏色，再考慮填充色。

3. 扁平化圖標(biāo)

扁平化圖標(biāo)通常沒(méi)有描邊，主要使用形狀和顏色來(lái)完成組合搭配。簡(jiǎn)潔、友好和適當(dāng)?shù)募?xì)節(jié)，讓這類(lèi)圖標(biāo)非常具有吸引力。

標(biāo)準(zhǔn)扁平化圖標(biāo)

關(guān)鍵點(diǎn)：

• 使用柔和的調(diào)色板，避免明亮的顏色。
• 分清簡(jiǎn)化和添加細(xì)節(jié)之間的界限。

帶有容器的扁平化圖標(biāo)

嘗試讓圖形打破容器，帶來(lái)動(dòng)態(tài)的感覺(jué)。

關(guān)鍵點(diǎn)：

• 嘗試讓圖形從容器中凸出來(lái)，以增加深度。
• 因?yàn)樵谌萜髦?，可以添加更多的?xì)節(jié)而不用擔(dān)心圖形變得混亂。
• 嘗試使用正方形、橢圓形或與品牌相關(guān)的容器形狀。

等距圖標(biāo)

關(guān)鍵點(diǎn)：

• 保持所有圖標(biāo)朝向同一方向。
• 選擇恰當(dāng)?shù)恼{(diào)色板能讓圖標(biāo)看起來(lái)更一致。
• 避免小尺寸使用。

半陰影扁平圖標(biāo)

半陰影圖標(biāo)是在扁平圖標(biāo)的基礎(chǔ)上添加半色調(diào)陰影，得到更具個(gè)性的圖標(biāo)。

關(guān)鍵點(diǎn)：

• 小尺寸圖標(biāo)不起作用。
• 使用有限的調(diào)色板。
• 確保所有的圖標(biāo)色調(diào)相似。

長(zhǎng)陰影扁平圖標(biāo)

當(dāng)圖標(biāo)位于容器中時(shí)，可以考慮添加長(zhǎng)陰影，主要包括純色陰影和漸變陰影兩種類(lèi)型。

關(guān)鍵點(diǎn)：

• 使容器具有相同的顏色或類(lèi)似的色調(diào)。
• 只在大尺寸圖標(biāo)中使用。
• 將半陰影與長(zhǎng)陰影組合使用效果更好。

4. 擬物化圖標(biāo)

擬物化圖標(biāo)實(shí)際上已經(jīng)包含了大部分的樣式，例如它們是立體的，有豐富的漸變和陰影。

這種風(fēng)格的圖標(biāo)看起來(lái)與現(xiàn)實(shí)生活中的圖標(biāo)盡可能類(lèi)似，讓用戶(hù)感到更舒適。

關(guān)鍵點(diǎn)：

• 考慮添加底部陰影。
• 使光源來(lái)自同一方向。
• 確保圖標(biāo)都朝向相同的方向。

目前絕大多數(shù)界面不再有這種風(fēng)格的圖標(biāo)，可以考慮使用 3D 建模來(lái)實(shí)現(xiàn)這種效果。

總結(jié)

希望大家能對(duì)圖標(biāo)的分類(lèi)及設(shè)計(jì)有更全面深入的認(rèn)識(shí)，從而構(gòu)建一套完整的圖標(biāo)思維體系。

文章來(lái)源：優(yōu)設(shè)網(wǎng)       作者：Clip設(shè)計(jì)夾

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)