編輯導(dǎo)語(yǔ)：在從事設(shè)計(jì)行業(yè)過(guò)程中，或許有很多關(guān)于圖標(biāo)的問(wèn)題困擾著設(shè)計(jì)思路。圖標(biāo)往往包含很多設(shè)計(jì)因素，如何搭建一個(gè)完整的圖標(biāo)體系是非常值得考慮的問(wèn)題，本文作者收集關(guān)于圖標(biāo)設(shè)計(jì)問(wèn)題，并進(jìn)行一一解答，值得閱讀學(xué)習(xí)。

從事設(shè)計(jì)很多年，是否還有很多與圖標(biāo)相關(guān)的問(wèn)題困擾著你。比如：我們?cè)趺慈ピu(píng)判一個(gè)圖標(biāo)的好壞？畫(huà)一個(gè)圖標(biāo)很簡(jiǎn)單，但是繪制一組圖標(biāo)時(shí)不知道該如何平衡，或是公司讓我搭建圖標(biāo)體系，不知道該準(zhǔn)備什么？…

下面是我收集到與圖標(biāo)相關(guān)的問(wèn)題，如果你也有相同的疑惑，那么接下來(lái)我會(huì)通過(guò)將拆解國(guó)內(nèi)外的大廠(chǎng)的圖標(biāo)體系為你解答，內(nèi)含超多案例拆解！！

1. 圖標(biāo)概述

在解答問(wèn)題之前，我們先來(lái)看看。圖標(biāo)的起源和發(fā)展是怎樣的，以及為什么需要在界面上增加圖標(biāo)，它真的重要嗎？

2. 圖標(biāo)定義

圖標(biāo)是什么呢？

從廣義上來(lái)看具有指代意義的圖形符號(hào)都叫做圖標(biāo)，圖標(biāo)具有高度濃縮、快捷傳達(dá)信息且便于記憶的特性。應(yīng)用的范圍也很廣，軟硬件/網(wǎng)頁(yè)/社交場(chǎng)所/公共場(chǎng)合無(wú)所不在。比如：男女廁所的標(biāo)識(shí)/各種交通標(biāo)志（禁止停車(chē)/掉頭）都是我們常見(jiàn)的標(biāo)識(shí)。

從狹義上來(lái)看特指計(jì)算機(jī)中的標(biāo)志符號(hào)，比如數(shù)據(jù)標(biāo)示/命令選擇/狀態(tài)指示等，都是通過(guò)對(duì)現(xiàn)實(shí)世界中事物的概括和隱喻，來(lái)引導(dǎo)人們?cè)谟?jì)算機(jī)中進(jìn)行操作。這樣說(shuō)或許比較抽象，舉個(gè)?：桌面上的垃圾桶，其實(shí)模擬的就是現(xiàn)實(shí)中垃圾桶的使用方式，我們可以通過(guò)把應(yīng)用扔到垃圾桶的方式對(duì)應(yīng)用進(jìn)行刪除。

對(duì)現(xiàn)實(shí)隱喻的良好表達(dá)，有利于我們快速識(shí)別，這一點(diǎn)體現(xiàn)在設(shè)計(jì)的很多方面。從某種角度看，就是遵從用戶(hù)原有的認(rèn)知習(xí)慣。

3. 圖標(biāo)起源

“Glyph”一詞是源自于排版領(lǐng)域，它源自于希臘語(yǔ)，含義為“雕刻”。是一些約定俗成的符號(hào)或者字符，所以最早的字符體系是包含數(shù)字，字母或者兩者與圖形的結(jié)合。在現(xiàn)代的數(shù)字設(shè)計(jì)中，人們漸漸將文字，數(shù)字和圖形（圖標(biāo)）區(qū)分開(kāi)了。所以在設(shè)計(jì)中我們不光有圖標(biāo)規(guī)范，還會(huì)有一套文字的規(guī)范。

4. 圖標(biāo)的重要性

古代的字符主要是為了表意，那么現(xiàn)在每個(gè)國(guó)家都有了語(yǔ)言和文字，為什么我們還需要圖標(biāo)呢？因?yàn)閳D標(biāo)也是很重要，且不可替代的，從三個(gè)角度來(lái)理解：

（1）全球通用

