icon 在設(shè)計(jì)系統(tǒng)或產(chǎn)品體驗(yàn)中是很重要的元素。icon 可以幫助我們快速導(dǎo)航，并且不受語(yǔ)言限制，即使是不同的國(guó)家的用戶也都明白它的意思。還有一點(diǎn)特別重要的是，它體積很小，不會(huì)消耗大量資源。icon 一般是設(shè)計(jì)系統(tǒng)的一部分，也在市場(chǎng)宣傳材料中發(fā)揮很大作用。它們是最基礎(chǔ)的繪制圖形元素，但同時(shí)也包含著大量的設(shè)計(jì)和技術(shù)細(xì)節(jié)。

這個(gè)世界上喜歡繪制 icon 的人并不太多，而精通這項(xiàng)工作的人更少。但是認(rèn)真讀完我這篇文章，你就會(huì)變成這少部分人中的一個(gè)。

無(wú)論你是精通于構(gòu)建設(shè)計(jì)系統(tǒng)的大牛，或者一個(gè)插畫師，還是一個(gè)產(chǎn)品設(shè)計(jì)師，這份指南都可以幫助你學(xué)會(huì)如何繪制 icon，如何讓它和你的品牌保持一致，以及如何在設(shè)計(jì)系統(tǒng)中加入一套 icon 庫(kù)。

讓我們從最基礎(chǔ)的部分開始吧。

icon 的基礎(chǔ)部分

尺寸

對(duì)于 icon 來(lái)說(shuō)，保持統(tǒng)一是最最最重要的，當(dāng)你在設(shè)計(jì)時(shí)請(qǐng)確保所有 icon 都有相同的尺寸。首先，確定你設(shè)計(jì)稿柵格的基準(zhǔn)多少像素（比如說(shuō) 8px 和 10px）。然后，你的 icon 尺寸應(yīng)該是基于這個(gè)基準(zhǔn)值來(lái)設(shè)計(jì)的。比如說(shuō)，如果你的柵格基準(zhǔn)是 8px，那么你的 icon 尺寸最好是 16px、24px 或 32px 等。

一般來(lái)說(shuō)，你可以只設(shè)計(jì)一種尺寸的 icon ，然后和開發(fā)人員溝通好可以在產(chǎn)品中以一些倍數(shù)變化，再讓開發(fā)在寫代碼時(shí)給 icon 設(shè)置對(duì)應(yīng)的尺寸，這樣就不需要因?yàn)槌叽绮煌槐楸槿ダL制了。

但是，當(dāng)你需要繪制比較復(fù)雜的 icon 時(shí)，可能就需要為不同的尺寸單獨(dú)設(shè)計(jì)了。可能在產(chǎn)品設(shè)計(jì)中只需要 24px 的 icon，但是在市場(chǎng)宣傳材料中需要 80px 的 icon，這時(shí)候就需要給 icon 增加一些細(xì)節(jié)讓其看起來(lái)更加豐滿。

一個(gè)商店 icon 分別在 24px、40px、80px 時(shí)的不同展現(xiàn)

我一般習(xí)慣先繪制大一些的 icon，這樣當(dāng)我需要一個(gè)小尺寸的變化時(shí)，只需要適當(dāng)?shù)匾瞥恍┘?xì)節(jié)就好了。簡(jiǎn)化的過(guò)程要比反過(guò)來(lái)逐漸添加細(xì)節(jié)要簡(jiǎn)單，而且這樣做也會(huì)讓你在簡(jiǎn)化時(shí)更加清楚哪些要移除。

顏色

對(duì)于產(chǎn)品中的 icon 來(lái)說(shuō)，使用一種黑色就可以了。任何多于一種色值的 icon 都將變得復(fù)雜，并且很難和其他設(shè)計(jì)師一起協(xié)作。也許一些市場(chǎng)部人員需要多色 icon，這也有助于品牌的展示，但是我始終認(rèn)為 icon 就應(yīng)該是單色的，任何多于三色的圖案都不再是 icon，而是插畫。

左：插畫；中：帶透視 icon；右：扁平 icon。

柵格

