所以今天繼續(xù)深挖"圖標(biāo)設(shè)計(jì)"這個(gè)話題，希望能夠打造一份全面的、可行的圖標(biāo)自檢手冊(cè)，幫助在大家改版、面試等場(chǎng)景進(jìn)行自檢優(yōu)化。

識(shí)別

事物的價(jià)值在于它的用途是什么。

圖標(biāo)的用途是幫助用戶理解信息，所以「識(shí)別性」就是圖標(biāo)最重要、最底層的價(jià)值。如果你設(shè)計(jì)一個(gè)圖標(biāo)，用戶看不懂，即使視覺再美觀，也是無(wú)根之木，沒有任何價(jià)值可言。

識(shí)別性可以分為兩個(gè)方面，一是含義識(shí)別，二是視覺識(shí)別。

1. 含義識(shí)別

含義識(shí)別就是你的圖標(biāo)能不能被理解。在做騰訊動(dòng)漫閱讀頁(yè)的時(shí)候，工具欄頂部新增一個(gè)圖標(biāo)是詳情頁(yè)入口，最開始做的效果如下：

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

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

其實(shí)這種提取含義本身的文案來(lái)進(jìn)行設(shè)計(jì)是常用的提高含義識(shí)別性的手法，尤其是在圖標(biāo)獨(dú)立出現(xiàn)的時(shí)候。

2. 視覺識(shí)別

視覺識(shí)別與圖標(biāo)含義無(wú)關(guān)，主要是視覺層面阻礙用戶識(shí)別的因素。目前我總結(jié)有以下幾點(diǎn)。

顏色因素

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

底色與線性圖標(biāo)的搭配

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

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

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

復(fù)雜程度

在圖標(biāo)設(shè)計(jì)前，我們一定要注意圖標(biāo)的使用場(chǎng)景，有時(shí)候我們?cè)O(shè)計(jì)的圖標(biāo)，做設(shè)計(jì)稿的時(shí)候沒什么問題，但是一放到真實(shí)場(chǎng)景中就會(huì)發(fā)現(xiàn)很多問題。

比如下面這組底部圖標(biāo)：

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

再比如下面這組圖標(biāo)也都存在相同的問題：

所以在圖標(biāo)尺寸較小的時(shí)候，一定要保證圖標(biāo)的簡(jiǎn)潔，否則就會(huì)影響識(shí)別。

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

統(tǒng)一

在圖標(biāo)改版的時(shí)候，我們最常說(shuō)到的就是圖標(biāo)的統(tǒng)一性問題，對(duì)于統(tǒng)一性我們可以從哪些方面入手，我整理了以下 6 點(diǎn)，我們依次來(lái)看。

1. 圓角大小

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

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

2. 描邊粗細(xì)

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

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

3. 視覺大小

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

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

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

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

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

5. 角度

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

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

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

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

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

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

6. 正負(fù)形比例

正負(fù)空間比例很容被忽略，以前我也很少講過(guò)，不過(guò)我覺得很實(shí)用。如下圖，很明顯白色所占比例不同，導(dǎo)致圖標(biāo)一致性就會(huì)有問題：

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

這個(gè)因素既簡(jiǎn)單又實(shí)用，大家一定要熟練掌握。

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

耐看

能夠讓圖標(biāo)耐看的因素有很多，以我目前的認(rèn)知，主要有以下兩點(diǎn)。

1. 飽滿

很多時(shí)候我們做出來(lái)的圖標(biāo)不夠精致，其中一個(gè)很大的原因就是不夠飽滿。

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

例如下圖，藍(lán)色是正形，紅色是負(fù)形：

很明顯藍(lán)色的正形面積是可以增加的，例如：

這就是在增加圖標(biāo)的飽滿度，我也是按照這個(gè)思路來(lái)改版圖標(biāo)飽滿度的。

舉個(gè)真實(shí)的例子，我們?cè)娴睦m(xù)看圖標(biāo)是上下結(jié)構(gòu)，而上面部分的圖形太窄，導(dǎo)致左上角、右上角的空白太多（也就是綠色部分太多），沒有撐滿矩形，如下圖：

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

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

2. 有變化的透氣感

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

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

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

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

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

對(duì)于耐看這一塊，我覺得應(yīng)該會(huì)有很多知識(shí)點(diǎn)，不過(guò)目前我能總結(jié)出來(lái)的只有這兩點(diǎn)，后面會(huì)繼續(xù)挖掘。

風(fēng)格

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

1. 屬性表達(dá)

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

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

左側(cè)就會(huì)偏嚴(yán)肅一些，右側(cè)就會(huì)偏可愛一些。

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

2. 形式表達(dá)

確定了基礎(chǔ)的屬性之后，就是填充形式的時(shí)候了：

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

我想講的重點(diǎn)是我們?nèi)绾翁崛〕橄蟮娘L(fēng)格，然后用在我們自己的設(shè)計(jì)上，比如波洞的這組圖標(biāo)：

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

設(shè)計(jì)師在這中間需要提取風(fēng)格的關(guān)鍵要素，然后結(jié)合產(chǎn)品需求來(lái)進(jìn)行創(chuàng)作設(shè)計(jì)。

下面再來(lái)一個(gè)實(shí)例，比如看下面這套谷歌的圖標(biāo)：

我們就可以在它的風(fēng)格上提取出以下要素：

組合：就是每個(gè)圖標(biāo)會(huì)由至少兩個(gè)元素組成。

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

有了這兩個(gè)要素之后，就可以根據(jù)具體需求來(lái)進(jìn)行創(chuàng)作設(shè)計(jì)了，下面兩組圖標(biāo)就是這么來(lái)的：

這就是對(duì)已有風(fēng)格的一種提取及二次加工，也是我常用的一種圖標(biāo)設(shè)計(jì)方法。

品牌

隨著設(shè)計(jì)越來(lái)越同質(zhì)化，品牌感逐漸被大家所重視，對(duì)于品牌這一塊，以前寫過(guò)很多相關(guān)文章，這里再簡(jiǎn)單歸類一下。

1. 顏色

顏色是最容易體現(xiàn)品牌感的元素，所以圖標(biāo)上經(jīng)常會(huì)結(jié)合品牌色來(lái)進(jìn)行設(shè)計(jì)：

2. 圖形

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

再比如 MONO 的標(biāo)簽欄圖標(biāo)，設(shè)計(jì)非常大膽，提取 logo 上面的 4 個(gè)字母──M、O、N、O后，直接將其作為圖標(biāo)，如下圖：

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

3. 形象

如果你的產(chǎn)品有品牌形象，那一定要用起來(lái)，比如騰訊動(dòng)漫的黑子，就可以進(jìn)行結(jié)合使用：

4. 特性

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

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

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

我們可以很確定地使用 3px 描邊，因?yàn)樗确掀放苹蛴址嫌脩粜愿瘢ǚ逝謭A潤(rùn)顯得可愛）。

以上就是個(gè)人從識(shí)別、統(tǒng)一、耐看、風(fēng)格、品牌，5 個(gè)維度來(lái)打造的自檢框架。對(duì)于圖標(biāo)設(shè)計(jì)，一定要長(zhǎng)期的積累，耐心的研究，我也還在不斷研究的路上，借此機(jī)會(huì)整理分享，希望大家互相學(xué)習(xí)進(jìn)步。

文章作者：菜心設(shè)計(jì)鋪