圖標(biāo)可以作為國(guó)際通用語(yǔ)言，例如商場(chǎng)導(dǎo)視中收銀臺(tái)圖標(biāo)、出口圖標(biāo)、衛(wèi)生間圖標(biāo)等，又或者是日常手機(jī)里使用的那些App圖標(biāo)，如微信、電話(huà)、短信等。這些都已經(jīng)在國(guó)際上達(dá)成了共識(shí)，所以即使在國(guó)外的商場(chǎng)迷路，我們也可以通過(guò)圖標(biāo)找到廁所的定位。

（2）節(jié)約空間

圖標(biāo)比文字更節(jié)省空間，如果能用一個(gè)圖標(biāo)清楚表達(dá)含義的時(shí)候，就不需要用文字，比如用一個(gè)“叉”代表“關(guān)閉，“向左的箭頭”代表“返回”。

（3）快速定位

由于圖形化的內(nèi)容比枯燥的文字更能吸引人的視線(xiàn)，圖標(biāo)可以用它獨(dú)特的形狀和顏色讓人快速定位。因此當(dāng)我們需要對(duì)某些信息進(jìn)行突出時(shí)，可以使用圖標(biāo)進(jìn)行輔助。

5. 圖標(biāo)的組成

從整個(gè)圖標(biāo)體系來(lái)看，圖標(biāo)可以分為八個(gè)部分，分別是：

下面我將對(duì)每個(gè)部分元素進(jìn)行拆解，幫助大家更好的理解。并分析每個(gè)部分需要注意的細(xì)節(jié)和可能會(huì)遇到的問(wèn)題。

一、圖標(biāo)柵格

1. 柵格的組成

柵格的作用有點(diǎn)像繪畫(huà)時(shí)用到的參考線(xiàn)。他可以幫助我們判斷不同形狀圖標(biāo)的大小，保持圖標(biāo)的一致性。

如果將柵格繼續(xù)拆解，會(huì)分為以下5個(gè)組成部分：

1. 網(wǎng)格
2. 安全區(qū)域：可以繪制圖標(biāo)的區(qū)域
3. 出血位：邊緣留白，防止切圖時(shí)裁切到圖標(biāo)
4. 正切線(xiàn)：旋轉(zhuǎn)圖標(biāo)的參考線(xiàn)
5. 關(guān)鍵形狀：涵蓋了常用的基本幾何形，繪制時(shí)可以以這些幾何形作為基礎(chǔ)形。在繪制關(guān)鍵形狀的時(shí)候需要考慮不同形狀的視覺(jué)重量，這里我們可以直接參考（抄）大廠(chǎng)的規(guī)范。

2. 案例拆解

MD是以24像素柵格，作為柵格繪制的模版。

出血位為2像素，防止圖標(biāo)被裁切。

有四個(gè)輔助形狀（尺寸如圖），包括正交線(xiàn)。MD的柵格規(guī)范，是我對(duì)比多個(gè)規(guī)范后包含內(nèi)容較全，且通用的，同學(xué)們可以按照這個(gè)尺寸繪制，柵格的繪制建議使用0.1/0.2像素，不會(huì)影響使用時(shí)對(duì)圖標(biāo)的識(shí)別。

相同半徑的圓會(huì)比正方形看起來(lái)小，所以在繪制柵格的時(shí)候就要對(duì)稍稍對(duì)圓形進(jìn)行放大，使他們對(duì)視覺(jué)面積保持一致。

3. 多案例對(duì)比

在調(diào)研時(shí)，我們參考了MD/IBM/Ant /Shopee，接下來(lái)我們看看他們之間的異同。

比較相似的點(diǎn)就是，他們都會(huì)最大的尺寸作為繪制柵格的基本尺寸，其他尺寸圖標(biāo)可以在此基礎(chǔ)上縮放。

出血位一般為2px，關(guān)鍵形狀一般都包括一個(gè)橫向的矩形，一個(gè)縱向的矩形，一個(gè)圓形，一個(gè)正方形，4個(gè)。在此基礎(chǔ)上Ant增加了三角形。MD/shopee/Ant增加了一些較小的圓形，這些較小形狀其實(shí)是可以輔助我們繪制極簡(jiǎn)圖標(biāo)（比如箭頭）。

不知道是否有同學(xué)存在疑惑，同一套圖標(biāo)體系下，難道箭頭這么簡(jiǎn)單的圖標(biāo)也要做24px這么大嗎？其實(shí)不是的，柵格中就解決了這個(gè)問(wèn)題。我們可以利用較小形狀，只需保證外邊框都是24px就好。具體如何使用會(huì)在接下來(lái)的問(wèn)題中解答。