像素柵格是最基礎(chǔ)的柵格，它使用最小的參照單元：像素。當(dāng)你在設(shè)計(jì) icon 時(shí)，總希望能夠?qū)⒃貙?duì)齊到每一個(gè)像素上，尤其是直線。如果你是使用 Figma，它可以自動(dòng)幫你貼合到像素。像素對(duì)齊不只會(huì)更好地渲染，也能夠讓 icon 處理起來(lái)更加直觀方便。你可以通過(guò)下圖感受一下在 Figma 中像素對(duì)齊的 icon 和沒(méi)對(duì)齊的 icon 之間的差異：

左：像素對(duì)齊；右：未對(duì)齊。

我一般會(huì)在畫 icon 之前先設(shè)置好像素柵格，下面是我的設(shè)置：

現(xiàn)在你應(yīng)該掌握了像素柵格，讓我們來(lái)看一下視覺上的柵格。視覺柵格可以幫助我們找到 icon 的重心所在，以及它在設(shè)計(jì)中所呈現(xiàn)的大小。通常，圓形或者曲線會(huì)顯得比方形小一些。我們一般會(huì)把 icon 繪制在一個(gè)固定尺寸的容器中，這樣導(dǎo)出時(shí)他們的尺寸就一致了。我們需要給不同的 icon 添不同的內(nèi)邊距，以保持每個(gè) icon 在視覺上看起來(lái)重心和大小一致，而不需要在開發(fā)時(shí)再次調(diào)整。

我一般喜歡設(shè)置一個(gè)和描邊粗細(xì)一致的內(nèi)邊距，但如果是 1px 的描邊我會(huì)使用兩倍的內(nèi)邊距。從下圖中，你可以看出我為不同的形狀設(shè)置了不同的內(nèi)邊距，以保持視覺上的一致。

在視覺上，icon 中的主要物體應(yīng)該水平垂直居中。

主要物體（矩形）居中

如果你已經(jīng)使用了像素對(duì)齊和視覺柵格，那么你繪制 icon 的水平已經(jīng)領(lǐng)先了。

描邊和填充

還記得我說(shuō)的保持統(tǒng)一是最重要的嘛？現(xiàn)在我再?gòu)?qiáng)調(diào)一遍。最讓我抓狂的事情就是，兩個(gè)并排的 icon，一個(gè)是描邊的而另一個(gè)是填充的。請(qǐng)確保你的產(chǎn)品中 icon 都是統(tǒng)一風(fēng)格的，這非常重要。也許有時(shí)候你想用填充的 icon 來(lái)表示選中狀態(tài)，但請(qǐng)一定要確保大部分都使用一種風(fēng)格，只有少部分變體。

一般來(lái)說(shuō)，填充 icon 更加易于識(shí)別，而描邊 icon 則更加方便增加細(xì)節(jié)。當(dāng)你想要確定哪一種風(fēng)格更加合適時(shí)，還需要考慮品牌的調(diào)性。

當(dāng)你選用描邊風(fēng)格時(shí)，要保證都是一樣的粗細(xì)，空白處最好也和 icon 的線條保持一樣的寬度。

空白處和線條盡量寬度一致

也許有時(shí)候你想要從一種風(fēng)格的 icon 創(chuàng)建另一種風(fēng)格。當(dāng)你想要從描邊風(fēng)格 icon 創(chuàng)建填充風(fēng)格 icon 時(shí)，可以適當(dāng)?shù)睾?jiǎn)化一下線條。一般來(lái)說(shuō)，填充的部分是投影，而不是直接將描邊 icon 進(jìn)行反向轉(zhuǎn)換。從填充風(fēng)格創(chuàng)建描邊風(fēng)格的 icon，你需要確定好線條的粗細(xì)，以及需要保留多少細(xì)節(jié)。

我不推薦使用小于 10px 的尺寸來(lái)繪制描邊 icon（假如線條粗細(xì)是 1px-2px 的話），因?yàn)檫@樣將很難繪制細(xì)節(jié)。

風(fēng)格選擇

icon 也是品牌的一種展示。開始繪制 icon 時(shí)，需要理解品牌的核心價(jià)值以及如何呈現(xiàn)它。這有一些形容詞可以參考：堅(jiān)硬/柔軟、隨意/正式、奢侈/經(jīng)濟(jì)、具象/抽象等等?；蛘吣阋部梢詤⒖寄銈兤放撇瀹嫷娘L(fēng)格。

