在《從零開始畫圖標(biāo)系列：超全面的基礎(chǔ)知識(shí)》中我們知道了，工具圖標(biāo)的三種設(shè)計(jì)類型，以及對(duì)應(yīng)的不同風(fēng)格。本篇文章，內(nèi)容主要分為規(guī)范講解和案例演示兩個(gè)部分，規(guī)范是工具圖標(biāo)的重點(diǎn)。希望讀者千萬不要跳過這部分的知識(shí)講解直接去看演示了。

△ 三種主要類型的圖標(biāo)

表意的準(zhǔn)確

在第一部分中，我們知道圖標(biāo)的主要作用之一就是作為文字的替代品，具有明確的寓意。比如看見一個(gè)放大鏡，我們會(huì)當(dāng)成那是搜索；看見鑰匙或者鎖，我們就會(huì)理解成是密碼。比如下面這些圖標(biāo)，每一個(gè)指代的功能和寓意都是非常直白和清晰的。

△ 寓意明確的圖標(biāo)

表達(dá)的寓意清晰，是工具圖標(biāo)最基本的要求，否則它只會(huì)傳遞錯(cuò)誤的信息，造成用戶的困惑。

在常見的圖標(biāo)類型里，如通知、設(shè)置、用戶和分享之類的圖標(biāo)，對(duì)于任何手機(jī)用戶來說都沒有認(rèn)知和選擇壓力。但表意準(zhǔn)確麻煩的地方在于，一些非常規(guī)的寓意，極難用圖標(biāo)表現(xiàn)出來，這才是我們使用工具圖標(biāo)的首要麻煩。

比如下方這些圖標(biāo)，如果我不加上文字信息，大家能理解它們是什么嗎？

△ 無文字信息

那么，我們?cè)侔盐淖中畔⒀a(bǔ)充進(jìn)去，是不是就會(huì)覺得圖形挺貼合內(nèi)容的？

△ 有文字信息

在這種案例中，我們要關(guān)注的就是，面對(duì)這樣不常見的內(nèi)容，設(shè)計(jì)師是怎么把圖形的創(chuàng)意和樣式想出來的，如果自己遇到一樣的問題怎么辦？

所以，除了知道每個(gè)工具圖標(biāo)都要表意準(zhǔn)確之后，該如何通過合適的創(chuàng)意將圖標(biāo)樣式確定出來？

一般抽象的圖標(biāo)，難點(diǎn)在于寓意信息是非實(shí)體的，我們很難直接構(gòu)建對(duì)圖形樣式的聯(lián)想，所以我們得想辦法將抽象的內(nèi)容「實(shí)體化」。也就是說，我們可以先把這個(gè)詞寫到紙上，把和這個(gè)抽象信息相關(guān)的所有實(shí)體物寫下來。

然后，我們可以挑選出某個(gè)合適的實(shí)物，以它作為原型開始繪制。如果對(duì)挑選出來的實(shí)物要以什么圖形表現(xiàn)還沒概念，那么就可以借助網(wǎng)上的圖標(biāo)素材網(wǎng)站，比如 iconfont、iconfinder 等，在搜索框中輸入這些詞語，通過別人的設(shè)計(jì)獲取靈感。

如果本身擁有比較好的手繪基礎(chǔ)或是平面基礎(chǔ)，也可以直接通過對(duì)照片進(jìn)行提煉的方式，設(shè)計(jì)出圖形內(nèi)容。

所以，在設(shè)計(jì)圖標(biāo)時(shí)要符合表意準(zhǔn)確的概念，需要設(shè)計(jì)師不斷收集圖形，并提升對(duì)詞匯聯(lián)想的能力。很多優(yōu)秀的創(chuàng)意，就是在這些基礎(chǔ)的積累之上逐漸形成的，而不是一蹴而就。

圖標(biāo)的一致性

第二個(gè)規(guī)范，叫圖標(biāo)的一致性。即一個(gè)或一套圖標(biāo)中，應(yīng)該保持一致的細(xì)節(jié)。首先看看下面的反面案例：

在上面的案例中，不同圖標(biāo)間有很大的割裂感，完全不像處于同一套設(shè)計(jì)體系之下，這就是缺乏一致性的表現(xiàn)。這也是新手在設(shè)計(jì)一整套圖標(biāo)最大的難點(diǎn)，要讓所有圖標(biāo)保持視覺細(xì)節(jié)上的一致。

那么，工具圖標(biāo)要保持視覺一致性有哪些細(xì)節(jié)呢？

1. 類型一致

前面說過，工具圖標(biāo)有線性的和填充的類型，在正常的情況中，同一套圖標(biāo)應(yīng)該保持相同的類型，如果使用了線性圖標(biāo)那么后續(xù)就不要設(shè)計(jì)填充以及混合的類型。