4. 柵格小結(jié)

• 一般情況一套圖標(biāo)庫(kù)會(huì)使用最大尺寸圖標(biāo)作為柵格模版的繪制尺寸，在實(shí)際使用中，可以對(duì)柵格進(jìn)行等比的縮放。
• 增加關(guān)鍵形狀可以幫助我們繪制一些包含基礎(chǔ)形狀的圖標(biāo)，如相機(jī)圖標(biāo)就是由一個(gè)偏扁的長(zhǎng)方形延伸而來(lái)。如果你的圖標(biāo)體系中有特殊的幾何形也可以增加到柵格中，如Ant就增加了三角形在圖標(biāo)柵格中。
• 增加較小的關(guān)鍵形狀可以幫助我們可以繪制相同尺寸下的小圖標(biāo)/極簡(jiǎn)圖標(biāo)，如箭頭/加減符號(hào)等。

5. 使用柵格時(shí)遇到的問(wèn)題

提問(wèn)1：“如果完全按照柵格來(lái)畫(huà)，我感覺(jué)視覺(jué)重量不一致”。

回答:

出現(xiàn)這個(gè)問(wèn)題，可能是由于我們需要一個(gè)正方形的圖標(biāo)和長(zhǎng)方形的圖標(biāo)放在一起，會(huì)感到不和諧。當(dāng)圖標(biāo)以組的形式存在，為了追求圖標(biāo)與圖標(biāo)之間視覺(jué)平衡?？梢詫D標(biāo)的外形狀適當(dāng)進(jìn)行統(tǒng)一（但也要保證圖標(biāo)的表意）。如果希望圖標(biāo)的適配度更高，可以在畫(huà)的時(shí)候偏方一些。如上圖Twitter和IG的做法。

回答:

除此之外，在繪制圖標(biāo)庫(kù)時(shí)建議讓圖標(biāo)符合柵格。如果圖標(biāo)本身的含義是偏瘦長(zhǎng)的,就讓它符合網(wǎng)格.如果圖標(biāo)本身該突出的就打破網(wǎng)格。

回答:

如果圖標(biāo)本身就十分細(xì)長(zhǎng)，該怎么適配柵格呢？不能強(qiáng)行拉寬，會(huì)使圖標(biāo)變形?？梢詫D標(biāo)旋轉(zhuǎn)45度，這樣既能符合圖標(biāo)本身的含義，也能使圖標(biāo)更加飽滿(mǎn)。

提問(wèn)2：“繪制多個(gè)圖標(biāo)時(shí)，如何保證復(fù)雜度的統(tǒng)一？”

回答:

當(dāng)復(fù)雜度可控, 由簡(jiǎn)至繁排列出不同復(fù)雜度的圖標(biāo)來(lái)對(duì)比，然后從中挑選出復(fù)雜度相似的圖標(biāo)作為一組。

回答:

當(dāng)復(fù)雜程度不可控-極復(fù)雜圖標(biāo)，不一定參考單個(gè)關(guān)鍵形狀來(lái)畫(huà)，可以綜合參考多個(gè)形狀，但最好不要超出安全區(qū)。

回答:

當(dāng)復(fù)雜程度不可控-極簡(jiǎn)圖標(biāo) ：參考較小關(guān)鍵形狀畫(huà)/按照設(shè)計(jì)系統(tǒng)的最小基數(shù)的倍數(shù)來(lái)畫(huà)。

設(shè)計(jì)基數(shù)是設(shè)計(jì)體系中的最小單位，一般為2/4px。

回答:

畫(huà)異形圖標(biāo)的時(shí)候，可以借助不同的關(guān)鍵形狀線(xiàn)作為參考，做到盡量把空間撐滿(mǎn)。如下圖中，風(fēng)車(chē)頂部和左右兩邊都緊貼著關(guān)鍵形狀。

回答：

Shopify建議使用光學(xué)對(duì)齊而不是物理對(duì)齊，當(dāng)我們畫(huà)這個(gè)照相機(jī)時(shí)，應(yīng)該先基于關(guān)鍵形狀畫(huà)。再在頂部增加閃光燈的元素，而不是把整個(gè)相機(jī)圖標(biāo)居中。

