去年寫了一篇關(guān)于圖標設計自檢法的文章，一轉(zhuǎn)眼已經(jīng)過去一年有余，對于圖標也有了更加深刻的理解，所以今天繼續(xù)深挖這個話題，希望能夠打造一份全面的、可行的圖標自檢手冊，幫助在大家改版、面試等場景進行自檢優(yōu)化，大綱如下：

1.識別

1.1 含義識別

1.2 視覺識別

2.統(tǒng)一

2.1 圓角大小

2.2 描邊粗細

2.3 視覺大小

2.4 描邊尾部細節(jié)

2.5 角度

2.6 正負形比例

3.耐看

3.1 飽滿

3.2 變化的透氣感

4.風格

4.1 屬性表達

4.2 形式表達

5.品牌

5.1 顏色

5.2 圖形

5.3 形象

5.4 特性

1.識別

事物的價值在于它的用途是什么！

圖標的用途是幫助用戶理解信息，所以“識別性”就是圖標最重要、最底層的價值，如果你設計一個圖標，用戶看不懂，即使視覺再美觀，也是無根之木，沒有任何價值可言！

識別性可以分為兩個方面，一是含義識別，二是視覺識別。

1.1含義識別

含義識別就是你的圖標能不能被理解，在做騰訊動漫閱讀頁的時候，工具欄頂部新增一個圖標是詳情頁入口，最開始做的效果如下:

發(fā)現(xiàn)有些人以為它是目錄頁，有些人則根本不知道什么意思，這就屬于在含義識別層出現(xiàn)了問題。

由于這個圖標沒有文案搭配使用，所以在含義識別上一定要重視，最后的方案就是采用一個詳字來進行設計，既滿足了識別，又滿足了統(tǒng)一的形式:

其實這種提取含義本身的文案來進行設計是常用的提高含義識別性的手法，尤其是在圖標獨立出現(xiàn)的時候。

1.2視覺識別

視覺識別與圖標含義無關(guān)，主要是視覺層面阻礙用戶識別的因素。

目前我總結(jié)有以下幾點:

1.2.1 顏色因素

明度特別接近的顏色不能用在一起，比如檸檬黃和白色，如果白色圖標放在了檸檬黃的底色上，白色就很容易看不清楚，而且特別晃眼：

1.2.2 底色與線性圖標的搭配

這里引入一個國外的測試結(jié)果，是我在一位前輩的文章中看到的，測驗包括一組四種樣式的圖標：白底黑色實心圖標，白底黑色空心圖標，黑底白色實心圖標，黑底白色空心圖標，經(jīng)過10天的時間，1260名參與者總共完成了超過25000次圖標的認知測試。將得出的數(shù)據(jù)分成四組進行雙向方差分析，在相同的統(tǒng)計條件下，選擇黑底白色空心圖標要比其他三種組合的時間慢0.17秒，也就是說這種圖標的信息表達能力會少弱，如下圖：

所以在這樣的理論與數(shù)據(jù)的支撐下，去年我對部分圖標進行了如下改版：

有底色的圖標全部從線性改成面性，如改不成面性（例如時鐘）需要適當加粗描邊，目的就是提高視覺識別性。

1.2.3 復雜程度

在圖標設計前，我們一定要注意圖標的使用場景，有時候我們設計的圖標，做設計稿的時候沒什么問題，但是一放到真實場景中就會發(fā)現(xiàn)很多問題

比如下面這組底部圖標：

做設計的時候并沒有什么問題，但最后唯一被挑戰(zhàn)的就是，當把圖標縮小放在底部標簽欄的時候會不會過于密集而導致復雜？而這種復雜就很有可能造成圖標的視覺識別。

再比如下面這組圖標也都存在相同的問題：

所以在圖標尺寸較小的時候，一定要保證圖標的簡潔，否則就會影響識別。

切記，識別性是圖標最重要的價值，尤其是在沒有文字說明的情況下，一定不要讓用戶產(chǎn)生困惑，不然你就是在消耗用戶體驗，而不是給用戶體驗賦能！

2.統(tǒng)一

在圖標改版的時候，我們最常說到的就是圖標的統(tǒng)一性問題，對于統(tǒng)一性我們可以從那些方面入手，我整理了以下6點，我們依次來看。

2.1 圓角大小

圓角大小的統(tǒng)一，雖然經(jīng)常掛在嘴邊，但有時候還是容易被忽略，比如下面這組圖標：

并沒有完成圓角的統(tǒng)一性，比如免費圖標的圓角明顯小于其他兩個，后面被人提到，才糾正了這個細節(jié)：

2.2 描邊粗細

在做一組同等大小的圖標時，并不容易發(fā)生描邊粗細不一致的情況，比如我們很少會把其中三個做成4px，而其中一個做成2px：

這種錯誤，我覺得優(yōu)秀的你，應該不會犯。但是有些時候在做一套擁有不同尺寸的圖標時，我們必須要根據(jù)圖標大小來調(diào)整描邊粗細，使整體看起來統(tǒng)一和諧，大家一定要注意。

2.3 視覺大小