有一些比較通用的 icon，比如關(guān)閉的叉叉、菜單、箭頭，這些 icon 需要你先確定好整體風(fēng)格之后再來(lái)繪制。我推薦你先繪制復(fù)雜一些的 icon，這樣就能先搞清楚一些繪制規(guī)則，當(dāng)你繪制簡(jiǎn)單的 icon 時(shí)就變得輕車熟路了。

5 種風(fēng)格的 icon，可以觀察一下每一種為了保持一致性在細(xì)節(jié)上的處理

這里有一些能展現(xiàn)其品牌特性的 icon 可供參考：

?Uber[1]?Google[2]?apple[3]?Airbnb[4]?Square[5]

繪制 icon

幾何圖形

除非我要設(shè)計(jì)一個(gè)非常接近自然物體的 icon，否則我一般都使用基本形狀來(lái)排列組合。矩形、方形以及圓形都可以幫助你來(lái)繪制非常細(xì)膩的 icon。

這個(gè)橡膠鴨是由幾個(gè)圓形和一個(gè)圓角矩形組成的

當(dāng)你需要繪制多邊形時(shí)，你可以在方形或者矩形的基礎(chǔ)上繪制，也可以直接使用鋼筆來(lái)逐點(diǎn)連線。最好你能夠有一個(gè)清晰可見的像素柵格，可以參考繪制節(jié)點(diǎn)位置。

當(dāng)你想要繪制一個(gè)旋轉(zhuǎn)的圖形時(shí)，我不推薦你先畫一個(gè)形狀再旋轉(zhuǎn)它，最好是根據(jù)像素柵格來(lái)逐點(diǎn)連線繪制。

左：形狀旋轉(zhuǎn)，像素不能貼合；右：逐點(diǎn)連線，像素完美貼合。

自然形狀

在 Figma 中繪制自然形狀 icon 也很簡(jiǎn)單。你可以使用傳統(tǒng)的方式添加一個(gè)個(gè)節(jié)點(diǎn)并連接曲線，也可以使用 Figma 的智能節(jié)點(diǎn)彎曲工具（Bend Tool）。我一般是先用點(diǎn)連線，畫出筆直的圖形，再使用智能節(jié)點(diǎn)彎曲工具把每個(gè)節(jié)點(diǎn)變成自然曲線。當(dāng)你創(chuàng)建比較自然或平衡的形狀時(shí)這很有幫助，因?yàn)樗亲詣?dòng)的，當(dāng)你移動(dòng)節(jié)點(diǎn)時(shí)曲線和圓角都會(huì)自動(dòng)調(diào)整。

角和連接

角有很多選項(xiàng)：方角、斜角和圓角。我強(qiáng)烈推薦你為所有 icon 設(shè)置同樣風(fēng)格的角。

圓角半徑

當(dāng)使用圓角的形狀時(shí)，你需要保證圓角半徑一致。而當(dāng)你的 icon 中有幾個(gè)同心的形狀時(shí)，還需要對(duì)其圓角半徑稍作調(diào)整，以保證看起來(lái)更加和諧。一般來(lái)說(shuō)，內(nèi)部形狀的圓角半徑比外部形狀的圓角半徑小一些。

在這個(gè)公文包 icon 中可以看到幾個(gè)形狀的圓角半徑是不同的

你可以在右側(cè)的屬性面板中快速調(diào)節(jié)一個(gè)形狀的圓角半徑。當(dāng)你選擇了一整條路徑時(shí)，它將改變這條路徑的每一個(gè)角。你也可以進(jìn)入編輯模式，單獨(dú)設(shè)置某一個(gè)節(jié)點(diǎn)的圓角半徑。

端點(diǎn)

端點(diǎn)可以設(shè)置為圓的、方的，還可以設(shè)置為箭頭。

內(nèi)部物體

