研究了上百套圖標，總監卻告訴我圖標要這樣畫
首發：UX小學
這是一篇關于圖標設計的干貨文章。內容分為兩點：
1) 主要講述如何快速繪制精致圖標的經驗與技巧，有效提升專業力。
2) 講述團隊內有多個設計師協作的時候，如何制定圖標設計規范，來約束大家繪制的圖標icon畫風一致，讓設計更整體。
回想一下自己也很久沒畫icon，所以這次有點獻丑了！
一、歸納圖標設計原則
設計分析圖標的基礎特征點
動手設計之前，咱們先對完整的圖標集進行下分析。
弄明白在畫整體的系統圖標集合時，各個圖標得具備哪些特征，有哪些切入點，可以作為我們在實際繪制時候的依據。
先來看幾組 iconfont 的案例，看不太清的同學可以戳圖片放大。
圍繞上面這些案例，咱們可以歸納出圖標的幾點設計原則。比如：
1）設計圖標需要考慮延續性，圖標之間互相牽連影響
圖標幾乎不會以單個的形式出現，大多數都是以組歸類。符號整體性與統一性，都是依靠單個 icon 的共性特征建立起來的。
比如 iconfont 中的這組icon，圖標圓形的外輪廓，就保持了一致。其次用戶頭像的代表符號，也很好保持了延續性。
正是這種小特征，共同組成了圖標庫的整體特征。
2）設計手法趨同、圖形內容差異
第二點好理解，設計風格、手法要素需要統一，但是內容傳達的差異必須要拉開，避免圖形趨同導致功能混淆。
比如下面兩個案例，由于過于相近，導致用戶很難理解圖標含義，是天氣，還是設置按鈕，這種情況我們在設計時需要極力避免。
總結來說，就是圖標的共性往往體現在設計手法上，比如顏色、形狀粗細、細節的一致性，這些都是設計風格的統一。
而圖標的特性，往往體現在形狀內容差異，形狀會決定圖標的信息傳遞含義。所以共性要趨同，特性要拉開，這個是設計圖標集的基本原則。
3）功能大于形式，圖形能理解的情況下樣式越簡潔越好
不知道大家是否關注，曾經在設計圈風靡一時的MEB圖標風格，產品圈卻非常冷門，幾乎沒有產品在繼續用這種風格作為功能性質圖標。
該作品來自于網絡圖片，僅作交流使用
因為雖然圖標增加了小裝飾后，顯得有趣精致，但其實也增加了圖標的識別難度以及識別效率，反而背離了圖標的設計初衷。
所以對于系統功能圖標而言，必要的簡潔性，高效的識別率，才是關鍵。
二、如何制定圖標設計規范
規范設定：圖標的設計約束性
說完了設計主張，及基本的特征。接下來咱們開始剖析圖標的設計細節，包括分析制定圖標的系統設計規范，應該從哪些方面入手。
1）規范一：基本尺寸比例
規范的第一點，就是圖標的基礎形狀比例。這個比例，主要是約束長與寬，共包含了四個關系，分別為『 正方形 : 橫矩形 ：豎矩形 ：圓形 』
這四個關系的約束，會讓圖標集里的所有圖標大小，看起來是一致的、統一的。橫矩形、豎矩形這兩個比例，會決定整套圖標的飽滿程度，橫豎比例越一致，圖標整體越飽滿。
這點大家可以自己斟酌，如果是泛娛樂型的產品，icon可以更飽滿一些。如果是偏工具化產品，那么還是可以優先保障圖標的識別度，飽滿程度倒是其次。
圓潤飽滿型：
剛正工具型：
2）規范二：線條粗細、正負形間距
定了比例后，接下里就是對圖標的細節刻畫。對于線性圖標而言，最重要的細節就是線條粗細；對于面性圖標而言，最重要的就是正負形之間的間距。
所以這些核心元素，在圖標的核心線條、核心區域部分，間距樣式都應當保持統一。
通常在移動端@2x內，主流icon的粗細為3px，而4px大多數都是為功能性導航icon，細一點的圖標通常看起來會更精致一些。
當然也有部分產品使用的是2px，比如新版的YouTube，其次還有些較為復雜的icon，單根粗細的線段不一定能滿足其需求，所以還需要制定一條副線的粗細。
細節可以根據產品的調性來定，統一即可。
3）規范三：圓角、角度個性化元素
大比例跟基本元素確定后，也可以制定一些圖標的個性化元素規范，比如圖標的圓角大小、角度位置，等一些特殊的樣式。
像這些個性化的規范，顆粒度可以Case By Case來定義，圓潤還是方正，可以根據產品的視覺風格來定義就好。
這些規范樣式定好，就可以充分的讓圖標集內的圖標，從設計上是保持一致的，且具有特色感。
三、圖標的設計流程
設計方法：自己動手怎么做？
上面講了關于圖標的分析及規范。為了方便大家掌握，接下來咱們就來講講，具體動手做，流程是什么樣的。這里我給個我的步驟作為參考：
1）第一步：繪制好圖標基本網格
第一步，當然是確定好圖標icon的大小，以及上面我提到的基本尺寸比例，四個關系『 正方形 : 橫矩形 ：豎矩形 ：圓形 』 的約束，構建好基本骨骼。
我這里以圖標容器大小為 56x56，預留8px安全間距，圖標最大大小為 48x48。
由于視差關系，圓形在圖標里面的尺寸是最大的，所以圓形的大小為48x48。因為我想圖標飽滿一些，所以正方形的大小我兩邊各減去2，為42x42。
然后再繪制出橫矩形（48x36）與豎矩形（36x48），各線段之間的間距保持一致。
然后各個形狀居中對齊，這樣四個關系『 正方形 : 橫矩形 ：豎矩形 ：圓形 』定好后，基本的容器就制定好啦。
2）第二步：設定圖標基本規范
接著制定好圖標的基本規范，為了方便大家看得清，我這里設定圖標的線條粗細為3px，圓角為6px，干凈簡潔一些，讓它看起來更飽滿。
角度、斷點啥的，我這里就不定義了，因為只是示例給大家看，講一下流程，所以盡可能簡單一些。大家在做練習的時候，也可以嘗試自己去定義一下！
3）第三步：繪制圖標
好了后就可以開始繪制圖標啦。我這里分別繪制十五個，作為示例
然后就是使用路徑工具，根據創意去繪制完善圖標了。繪制的過程中，也可以不斷調整，讓圖標看起來更協調，更飽滿，更容易識別。
花了十五分鐘左右，簡單的十五個圖標草稿就畫好了，接下來咱們開始調整細節。
4）第四步：整體性調整
所有的圖標繪制好了后，咱們就可以整體性的開始打磨細節，把圖標形狀的一些折角處、大小樣式調整一致，讓圖標的節奏更清晰，整體樣式更統一。
這樣一組精致的系統icon，就繪制好啦。
接著咱們也可以加點特色風格進行嘗試，比如 填充一個顏色 。成功晉升美團設計師。
當然細看的話，圖標部分細節還是有點糙，其實還可以再調調，但這個主要做示例用，所以這個程度應該也可以。希望大家自己在做練習的時候，不要偷懶。
四、圖標庫下載
設計資源干貨下載
上面講了很多方法經驗，文末給大家來點實際的。
我珍藏了很多較為不錯的大廠圖標集合庫，日常在畫圖標沒靈感的時候，就會打開看看這些，參考一下。
文件都是矢量格式的，編輯方便，還很全面。今天拿出來送大家白嫖了。
鏈接：https://pan.baidu.com/share/init?surl=yjGooYewfnHUx7xakLwSew 提取碼：dea5
作者公眾號：UX小學（ID：hello-uxd）
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）