起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識還不會畫圖標，這篇解答你所有問題！
編輯導語：在從事設計行業過程中，或許有很多關于圖標的問題困擾著設計思路。圖標往往包含很多設計因素，如何搭建一個完整的圖標體系是非常值得考慮的問題，本文作者收集關于圖標設計問題，并進行一一解答，值得閱讀學習。
從事設計很多年，是否還有很多與圖標相關的問題困擾著你。比如：我們怎么去評判一個圖標的好壞？畫一個圖標很簡單，但是繪制一組圖標時不知道該如何平衡，或是公司讓我搭建圖標體系，不知道該準備什么？…
下面是我收集到與圖標相關的問題，如果你也有相同的疑惑，那么接下來我會通過將拆解國內外的大廠的圖標體系為你解答，內含超多案例拆解！！
1. 圖標概述
在解答問題之前，我們先來看看。圖標的起源和發展是怎樣的，以及為什么需要在界面上增加圖標，它真的重要嗎？
2. 圖標定義
圖標是什么呢？
從廣義上來看具有指代意義的圖形符號都叫做圖標，圖標具有高度濃縮、快捷傳達信息且便于記憶的特性。應用的范圍也很廣，軟硬件/網頁/社交場所/公共場合無所不在。比如：男女廁所的標識/各種交通標志（禁止停車/掉頭）都是我們常見的標識。
從狹義上來看特指計算機中的標志符號，比如數據標示/命令選擇/狀態指示等，都是通過對現實世界中事物的概括和隱喻，來引導人們在計算機中進行操作。這樣說或許比較抽象，舉個?：桌面上的垃圾桶，其實模擬的就是現實中垃圾桶的使用方式，我們可以通過把應用扔到垃圾桶的方式對應用進行刪除。
對現實隱喻的良好表達，有利于我們快速識別，這一點體現在設計的很多方面。從某種角度看，就是遵從用戶原有的認知習慣。
3. 圖標起源
“Glyph”一詞是源自于排版領域，它源自于希臘語，含義為“雕刻”。是一些約定俗成的符號或者字符，所以最早的字符體系是包含數字，字母或者兩者與圖形的結合。在現代的數字設計中，人們漸漸將文字，數字和圖形（圖標）區分開了。所以在設計中我們不光有圖標規范，還會有一套文字的規范。
4. 圖標的重要性
古代的字符主要是為了表意，那么現在每個國家都有了語言和文字，為什么我們還需要圖標呢？因為圖標也是很重要，且不可替代的，從三個角度來理解：
（1）全球通用
圖標可以作為國際通用語言，例如商場導視中收銀臺圖標、出口圖標、衛生間圖標等，又或者是日常手機里使用的那些App圖標，如微信、電話、短信等。這些都已經在國際上達成了共識，所以即使在國外的商場迷路，我們也可以通過圖標找到廁所的定位。
（2）節約空間
圖標比文字更節省空間，如果能用一個圖標清楚表達含義的時候，就不需要用文字，比如用一個“叉”代表“關閉，“向左的箭頭”代表“返回”。
（3）快速定位
由于圖形化的內容比枯燥的文字更能吸引人的視線，圖標可以用它獨特的形狀和顏色讓人快速定位。因此當我們需要對某些信息進行突出時，可以使用圖標進行輔助。
5. 圖標的組成
從整個圖標體系來看，圖標可以分為八個部分，分別是：
下面我將對每個部分元素進行拆解，幫助大家更好的理解。并分析每個部分需要注意的細節和可能會遇到的問題。
一、圖標柵格
1. 柵格的組成
柵格的作用有點像繪畫時用到的參考線。他可以幫助我們判斷不同形狀圖標的大小，保持圖標的一致性。
如果將柵格繼續拆解，會分為以下5個組成部分：
- 網格
- 安全區域：可以繪制圖標的區域
- 出血位：邊緣留白，防止切圖時裁切到圖標
- 正切線：旋轉圖標的參考線
- 關鍵形狀：涵蓋了常用的基本幾何形，繪制時可以以這些幾何形作為基礎形。在繪制關鍵形狀的時候需要考慮不同形狀的視覺重量，這里我們可以直接參考（抄）大廠的規范。
2. 案例拆解
MD是以24像素柵格，作為柵格繪制的模版。
出血位為2像素，防止圖標被裁切。
有四個輔助形狀（尺寸如圖），包括正交線。MD的柵格規范，是我對比多個規范后包含內容較全，且通用的，同學們可以按照這個尺寸繪制，柵格的繪制建議使用0.1/0.2像素，不會影響使用時對圖標的識別。
相同半徑的圓會比正方形看起來小，所以在繪制柵格的時候就要對稍稍對圓形進行放大，使他們對視覺面積保持一致。
3. 多案例對比
在調研時，我們參考了MD/IBM/Ant /Shopee，接下來我們看看他們之間的異同。
比較相似的點就是，他們都會最大的尺寸作為繪制柵格的基本尺寸，其他尺寸圖標可以在此基礎上縮放。
出血位一般為2px，關鍵形狀一般都包括一個橫向的矩形，一個縱向的矩形，一個圓形，一個正方形，4個。在此基礎上Ant增加了三角形。MD/shopee/Ant增加了一些較小的圓形，這些較小形狀其實是可以輔助我們繪制極簡圖標（比如箭頭）。
不知道是否有同學存在疑惑，同一套圖標體系下，難道箭頭這么簡單的圖標也要做24px這么大嗎？其實不是的，柵格中就解決了這個問題。我們可以利用較小形狀，只需保證外邊框都是24px就好。具體如何使用會在接下來的問題中解答。
4. 柵格小結
- 一般情況一套圖標庫會使用最大尺寸圖標作為柵格模版的繪制尺寸，在實際使用中，可以對柵格進行等比的縮放。
- 增加關鍵形狀可以幫助我們繪制一些包含基礎形狀的圖標，如相機圖標就是由一個偏扁的長方形延伸而來。如果你的圖標體系中有特殊的幾何形也可以增加到柵格中，如Ant就增加了三角形在圖標柵格中。
- 增加較小的關鍵形狀可以幫助我們可以繪制相同尺寸下的小圖標/極簡圖標，如箭頭/加減符號等。
5. 使用柵格時遇到的問題
提問1：“如果完全按照柵格來畫，我感覺視覺重量不一致”。
回答:
出現這個問題，可能是由于我們需要一個正方形的圖標和長方形的圖標放在一起，會感到不和諧。當圖標以組的形式存在，為了追求圖標與圖標之間視覺平衡?？梢詫D標的外形狀適當進行統一（但也要保證圖標的表意）。如果希望圖標的適配度更高，可以在畫的時候偏方一些。如上圖Twitter和IG的做法。
回答:
除此之外，在繪制圖標庫時建議讓圖標符合柵格。如果圖標本身的含義是偏瘦長的,就讓它符合網格.如果圖標本身該突出的就打破網格。
回答:
如果圖標本身就十分細長，該怎么適配柵格呢？不能強行拉寬，會使圖標變形?？梢詫D標旋轉45度，這樣既能符合圖標本身的含義，也能使圖標更加飽滿。
提問2：“繪制多個圖標時，如何保證復雜度的統一？”
回答:
當復雜度可控, 由簡至繁排列出不同復雜度的圖標來對比，然后從中挑選出復雜度相似的圖標作為一組。
回答:
當復雜程度不可控-極復雜圖標，不一定參考單個關鍵形狀來畫，可以綜合參考多個形狀，但最好不要超出安全區。
回答:
當復雜程度不可控-極簡圖標 ：參考較小關鍵形狀畫/按照設計系統的最小基數的倍數來畫。
設計基數是設計體系中的最小單位，一般為2/4px。
回答:
畫異形圖標的時候，可以借助不同的關鍵形狀線作為參考，做到盡量把空間撐滿。如下圖中，風車頂部和左右兩邊都緊貼著關鍵形狀。
回答：
Shopify建議使用光學對齊而不是物理對齊，當我們畫這個照相機時，應該先基于關鍵形狀畫。再在頂部增加閃光燈的元素，而不是把整個相機圖標居中。
同理，Shopify在繪制這個設置圖標時，也考慮到了視覺居中的因素。左上邊的面積偏大，右下邊的面積偏小。所以在對齊時也并沒有使用物理對齊，而是將圖標稍微往左下移動（具體移動多少像素，還是靠設計師自己來判斷啦~）
由于Shopify使用的是面性圖標，所以一旦有視覺上的偏移，圖標之間的差異會很大，平衡容易被打破。所以在對齊方式上尤為注意，如果你對視覺重量還不夠了解，可以以此作為學習的資料。
回答:
盡量使用幾何形進行切割，如果是帶弧形的圖標，可以先用直線路徑勾勒形狀再加圓角的形式。
二、圖標尺寸
當你開始一套系統圖標的設計前，除了準備繪制圖標的柵格模板，還需提前規劃好一套圖標可能包含的尺寸，以應用于界面設計中。
需要注意同樣含義的圖標在不同大小下，也可能會有不同的展現形式。比如48像素的復雜圖標，縮小到12像素肯定會難以識別。同理12像素的圖標放大到48像素又會顯得單薄，不夠飽滿。
1. 案例拆解
（1）IBM·Carbon Design
IBM的圖標體系中包含以上四個尺寸（16/20/24/32），其中最大尺寸32px為繪制尺寸，其他尺寸由32px等比縮放的來。那么這些尺寸在前期是如何制定的呢？他們之間又有什么關系呢？
我對不同尺寸下圖標的屬性進行羅列，可以發現除了圖標尺寸，圖標的線條粗細，圓角大小，甚至間距都是成比例的?？梢缘贸鲆粋€結論：IBM的圖標應該是先繪制最大尺寸，然后定義好其他圖標尺寸就可以進行縮放了。
在使用這種方式時，我們需要注意圖標的圓角和描邊盡量不要出現兩位小數點之后的數字，最好是整數或者點五整數。
（2）字節·IconPark
字節這一套圖標包括12/24/36/48四個尺寸，繪制尺寸為48也是最大尺寸。
羅列出字節各個尺寸的圖標屬性，會發現全都是整數。所以當我們在搭建圖體系的時候也可以參考，但是隨之而來產生的影響就是Iconpark與其他圖標庫相比，相同大小的圖標描邊會更粗，圓角也更大。
（3）阿里·AntDesign
阿里的圖標規范中圖標的繪制尺寸為1024像素，單個格子為64px。可等比縮放至12/16/20/24/32四個尺寸。
2. 圖標尺寸小結
設定一套圖標體系時，圖標尺寸一般為4的倍數（常見的有12/16/20/24/32，具體使用多大的圖標也需要根據產品風格來定義）。先繪制最大尺寸圖標然后對其進行縮放即可。
為什么使12/16/18/24px的尺寸呢？因為我們的圖標很多時候需要和文字搭配使用，無論在移動端還是PC端。文字一般也是使用這樣的字號，最小的文字一般為12px，所以圖標也遵循了同樣的規律。
其次一個比較明顯的特征是：移動端的圖標尺寸會比PC端更多，這里也由于移動端需要用到圖標的場景更多更復雜。
三、圖標描邊
在理解描邊的時候，我們也可以將它拆解為更小的元素。影響描邊樣式的因素有：
路徑的類型（開放路徑/封閉路徑），粗細，對齊的方式（向內/居中/向外），端點，連接點。
路徑類型和粗細都很好理解，接下來我會詳細講講端點，連接點和對齊方式會如何影響圖標氣質。
1. 描邊的組成
端點只有在開放式路徑中才會出現，端點分為三種None/Round/Square。也就是沒有端點，圓角端點，方角端點。
圓角端點會使圖標風格更加圓潤可愛，而當希望圖標風格硬朗建議使用無端點（也就是方角），這樣可以更加精確的控制端點位置。
2. 轉角點
這個屬性大家平時可能都沒有注意到，那么其實他定義的是路徑轉角的樣式，在Figma中稱之為“Join”。
連接點也分為三種分別斜接/斜切/圓角。
轉角點中的圓角其實可以作為一種圓角類型，區別在于圖標圓角是基于路徑的圓角，而round是基于路徑連接點的圓角。通過設置round我們可能獲得一種精致的小圓角。
3. 對齊方式
首先我們知道圖標可以劃分為填充圖標和線性圖標，所以在描邊這個屬性下暫且不討論填充圖標。
線性圖標描邊的對齊方式可以分為向內描邊，居中描邊和向外描邊。從下圖我們就可以發現同樣的路徑用不同的描邊方式，風格的差異是很大的。
所有的描邊類型都僅適用于閉合路徑，因為在大多數的軟件里（AI/Sketch/Figma)開發式路徑只支持居中描邊。
那么不同的描邊類型有什么差異和優劣呢，接下來我會帶大家繼續分析。
（1）內描邊
優勢：當需要轉變為填充圖標時，可以保持圖標的一致性。路徑貼合網格，所以圖標本身可以保持整數。
劣勢：封閉路徑和開發路徑無法保持一致，可能需要我們手動調整。
（2）居中描邊
優勢：可以在眾多軟件中保持封閉與開發路徑的一致性，同時支持連接點（Jion）的設置。
劣勢：不能保證像素完美，因為描邊寬度是往路徑兩邊擴展。轉曲后圖標本身可能出現多位小數點。
雖然像素完美一直是設計師們在追求的，在分辨率越來越高的今天，也未必需要再去追求絕對地像素對齊了。這點也越來越多的出現在國外大廠的文章中，如下圖IBM的小蜜蜂就使用了1.75的邊距。
（3）外描邊
優勢：由于外描邊是在路徑向外擴展的緣故，這種描邊方式會放大路徑的圓角，使其更加圓潤。
比如像下圖這種徽章圖標就不適合使用內描邊，線段之間擠壓重疊會使圖標出現難看的尖角。
劣勢：使用外描邊會擴大圖標本身的尺寸和圓角大小，需要設計師在繪制路徑的時候提前預判。所以，總的來說會難度更高。
（4）描邊類型小結
專業的設計團隊會使用內描邊，并轉曲。好處是可以保證圖標本身為整數，但是由于開放路徑不能使用內描邊，所以可能需要設計師手動調整由于描邊類型不一致產生的差異。
但是如果沒有專門維護圖標組件的設計部門來說，使用居中描邊可能是成本更低的方式。
4. 案例拆解
（1）IBM·Carbon Design
IBM的圖標基于32px的等比縮放至24/20/16px不同尺寸，縮放時描邊粗細也隨之等比縮放。
（2）蝦皮·Shopee Design
幾個相鄰大小的圖標共用一個描邊粗度，好處是可以保持描邊整數。劣勢也顯而易見，粗細的不等比，可能使圖標風格無法保持一致。
（3）描邊粗細小結
- 在圖標體系的搭建中更建議使IBM的方式，描邊粗細隨著圖標大小等比的變化，對于品牌風格的一致性也更有利。
- 關于描邊如何保持整數的方式，前面也有介紹過。需要設計在前期就定義好不同大小的圖標描邊/圓角/間距的情況，而不是繪制圖標時才開始考慮。
5. 在選擇描邊時遇到的問題
提問1:“復雜圖標如果用規范里的描邊粗細，顯得很擁擠”。
回答：當圖標過于復雜，我們可以通過兩個方式
- 外層使用規范粗細，內層使用較細地描邊。比如Ant的圖標，會定義不同的粗細度。當他們在繪制1024px的圖標時，就可以選擇不同粗細。
- IBM的解法，為了保證圖標的可讀性，使用其他尺寸的描邊粗細，也可以盡量保持一致性。
提問2:“如果圖標內外兩個形狀，里面的圖標太小，用同樣的描邊，圖標很難識別”。
回答：特殊情況，內部的形狀過小可以采用上面同樣的形式?；蛘咧苯訉⑤^小的圖標轉為填充（圖例來源IBM）。
四、圖標間距
1. 間距的類型
間距出現在很多地方，有時候我們可能容易會忽略它。下面列舉了幾種常見的間距：
兩個形狀之間的間距，兩條邊之間的間距，以及兩個點之間的間距。
2. 案例拆解
（1）Google·Material Design
MD的規范里定義了最小的間距是1.5px。
（2）字節·IconPark
字節的圖標庫建議間距不得小于描邊粗細，極端情況可以使用描邊1/2的寬度。同時建議使用間距都是用偶數。
所有的間距都應該遵循：明顯分開或準確相連，不要似連非連。
3. 間距小結
（1）當線條過于密集的時候就要考慮負形空間了，擴大的方式有3種：
- 簡化圖標形狀，減少線條
- 使圖標的線段之間相連（可以節省一定的空間），或者分離
- 如必要，也可以讓圖標的內部形狀使用更細一級的描邊
“負形空間”是什么意思，就是一個網格繪制了圖標本身之后，剩余的留白叫做負形空間。留白多呢顯得圖標不夠飽滿，留白少呢又顯得圖標擁擠難以識別。
五、圖標圓角
1. 圓角的組成
為了方便大家理解，圓角我也拆分成多種常見的類型：無圓角/正形圓角/負形圓角。
2. 案例拆解
（1）IBM·Carbon Design
規范中描述可以使用2px/4px/6px的圓角大小，且規定必要時可以使用2的倍數的，使圖標能描繪出對象的真實樣式。
（2）Google·Material Design
MD中定義0px/2px/3px/4px作為常用的圓角大小。
同是MD也提到為了如果圓角會影響對真實世界中物體外觀的識別時，我們就不應該倒角。這是各大廠設計體系中一致在強調的準則。比如下面紙張折疊時，折角處就不可能會出現圓角，這時我們就應該去除圓角。
（3）字節·IconPark
Iconpark公開的繪制規范中提到，圓角使用的是1px/2px/3px。而經過實際對圖標庫中的圖標進行測量，發現1px的圓角使用的其實是我們前面說到的”round”轉角連接方式。
（4）蝦皮·Shopee Design
與大部分規范類似，shopee也使用了2的倍數作為圖標圓角。但是范圍給的更廣一些，原因是蝦皮的圖標尺寸相較與其他平臺也會更多一些。
3. 圓角小結
- 圖標繪制的關鍵是我們選擇的不論是圖標的形狀也好，圓角大小也好，都是基于物體本身的含義或是空間邏輯。
- 在圓角大小的選擇上，大部分公司都是采用了2的倍數如2/4/6px。除此之外，如果想做出差異性，也有選擇1/2/3px圓角的規范體系，或者是使用“round”的轉角連接方式。
4. 在使用圓角時遇到的問題
提問1:“規范中有多個圓角，我該怎么選擇呢？”
回答：首先還是回到我們繪制圖標的第一原則“圖標元素的選擇應該貼合物體本身的含義”。那么下面可以看到IBM體系中的小汽車/公交車/輕軌列車。同樣是車，但是圓角根據車輛的實際用途來定義的（比如我們常常乘坐的高鐵，由于提升速度，他的車身外觀整體偏圓）。
提問2:“復雜的圖標造型中包含內外多個形狀，圓角該如何選擇呢？”
回答：一般來說內部形狀的圓角不會大于外形狀的圓角，這里其實也是現實中的透視關系保持一致的。如下圖箱子的邊緣就遵循了這一規律。
六、圖標角度
1. 角度的類型
角度不光可以應用到圖標上，同時可以應用在路徑上或是路徑之間的夾角上。
2. 案例拆解
（1）IBM·Carbon Design
首先將45度切分為3等份，然后以15度為最小基數來切分360度。
下面幾個例子，可以幫助我們更好地理解角度在IBM圖標體系中的應用。
（2）阿里·AntDesign
Ant的角度十分特別，在官方網站中提及他們的圖標是參考了美式戰斗機的角度，所以圖標給人以銳利而干練的感受。同時可選擇的角度有20/38/76度。
在實際案例中的運用。
3. 角度小結
- 常見的角度是基于15度的倍數，15/30/45度。同時使用45度可以較好的減少圖標線條出現鋸齒的可能，如果想打造與眾不同的圖標風格，角度也許是可以嘗試的點。
- 角度出現的方式很多，比如線段之間的轉角，圖形上的缺口。我們需要發現它，并使其符合規律。
七、圖標透視
1. 透視的組成
透視可以分為：平視/側視/俯視/仰視等等，在圖標體系中我們一般使用平視為主,因為它的結構更加簡單，即使在小尺寸也能有較好地識別度。
透視選擇的關鍵，還是需要保證一套圖標中的透視角度一致性。
2. 透視小結
- 常見的圖標視圖有：平視/俯視/斜視等等
- 最重要的就是保持整套圖標的視圖一致性
八、圖標顏色
圖標顏色也分為兩種：一種是在淺色（白色）背景下，一種是在暗色背景下。
1. 案例拆解
（1）Google·Material Design
淺色背景：87%的黑色用于需要專注的圖標，54%用于不需要特別關注的圖標，38%用于不可點的圖標。
深色背景：100%的白色用于需要專注的圖標，70%用于不需要特別關注的圖標，50%用于不可點的圖標。
2. 多案例對比
以及不同規范中對于顏色的定義也不太一樣，一般會使用最深的顏色作為圖標庫中的繪制顏色。也是方便我們在使用的時候通過調整不透明度，來滿足不同的場景。
3. 顏色小結
- 繪制圖標庫的時候用同一個主色，而不是實際使用時的顏色
- 在使用時注意深淺背景上的圖標顏色也是有差異的，深色背景下的不透明度更高。
九、結語
最后為大家整理了此次參考圖標規范的網站，方便想要深入研究的小伙伴進行查看。以及我把這些組件庫的Figma圖標源文件也整理到一起了，大家可以通過臨摹參考的方式不斷提高自己把控圖標的能力。
IBM·Carbon Design：https://www.ibm.com/design/language/iconography/ui-icons/design
字節·Iconpark:https://ant.design/docs/spec/icon-cn
Google·Material Design:https://material.io/design/iconography/system-icons.html#design-principles
Shopify:https://polaris.shopify.com/design/design
圖標庫合集：https://www.figma.com/file/7zCzmWCW43Cz3QbUWUSyaY/%E5%9B%BE%E6%A0%87%E8%B5%84%E6%96%99%E6%94%B6%E9%9B%86?node-id=0%3A1
本文由郝小七指導http://www.aharts.cn/u/917803
本文由 @喜寶的設計筆記 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
感謝分享，正打算學習畫圖標呢
贊啊??
謝謝師兄??
受益匪淺～
謝謝老板鼓勵??
其實我還真的不太會畫圖標，這篇文章來的十分及時，感謝
圖標也算是設計基本功啦~還是要多多練習哦????
真的是滿滿知識點的一篇文章，作者幾乎列舉了所有圖標設計的相關問題，并且解答得非常精準。
嘻嘻！謝謝喜歡，也是總結了很多工作中遇到的問題??