當(dāng)你的 icon 中的主物體中還有另一個(gè)物體，比如一個(gè)房子中有一扇窗戶，一般都是在描邊形狀放置描邊形狀，或者在填充形狀中放置填充形狀。當(dāng)一個(gè)描邊形狀內(nèi)部不足以放置另一個(gè)描邊形狀時(shí)，你可能需要放置一個(gè)和描邊粗細(xì)成比例的填充形狀，但最好保證內(nèi)部形狀不要太寬。舉個(gè)例子，當(dāng)外部描邊為 2px 時(shí)，內(nèi)部放置一個(gè)大于 4x4px 的填充圖形就會(huì)看起來(lái)很奇怪。

隱喻

icon 中的隱喻元素很重要，它可以讓我們一看到這個(gè) icon 就知道是什么意思。比如，一個(gè)房子代表首頁(yè)，一個(gè)叉叉代表出錯(cuò)或關(guān)閉。當(dāng)我縮小一個(gè) icon 時(shí)，我都會(huì)保留隱喻元素，來(lái)保證 icon 仍然可以準(zhǔn)確傳達(dá)信息。

縮小 icon 時(shí)，保留主要的隱喻元素，刪減部分不重要元素，而不是直接縮小

當(dāng) icon 不能直接縮小適配時(shí)，保留最重要的元素

如果受限于空間大小，可以適當(dāng)減少細(xì)節(jié)，而不是直接移除它們

透視

給 icon 添加透視效果有點(diǎn)棘手——icon 尺寸一般較小，而透視會(huì)占用額外的空間。因此，如果要添加透視要么整體都添加，要么只是在一些必要的地方添加，來(lái)增強(qiáng)易讀性和辨認(rèn)度。

上一行：扁平的 icon。下一行：帶有透視效果。

文字（盡量避免！）

盡量避免在 icon 中使用文字，因?yàn)?icon 會(huì)在各種想不到的地方使用。如果你一定要添加一些文字，比如幣種符號(hào)，可以自己照著文字繪制一遍，而不是直接使用文字。

工具使用建議

布爾操作

布爾操作使用四種方式——結(jié)合、減去、相交以及排除，來(lái)組合圖形。用它來(lái)繪制 icon 非常方便，因?yàn)樗鼤?huì)保留每個(gè)圖層，這樣就可以隨時(shí)回來(lái)編輯每一個(gè)細(xì)節(jié)。你不用進(jìn)入到編輯模式裁切路徑，也不需要手動(dòng)尋找相交的部分，直接使用布爾操作會(huì)更加方便。

布爾操作之后的圖層組會(huì)被視為一個(gè)圖層，他們擁有相同的填充色和描邊屬性，還可以繼續(xù)和其它布爾操作元素組合，做出更復(fù)雜的圖形。

?結(jié)合：圖形結(jié)合會(huì)把選中的形狀打包成組。新的圖層組是由它們相結(jié)合，并將重疊部分只算一次而組成的。如果給它添加描邊，則只會(huì)在外圈起作用，而不會(huì)給重疊部分的路徑描邊。?減去：圖形減去和圖形結(jié)合正好相反。圖形減去會(huì)以最底層的圖層為基礎(chǔ)，減去上面各個(gè)圖層和它重疊的部分。?相交：相交則只取圖層相重疊那一部分。?排除：排除和相交相反，它會(huì)減去重疊部分，而保留其它部分。

一般我經(jīng)過(guò)上面一頓操作，畫完一個(gè) icon 之后，都會(huì)把它變成一個(gè)“圖形結(jié)合”，這樣當(dāng)其他小伙伴需要調(diào)整顏色時(shí)，只需要在右側(cè)面板統(tǒng)一調(diào)整填充色，而不用進(jìn)入里面一會(huì)調(diào)填充色一會(huì)調(diào)描邊顏色。

矢量網(wǎng)格

矢量網(wǎng)格是 Figma 比較獨(dú)特的一個(gè)功能。大多數(shù)設(shè)計(jì)工具都只能按照一個(gè)方向繪制路徑，一般到最后會(huì)閉合到初始點(diǎn)。矢量網(wǎng)格則完全不同，它不需要你按照一個(gè)方向繪制，你可以在任何時(shí)候從任何節(jié)點(diǎn)再引出一條路徑，而不用單獨(dú)分離畫一個(gè)節(jié)點(diǎn)。這樣的話，一些復(fù)雜形狀就可以在一個(gè)圖層中繪制，并且統(tǒng)一調(diào)節(jié)屬性，大大節(jié)省了時(shí)間。想了解更多你可以看看這篇文章[6]。