同理，Shopify在繪制這個(gè)設(shè)置圖標(biāo)時(shí)，也考慮到了視覺(jué)居中的因素。左上邊的面積偏大，右下邊的面積偏小。所以在對(duì)齊時(shí)也并沒(méi)有使用物理對(duì)齊，而是將圖標(biāo)稍微往左下移動(dòng)（具體移動(dòng)多少像素，還是靠設(shè)計(jì)師自己來(lái)判斷啦~）

由于Shopify使用的是面性圖標(biāo)，所以一旦有視覺(jué)上的偏移，圖標(biāo)之間的差異會(huì)很大，平衡容易被打破。所以在對(duì)齊方式上尤為注意，如果你對(duì)視覺(jué)重量還不夠了解，可以以此作為學(xué)習(xí)的資料。

回答:

盡量使用幾何形進(jìn)行切割，如果是帶弧形的圖標(biāo)，可以先用直線(xiàn)路徑勾勒形狀再加圓角的形式。

二、圖標(biāo)尺寸

當(dāng)你開(kāi)始一套系統(tǒng)圖標(biāo)的設(shè)計(jì)前，除了準(zhǔn)備繪制圖標(biāo)的柵格模板，還需提前規(guī)劃好一套圖標(biāo)可能包含的尺寸，以應(yīng)用于界面設(shè)計(jì)中。

需要注意同樣含義的圖標(biāo)在不同大小下，也可能會(huì)有不同的展現(xiàn)形式。比如48像素的復(fù)雜圖標(biāo)，縮小到12像素肯定會(huì)難以識(shí)別。同理12像素的圖標(biāo)放大到48像素又會(huì)顯得單薄，不夠飽滿(mǎn)。

1. 案例拆解

（1）IBM·Carbon Design

IBM的圖標(biāo)體系中包含以上四個(gè)尺寸（16/20/24/32），其中最大尺寸32px為繪制尺寸，其他尺寸由32px等比縮放的來(lái)。那么這些尺寸在前期是如何制定的呢？他們之間又有什么關(guān)系呢？

我對(duì)不同尺寸下圖標(biāo)的屬性進(jìn)行羅列，可以發(fā)現(xiàn)除了圖標(biāo)尺寸，圖標(biāo)的線(xiàn)條粗細(xì)，圓角大小，甚至間距都是成比例的?？梢缘贸鲆粋€(gè)結(jié)論：IBM的圖標(biāo)應(yīng)該是先繪制最大尺寸，然后定義好其他圖標(biāo)尺寸就可以進(jìn)行縮放了。

在使用這種方式時(shí)，我們需要注意圖標(biāo)的圓角和描邊盡量不要出現(xiàn)兩位小數(shù)點(diǎn)之后的數(shù)字，最好是整數(shù)或者點(diǎn)五整數(shù)。

（2）字節(jié)·IconPark

字節(jié)這一套圖標(biāo)包括12/24/36/48四個(gè)尺寸，繪制尺寸為48也是最大尺寸。

羅列出字節(jié)各個(gè)尺寸的圖標(biāo)屬性，會(huì)發(fā)現(xiàn)全都是整數(shù)。所以當(dāng)我們?cè)诖罱▓D體系的時(shí)候也可以參考，但是隨之而來(lái)產(chǎn)生的影響就是Iconpark與其他圖標(biāo)庫(kù)相比，相同大小的圖標(biāo)描邊會(huì)更粗，圓角也更大。

（3）阿里·AntDesign

阿里的圖標(biāo)規(guī)范中圖標(biāo)的繪制尺寸為1024像素，單個(gè)格子為64px。可等比縮放至12/16/20/24/32四個(gè)尺寸。

2. 圖標(biāo)尺寸小結(jié)

設(shè)定一套圖標(biāo)體系時(shí)，圖標(biāo)尺寸一般為4的倍數(shù)（常見(jiàn)的有12/16/20/24/32，具體使用多大的圖標(biāo)也需要根據(jù)產(chǎn)品風(fēng)格來(lái)定義）。先繪制最大尺寸圖標(biāo)然后對(duì)其進(jìn)行縮放即可。

為什么使12/16/18/24px的尺寸呢？因?yàn)槲覀兊膱D標(biāo)很多時(shí)候需要和文字搭配使用，無(wú)論在移動(dòng)端還是PC端。文字一般也是使用這樣的字號(hào)，最小的文字一般為12px，所以圖標(biāo)也遵循了同樣的規(guī)律。