2. 風(fēng)格一致

每一套圖標(biāo)都有自己的設(shè)計(jì)風(fēng)格，不同風(fēng)格在細(xì)節(jié)中都有不同的表現(xiàn)，需要讓這些風(fēng)格特征保持高度統(tǒng)一，看看下面這些案例。

第一，為圖標(biāo)添加缺口的設(shè)計(jì)風(fēng)格，我們要保證這個(gè)缺口的大小是一致的，并且每一個(gè)圖標(biāo)中有且只有一個(gè)缺口，而不是靠感覺隨意添加。

第二，在設(shè)計(jì)一套偏圓潤可愛的設(shè)計(jì)風(fēng)格中，外輪廓使用了較大的圓角，那么我們盡可能保證圓角的大小是一致的，而不是有的用4pt，有的用2pt或者直接使用直角。

第三，采用了填充色偏移的設(shè)計(jì)風(fēng)格，首先要保證填充色一致，并且偏移的距離和方向也要保持固定的規(guī)律，不能隨喜好任意制定。

3. 透視一致

透視關(guān)系是在平面中對(duì)物體空間性質(zhì)的表現(xiàn)方式，當(dāng)我們應(yīng)用了透視時(shí)，物體就有了一定的 「立體感」。

透視的表現(xiàn)不是繪制圖標(biāo)時(shí)必須使用的風(fēng)格，但是如果我們?cè)趫D標(biāo)中應(yīng)用了透視，就要確保我們使用的視角是一致的。要極力避免同一套圖標(biāo)中既用了正視圖又包含了側(cè)視圖。

4. 粗細(xì)一致

在圖標(biāo)中我們會(huì)應(yīng)用到矩形線段或是描邊，我們要盡可能保證它們的粗細(xì)是一致的。

比如，在線性的設(shè)計(jì)中，路徑的描邊尺寸要保持一致，不能這個(gè)圖標(biāo)用2pt，那個(gè)圖標(biāo)用1pt。

在填充圖標(biāo)中，我們會(huì)在一個(gè)矩形或是圓形中增加矩形的鏤空，比如下圖的幾個(gè)圖標(biāo)，在這種情況下也要保證它們的粗細(xì)是一致的，而不是各不相同。

5. 大小一致

大小一致，就是讓圖標(biāo)的視覺大小保持一致，而不是它們字面上的長寬屬性保持一致。

因?yàn)檫@是一個(gè)比較復(fù)雜的知識(shí)點(diǎn)，需要我們對(duì)幾何圖形的視覺差有比較完整的認(rèn)識(shí)，我會(huì)在下一節(jié)做出完整的介紹。

這些和一致性有關(guān)的特征，是一套圖標(biāo)看起來專業(yè)、有整體感的必要條件。但是，在真實(shí)的設(shè)計(jì)場景中需要靈活變通。

如果有一些特定的圖標(biāo)，在保證了一致性的要求后卻極難被人理解，且找不到更好的設(shè)計(jì)方式，就可以差別對(duì)待。

比如在一套線性的圖標(biāo)中，播放、快進(jìn)等圖標(biāo)往往都是填充類型的，這并不會(huì)造成視覺或是使用上的困擾。

幾何圖形的視覺差

幾何圖形的視覺差，是對(duì)于工具圖標(biāo)來說最重要的細(xì)節(jié)，在《從零開始畫圖標(biāo)系列：超全面的基礎(chǔ)知識(shí)》圖標(biāo)一致性中已經(jīng)提及，它也是平面基礎(chǔ)理論中不可忽視的內(nèi)容，這個(gè)理論要解決一個(gè)核心的問題，即怎么讓不同的圖形看上去一樣大？

可能有的讀者看到這里會(huì)覺得這有什么難的，通過軟件的參考線或者屬性設(shè)置，把它們的長寬設(shè)置成一樣不就完事了。比如下圖這樣：

△ 尺寸等大的幾何形視覺大小并不一致

畫起來輕輕松松，參數(shù)上完美無缺。但是，怎么看上去這些圖形大小有點(diǎn)不一樣，為什么正方形看起來這么大，三角形看起來這么小？

這個(gè)問題的根源是，不同幾何圖形帶給我們的視覺大小是不同的。而要解決這樣的問題，就要對(duì)它們的尺寸做出額外的調(diào)整。比如下圖這樣：

△ 圓和三角需要進(jìn)行放大修正

適當(dāng)調(diào)整完圓形和三角形以后，是不是覺得大小的感覺一致了？這就要牽扯一個(gè)更基礎(chǔ)的視覺規(guī)律，占據(jù)面積越大的圖形，給人的視覺感受就越大，所以給我們感受越小的元素，就要放得越大。

