編按：

上一篇帶大家了解了圖標(biāo)的類型及適用場(chǎng)景，今天帶大家了解一下能讓你事半功倍的圖標(biāo)繪制技巧及注意事項(xiàng)，話不多說(shuō)，快來(lái)詳細(xì)了解一下。

在上篇，我們講述了圖標(biāo)的定義、圖標(biāo)按照功能的分類、圖標(biāo)的設(shè)計(jì)風(fēng)格以及應(yīng)用場(chǎng)景，相信大家對(duì)圖標(biāo)有了一個(gè)比較清晰的了解，這一篇我們著重來(lái)講解圖標(biāo)該如何去繪制，以及繪制過(guò)程中的技巧和需要注意的事項(xiàng)。

一、 圖標(biāo)繪制的基本流程

在我們實(shí)際項(xiàng)目中，圖標(biāo)從來(lái)不是單獨(dú)存在的，它必須依附于產(chǎn)品的功能、內(nèi)容方能實(shí)現(xiàn)價(jià)值。接下來(lái)的一套流程是我結(jié)合以往產(chǎn)出的項(xiàng)目，并參照了前人的經(jīng)驗(yàn)整合而來(lái)，不論是日常練習(xí)還是實(shí)際項(xiàng)目，都可以遵循這一套萬(wàn)能模板。

1.  頭腦風(fēng)暴

定下初始的概念關(guān)鍵詞，但是往往這個(gè)概念過(guò)于抽象，沒(méi)有辦法直接落地，這時(shí)候就需要圍繞這個(gè)關(guān)鍵詞聯(lián)系出更多具象的關(guān)鍵詞。比如“健康”，我們通過(guò)發(fā)散聯(lián)想可以衍生出眾多的實(shí)體關(guān)鍵詞。

2.  確定最佳關(guān)鍵詞

根據(jù)產(chǎn)品的具體方向和圖標(biāo)的使用場(chǎng)景確定最佳關(guān)鍵詞。比如你需要做的產(chǎn)品屬于醫(yī)療行業(yè)，那就可以是“心臟”“聽(tīng)診器”“醫(yī)療箱”這些與醫(yī)療相關(guān)的關(guān)鍵詞，這個(gè)圖標(biāo)如果用在底部標(biāo)簽欄，對(duì)應(yīng)的界面是用戶的一系列健康數(shù)據(jù)，那就可以用“心臟”作為最佳關(guān)鍵詞。

3.  確定樣式

圖標(biāo)的樣式是確定產(chǎn)品調(diào)性與品牌非常重要的一部分，定義樣式時(shí)必須結(jié)合當(dāng)前的產(chǎn)品定位，以及所在的場(chǎng)景設(shè)計(jì)出相符的圖標(biāo)。

4.  獲取靈感

當(dāng)我們對(duì)這個(gè)關(guān)鍵詞如何用圖形表達(dá)沒(méi)有概念時(shí)，就可以借助iconfont、iconfinder等圖標(biāo)素材網(wǎng)站來(lái)獲取靈感。如果本身基礎(chǔ)較好，也可以直接借助照片進(jìn)行提煉。

5.  繪制草圖

草圖往往是很多設(shè)計(jì)師容易忽略的一步，但是可以大幅提高在軟件中繪制的效率，尤其是一些較為復(fù)雜的圖標(biāo)。這一步可以幫助我們快速嘗試出不同特征、細(xì)節(jié)組合所呈現(xiàn)的效果，避免了直接上機(jī)帶來(lái)更多的試錯(cuò)成本。

6.  繪制圖標(biāo)

打開(kāi)軟件開(kāi)始繪制，我目前都用AI繪制，因?yàn)閷?shí)際項(xiàng)目中需要各類尺寸的圖標(biāo)適用于各種機(jī)型，AI是專門繪制矢量圖的軟件，不論放大還是縮小都很清晰。但是ps作為一款位圖軟件，放大縮小會(huì)糊。最關(guān)鍵的一點(diǎn)是，AI所提供的大量便捷工具可以明顯提升設(shè)計(jì)師繪制的效率。

另外，當(dāng)繪制一套圖標(biāo)時(shí)，為了保證它們視覺(jué)上的一致性，需要用到圖標(biāo)柵格來(lái)輔助調(diào)整。（下文會(huì)講到）

二 、圖標(biāo)繪制的技巧

  圖標(biāo)的繪制雖然是基本流程的最后一步，但是卻包含了頗多的要點(diǎn)，這里我提煉了一些最核心的注意事項(xiàng)和技巧。

1.  布爾運(yùn)算

圖標(biāo)應(yīng)該盡可能用更加簡(jiǎn)單的幾何形狀去表達(dá)。布爾運(yùn)算作為一種邏輯推演方法，可以將若干個(gè)簡(jiǎn)單圖形通過(guò)一系列運(yùn)算法則組合成新的幾何形狀，用這些形狀繪制的圖標(biāo)富有邏輯之美，也極易后期的調(diào)整和擴(kuò)展。

在AI中一般通過(guò)路徑查找器的形狀模式進(jìn)行布爾運(yùn)算，包括了聯(lián)集、減去頂層、交集和差集。比如以下的三個(gè)常用線性圖標(biāo)，評(píng)論、設(shè)置和預(yù)覽的制作分別運(yùn)用到了聯(lián)集、減去頂層和交集。

2.  形狀生成器