其次一個(gè)比較明顯的特征是：移動(dòng)端的圖標(biāo)尺寸會(huì)比PC端更多，這里也由于移動(dòng)端需要用到圖標(biāo)的場(chǎng)景更多更復(fù)雜。

三、圖標(biāo)描邊

在理解描邊的時(shí)候，我們也可以將它拆解為更小的元素。影響描邊樣式的因素有：

路徑的類(lèi)型（開(kāi)放路徑/封閉路徑），粗細(xì)，對(duì)齊的方式（向內(nèi)/居中/向外），端點(diǎn)，連接點(diǎn)。

路徑類(lèi)型和粗細(xì)都很好理解，接下來(lái)我會(huì)詳細(xì)講講端點(diǎn)，連接點(diǎn)和對(duì)齊方式會(huì)如何影響圖標(biāo)氣質(zhì)。

1. 描邊的組成

端點(diǎn)只有在開(kāi)放式路徑中才會(huì)出現(xiàn)，端點(diǎn)分為三種None/Round/Square。也就是沒(méi)有端點(diǎn)，圓角端點(diǎn)，方角端點(diǎn)。

圓角端點(diǎn)會(huì)使圖標(biāo)風(fēng)格更加圓潤(rùn)可愛(ài)，而當(dāng)希望圖標(biāo)風(fēng)格硬朗建議使用無(wú)端點(diǎn)（也就是方角），這樣可以更加精確的控制端點(diǎn)位置。

2. 轉(zhuǎn)角點(diǎn)

這個(gè)屬性大家平時(shí)可能都沒(méi)有注意到，那么其實(shí)他定義的是路徑轉(zhuǎn)角的樣式，在Figma中稱(chēng)之為“Join”。

連接點(diǎn)也分為三種分別斜接/斜切/圓角。

轉(zhuǎn)角點(diǎn)中的圓角其實(shí)可以作為一種圓角類(lèi)型，區(qū)別在于圖標(biāo)圓角是基于路徑的圓角，而round是基于路徑連接點(diǎn)的圓角。通過(guò)設(shè)置round我們可能獲得一種精致的小圓角。

3. 對(duì)齊方式

首先我們知道圖標(biāo)可以劃分為填充圖標(biāo)和線(xiàn)性圖標(biāo)，所以在描邊這個(gè)屬性下暫且不討論填充圖標(biāo)。

線(xiàn)性圖標(biāo)描邊的對(duì)齊方式可以分為向內(nèi)描邊，居中描邊和向外描邊。從下圖我們就可以發(fā)現(xiàn)同樣的路徑用不同的描邊方式，風(fēng)格的差異是很大的。

所有的描邊類(lèi)型都僅適用于閉合路徑，因?yàn)樵诖蠖鄶?shù)的軟件里（AI/Sketch/Figma)開(kāi)發(fā)式路徑只支持居中描邊。

那么不同的描邊類(lèi)型有什么差異和優(yōu)劣呢，接下來(lái)我會(huì)帶大家繼續(xù)分析。

（1）內(nèi)描邊

優(yōu)勢(shì)：當(dāng)需要轉(zhuǎn)變?yōu)樘畛鋱D標(biāo)時(shí)，可以保持圖標(biāo)的一致性。路徑貼合網(wǎng)格，所以圖標(biāo)本身可以保持整數(shù)。

劣勢(shì)：封閉路徑和開(kāi)發(fā)路徑無(wú)法保持一致，可能需要我們手動(dòng)調(diào)整。

（2）居中描邊

優(yōu)勢(shì)：可以在眾多軟件中保持封閉與開(kāi)發(fā)路徑的一致性，同時(shí)支持連接點(diǎn)（Jion）的設(shè)置。

劣勢(shì)：不能保證像素完美，因?yàn)槊柽厡挾仁峭窂絻蛇厰U(kuò)展。轉(zhuǎn)曲后圖標(biāo)本身可能出現(xiàn)多位小數(shù)點(diǎn)。

雖然像素完美一直是設(shè)計(jì)師們?cè)谧非蟮?，在分辨率越?lái)越高的今天，也未必需要再去追求絕對(duì)地像素對(duì)齊了。這點(diǎn)也越來(lái)越多的出現(xiàn)在國(guó)外大廠(chǎng)的文章中，如下圖IBM的小蜜蜂就使用了1.75的邊距。

