圖標(biāo)是界面設(shè)計中最重要的元素之一，也是我們UI設(shè)計師必備的技能，日常工作中我們經(jīng)常會接到含有圖標(biāo)設(shè)計、優(yōu)化的需求。但到底什么樣的圖標(biāo)才算是優(yōu)秀的?也許很多設(shè)計師并沒有太完整的評判體系，只是憑感覺，這樣就會造成輸出效果不穩(wěn)定、耗時太長等不良的后果。

所以借著這次機(jī)會我梳理了一套圖標(biāo)設(shè)計自檢的評判體系，一共五個維度，大綱如下：

1.識別

2.性格

3.品牌

4.飽滿

5.細(xì)節(jié)

1.識別

評判事物的價值在于它的用途是什么!圖標(biāo)的用途是幫助用戶理解信息，所以“識別性”就是圖標(biāo)最重要、最底層的價值，如果你設(shè)計一個圖標(biāo)，用戶看不懂，即使視覺再美觀，也是無根之木，沒有任何價值可言!

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

先說含義識別：簡單來說就是你的圖標(biāo)能不能被理解，當(dāng)然并不是設(shè)計師自己能理解就ok，而是需要用戶來決定，這里和大家分享一個我判斷圖標(biāo)是否易識別的方法——內(nèi)部用戶調(diào)研法，說白了就是隨機(jī)問一些團(tuán)隊內(nèi)部人員，最好多問幾種崗位，這樣得來的結(jié)果更加可靠，案例如下：

我在改版“話題”這個圖標(biāo)的時候，想到了微博的“#”，于是把“#”和氣泡框結(jié)合到了一起，如下圖：

這時我找來10個內(nèi)部人員進(jìn)行測試，只有3個能看懂圖標(biāo)的意思(這3個人都是平時經(jīng)常玩微博的)，在這樣的數(shù)據(jù)之下，不用猶豫，這個方案一定是不可取的。在進(jìn)行調(diào)研時，最少要保證80%的人能看懂，才證明你的方案是可行的。

再來說視覺識別：顧名思義這一點(diǎn)已經(jīng)與圖標(biāo)含義無關(guān)，而是視覺層面的問題，例如大小、底色等等阻礙用戶識別的因素。

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

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

有底色的圖標(biāo)全部從線性改成面性，如改不成面性(例如時鐘)需要適當(dāng)加粗描邊，目的就是提高視覺識別性。切記，識別性是圖標(biāo)最重要的價值，尤其是在沒有文字說明的情況下，一定不要讓用戶產(chǎn)生困惑，不然你就是在消耗用戶體驗，而不是給用戶體驗賦能!

2.性格

試想如果一個人沒有性格，那這個人就是沒有靈魂的，圖標(biāo)也一樣，沒有性格即沒有靈魂。那如何打造屬于自己的性格呢，我們需要從用戶和品牌出發(fā)，例如騰訊動漫的用戶都是動漫、cosplay愛好者，給人一種又萌又可愛的感覺，所以我們需要讓圖標(biāo)盡量圓潤一些：

像上圖2號圖標(biāo)一樣，增大圓角，使圖標(biāo)看起來更加圓潤可愛。基于這樣的用戶人群，我們還將原有一些單色圖標(biāo)，改成下面這樣的彩色圖標(biāo)：

目的就是讓圖標(biāo)可愛活潑的性格更加明顯。

3.品牌

品牌性是我們經(jīng)常提到的緯度，常用的提取品牌的基因也有很多，顏色、圖形、吉祥物等等，這里舉兩個例子，一個是具象的品牌基因——吉祥物：

我們有自己的品牌吉祥物——黑子，所以在圖標(biāo)設(shè)計時可以將其運(yùn)用起來，如下圖就是結(jié)合黑子形象設(shè)計出來的“逗幣”圖標(biāo)：

再舉個比較抽象的例子，從logo當(dāng)中提取品牌基因。由于logo的字體筆畫比較粗，整體給人一種厚重飽滿的感覺：