并且，這個(gè)問題在一個(gè)圖形的內(nèi)部也會(huì)產(chǎn)生影響，比如知乎APP 下面的點(diǎn)贊和反對(duì)按鈕，都有三角形圖標(biāo)，但圖形其實(shí)對(duì)于外部矩形是非居中的，我們看看下面的演示。

如果一個(gè)圖形其中一部分面積遠(yuǎn)大于另一部分，那么就會(huì)讓這個(gè)圖形的重心產(chǎn)生偏移，必須要往較小的部分的方向移動(dòng)才能產(chǎn)生平衡。

所以，在設(shè)計(jì)一整套的應(yīng)用中，如果沒有對(duì)這個(gè)理論的理解，只定義一個(gè)矩形出來，把所有圖形的尺寸與矩形對(duì)齊，那么最終看到的圖標(biāo)效果一定是極度不平衡的。

工具圖標(biāo)的柵格

其實(shí)，針對(duì)圖標(biāo)的規(guī)范，新人第一個(gè)想到的應(yīng)該就是參考線了，也就是所謂的柵格模板。之所以放后面講解，是因?yàn)楣ぞ邎D標(biāo)的柵格規(guī)范，是根據(jù)幾何的視覺差特性衍生出來的，而不像后面會(huì)提到的應(yīng)用圖標(biāo)由官方提供出來。

我們先簡單看看，常見的工具圖標(biāo)柵格是什么樣的。

里面包含了正方形、長方形和圓形，那我們把它們分別羅列出來看看。是不是就發(fā)現(xiàn)這些圖形的視覺尺寸是非常接近的？然后再通過這樣的尺寸設(shè)計(jì)對(duì)應(yīng)的圖形，也就看起來都一樣大了。

所以，應(yīng)用圖標(biāo)的柵格系統(tǒng)對(duì)于圖標(biāo)的設(shè)計(jì)來說，是一個(gè)用來應(yīng)對(duì)幾何圖形視覺差的「參照物」。

之所以要說參照物，原因在于一套圖標(biāo)不會(huì)只存在這幾種圖形的樣式，還有很多千奇百怪的形狀，但大體上我們可以識(shí)別出來它的類似輪廓或者重心方向，于是就可以通過參照?qǐng)D形來判斷我們?cè)O(shè)計(jì)出來的圖形尺寸是否符合標(biāo)準(zhǔn)。

如果設(shè)計(jì)圖形和參照?qǐng)D形類似，那么尺寸就不能大于參照?qǐng)D形；如果設(shè)計(jì)圖形的寬大于參照?qǐng)D，那么高就要小于參照?qǐng)D，反之亦然。如果圖形的重心有偏移，那就要往重心偏移的反方向移動(dòng)，比如搜索按鈕，Wifi圖標(biāo)等。

最后，說說柵格系統(tǒng)的畫法，和大家想象的不一樣，想要畫一套圖標(biāo)，柵格系統(tǒng)是我們自己畫出來的，不是到網(wǎng)上下載下來的，所以怎么畫也是這個(gè)知識(shí)的重點(diǎn)。

1. 如何繪制圖標(biāo)柵格系統(tǒng)

如果我們定義一套28pt的圖標(biāo)，那么我們首先要畫一個(gè)28pt的正方形，然后確定一個(gè)2-4pt的內(nèi)邊距，正所謂四邊留一線，日后好相見。

然后就要開始在其中繪制正方形和圓形，正方形通常在整個(gè)圖標(biāo)尺寸1/2的比例，可以使用14或16的偶數(shù)（為了可以居中）。然后再確定圓形的尺寸，圓肯定比正方形大2-4pt，于是就得到下方的圖形。

之后，我們?cè)俅_定橫豎長方形的尺寸，可以直接頂?shù)絻?nèi)邊距的邊緣。它的尺寸不是通過數(shù)值計(jì)算的，而是要我們先畫出來，把它們和前面的圓和正方形置于一條水平線上，調(diào)整出一個(gè)平衡的視覺尺寸，再合并進(jìn)柵格系統(tǒng)中，就完成了柵格系統(tǒng)的繪制，如下圖的案例。

這一步也旨在檢查我們的參考線系統(tǒng)是否在基礎(chǔ)結(jié)構(gòu)上經(jīng)得起考驗(yàn)，是非常關(guān)鍵的一步。因?yàn)椴煌叽绲膱D標(biāo)中，參考線系統(tǒng)都是有區(qū)別的，我們不能直接按一個(gè)固定的比例來設(shè)置，要根據(jù)實(shí)際場景做判斷。

