自從扁平化還有極簡設計開始流行之后，圖標的設計越來越重要，經(jīng)常有設計師問，到底軟件程序里面的這個圖標怎么設計?

另外網(wǎng)頁設計的設計師也會問，我們這平臺有vip會員，那vip會員的圖標要怎么設計?

還有一個app的設計，這聊天里面的群組圖標，要怎么設計?

圖標的設計，我認為是對于ui/ux設計師來說；是最難的工作之一。

圖標的用意是什么

我們會使用圖標就是用它來在使用者界面上傳達有意義的東西；而這個有意義的東西，有可能是你的對象、想法、動作，然后設計師把這些有意義東西視覺化。

圖標的優(yōu)點

1. 它是一個全世界共通的語言，不會受到你文化與語言的影響，舉個例子，大家都知道手機對吧，手機的樣式很多種，但是看下這個圖標你是不是馬上就可理解到這個是手機的圖標？

手機圖標

2. 可以快速讓使用者識別，尤其是在快速移動的時候，你可以馬上輕易的找到你要的功能與東西。

手機在移動的中圖標的形象會是這樣子，比起文字，更容易在移動的時候識別

3. 增加設計的美感。

4. 節(jié)省空間，尤其對于喜歡極簡設計或者扁化的設計。

5. 圖標是一個非常好的點擊目標。

以上說了那么多的優(yōu)點，但是這個優(yōu)點有個前提，那就是你的圖標要設計得非常好，并且可以讓使用者馬上看的出來你要表達的意思，如果不是，那么你會讓使用者產(chǎn)生困惑，導致使用者想要完成某項任務或者事情，使用者會操作失敗或者錯誤點擊。

比如：

看下一下gmail，我紅色圈起來的部分

gmail信件內(nèi)的圖標

你可以只看圖標就知道這個是什么意思嗎?

設計師通常犯的錯誤

說了那么多來看很多設計師曾經(jīng)犯的那些錯，導致使用者抱怨最多，并且造成使用者困擾。

1.經(jīng)常發(fā)明圖標，導致使用者對于圖標不是很了解導致使用者常常錯誤點擊。

2.常常抱怨只要一改版就不知道哪一個功能跑到哪里去了。

3.圖標畫得太細節(jié)，太會發(fā)揮創(chuàng)意導致使用者與內(nèi)容搞混，說白點就是圖標搶了內(nèi)容的風采，讓使用者注意的點放在圖標上不是內(nèi)容上，然后在小尺寸上那么細節(jié)的圖標根本沒有必要；使用者大多也看不是很清楚。

4.使用一些通用圖標但是沒有考慮到多平臺的問題，實際上同樣是垃圾桶，ios與android本身就有很大的不同。

5.使用意義不是很明確的東西卻要用圖標表達，自己太會發(fā)揮創(chuàng)意導致使用者認知上的困難，例如app的里面的特殊圖標要怎么畫，結果往往是自己在爽，沒有考慮使用者能否領會。

6.為了省下空間而省下空間，沒有考慮使用者對于學習新圖標的學習成本。

設計與選擇圖標遵循的五個原則

所以你應該這樣子做：

一. 能不能在五秒內(nèi)判斷出你的圖標的意義

如果不行請重新設計。

二. 選擇通用性高的圖標

例如下面這些，你一看就知道什么意思

如果你是自己定義這些圖標，ios與android的雖然外型差不多，但有明顯的風格差異，有些圖標的差異性非常大，要找出適合該平臺的設計的圖標，對于ios與android平臺優(yōu)化，而不是設計一個共用圖標全部平臺通用。

比如：

這兩個差異很大的圖標，卻是分享，上面是android下面是ios

三. 保持一致性

通用性圖標選擇有些要很注意，如果你選擇的圖標在通用上常常代表兩種意思以上，那你在使用上要特別小心，這邊建議作法是保持一致性，例如愛心代表加入我的最愛，那整個平臺的愛心都是加入我的最愛。

幾個通用性高但卻代表很多意義圖標如下

四. 用文字說明抽象的圖標

如果空間允許，請你一定要使用文字說明；假設你今天要設計一個圖標這個圖標是很特殊的，例如群組、vip、天氣、快樂….etc；你所設計的這類型抽象的圖標，最好加上文字說明。

如果空間不允許，那怎么辦，那你應該不要用圖標而使用標簽來代替圖標。

空間真的不夠，改用標簽

還有設計抽象類型的圖標，一定要在真實世界中找到相關聯(lián)性，盡量不要完全無關；不然你的圖標就算用文字說明，也很難讓人明白的意思或者快速記住這個圖標的意思。

因為抽象的標簽很復雜；你這個圖標可以用許多的詞來表達它的意思，但往往使用者并不知道這個圖標的意思。

例如：

圖標加上標簽

五. 清楚的特征外觀

你在設計圖標的時候不論是抽象還是共用的；你不應該花太多時間在細節(jié)上，因為太小的圖標細節(jié)是很難被看出來，你應該要花更多時間問自己，使用這類圖標的意義在哪里。

所以在特征外型上要有真實的物理特征或者視覺效果。

例如下面這個圖標就是用來表示測試手機網(wǎng)速的。

測試網(wǎng)速

經(jīng)典的抽象圖標：設置。

設置的圖標

我想大家都看過，設置大部分會使用的圖標都是齒輪來表示，那為什么呢?

傳統(tǒng)上，機械的操作調(diào)整就是利用用齒輪位置/類型/尺寸來決定，講白一點大家看過機械時鐘表嗎，那要怎么調(diào)整速度…etc，它是怎么跑的是不是要調(diào)整齒輪就可以了？

因此，使用齒輪進行設置是一種隱喻，如果你想改變運作方式，你需要改變系統(tǒng)的內(nèi)部運作，這通常都是齒輪的圖標。