在圖標繪製中，優質的圖標需要符合什麼樣的展現效果呢？我們又需要依照哪些流程進行繪製呢？筆者將結合這些問題展開解答。
借著疫情在家的休假時間，將平時用到的一些零零散散的圖標繪製方法與思路進行了一次全面的匯總與沉澱，一起來看看吧！
從實習期間畫一組圖標的無從下手，每一個圖標看起來都像是散裝的一樣，到後來慢慢學習與練習，到現在變得了解了圖標的繪製流程，過程也是比較麻煩，因為很少有全面的圖標講解文章，都是看一篇懂一點，然後在揉到練習當中，本篇文章儘量將圖標進行細緻一些的流程說明，有不足之處還望指教。
01 圖標的可用性
圖標可用性，顧名思義就是圖標繪製出來是否能被用戶所看懂並快速識別，是否可以為業務賦能。為此我總結出了四條圖標繪製的評判標準。
1. 凸顯性
用戶是否能在某頁面上迅速找到該圖標，凸顯性的目的是可以快速查找，幫助用戶做選擇。圖標在識別的速度上遠遠大於文字，所以在一些頁面中的重要功能使用圖標的目的是為了吸引用戶的注意力，讓重要功能得到凸顯，提高重要功能的點擊率。
2. 可識別性
圖標的目的是要讓用戶猜出他看到的圖標所表達的意義，有什麼作用，以及點擊後會出現什麼樣的場景，發生什麼樣的事情。所以一個圖標的好與壞最重要的因素就體現在這裡：圖標的可識別性與可預知性。
影響圖標可識別性的三點因素：
視覺複雜性：圖標的細節與組合圖形的元素熟悉性：圖標中圖形所表達語義的熟悉程度具體性：圖標或者圖標中的圖形與現實生活中物體的相似程度
3. 美觀度
圖標是否美觀，對用戶是否有足夠的吸引力。在《設計通用法則》一書中有一條設計法則是：美即適用效應，不管任何事物，美麗的外表都會給人帶來好感，讓人覺得這種事物在任何方面都非常美好。包括談戀愛也是：始於顏值不是嗎？作為設計師，把一件事物美觀化是一件終生的必修課，用戶對圖標或者界面的第一印象就是始於顏值。
4. 業務屬性
圖標是否符合業務屬性，是否可以喚起用戶的使用情緒，提高點擊率，起到為業務賦能的作用。在界面中，我們設計的圖標最終目的不只是讓用戶覺得它美觀，而是要為我們的產品賦能，什麼是為產品賦能呢？通俗來說就是使圖標能夠提升點擊率從而給公司創造收益。
圖標如何為產品賦能呢？
符合產品與業務屬性。比如如果是兒童類產品，圖標就要圓滑，多彩，看起來萌一點的感覺，如果是金融類的產品就應該使用微圓角，直角，中性色，金色來代表金融的莊嚴感與高級感。喚起用戶的使用情緒。比如在大眾點評app中，有關與食品的圖標都使用橙色的擬物，因為暖色可以給人們帶來食慾感，微擬物配合暖色系就可以喚起用戶對食品的情緒感。引導用戶點擊，提升點擊率。想要讓用戶點擊一個內容那必須要有足夠的吸引力吸引用戶去點擊，一般來說美觀度越高趣味元素越多的圖標可以佔據大部分的吸引力，一個圖標在頁面中所佔的比例也會影響對用戶的吸引力，合理的文案搭配也會吸引用戶去點擊，比如優惠信息，新功能提示等。
02 圖標的類型
1. 線性圖標
線性圖標，顧名思義，即圖標是由直線、曲線、點在內等元素組合而成的圖標樣式。線性圖標具有辨識度高，清晰唯美，簡約易看等優點，線性圖標不會對頁面造成太多的視覺幹擾。缺點是：線性圖標的創作空間較少，太複雜的線性圖標看起來會讓人感覺到累。
2. 面型圖標
面性圖標，即使用對圖形內容進行色彩填充的圖標樣式。
面型圖標是現實生活中物體的縮影，優點非常多，比如表意能力強，細節豐富，色彩豐富，情緒感強，視覺突出，創作空間大等，面型圖標可以讓用戶迅速定位圖標位置，快速預知點擊後的狀態。
但是面型圖標在頁面中不可過多出現，否則會造成頁面臃腫，難分主次，用戶視覺疲勞。
3. 混合型圖標
在設計圖標類型的時候，不一定局限於單純的線性與面型，也可以兩者結合，讓圖標即有線性描邊的輪廓，還有色彩填充的區域，混合型圖標可以讓頁面變得更加有活力，同時還可以吸引用戶的注意力，美觀與創意性強。
但是混合型圖標在商業產品中要謹慎使用，因為使用不當會讓頁面變得雜亂不堪，用戶無法識別圖標表達的語義。
03 圖標的色彩
1. 色彩情緒
色彩情緒即顏色心理，指不同波長色彩的光信息作用於人的視覺器官，通過視覺神經傳入大腦後，經過思維，與以往的記憶及經驗產生聯想，從而形成一系列的色彩心理反應。在任何場景下合理使用色彩心理可以吊起用戶情緒，還可以讓用戶產生聯想進而快速識別。
在設計圖標的時候，合理的運用色彩情緒，會使圖標更具有科學性，可以讓用戶在使用的過程中更加自然、舒服，同時也會增加用戶的識別速度喚起用戶的使用情緒。
色彩情緒表
2. 配色方法
在配色時，我們採用更具備科學性、更符合人類感官的 HSB 系統進行配置。
在根據主色配置漸變色時，我們經常是在主色的基礎上加白或者加黑。但是只加入大量的白或者黑就會改變原本色彩的明度與飽和度從而畫面顯得霧蒙蒙的不夠清晰通透，正確的做法是在給主色變亮減暗的同時改變主色的飽和度，在hsb色相條中，最亮的三個顏色分別是，藍紫色，青綠色與黃色，如果需要加亮主色就在混白的同時將藍色像青色改變色相，如果需要減暗則是相反，這樣在調製漸變色變化的過程中不會出現太髒的顏色。
04 圖標的配色方案
1. 常見的色彩搭配
中性色（黑白）+主色、主色+點綴色、主色+透明度、單漸變、雙漸變錯層、撞色疊加穿透等效果。一般常用的就是中性色+主色、主色+點綴色。
2. 點綴色配色
互補色：互補色就是在色環上距離180°的色彩，形成具有視覺衝擊力的色彩。近似色：近似色是在色環上距離45°左右的色彩，形成的配色效果風格和諧統一。對比色是在色環上120°左右的色彩，可以產生較為強烈鮮明的視覺效果。
05 圖標的繪製規則
1. 像素對齊
我們在繪製圖標的時候應該將圖標的每個像素儘量對齊於像素點，這樣導出圖標時像素的邊緣不會出現鋸齒，不會出現過於模糊的情況。
通常在繪製時我們應該去除繪製軟體中x與y軸，寬（w）與高（h）的小數點，這樣就可以避免無法對齊像素的情況。
2. 圖標參考線
在繪製兩個或者以上的圖標時，為了避免多個圖標出現大小不一的情況，我們應該使用由谷歌材料設計語言提供的圖標參考線進行繪製，使用圖標盒子可以讓一整套圖標在視覺效果上更加統一和諧，不會出現一大一小一長一短的情況。
使用方法
先繪製一個152*152px的正方形，一個176*176px的正圓形，一個寬176*128px的水平矩形和一個128*176px的垂直矩形，圓角為4px，然後將這個四個形狀進行水平居中對齊，之後得出一個圖標的參考線。
在寬度相等的情況下，正方形的面積要大於正圓的面積，所以在繪製圓形圖標時應該將圓形的上下左右四個頂點頂齊與圖標盒子正方形區域的四條邊，在繪製方形圖標時應該將方形的四個角點頂齊與圓形參考線的外圍邊，在繪製橫向矩形與縱向矩形圖標時，應該將圖標的左右邊或者是上下邊控制在正方形的參考線之內，這樣矩形圖標繪製出來會更加的圓潤，相對於其他的形狀圖標更加匹配。
3. 可訪問性
我們繪製的圖標必須要保證清晰度，可辨別性。不管是在強光下還是正常光下都需要良好的可讀性。
這就需要圖標不論是自身元素之間的對比度還是和頁面底板背景之間的對比度都需要很好的可讀性。
我們檢測圖標的可讀性通常要將圖標的背景色底板在黑色和白色之間進行切換對比，不論是黑色還是白色的背景都可以看清圖標的全部細節，還需要確保圖標中的每一種顏色都是可見的。第二就是將圖標拿到強光下進行觀察，在強光下是否可以看清圖標的主題結構，圖標還是否有足夠的辨識度。
在繪製圖標時，我們可以參考WCAG 2.1：圖形和用戶界面組件的對比度至少為3：1的標準進行相應配色，以達到良好的可視狀態。
https://webaim.org/resources/contrastchecker/（可訪問性測試）
4. 統一性
在繪製多個類型相同的圖標時，我們需要注意這一套圖標合集需要在視覺上保持統一性，在一整套產品中，會有很多種圖標，但是圖標的功能不一樣，所表達的內容也不同，這時，圖標一致性的意義就體驗出來了，根據格式塔原理中的相似性原則：人們會將如元素彼此相似的東西感知為一組。
這也意味著如果具有相同功能、含義和層次結構級別的元素，則應在視覺上應保持統一匹配。我們傾向於將彼此相似的元素視為同一個分組，相似性可以幫助我們組織和分類頁面裡的元素對象，並將它們與特定的含義或功能相關聯。有不同的方法可以使元素被認為是相似的，這些方法包括顏色、大小、形狀、紋理、尺寸和方向的相似性。
圖標內容的統一會讓用戶制完圖明白相似的圖標所所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們在繪標後還需檢查線條的粗細比重，邊角的大小，配色方案，細節層次和設計元素在整個合集中是否是不變且一致的。
5. 圖標呼吸感
呼吸感的意思就是適當留白，在設計中，適當的留白可以突出主體內容，讓內容具備易看性。
不管是圖標還是界面，元素與元素之間都應該存在一定的間距，在圖標的繪製過程中，我們應該注意圖標元素之間的間距不宜過近，元素也不宜過多，圖標是一個物體的簡略縮影，目的是為了表達內容，讓用戶快速理解。
但是在有限的空間中，太過複雜的細節會影響圖標的識別速度，因此在圖標的繪製過程中應該刪除所有無法傳達圖標意義的元素，避免使圖標變得太過複雜難以識別。
6. 合理運用布爾運算
布爾運算在設計行業中被得到廣泛的運用，比如工業設計，影視後期，logo設計等，布爾運算具有一致性與規範性的優點。我們在設計面型圖標的時候可以合理使用布爾運算進行繪製，這樣繪製的圖標具有吸引力和說服力。
7. 頁面層次感
在頁面中，有需要吸引用戶點擊的圖標，也有起到輔助作用的指示圖標，還有引導用戶操作的圖標，這些圖標在頁面中佔據著不同的地位，在所有圖標中，有色圖標強與無色圖標，多色圖標強於單色圖標，面型圖標強於線性圖標，帶背景圖標強於無背景圖標，在設計圖標的時候應該根據業務需要進行視覺強弱不同的設計。
8. 業務屬性
如文上所說圖標採用與業務相符合的色彩搭配會讓用戶在使用的過程中更加自然、舒服，同時也會增加用戶的識別速度喚起用戶的使用情緒。一個圖標繪製出是否具備商業價值也恰恰體現在這裡。
如下圖所示，這兩組圖標作圖是鬥魚直播APP的截圖，右圖是京東金融的圖標截圖。這兩款產品的業務以及所對應的用戶群體完全不一樣，鬥魚是一款直播的產品，直播面向的用戶群體是青少年，所以整體的產品調性是：萌、活潑、多彩、絢麗、時尚等，鬥魚直播的圖標繪製需要面向年輕人，色彩的高飽和與有趣的元素來抓住用戶的眼球。
但是京東金融是一款理財的產品，面向的用戶則是中老年，大多數都是有一些存款的人，這些人不需要鬥魚那樣花裡胡哨的元素，他們只在乎這個產品是否安全，利息是否高，所以京東金融這個產品的整體風格就需要偏向於：安全、高端、大氣，這樣才能給用戶從視覺上營造信任感。
我們設計圖標時通常使用產品的調性作為主風格，但是像美團淘寶這些業務眾多的產品中，我們就需要根據產品下的細分業務進行風格定位，然後設計中相應融入產品的品牌元素，使用合理的色彩情緒等讓圖標變得更符合業務的風格。
9. 最終測試
當我們的圖標繪製完成後需要測試這一組圖標的重心是否統一，常用的方法是使用標準的正圓形和正方形來和所有繪製的圖標進行對比，保證所有的圖標重心相近，視覺統一。也可以採用不同角度的觀察法，可以從上下左右四個角度去觀察圖標，看看圖標在不同的角度下重心是否統一。
06 一組圖標的繪製流程
1. 情緒板
情緒板是在執行一項設計操作之前非常重要的一個步驟，情緒板並不是像設計平臺展示作品集裡那樣放幾張圖片，幾個關鍵詞，而是一套對接下來設計的一個風格走向定位，根據不同的用戶人群，不同顏色的色彩情緒，不同產品的業務，將用戶調研的結果，產品的背景進行總結與思考，定位接下來的設計風格。
2. 繪製流程
1）選取照片
觀察生活，對想畫的圖標進行照片實物造型的提取。圖標是對生活中事物的精簡概括。利用現實照片作為設計參考可以讓繪製出的圖標更真實，辨識度更高，還以做到差異化設計。
2）造型勾勒
使用矢量軟體的基本圖形與鋼筆工具描著照片進行輪廓的繪製。
3）簡化優化
簡化草稿輪廓的結構，只保留一個物體的主要特點元素，刪除多餘元素。優化圖標細節，需要時將圖標線性轉面型。
4）業務屬性
根據業務需要，調整圖標風格，添加質感。
3. 制定規範
無規矩不成方圓，規矩的出現可以讓一切雜亂的東西變得合理，統一起來。在設計上也是如此，規範具有統一輸出，指引細節、便於查看的好處，規範就是一組圖標中的規矩，所有圖標的繪製都按照規矩來，最終的成品就會顯得井然有序。
在制定規範時，我們通常先繪製出一個符合業務風格的圖標，然後根據這一個圖標定製後續的圖標規範，最基本的規範便是描邊寬度，斷點位置、圓角大小，主色輔色，漸變角度，點綴元素，光影角度等，在一組中的圖標需要在這些圖形屬性中進行統一，這樣的圖標雖然形狀不一樣但是在視覺上看起來是是屬於同一合集的。
制定規範一般分為三個過程：
拆分細節：將圖標中的細節元素進行分解，在規範中制定細節元素的使用法則。風格定位：根據產品調性，業務屬性在規範中制定相應的色彩心理、質感風格。功能劃分：功能相近的包括色彩、質感應該採取相近性。本文由 @莫以浮笙 原創發布於人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議