2021-4-2 高勁
看到好的圖標我們會習慣性地截圖保存，但隨著收集的圖標越來越多，會發現對圖標的分類會變得越來越混亂…做設計時也不清楚到底該參考或運用哪種風格最合適。來看看如何解決這些問題！
圖標是基本但重要的表達元素，在 UI 設計中有著不可替代的作用。
常見的分類是簡單的線性分類，缺少立體化的圖標分類思維。文章通過梳理來幫助大家對不同類型及風格的圖標有一個體系化的認知。
對圖標進行分類時，普遍會遇到的問題是一個圖標有多種風格。例如下面這個水滴圖標，樣式很簡單，但可以劃分到多個類別中。
面對這樣的問題，推薦使用系統性的結構來劃分圖標類別：
利用這種結構層級，可以明確定義圖標類別。
圖標的大小取決于具體功能。例如帶有漸變和陰影的圖標看起來很酷，但把它縮小到 16px，這些酷炫的效果都無法呈現出來。
在對圖標歸類時，首先要考慮圖標用在什么位置需要多大尺寸。這里將圖標分為兩大類：
確定圖標尺寸后，進一步細分圖標類型：
每個類型對應的圖標繪制方法看 → https://www.uisdc.com/zt/icon-drawing-guide
利用這種簡單的分類方式就能避免圖標發生重疊。另外擬物化這種細膩的風格不適用于小尺寸圖標中，所以在小圖標分類中沒有展示。
圖標尺寸越小，展示的細節越有限。相比于大圖標，小圖標的尺寸有一定局限性，圖標組成包括標準和容器兩種。
大圖標利用尺寸上的優勢能展示更多內容，分為多種組成形式。
簡單的圖像可以更具包容性。圖標的尺寸越小，越考驗設計師傳達信息的能力。
標準面性圖標
面性圖標易識別，適合應用在小尺寸圖標中。
關鍵點：
帶有背景色的面性圖標
彩色背景為簡約設計帶來了更多可能。通過這個技巧使面性圖標更友好，更具吸引力。
關鍵點：
標準線性圖標
線性圖標因為簡潔性和現代性而受到用戶的歡迎。隨著屏顯越來越清晰，我們可以更加大膽地使用線性圖標。
關鍵點：
雙色線性圖標
設計小尺寸圖標時，必須放棄細節并強調簡單的形狀。但當使用一種顏色效果不太理想時，可以考慮添加一些顏色。
關鍵點：
線面結合擁有更多細節，提升用戶的愉悅感。
關鍵點：
扁平化圖標既簡單又巧妙，表達品牌形象的同時具有豐富的內涵。
關鍵點：
大尺寸圖標在界面中使用較少，更多用于產品標識或品牌宣傳。
標準線性圖標
在設計任何圖標前，都可以先創建一個線性輪廓，確保形狀看起來足夠美觀后再添加顏色。
關鍵點：
漸變線性圖標
添加一些漸變能讓原本單一的線性圖標賦予更多的個性。
關鍵點：
等距線性圖標
2.5D 圖標做起來會花費很多時間，但效果往往會很好。在設計汽車、房屋、家具等實體產品時，建議優先使用 2.5D 圖標。
關鍵點：
手繪線性圖標
隨著設計趨勢向簡約化、扁平化發展，很多設計師喪失了手繪圖標的能力。實際上手繪圖標讓品牌更真實甚至更有趣。
關鍵點：
斷線圖標
標準的線性圖標看起來可能會很單調，而簡單靈活的斷線處理能為圖標增加更多個性。
關鍵點：
雙色線性圖標
關鍵點：
確保兩種顏色具有相同的對比度，否則可能會導致用戶看不清其中一種顏色，因此無法識別完整的圖標。例如左下角的淺綠色對于視力弱的用戶來說就很不友好。
線面結合圖標可以看作是添加顏色后的線性圖標。線面結合具有很強的輪廓，讓圖標能夠清晰可見。
標準線面結合圖標
關鍵點：
帶有背景色的線面結合圖標
關鍵點：
錯位線面結合圖標
當填充色與描邊錯位時，顏色移到右邊圖標左上角留出高光，帶來一種清新的感覺。
關鍵點：
色塊圖標
這種風格的圖標的特點在于并不依賴于顏色，僅將其用于裝飾。
關鍵點：
單色線面結合圖標
關鍵點：
扁平化圖標通常沒有描邊，主要使用形狀和顏色來完成組合搭配。簡潔、友好和適當的細節，讓這類圖標非常具有吸引力。
標準扁平化圖標
關鍵點：
帶有容器的扁平化圖標
嘗試讓圖形打破容器，帶來動態的感覺。
關鍵點：
等距圖標
關鍵點：
半陰影扁平圖標
半陰影圖標是在扁平圖標的基礎上添加半色調陰影，得到更具個性的圖標。
關鍵點：
長陰影扁平圖標
當圖標位于容器中時，可以考慮添加長陰影，主要包括純色陰影和漸變陰影兩種類型。
關鍵點：
擬物化圖標實際上已經包含了大部分的樣式，例如它們是立體的，有豐富的漸變和陰影。
這種風格的圖標看起來與現實生活中的圖標盡可能類似，讓用戶感到更舒適。
關鍵點：
目前絕大多數界面不再有這種風格的圖標，可以考慮使用 3D 建模來實現這種效果。
希望大家能對圖標的分類及設計有更全面深入的認識，從而構建一套完整的圖標思維體系。
文章來源：優設網 作者：Clip設計夾
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務