編按：

上一篇帶大家了解了圖標的類型及適用場景，今天帶大家了解一下能讓你事半功倍的圖標繪制技巧及注意事項，話不多說，快來詳細了解一下。

在上篇，我們講述了圖標的定義、圖標按照功能的分類、圖標的設計風格以及應用場景，相信大家對圖標有了一個比較清晰的了解，這一篇我們著重來講解圖標該如何去繪制，以及繪制過程中的技巧和需要注意的事項。

一、 圖標繪制的基本流程

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

1.  頭腦風暴

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

2.  確定最佳關鍵詞

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

3.  確定樣式

圖標的樣式是確定產(chǎn)品調性與品牌非常重要的一部分，定義樣式時必須結合當前的產(chǎn)品定位，以及所在的場景設計出相符的圖標。

4.  獲取靈感

當我們對這個關鍵詞如何用圖形表達沒有概念時，就可以借助iconfont、iconfinder等圖標素材網(wǎng)站來獲取靈感。如果本身基礎較好，也可以直接借助照片進行提煉。

5.  繪制草圖

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

6.  繪制圖標

打開軟件開始繪制，我目前都用AI繪制，因為實際項目中需要各類尺寸的圖標適用于各種機型，AI是專門繪制矢量圖的軟件，不論放大還是縮小都很清晰。但是ps作為一款位圖軟件，放大縮小會糊。最關鍵的一點是，AI所提供的大量便捷工具可以明顯提升設計師繪制的效率。

另外，當繪制一套圖標時，為了保證它們視覺上的一致性，需要用到圖標柵格來輔助調整。（下文會講到）

二 、圖標繪制的技巧

  圖標的繪制雖然是基本流程的最后一步，但是卻包含了頗多的要點，這里我提煉了一些最核心的注意事項和技巧。

1.  布爾運算

圖標應該盡可能用更加簡單的幾何形狀去表達。布爾運算作為一種邏輯推演方法，可以將若干個簡單圖形通過一系列運算法則組合成新的幾何形狀，用這些形狀繪制的圖標富有邏輯之美，也極易后期的調整和擴展。

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

2.  形狀生成器

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

比如三個疊加的圓形，通過形狀生成器可以生成很多有意思的圖案，并且都是一步到位，如果用布爾運算的話就會變得非常繁瑣。當然，對于實際項目中的圖標而言，布爾運算夠用了，一些品牌標志、裝飾性圖標的設計可能會用到形狀生成器。

3.  圖標斷線技巧

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

（1）添加錨點

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

（2）路徑橡皮擦

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

三 、圖標繪制的注意事項

1.  辨識度

辨識度是圖標最底層、最重要的價值，試想一下，如果用戶使用一個功能時看不懂或者誤解圖標的含義，即使圖標設計得再精美也毫無價值。

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

2.  一致性

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

（1）描邊大小

所有圖標描邊粗細應該一致，而不是時粗時細。

（2）圓角大小

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

（3）斷線規(guī)律

這是很容易被忽略的一點，斷線過于隨意時，會顯得非常凌亂，毫無規(guī)律可言，斷線的大小和方向都應該遵循某個規(guī)律。需要注意的是，圓角矩形需要在圓角附近斷線，避免斷開圓角后影響圖標的辨識度。

（4）視覺重量

也就是圖標的視覺重量，下面的手機圖標用了較多的內部線條，導致看起來比其他兩個圖標更重、更復雜。

（5）視覺大小

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

借助柵格中四種形狀的參考線，我們可以很方便地調整這三個圖標，使它們在視覺大小上呈現(xiàn)一致性。

  至此，有關圖標的所有知識就全部講完了。圖標作為UI設計的基本功，需要長期的練習和總結，我自己也在不斷學習的路上，借此機會把已學的知識整理出來分享，希望能幫助到大家，共勉。

本文配套的練習素材請加QQ群：465481414下載

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

掃下方二維碼關注公眾號，隨時隨地學習PS：

相關推薦：

超全面的圖標基礎知識總結，原來圖標用法也有大講究！(上篇)

AI教程，輕松繪制Yoga風日落圖標

小白必看！一分鐘玩轉描邊圖標