在設(shè)計(jì)系統(tǒng)中使用 icon

在設(shè)計(jì)系統(tǒng)中使用 icon，并且讓你的團(tuán)隊(duì)能夠正確使用它，這里主要有三點(diǎn)：icon 的命名和組織、資源管理和交付。

命名和組織

讓我們先說(shuō)一下文件的命名和組織。首先，你的 icon 應(yīng)該以英文單詞命名，因?yàn)殚_發(fā)的代碼是使用英文寫的，這樣最后交付給開發(fā)可以節(jié)省很多溝通成本（這一句是譯者添加的）；其次，你的 icon 命名應(yīng)該基于它是什么、長(zhǎng)什么樣，而不是它代表什么。比如說(shuō)，一個(gè)秒表就應(yīng)該命名為 stopwatch，而不是 speed。一個(gè)燈泡就應(yīng)該命名為 lightbulb，而不是 idea。這樣，大家一看就知道它是什么，并可以將其用于多個(gè)語(yǔ)境；最后，命名應(yīng)該盡量簡(jiǎn)短明了，如果需要多個(gè)單詞，最好用短線（-）隔開。

比如這個(gè) icon 就需要多個(gè)單詞描繪，例如：chef-hat

在 Figma 中，你最好將 icon 做成組件，這樣當(dāng)你復(fù)制組件時(shí)它會(huì)產(chǎn)生一個(gè)實(shí)例組件，而不只是一個(gè)簡(jiǎn)單復(fù)制。做成組件后，你就有了一個(gè)公共組件庫(kù)，可以隨時(shí)在其他文件中使用。當(dāng)團(tuán)隊(duì)中的人更改了一個(gè) icon 的 master 組件時(shí)，其他所有用到的地方就可以同步更新，方便維護(hù)統(tǒng)一性。在左側(cè)面板的 Assets 中，你可以搜索 icon 組件，如果你想給它添加一些額外信息以方便搜索，可以在組件的描述中添加。當(dāng)選中 master 組件時(shí)，在右側(cè)面板中會(huì)有一個(gè)可以填描述的地方，你可以在里面添加一些關(guān)鍵詞，比如你可以給一個(gè)房子 icon 添加“首頁(yè),主頁(yè),房子”這樣的描述，這樣當(dāng)搜索時(shí)就不需要那么精確地輸入 icon 名字。

你可以借助頁(yè)面和 Frame 來(lái)組織 icon 的分類。頁(yè)面代表最外面的層級(jí)，F(xiàn)rame 作為第二個(gè)層級(jí)。比如我一般是按照尺寸（頁(yè)面）> 分類（Frame）> 文件名來(lái)分的。

一般一個(gè) icon 會(huì)有一些變體，比如不同尺寸，不同風(fēng)格，我一般這樣處理：

不同尺寸：用不同頁(yè)面來(lái)放置不同尺寸的 icon，這樣尺寸就是最外面一個(gè)層級(jí)，因?yàn)槟悴粫?huì)經(jīng)常切換不同尺寸的 icon（在右側(cè)快速切換組件顯示的是最內(nèi)層級(jí)下的相關(guān)組件）。

填充 vs. 描邊：當(dāng)你同時(shí)使用了兩種風(fēng)格，可以使用斜線命名區(qū)分。

左：coffee/stroked；右：coffee/filled

細(xì)微圖像變化：有時(shí)候一個(gè) icon 會(huì)有一些細(xì)微的圖像變化，你也可以使用上面這種方式命名以區(qū)分。

最左的原始 icon 叫?，后面的依次叫?、、、、

icon 資源管理

當(dāng)你畫完 icon，肯定希望最終能夠?qū)С稣麧嵡逦奈募?。你可以使用布爾操作（記得上面提到的最后圖形結(jié)合的操作嗎）讓 icon 方便更改屬性，還要避免線條或形狀超出 Frame 容器，最好能讓另一個(gè)人來(lái)幫你檢查一下。

