編輯導語：設計師在日常工作中經常會用到一些圖標，圖標也可以傳遞信息，在一定程度上可以取代文字；設計師對于圖標的運用很頻繁也非常重視，圖標的風格也很多；本文是作者分享了關于圖標的類型和風格的匯總，我們一起來看參考一下。

看到好的圖標我們會習慣性地截圖保存，但隨著收集的圖標越來越多，會發現對圖標的分類會變得越來越混亂…做設計時也不清楚到底該參考或運用哪種風格最合適。來看看如何解決這些問題！

圖標是基本但重要的表達元素，在UI設計中有著不可替代的作用。

常見的分類是簡單的線性分類，缺少立體化的圖標分類思維，文章通過梳理來幫助大家對不同類型及風格的圖標有一個體系化的認知。

一、定義圖標類型

對圖標進行分類時，普遍會遇到的問題是一個圖標有多種風格；例如下面這個水滴圖標，樣式很簡單，但可以劃分到多個類別中。

面對這樣的問題，推薦使用系統性的結構來劃分圖標類別：

• 首先將圖標按尺寸大小分為兩類；
• 細分對應的面性、線性、線面結合、扁平、擬物化等類型；
• 最后選擇標準、容器、漸變、3D、手繪、陰影等風格。

利用這樣的結構層級，可以明確定義圖標的類別。

二、圖標尺寸

圖標的大小取決于具體功能。例如帶有漸變和陰影的圖標看起來很酷，但把它縮小到16px，這些酷炫的效果都無法呈現出來。

在對圖標歸類時，首先要考慮圖標用在什么位置需要多大尺寸，這里將圖標分為兩大類：

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

三、圖標類型

確定圖標的尺寸后，進一步細分圖標類型：

• 面性圖標
• 線性圖標
• 線面結合圖標
• 扁平化圖標
• 擬物化圖標

利用這種簡單的分類方式就能避免圖標發生重疊。另外擬物化這種細膩的風格不太適用于小尺寸圖標中，所以在小圖標分類中沒有展示擬物化。

四、圖標組成

圖標尺寸越小，展示的細節越有限；相比于大圖標，小圖標的尺寸有一定局限性，圖標組成包括標準和容器兩種。

大圖標利用尺寸上的優勢能展示更多內容，分為多種組成形式。

五、小尺寸圖標樣式

簡單的圖像可以更具包容性，圖標的尺寸越小，越考驗設計師傳達信息的能力。

1. 面性圖標

1）標準面性圖標

面性圖標易于識別，適合應用在小尺寸圖標中。

關鍵點：

• 確保圖標有清晰的邊緣，避免羽化；
• 圖標復雜程度隨著尺寸變小而靈活調整。

2）帶有背景色的面性圖標

彩色背景為簡約設計帶來了更多可能。通過這個技巧使面性圖標更友好，更具吸引力。

關鍵點：

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

2. 線性圖標

1）標準線性圖標

線性圖標因為簡潔性和現代性而受到用戶的歡迎；隨著屏顯越來越清晰，我們可以更加大膽地使用線性圖標。

關鍵點：

• 確保輪廓像素清晰。
• 越簡單越好。
• 追求更簡單的細節。

2）雙色線性圖標

設計小尺寸圖標時，必須放棄細節并強調簡單的形狀；但當使用一種顏色效果不太理想時，可以考慮添加一些顏色。

關鍵點：

• 使用兩種搭配和諧的顏色。
• 考慮將一種顏色用于主要形狀，另一種顏色用于細節。
• 少即是多。
• 使用粗線條。

3）線面結合圖標

線面結合圖標擁有更多細節，提升用戶的愉悅感。

關鍵點：

• 最好使用深色而不是純黑色描邊。
• 限制圖標的顏色種類。
• 避免過多細節。

4）扁平化圖標

扁平化圖標既簡單又巧妙，表達品牌形象的同時具有豐富的內涵。

關鍵點：

• 避免在<20px的尺寸中使用此圖標樣式。
• 選擇2-3種顏色，可以一起使用。
• 一種顏色為主色，另一種顏色應為高光/細節色。

六、大尺寸圖標樣式

大尺寸圖標在界面中使用較少，更多用于產品標識或品牌宣傳。

1. 線性圖標

1）標準線性圖標

在設計任何圖標前，都可以先創建一個線性輪廓，確保形狀看起來足夠美觀后再添加顏色。

關鍵點：

• 這類圖標最容易制作。
• 避免出現輪廓羽化。
• 線條粗細要一致。
• 不要害怕添加細節。

2）漸變線性圖標

添加一些漸變能讓原本單一的線性圖標賦予更多的個性。

關鍵點：

• 在小尺寸圖標中添加漸變會降低圖標的可視性。
• 選擇漸變時，首先考慮鄰近色。
• 線條越粗，漸變越明顯。
• 線條細節越多，漸變越明顯。

3）等距線性圖標

2.5D圖標做起來會花費很多時間，但效果往往會很好。在設計汽車、房屋、家具等大型實體產品時，建議優先使用2.5D圖標。