其實(shí)這個(gè)功能與布爾運(yùn)算有些類似，同樣是將若干個(gè)簡(jiǎn)單幾何形狀重新組合為新的形狀，只是它更為簡(jiǎn)單粗暴，直接跳過(guò)運(yùn)算環(huán)節(jié)，拖曳點(diǎn)擊即為合并，按住Alt點(diǎn)擊即為刪除。

比如三個(gè)疊加的圓形，通過(guò)形狀生成器可以生成很多有意思的圖案，并且都是一步到位，如果用布爾運(yùn)算的話就會(huì)變得非常繁瑣。當(dāng)然，對(duì)于實(shí)際項(xiàng)目中的圖標(biāo)而言，布爾運(yùn)算夠用了，一些品牌標(biāo)志、裝飾性圖標(biāo)的設(shè)計(jì)可能會(huì)用到形狀生成器。

3.  圖標(biāo)斷線技巧

斷線圖標(biāo)在產(chǎn)品中非常常見(jiàn)，在形狀描邊中制造小小的缺口，可以讓圖標(biāo)富有趣味性和呼吸感，我一般用兩種方法來(lái)斷線：

（1）添加錨點(diǎn)

比如一個(gè)“添加”圖標(biāo)，用鋼筆工具在想要斷線的地方添加2個(gè)錨點(diǎn)，之后選中錨點(diǎn)間的路徑，按delete刪除即可。

（2）路徑橡皮擦

這個(gè)工具藏在shaper工具下拉列表中，和橡皮擦工具類似，只是對(duì)象變?yōu)榱嗣柽吢窂蕉?，相比“添加錨點(diǎn)”功能省去了中間多余的幾個(gè)步驟，點(diǎn)選路徑擦除想要斷線的地方即可～

三 、圖標(biāo)繪制的注意事項(xiàng)

1.  辨識(shí)度

辨識(shí)度是圖標(biāo)最底層、最重要的價(jià)值，試想一下，如果用戶使用一個(gè)功能時(shí)看不懂或者誤解圖標(biāo)的含義，即使圖標(biāo)設(shè)計(jì)得再精美也毫無(wú)價(jià)值。

比如下面的圖標(biāo)，在表達(dá)“警告”含義時(shí)如果錯(cuò)用了黑色，那用戶很可能誤解成是“信息”含義。當(dāng)然，在底部加上文字可以很好得輔助用戶理解，但是實(shí)際產(chǎn)品中并不是所有圖標(biāo)都會(huì)留給你這么多的空間。

2.  一致性

一般項(xiàng)目中的大部分圖標(biāo)是成套設(shè)計(jì)的，這就需要設(shè)計(jì)師顧及圖標(biāo)之間的一致性，包括描邊粗細(xì)、圓角大小、斷線規(guī)律、飽滿程度以及視覺(jué)大小。

（1）描邊大小

所有圖標(biāo)描邊粗細(xì)應(yīng)該一致，而不是時(shí)粗時(shí)細(xì)。

（2）圓角大小

除去圓形外，所有圓角矩形的圓角大小同樣需要保持一致，而不是下面這樣。

（3）斷線規(guī)律

這是很容易被忽略的一點(diǎn)，斷線過(guò)于隨意時(shí)，會(huì)顯得非常凌亂，毫無(wú)規(guī)律可言，斷線的大小和方向都應(yīng)該遵循某個(gè)規(guī)律。需要注意的是，圓角矩形需要在圓角附近斷線，避免斷開(kāi)圓角后影響圖標(biāo)的辨識(shí)度。

（4）視覺(jué)重量

也就是圖標(biāo)的視覺(jué)重量，下面的手機(jī)圖標(biāo)用了較多的內(nèi)部線條，導(dǎo)致看起來(lái)比其他兩個(gè)圖標(biāo)更重、更復(fù)雜。

（5）視覺(jué)大小

物理尺寸同樣的正方形要比圓形更大，因此圖標(biāo)的大小一致需要視覺(jué)上的統(tǒng)一，而不是物理尺寸。借助圖標(biāo)柵格，我們可以更規(guī)范地調(diào)整圖標(biāo)的視覺(jué)大小。

借助柵格中四種形狀的參考線，我們可以很方便地調(diào)整這三個(gè)圖標(biāo)，使它們?cè)谝曈X(jué)大小上呈現(xiàn)一致性。

  至此，有關(guān)圖標(biāo)的所有知識(shí)就全部講完了。圖標(biāo)作為UI設(shè)計(jì)的基本功，需要長(zhǎng)期的練習(xí)和總結(jié)，我自己也在不斷學(xué)習(xí)的路上，借此機(jī)會(huì)把已學(xué)的知識(shí)整理出來(lái)分享，希望能幫助到大家，共勉。

本文配套的練習(xí)素材請(qǐng)加QQ群：465481414下載

做PS高手，快速提升工作效率，部落窩教育《 Photoshop全面精通班》視頻和《 AI平面與電商設(shè)計(jì)從零到精通》直播課全心為你！

掃下方二維碼關(guān)注公眾號(hào)，隨時(shí)隨地學(xué)習(xí)PS：

相關(guān)推薦：

超全面的圖標(biāo)基礎(chǔ)知識(shí)總結(jié)，原來(lái)圖標(biāo)用法也有大講究！(上篇)

AI教程，輕松繪制Yoga風(fēng)日落圖標(biāo)

小白必看！一分鐘玩轉(zhuǎn)描邊圖標(biāo)