@菜心設計鋪?：之前寫過的《騰訊設計師總結的圖標設計五維自檢法》受到了很多關注。轉眼已經(jīng)過去一年有余，對于圖標也有了更加深刻的理解，所以今天繼續(xù)深挖這個話題，希望能夠打造一份全面的、可行的圖標自檢手冊，幫助在大家改版、面試等場景進行自檢優(yōu)化。

識別

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

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

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

1. 含義識別

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

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

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

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

2. 視覺識別

視覺識別與圖標含義無關，主要是視覺層面阻礙用戶識別的因素。目前我總結有以下幾點。

顏色因素

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

底色與線性圖標的搭配

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

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

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

復雜程度

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

比如下面這組底部圖標：

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

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

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

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

統(tǒng)一

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

1. 圓角大小

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

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

2. 描邊粗細

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

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

3. 視覺大小

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

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

4. 描邊尾部細節(jié)

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

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

5. 角度

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

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

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

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

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

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

6. 正負形比例

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

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

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

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

耐看

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

1. 飽滿

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

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

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

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

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

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

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

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

2. 有變化的透氣感

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

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

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

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

所以我們需要在透氣的基礎上再融入一些變化，比如下面的例子，就體現(xiàn)了這種有變化的透氣感，不論是正形還是負形都有很大的變化：

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

風格

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

1. 屬性表達

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

比如同一種黑白線稿的形式表達，不同的圓角大小就會給人不同的感覺：

左側就會偏嚴肅一些，右側就會偏可愛一些。

所以千萬不要小看前期的屬性表達，它可以幫助你確定大的骨骼基調(diào)。

2. 形式表達

確定了基礎的屬性之后，就是填充形式的時候了：

至于形式的種類實在是太多了，但一定要有理有據(jù)，符合產(chǎn)品整體想表達的感覺。

我想講的重點是我們?nèi)绾翁崛〕橄蟮娘L格，然后用在我們自己的設計上，比如波洞的這組圖標：

風格就是在下面這組圖標的基礎上的二次原創(chuàng)，比如加入紋理、IP形象等等：

設計師在這中間需要提取風格的關鍵要素，然后結合產(chǎn)品需求來進行創(chuàng)作設計。

下面再來一個實例，比如看下面這套谷歌的圖標：

我們就可以在它的風格上提取出以下要素：

組合：就是每個圖標會由至少兩個元素組成。

融白：有一些白色的融入，使整體更加透氣。

有了這兩個要素之后，就可以根據(jù)具體需求來進行創(chuàng)作設計了，下面兩組圖標就是這么來的：

這就是對已有風格的一種提取及二次加工，也是我常用的一種圖標設計方法。

品牌

隨著設計越來越同質(zhì)化，品牌感逐漸被大家所重視，對于品牌這一塊，以前寫過很多相關文章，這里再簡單歸類一下。

1. 顏色

顏色是最容易體現(xiàn)品牌感的元素，所以圖標上經(jīng)常會結合品牌色來進行設計：

2. 圖形

圖形可以取自 logo、吉祥物等等，比如首頁圖標就經(jīng)常使用到 logo 本身：

再比如 MONO 的標簽欄圖標，設計非常大膽，提取 logo 上面的 4 個字母──M、O、N、O后，直接將其作為圖標，如下圖：

但是這種方法還是有很大的風險，畢竟每個字母與功能本身的含義沒什么聯(lián)系，如果不是非常個性化的 app，謹慎使用。

3. 形象

如果你的產(chǎn)品有品牌形象，那一定要用起來，比如騰訊動漫的黑子，就可以進行結合使用：

4. 特性

特性就是提取一些氣質(zhì)或者特征，例如斷線、圓潤、尖銳等等，屬于比較抽象的元素。

去年在優(yōu)化圖標的時候，發(fā)現(xiàn)騰訊動漫 logo 上字體筆畫比較粗，整體給人一種厚重飽滿的感覺：

因此我們可以在品牌 logo 中提取「粗胖飽滿」的品牌基因，在這樣的背景下就不用再糾結圖標使用 2px 描邊還是 3px 的描邊了：

我們可以很確定地使用 3px 描邊，因為它既符合品牌基因又符合用戶性格（肥胖圓潤顯得可愛）。

以上就是個人從識別、統(tǒng)一、耐看、風格、品牌，5 個維度來打造的自檢框架，相比較上一篇會更加的全面體系。對于圖標設計，一定要長期的積累，耐心的研究，我也還在不斷研究的路上，借此機會整理分享，希望大家互相學習進步。

歡迎關注作者的微信公眾號：「菜心設計鋪」