Figma 很適合做這種工作，因?yàn)樗膭?lì)協(xié)作和透明化。你可以給其他小伙伴添加文件編輯權(quán)限，這樣他們就可以添加 icon 了。但我更推薦你單獨(dú)搜集每個(gè)人畫的 icon，經(jīng)過(guò)審核后再將符合標(biāo)準(zhǔn)的加入 icon 庫(kù)。這樣，你只需要給他們添加查看權(quán)限，他們也可以在 icon 庫(kù)完善的過(guò)程中參考繪制自己的 icon。也許有些小伙伴想要?jiǎng)?chuàng)建一個(gè) icon 的不同版本，比如說(shuō)不同的顏色或名字，一般在產(chǎn)品設(shè)計(jì)的某個(gè)特定場(chǎng)景下會(huì)需要這樣做，這時(shí)候你就可以在組件描述中追加新的名字，并且讓他們?cè)谧约旱奈募薪o icon 組件設(shè)置不同顏色，以避免 icon 組件庫(kù)變得不統(tǒng)一。

當(dāng)你需要導(dǎo)出 icon 時(shí)，可能需要為不同的人導(dǎo)出不同的格式。比如說(shuō)，對(duì)于一些外部合作伙伴需要導(dǎo)出一倍或二倍的 png 格式，而開發(fā)小伙伴需要的是矢量的 SVG 格式，這樣他們就可以使用代碼對(duì) icon 的屬性做一些調(diào)整。導(dǎo)出 SVG 時(shí)，F(xiàn)igma 會(huì)自動(dòng)幫你壓縮，移除一些不必要的 SVG 代碼。詳細(xì)細(xì)節(jié)可以參考這篇文章[7]。

把你的 icon 交付到對(duì)方手里

也許你可以設(shè)計(jì)出很精致的 icon，但是如果你不能完美的讓它們呈現(xiàn)于 app、網(wǎng)頁(yè)或郵件中，那么你的工作并沒(méi)有完成。在設(shè)計(jì)之前，你可以和開發(fā)對(duì)接人先聊一下，看看他們對(duì) icon 交付的要求，好幫你確定 icon 的粗細(xì)或尺寸。同時(shí)，也和其他設(shè)計(jì)師同步一下信息，以免你們做了重復(fù)的 icon 。你還可以和市場(chǎng)運(yùn)營(yíng)人員聊一下，看看他們?cè)谌粘Ｎ锪现腥鄙偈裁??？傊?，多?wèn)一下別人，從而獲得反饋和建議，這可以幫助更好地做設(shè)計(jì)決策。當(dāng)你準(zhǔn)備交付給開發(fā)人員時(shí)，可以嘗試借助 Figma 的開放 API 來(lái)自動(dòng)化導(dǎo)出[8]。

預(yù)告：最近在寫一個(gè) Figma icon 自動(dòng)交付插件，到時(shí)候會(huì)發(fā)出來(lái)供大家使用。

其它資源

?有任何問(wèn)題你都可以通過(guò)郵件（bonniekatewolf@gmail.com[9]）聯(lián)系 Bonnie Kate Wolf。?thenounproject.com 中有很多關(guān)于 icon 繪制的靈感和技巧。

在公眾號(hào)回復(fù)“icon”獲取示例模板

?作者：Bonnie Kate Wolf?翻譯：Juuun?原文：https://www.designsystems.com/iconography-guide

References

?Uber:?https://www.uber.design/case-studies/rebrand-2018#section-5
?Google:?https://material.io/tools/icons/?style=baseline
?apple:?https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/
?Airbnb:?https://www.zachroszczewski.com/airbnb/
?Square:?https://www.bonniekatewolf.com/icon-system.html/
?這篇文章:?https://help.figma.com/article/63-vector-networks/
?這篇文章:?https://www.figma.com/blog/with-figmas-new-svg-exports-less-more/
?嘗試借助 Figma 的開放 API 來(lái)自動(dòng)化導(dǎo)出:?https://johanronsse.be/2018/09/23/the-figma-api-for-the-rest-of-us/
?bonniekatewolf@gmail.com:?mailto:bonniekatewolf@gmail.com

本文使用 文章同步助手 同步