（3）外描邊

優(yōu)勢(shì)：由于外描邊是在路徑向外擴(kuò)展的緣故，這種描邊方式會(huì)放大路徑的圓角，使其更加圓潤(rùn)。

比如像下圖這種徽章圖標(biāo)就不適合使用內(nèi)描邊，線(xiàn)段之間擠壓重疊會(huì)使圖標(biāo)出現(xiàn)難看的尖角。

劣勢(shì)：使用外描邊會(huì)擴(kuò)大圖標(biāo)本身的尺寸和圓角大小，需要設(shè)計(jì)師在繪制路徑的時(shí)候提前預(yù)判。所以，總的來(lái)說(shuō)會(huì)難度更高。

（4）描邊類(lèi)型小結(jié)

專(zhuān)業(yè)的設(shè)計(jì)團(tuán)隊(duì)會(huì)使用內(nèi)描邊，并轉(zhuǎn)曲。好處是可以保證圖標(biāo)本身為整數(shù)，但是由于開(kāi)放路徑不能使用內(nèi)描邊，所以可能需要設(shè)計(jì)師手動(dòng)調(diào)整由于描邊類(lèi)型不一致產(chǎn)生的差異。

但是如果沒(méi)有專(zhuān)門(mén)維護(hù)圖標(biāo)組件的設(shè)計(jì)部門(mén)來(lái)說(shuō)，使用居中描邊可能是成本更低的方式。

4. 案例拆解

（1）IBM·Carbon Design

IBM的圖標(biāo)基于32px的等比縮放至24/20/16px不同尺寸，縮放時(shí)描邊粗細(xì)也隨之等比縮放。

（2）蝦皮·Shopee Design

幾個(gè)相鄰大小的圖標(biāo)共用一個(gè)描邊粗度，好處是可以保持描邊整數(shù)。劣勢(shì)也顯而易見(jiàn)，粗細(xì)的不等比，可能使圖標(biāo)風(fēng)格無(wú)法保持一致。

（3）描邊粗細(xì)小結(jié)

• 在圖標(biāo)體系的搭建中更建議使IBM的方式，描邊粗細(xì)隨著圖標(biāo)大小等比的變化，對(duì)于品牌風(fēng)格的一致性也更有利。
• 關(guān)于描邊如何保持整數(shù)的方式，前面也有介紹過(guò)。需要設(shè)計(jì)在前期就定義好不同大小的圖標(biāo)描邊/圓角/間距的情況，而不是繪制圖標(biāo)時(shí)才開(kāi)始考慮。

5. 在選擇描邊時(shí)遇到的問(wèn)題

提問(wèn)1:“復(fù)雜圖標(biāo)如果用規(guī)范里的描邊粗細(xì)，顯得很擁擠”。

回答：當(dāng)圖標(biāo)過(guò)于復(fù)雜，我們可以通過(guò)兩個(gè)方式

1. 外層使用規(guī)范粗細(xì)，內(nèi)層使用較細(xì)地描邊。比如Ant的圖標(biāo)，會(huì)定義不同的粗細(xì)度。當(dāng)他們?cè)诶L制1024px的圖標(biāo)時(shí)，就可以選擇不同粗細(xì)。
2. IBM的解法，為了保證圖標(biāo)的可讀性，使用其他尺寸的描邊粗細(xì)，也可以盡量保持一致性。

提問(wèn)2:“如果圖標(biāo)內(nèi)外兩個(gè)形狀，里面的圖標(biāo)太小，用同樣的描邊，圖標(biāo)很難識(shí)別”。

回答：特殊情況，內(nèi)部的形狀過(guò)小可以采用上面同樣的形式。或者直接將較小的圖標(biāo)轉(zhuǎn)為填充（圖例來(lái)源IBM）。

四、圖標(biāo)間距

1. 間距的類(lèi)型

間距出現(xiàn)在很多地方，有時(shí)候我們可能容易會(huì)忽略它。下面列舉了幾種常見(jiàn)的間距：

兩個(gè)形狀之間的間距，兩條邊之間的間距，以及兩個(gè)點(diǎn)之間的間距。

2. 案例拆解

（1）Google·Material Design

