詳細解析圖標設計五維自檢查法

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

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

1.識別

2.性格

3.品牌

4.飽滿

5.細節

1.識別

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

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

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

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

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

再來說視覺識別：顧名思義這一點已經與圖標含義無關，而是視覺層面的問題，例如大小、底色等等阻礙用戶識別的因素。

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

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

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

2.性格

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

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

目的就是讓圖標可愛活潑的性格更加明顯。

3.品牌

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

我們有自己的品牌吉祥物——黑子，所以在圖標設計時可以將其運用起來，如下圖就是結合黑子形象設計出來的“逗幣”圖標：

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