當(dāng)然，為了進(jìn)一步方便大家的學(xué)習(xí)，我特意準(zhǔn)備了一套現(xiàn)成的柵格素材，包含16、24、28、32、36、48等六個(gè)尺寸。

素材鏈接：https://pan.baidu.com/s/1rMbQKXVA4PRR_O9vA7hlew

密碼：y580

備用下載鏈接：https://pan.baidu.com/s/194f5v8nM6_4mRulO7viOxA

像素對(duì)齊

在柵格的繪制中，細(xì)心的讀者肯定發(fā)現(xiàn)了幾個(gè)關(guān)鍵字，「對(duì)齊」、「偶數(shù)」，這就是在這一部分要提及的內(nèi)容。關(guān)于顯示器的倍率問題是 UI 基礎(chǔ)知識(shí)點(diǎn)之一，可能有的同學(xué)不太了解，不過沒關(guān)系，直接看下面的內(nèi)容即可。

我們都知道像素是屏幕顯示中的最小單位，一個(gè)像素只能顯示一種顏色。小時(shí)候玩過的 GBA 和 FC 游戲機(jī)，都是通過像素畫的形式呈現(xiàn)，人物鋸齒是無法避免的。

而隨著技術(shù)發(fā)展，像素密度是降低了，但如果依舊是按過去這種一個(gè)蘿卜一個(gè)坑的方式顯示內(nèi)容，那鋸齒感無論如何是無法消除的。于是，開發(fā)了次像素渲染（Subpixel Rendering）的技術(shù)。一個(gè)在顯示器中讓我們覺得平滑的圓，一直放大，就可以發(fā)現(xiàn)它的周邊充滿了飽和度較低的其它方塊色彩。

△ 子像素渲染

這項(xiàng)技術(shù)，讓像素可以用特有的方式來顯示非完整的色塊，即盡可能還原我們對(duì)元素定義的小數(shù)點(diǎn)。但為什么我們還要提這個(gè)概念呢？

因?yàn)楣ぞ叩膱D標(biāo)太小了，而且 UI 的元素對(duì)精細(xì)和準(zhǔn)確度的要求都不低，如果我們沒有盡可能滿足像素對(duì)齊的要求，那么就可能導(dǎo)致元素邊緣的模糊。

所以要滿足像素對(duì)齊的要求，就要符合元素本身的尺寸為整數(shù)、描邊為整數(shù)和XY軸坐標(biāo)為整數(shù)的特性。

1. AI中的像素對(duì)齊設(shè)置

在 AI 中，我們可以通過兩個(gè)設(shè)定來查看和保證像素對(duì)齊，即網(wǎng)格的設(shè)置顯示，以及對(duì)齊到點(diǎn)的設(shè)置。

像素的對(duì)齊主要表現(xiàn)在橫線和豎線上，雖然現(xiàn)在手機(jī)顯示精度越來越高，但并不意味著我們可以無視像素對(duì)齊的規(guī)律。在線性圖標(biāo)中，對(duì)于1pt或者2pt描邊的應(yīng)用，覺得不是太細(xì)就是太粗，可以用1.5pt的數(shù)值（1.5pt在2x中就是3px），但切記不要出現(xiàn)類似1.23、2.16、3.46這種小數(shù)。

像素對(duì)齊是一個(gè)專業(yè)UI設(shè)計(jì)師對(duì)于極致追求的表現(xiàn)之一，是每一個(gè)一線大廠UI設(shè)計(jì)師的基本操作，所以，想要沖刺更高的段位，就不要忽視這個(gè)規(guī)范的使用。

結(jié)語

這一章主要講解了在設(shè)計(jì)工具圖標(biāo)時(shí)，有哪些知識(shí)點(diǎn)和規(guī)范，為了加深大家的記憶點(diǎn)，我再把它們的知識(shí)點(diǎn)羅列出來：

1. 圖標(biāo)要表意準(zhǔn)確，能被用戶識(shí)別并契合想要表達(dá)的寓意。
2. 設(shè)計(jì)整套圖標(biāo)的時(shí)候要符合一致性原則，包括類型、風(fēng)格、粗細(xì)、透視、大小等特征。
3. 不同的幾何圖形會(huì)給我們不同的大小視感，不能只看元素的參數(shù)。
4. 我們根據(jù)視覺差的方式定義出柵格系統(tǒng)，作為圖標(biāo)尺寸設(shè)定的重要參考。
5. 圖標(biāo)的繪制要保證橫豎的直線對(duì)齊到像素，線性圖標(biāo)盡量采用整數(shù)粗細(xì)，如果一定要用小數(shù)的話就使用0.5遞進(jìn)的。

當(dāng)然，光靠閱讀是無法真正記憶和理解這些特性的，必須通過動(dòng)手實(shí)踐才可以融匯貫通。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」