MD的規(guī)范里定義了最小的間距是1.5px。

（2）字節(jié)·IconPark

字節(jié)的圖標(biāo)庫(kù)建議間距不得小于描邊粗細(xì)，極端情況可以使用描邊1/2的寬度。同時(shí)建議使用間距都是用偶數(shù)。

所有的間距都應(yīng)該遵循：明顯分開(kāi)或準(zhǔn)確相連，不要似連非連。

3. 間距小結(jié)

（1）當(dāng)線(xiàn)條過(guò)于密集的時(shí)候就要考慮負(fù)形空間了，擴(kuò)大的方式有3種：

1. 簡(jiǎn)化圖標(biāo)形狀，減少線(xiàn)條
2. 使圖標(biāo)的線(xiàn)段之間相連（可以節(jié)省一定的空間），或者分離
3. 如必要，也可以讓圖標(biāo)的內(nèi)部形狀使用更細(xì)一級(jí)的描邊

“負(fù)形空間”是什么意思，就是一個(gè)網(wǎng)格繪制了圖標(biāo)本身之后，剩余的留白叫做負(fù)形空間。留白多呢顯得圖標(biāo)不夠飽滿(mǎn)，留白少呢又顯得圖標(biāo)擁擠難以識(shí)別。

五、圖標(biāo)圓角

1. 圓角的組成

為了方便大家理解，圓角我也拆分成多種常見(jiàn)的類(lèi)型：無(wú)圓角/正形圓角/負(fù)形圓角。

2. 案例拆解

（1）IBM·Carbon Design

規(guī)范中描述可以使用2px/4px/6px的圓角大小，且規(guī)定必要時(shí)可以使用2的倍數(shù)的，使圖標(biāo)能描繪出對(duì)象的真實(shí)樣式。

（2）Google·Material Design

MD中定義0px/2px/3px/4px作為常用的圓角大小。

同是MD也提到為了如果圓角會(huì)影響對(duì)真實(shí)世界中物體外觀的識(shí)別時(shí)，我們就不應(yīng)該倒角。這是各大廠(chǎng)設(shè)計(jì)體系中一致在強(qiáng)調(diào)的準(zhǔn)則。比如下面紙張折疊時(shí)，折角處就不可能會(huì)出現(xiàn)圓角，這時(shí)我們就應(yīng)該去除圓角。

（3）字節(jié)·IconPark

Iconpark公開(kāi)的繪制規(guī)范中提到，圓角使用的是1px/2px/3px。而經(jīng)過(guò)實(shí)際對(duì)圖標(biāo)庫(kù)中的圖標(biāo)進(jìn)行測(cè)量，發(fā)現(xiàn)1px的圓角使用的其實(shí)是我們前面說(shuō)到的”round”轉(zhuǎn)角連接方式。

（4）蝦皮·Shopee Design

與大部分規(guī)范類(lèi)似，shopee也使用了2的倍數(shù)作為圖標(biāo)圓角。但是范圍給的更廣一些，原因是蝦皮的圖標(biāo)尺寸相較與其他平臺(tái)也會(huì)更多一些。

3. 圓角小結(jié)

1. 圖標(biāo)繪制的關(guān)鍵是我們選擇的不論是圖標(biāo)的形狀也好，圓角大小也好，都是基于物體本身的含義或是空間邏輯。
2. 在圓角大小的選擇上，大部分公司都是采用了2的倍數(shù)如2/4/6px。除此之外，如果想做出差異性，也有選擇1/2/3px圓角的規(guī)范體系，或者是使用“round”的轉(zhuǎn)角連接方式。

4. 在使用圓角時(shí)遇到的問(wèn)題

提問(wèn)1:“規(guī)范中有多個(gè)圓角，我該怎么選擇呢？”

回答：首先還是回到我們繪制圖標(biāo)的第一原則“圖標(biāo)元素的選擇應(yīng)該貼合物體本身的含義”。那么下面可以看到IBM體系中的小汽車(chē)/公交車(chē)/輕軌列車(chē)。同樣是車(chē)，但是圓角根據(jù)車(chē)輛的實(shí)際用途來(lái)定義的（比如我們常常乘坐的高鐵，由于提升速度，他的車(chē)身外觀整體偏圓）。

提問(wèn)2:“復(fù)雜的圖標(biāo)造型中包含內(nèi)外多個(gè)形狀，圓角該如何選擇呢？”