關鍵點：

• 同一組圖標要使用相同的等軸測網格。
• 2.5D等軸圖標很復雜，在較小的尺寸下會失去作用。
• 如果可以，讓所有圖標都朝向同一個方向。

4）手繪線性圖標

隨著設計趨勢向簡約化、扁平化發展，很多設計師喪失了手繪圖標的能力，實際上手繪圖標讓品牌更真實甚至更有趣。

關鍵點：

• 手繪圖標掃描后，再用數字方式重新繪制，這樣可以保證線條粗細一致。
• 盡量讓所有的線條保持相同的顏色，這會使文件更小。

5）斷線圖標

標準的線性圖標看起來可能會很單調，而簡單靈活的斷線處理能為圖標增加更多個性。

關鍵點：

• 斷線粗細應該相同。
• 圖標的中斷次數盡可能保持一致。

6）雙色線性圖標

正確使用雙色線性圖標的訣竅是選擇兩種能很好結合在一起的顏色，確保顏色具有相同的對比度。

關鍵點：

確保兩種顏色具有相同的對比度，否則可能會導致用戶看不清其中一種顏色，因此無法識別完整的圖標；例如左下角的淺綠色對于視力弱的用戶來說就很不友好。

2. 線面結合圖標

線面結合圖標可以看作是添加顏色后的線性圖標。線面結合具有很強的輪廓，讓圖標能夠清晰可見。

1）標準線面結合圖標

關鍵點：

• 使用有限的顏色和統一的線條風格，使圖標具有品牌性。
• 使用線條和點來添加更多細節。
• 避免使用純黑色描邊。

2）帶有背景色的線面結合圖標

關鍵點：

• 描邊斷開時，圖標效果很更好。
• 避免在小尺寸時使用。
• 使用有限的調色板。
• 考慮使用較淺的描邊/背景色。
• 考慮在圖標下方添加一條水平線，使圖形具有相同的位置（中間的圖標示例）。

3）錯位線面結合圖標

當填充色與描邊錯位時，顏色移到右邊圖標左上角留出高光，帶來一種清新的感覺。

關鍵點：

• 考慮使用斷線描邊。
• 使用有限的調色板。
• 確保描邊和填充色簡單且一致。

4）色塊圖標

這種風格的圖標的特點在于并不依賴于顏色，僅將其用于裝飾。

關鍵點：

• 選擇有限的調色板。
• 首先關注輪廓，再關注顏色，顏色僅用于裝飾。
• 避免形狀顏色和背景色過于相似，降低可見度。

5）單色線面結合圖標

關鍵點：

• 避免使用暖色調尤其是紅色，會讓用戶感到壓抑。
• 首先確定合適的描邊顏色，在考慮填充色。

3. 扁平化圖標

扁平化圖標通常沒有描邊，主要使用形狀和顏色來完成組合搭配；簡潔、友好和適當的細節，讓這類圖標非常具有吸引力。

1）標準扁平化圖標

關鍵點：

• 使用柔和的調色板，避免明亮的顏色。
• 分清簡化和添加細節之間的界限。

2）帶有容器的扁平化圖標

關鍵點：

• 嘗試圖形部分打破容器，帶來動態的感覺。
• 因為在容器中，可以添加更多的細節而不用擔心圖形變得混亂。
• 嘗試使用正方形、橢圓形或與品牌相關的容器形狀。

3）等距圖標

關鍵點：

• 保持所有圖標朝向同一方向。
• 選擇恰當的調色板能讓圖標看起來更一致。
• 避免小尺寸使用。

4）半陰影扁平圖標

半陰影圖標是在扁平圖標的基礎上添加半色調陰影，得到更具個性的圖標。

關鍵點：

• 小尺寸圖標不起作用。
• 使用有限的調色板。
• 確保所有的圖標色調相似。

5）長陰影扁平圖標

當圖標位于容器中時，可以考慮添加長陰影，主要包括純色陰影和漸變陰影兩種類型。

關鍵點：

• 使容器具有相同的顏色或類似的色調。
• 只在大尺寸圖標中使用。
• 將半陰影與長陰影組合使用效果更好。

4. 擬物化圖標

擬物化圖標實際上已經包含了大部分的樣式，例如它們是立體的，有豐富的漸變和陰影。

這種風格的圖標看起來與現實生活中的圖標盡可能類似，讓用戶感到更舒適。

關鍵點：

• 考慮添加底部陰影。
• 使光源來自同一方向。
• 確保圖標都朝向相同的方向。
• 目前絕大多數界面不在有這種風格的圖標，可以考慮使用3D建模來實現這種效果。

七、總結

希望通過這篇文章的梳理，能對圖標的分類及設計有更全面深入的認識，從而構建一套完整的圖標思維體系。

微信公眾號：Clip設計夾。每周精選設計文章，專注分享關于產品、交互、UI視覺上的設計思考。

本文由 @Clippp 翻譯發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。