眾所周知，物理尺寸同等的方形要比圓形大，所以我們要在乎的是視覺感官上的大小統(tǒng)一，而不是物理尺寸，所以我們在做輔助線規(guī)范的時候會有圓形、方向、橫向矩形、縱向矩形：

其實目的就是能夠更加靈活的調(diào)整圖標大小，使其在視覺重量上保持統(tǒng)一。

2.4 描邊尾部細節(jié)

如果你的圖標是有描邊且斷線的，一定要注意這兩個細節(jié)，一個是描邊尾部的方與圓：

另一個就是斷線的距離，一定要做到統(tǒng)一，這個很容易被忽略：

2.5 角度

角度，也是增加圖標統(tǒng)一感的因素之一，最常見的角度統(tǒng)一方式就是按照一定的倍數(shù)來制定規(guī)范，比如30度的倍數(shù)：

再舉一個角度其他方面的例子，在做下面這組圖標的時候，最初沒有考慮斷線的規(guī)律：

所以看久了會覺得有些凌亂，于是我將斷線處定為右下角45度，如遇到圓角拐角處，可挪動靠近拐角處進行斷線：

這樣我們就會看到所有的圖標斷線位置都大致出現(xiàn)在右下角的地方，最終效果如下：

很大程度上提高了圖標的統(tǒng)一性，并且在延展執(zhí)行的時候節(jié)省了大量的思考時間（思考在哪里斷）。

但是對于斷線的位置是否一定要規(guī)定其出現(xiàn)的角度，我覺得不一定，也可以從其他角度考慮，但最終的目的還是讓整體統(tǒng)一和諧，且延展性高。

2.6 正負形比例

正負空間比例很容被忽略，以前我也很少講過，不過我覺得很實用，如下圖，很明顯白色所占比例不同，導致圖標一致性就會有問題：

當比例調(diào)整后，統(tǒng)一性就會加強很多：

這個因素既簡單又使用，大家一定要熟練掌握。

以上就是關(guān)于統(tǒng)一緯度的所有總結(jié)，做到統(tǒng)一雖然不會讓圖標加分太多，但是做不到統(tǒng)一，可能就還不算及格，所以定要重視起來。

3.耐看

能夠讓圖標耐看的因素有很多，以我目前的認知，主要有以下四點：

3.1飽滿

很多時候我們做出來的圖標不夠精致，其中一個很大的原因就是不夠飽滿。

如何判斷圖標是否飽滿呢？我常用的衡量方法就是在圖標上面加一個矩形，看圖標的正形的面積是否還可以增加。

例如下圖，藍色是正形，紅色是負形：

很明顯藍色的正形面積是可以增加的，例如：

這就是在增加圖標的飽滿度，我也是按照這個思路來改版圖標飽滿度的。

舉個真實的例子，我們原版的續(xù)看圖標是上下結(jié)構(gòu)，而上面部門的圖形太窄，導致左上角、右上角的空白太多（也就是綠色部分太多），沒有撐滿矩形，如下圖：

于是我對圖標的結(jié)構(gòu)進行了調(diào)整，盡可能的減少綠色部分，最后達到了下圖這樣的效果：

最后提醒大家，對于圖標的飽滿度，還需要結(jié)合整套圖標的視覺效果來進行調(diào)試，雖然上面這個方法可以解決大部門圖標的飽滿問題，但還是要具體場景具體分析。

3.2 有變化的透氣感

很多時候我們會發(fā)現(xiàn)自己的做的圖標有些死板、發(fā)悶，其實很多時候就是透氣感沒做好。

什么是透氣？我們經(jīng)常會說頁面不夠透氣，沒有呼吸感，其實無非就是留白做的不好，圖標也是一樣的，比如下面這組面形圖形：

看起來就很悶，如果我們給它加一扇窗，也就是加入白色之后：

這樣整體就會透氣很多，但是這種透氣做的并不是很好，圖標外形和里面融入的白色形狀都有些雷同，這樣就會導致圖標看起來沒有變化的細節(jié)。

所以我們需要在透氣的基礎(chǔ)上再融入一些變化，比如前一陣子幫霖霖做的6個圖標，其中有三個我覺得還可以，就是因為體現(xiàn)了這種有變化的透氣感，不輪是正形還是負形都有很大的變化（不過當時要的很急，只做了兩個小時就給他了，不然還能更好些）：

對于耐看這一塊，我覺得應該會有很多知識點，不過目前我能總結(jié)出來的只有這兩點，后面會繼續(xù)挖掘。

4.風格

風格包含兩方面內(nèi)容，一個是屬性表達，一個是形式表達。

4.1 屬性表達

屬性表達就是圖標的骨骼基調(diào)，比如圓角大小、線條粗細等，可以根據(jù)行業(yè)屬于及用戶人群來進行判斷，比如商務行業(yè)和動漫行業(yè)就完全不同的屬性，商務行業(yè)可以偏方正嚴肅一些，而動漫行業(yè)可以偏圓潤一些（當然也不絕對，只要有因有果即可）；再比如男性和女性，老人和小孩都有不同的屬性表達。

同一種形式表達（比如雙色的形式），不同的圓角大小就會給人不同的感覺：