回答：一般來(lái)說(shuō)內(nèi)部形狀的圓角不會(huì)大于外形狀的圓角，這里其實(shí)也是現(xiàn)實(shí)中的透視關(guān)系保持一致的。如下圖箱子的邊緣就遵循了這一規(guī)律。

六、圖標(biāo)角度

1. 角度的類(lèi)型

角度不光可以應(yīng)用到圖標(biāo)上，同時(shí)可以應(yīng)用在路徑上或是路徑之間的夾角上。

2. 案例拆解

（1）IBM·Carbon Design

首先將45度切分為3等份，然后以15度為最小基數(shù)來(lái)切分360度。

下面幾個(gè)例子，可以幫助我們更好地理解角度在IBM圖標(biāo)體系中的應(yīng)用。

（2）阿里·AntDesign

Ant的角度十分特別，在官方網(wǎng)站中提及他們的圖標(biāo)是參考了美式戰(zhàn)斗機(jī)的角度，所以圖標(biāo)給人以銳利而干練的感受。同時(shí)可選擇的角度有20/38/76度。

在實(shí)際案例中的運(yùn)用。

3. 角度小結(jié)

1. 常見(jiàn)的角度是基于15度的倍數(shù)，15/30/45度。同時(shí)使用45度可以較好的減少圖標(biāo)線(xiàn)條出現(xiàn)鋸齒的可能，如果想打造與眾不同的圖標(biāo)風(fēng)格，角度也許是可以嘗試的點(diǎn)。
2. 角度出現(xiàn)的方式很多，比如線(xiàn)段之間的轉(zhuǎn)角，圖形上的缺口。我們需要發(fā)現(xiàn)它，并使其符合規(guī)律。

七、圖標(biāo)透視

1. 透視的組成

透視可以分為：平視/側(cè)視/俯視/仰視等等，在圖標(biāo)體系中我們一般使用平視為主,因?yàn)樗慕Y(jié)構(gòu)更加簡(jiǎn)單，即使在小尺寸也能有較好地識(shí)別度。

透視選擇的關(guān)鍵，還是需要保證一套圖標(biāo)中的透視角度一致性。

2. 透視小結(jié)

1. 常見(jiàn)的圖標(biāo)視圖有：平視/俯視/斜視等等
2. 最重要的就是保持整套圖標(biāo)的視圖一致性

八、圖標(biāo)顏色

圖標(biāo)顏色也分為兩種：一種是在淺色（白色）背景下，一種是在暗色背景下。

1. 案例拆解

（1）Google·Material Design

淺色背景：87%的黑色用于需要專(zhuān)注的圖標(biāo)，54%用于不需要特別關(guān)注的圖標(biāo)，38%用于不可點(diǎn)的圖標(biāo)。

深色背景：100%的白色用于需要專(zhuān)注的圖標(biāo)，70%用于不需要特別關(guān)注的圖標(biāo)，50%用于不可點(diǎn)的圖標(biāo)。

2. 多案例對(duì)比

以及不同規(guī)范中對(duì)于顏色的定義也不太一樣，一般會(huì)使用最深的顏色作為圖標(biāo)庫(kù)中的繪制顏色。也是方便我們?cè)谑褂玫臅r(shí)候通過(guò)調(diào)整不透明度，來(lái)滿(mǎn)足不同的場(chǎng)景。

3. 顏色小結(jié)

1. 繪制圖標(biāo)庫(kù)的時(shí)候用同一個(gè)主色，而不是實(shí)際使用時(shí)的顏色
2. 在使用時(shí)注意深淺背景上的圖標(biāo)顏色也是有差異的，深色背景下的不透明度更高。

九、結(jié)語(yǔ)

最后為大家整理了此次參考圖標(biāo)規(guī)范的網(wǎng)站，方便想要深入研究的小伙伴進(jìn)行查看。以及我把這些組件庫(kù)的Figma圖標(biāo)源文件也整理到一起了，大家可以通過(guò)臨摹參考的方式不斷提高自己把控圖標(biāo)的能力。

IBM·Carbon Design：https://www.ibm.com/design/language/iconography/ui-icons/design

字節(jié)·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

圖標(biāo)庫(kù)合集：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

本文由郝小七指導(dǎo)http://www.codemsi.com/u/917803

本文由 @喜寶的設(shè)計(jì)筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。