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

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

1.識(shí)別

2.性格

3.品牌

4.飽滿

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

1.識(shí)別

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

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

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

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

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

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

這里引入一個(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)加粗描邊，目的就是提高視覺(jué)識(shí)別性。切記，識(shí)別性是圖標(biāo)最重要的價(jià)值，尤其是在沒(méi)有文字說(shuō)明的情況下，一定不要讓用戶產(chǎn)生困惑，不然你就是在消耗用戶體驗(yàn)，而不是給用戶體驗(yàn)賦能!

2.性格

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

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

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

3.品牌

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

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

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