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

另外網(wǎng)頁設(shè)計(jì)的設(shè)計(jì)師也會(huì)問，我們這平臺(tái)有vip會(huì)員，那vip會(huì)員的圖標(biāo)要怎么設(shè)計(jì)?

還有一個(gè)app的設(shè)計(jì)，這聊天里面的群組圖標(biāo)，要怎么設(shè)計(jì)?

圖標(biāo)的設(shè)計(jì)，我認(rèn)為是對(duì)于ui/ux設(shè)計(jì)師來說；是最難的工作之一。

圖標(biāo)的用意是什么

我們會(huì)使用圖標(biāo)就是用它來在使用者界面上傳達(dá)有意義的東西；而這個(gè)有意義的東西，有可能是你的對(duì)象、想法、動(dòng)作，然后設(shè)計(jì)師把這些有意義東西視覺化。

圖標(biāo)的優(yōu)點(diǎn)

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

手機(jī)圖標(biāo)

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

手機(jī)在移動(dòng)的中圖標(biāo)的形象會(huì)是這樣子，比起文字，更容易在移動(dòng)的時(shí)候識(shí)別

3. 增加設(shè)計(jì)的美感。

4. 節(jié)省空間，尤其對(duì)于喜歡極簡(jiǎn)設(shè)計(jì)或者扁化的設(shè)計(jì)。

5. 圖標(biāo)是一個(gè)非常好的點(diǎn)擊目標(biāo)。

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

比如：

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

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

你可以只看圖標(biāo)就知道這個(gè)是什么意思嗎?

設(shè)計(jì)師通常犯的錯(cuò)誤

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

1.經(jīng)常發(fā)明圖標(biāo)，導(dǎo)致使用者對(duì)于圖標(biāo)不是很了解導(dǎo)致使用者常常錯(cuò)誤點(diǎn)擊。

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

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

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

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

6.為了省下空間而省下空間，沒有考慮使用者對(duì)于學(xué)習(xí)新圖標(biāo)的學(xué)習(xí)成本。

設(shè)計(jì)與選擇圖標(biāo)遵循的五個(gè)原則

所以你應(yīng)該這樣子做：

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

如果不行請(qǐng)重新設(shè)計(jì)。

二. 選擇通用性高的圖標(biāo)

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

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

比如：

這兩個(gè)差異很大的圖標(biāo)，卻是分享，上面是android下面是ios

三. 保持一致性

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

幾個(gè)通用性高但卻代表很多意義圖標(biāo)如下

四. 用文字說明抽象的圖標(biāo)

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

如果空間不允許，那怎么辦，那你應(yīng)該不要用圖標(biāo)而使用標(biāo)簽來代替圖標(biāo)。

空間真的不夠，改用標(biāo)簽

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

因?yàn)槌橄蟮臉?biāo)簽很復(fù)雜；你這個(gè)圖標(biāo)可以用許多的詞來表達(dá)它的意思，但往往使用者并不知道這個(gè)圖標(biāo)的意思。

例如：

圖標(biāo)加上標(biāo)簽

五. 清楚的特征外觀

你在設(shè)計(jì)圖標(biāo)的時(shí)候不論是抽象還是共用的；你不應(yīng)該花太多時(shí)間在細(xì)節(jié)上，因?yàn)樘〉膱D標(biāo)細(xì)節(jié)是很難被看出來，你應(yīng)該要花更多時(shí)間問自己，使用這類圖標(biāo)的意義在哪里。

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

例如下面這個(gè)圖標(biāo)就是用來表示測(cè)試手機(jī)網(wǎng)速的。

測(cè)試網(wǎng)速

經(jīng)典的抽象圖標(biāo)：設(shè)置。

設(shè)置的圖標(biāo)

我想大家都看過，設(shè)置大部分會(huì)使用的圖標(biāo)都是齒輪來表示，那為什么呢?

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

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