“隨著扁平風(fēng)格的出現(xiàn)……” 這些虛的我就不說(shuō)了。在自己開(kāi)始做圖標(biāo)練習(xí)之前，我對(duì)圖標(biāo)的概念僅僅是好看、簡(jiǎn)單，只要稍微練幾下就可以學(xué)會(huì)了，而開(kāi)始接觸之后才知道，原來(lái)圖標(biāo)設(shè)計(jì)這么有講究。

在練習(xí)的過(guò)程中，我看了很多國(guó)外設(shè)計(jì)師寫(xiě)的關(guān)于圖標(biāo)設(shè)計(jì)的一些文章，從基本的視覺(jué)元素到人的系統(tǒng)感知，也終于理解為什么如今的界面設(shè)計(jì)中，圖標(biāo)會(huì)占據(jù)如此大比例的原因了。

有人說(shuō)：“人們對(duì)于抽象概念或藝術(shù)性強(qiáng)的圖像的理解能力并不差。” 每個(gè)人的視覺(jué)感知能力都能輕易的理解一些圖像所包含的意義，因此成熟的視覺(jué)感知是更有效的信息傳遞途徑。

所以我總結(jié)了以下三個(gè)原則來(lái)談?wù)剤D標(biāo)設(shè)計(jì)需要注意的事項(xiàng)：

• 可識(shí)別性
• 視覺(jué)統(tǒng)一
• 差異性

可識(shí)別性

最新的 IOS 設(shè)計(jì)原則被人們概括為：大、黑、簡(jiǎn)。我也去看了些相關(guān)數(shù)據(jù)，在視覺(jué)的設(shè)計(jì)中，最受歡迎的顏色也確實(shí)是黑色，其次是白色。所以沿用到圖標(biāo)設(shè)計(jì)中，黑白圖標(biāo)也是在界面中最廣泛被使用的。（除了那些概念設(shè)計(jì)）

為了讓圖標(biāo)提升界面中信息的被理解性，很多設(shè)計(jì)師也會(huì)用黑白色去設(shè)計(jì)圖標(biāo)，原因有兩個(gè)：

• 一個(gè)是顏色會(huì)干擾用戶(hù)的理解力；
• 界面中顏色多了，會(huì)消耗用戶(hù)尋找圖標(biāo)的時(shí)間；

因此顏色是識(shí)別性中需要注意的一點(diǎn)，為了提高用戶(hù)的可識(shí)別性，我們的設(shè)計(jì)更應(yīng)該遵循用戶(hù)習(xí)慣。有一部分設(shè)計(jì)師的想象力非常豐富，這是設(shè)計(jì)師的一大優(yōu)勢(shì)，但是切忌將圖標(biāo)設(shè)計(jì)的過(guò)于個(gè)性，讓用戶(hù)難以理解。

Instagram 的設(shè)計(jì)就是就是比較典型的新風(fēng)格界面，圖標(biāo)易于理解，且用黑色作為基調(diào)，識(shí)別性高，用戶(hù)也易于理解，這也是為什么這些圖標(biāo)沒(méi)有文字做解釋的一個(gè)原因。

不過(guò)我個(gè)人建議在圖標(biāo)的設(shè)計(jì)中加入一點(diǎn)點(diǎn)自己的創(chuàng)意更能增加產(chǎn)品的趣味性，所以不要太壓抑自己的天性。上面的說(shuō)明是為了讓大家在設(shè)計(jì)圖標(biāo)時(shí)要注意的一些細(xì)節(jié)。當(dāng)然，如果是一些個(gè)性化圖標(biāo)，顏色也要突出。比如某些圖標(biāo)的顏色盡可能保持實(shí)體物質(zhì)的相近色，這樣也不會(huì)讓用戶(hù)在理解上有偏差。

在設(shè)計(jì)完這些圖標(biāo)后，設(shè)計(jì)師要做兩個(gè)測(cè)試：一個(gè)是無(wú)背景測(cè)試，另一個(gè)是基于背景的圖標(biāo)測(cè)試。第一個(gè)意思是，把圖標(biāo)單獨(dú)放在一個(gè)畫(huà)布上，看看同事能不能知道這個(gè)圖標(biāo)的意思。另一個(gè)是將圖標(biāo)放在界面中，看同事（項(xiàng)目外的同事）是否能理解圖標(biāo)的含義。

視覺(jué)統(tǒng)一

不同類(lèi)型的圖標(biāo)有不同的特征，稍微一點(diǎn)變化，都會(huì)破壞整套圖標(biāo)的統(tǒng)一性。包括復(fù)雜度、形狀、線(xiàn)條粗細(xì)等等。

我在臨摹整套圖標(biāo)的過(guò)程中，很明顯能看出原作者對(duì)于圖標(biāo)的把控性有多強(qiáng)，每處細(xì)節(jié)都調(diào)整的非常到位，以至于我在制作的過(guò)程中遇到不少麻煩。不過(guò)解決之后，自己在創(chuàng)意圖標(biāo)的時(shí)候就發(fā)現(xiàn)輕松不少。比如：

• 整體風(fēng)格的統(tǒng)一
• 圖標(biāo)的大小控制

因?yàn)樵谠O(shè)計(jì)的過(guò)程中發(fā)現(xiàn)這兩個(gè)問(wèn)題比較多，所以在這里單獨(dú)拿出來(lái)說(shuō)。

整體風(fēng)格的統(tǒng)一：我這次設(shè)計(jì)是一套杯子的圖標(biāo)，為了統(tǒng)一風(fēng)格我將所有線(xiàn)條的粗細(xì)都設(shè)置為 2 px，然后做了偏 MBE 風(fēng)格的設(shè)計(jì)。為了能讓所有杯子統(tǒng)一，我在杯子里加入了酒，所以整套圖標(biāo)也就成了裝酒的各種瓶子和杯子。而點(diǎn)小氣泡就是為了增加了一種趣味性且更統(tǒng)一。

差異性

設(shè)計(jì)一套圖標(biāo)時(shí)，要盡量放大圖標(biāo)之間的差異性，減弱圖標(biāo)之間的相似性，這是最容易被設(shè)計(jì)師忽略的一項(xiàng)原則，往往為了保持視覺(jué)風(fēng)格的統(tǒng)一性、使用同一元素而舍棄了各圖標(biāo)的差異性。

假如一套圖標(biāo)，長(zhǎng)得都差不多，那用戶(hù)在界面中找某個(gè)功能要花費(fèi)的時(shí)間會(huì)比想象中的長(zhǎng)很多。他們會(huì)去探索圖標(biāo)的功能作用，看跳轉(zhuǎn)的頁(yè)面是否是自己想去的界面，然后再返回。你可以將設(shè)計(jì)完的一套圖標(biāo)展示出來(lái)：然后你說(shuō)出一個(gè)名詞，讓同事去選擇是哪個(gè)，這樣可以很好的檢測(cè)圖標(biāo)的差異性和識(shí)別性。

有人可能會(huì)誤解統(tǒng)一性和差異性的概念，統(tǒng)一是圖標(biāo)樣式及風(fēng)格統(tǒng)一，而差異是圖標(biāo)與圖標(biāo)之間的含義要明確。

還有一點(diǎn)，在設(shè)計(jì)的過(guò)程中一定要區(qū)分被選擇和未選擇的狀態(tài)，讓用戶(hù)知道我們的圖標(biāo)給予了他反饋。

總結(jié)

最后來(lái)說(shuō)說(shuō)為什么我們要設(shè)計(jì)圖標(biāo)：

• 提升用戶(hù)對(duì)信息的感知速度；
• 通過(guò)視覺(jué)的感知，提高用戶(hù)的界面記憶；
• 更加節(jié)省空間，避免了長(zhǎng)文的使用；
• 增強(qiáng)界面設(shè)計(jì)感，讓界面更加協(xié)調(diào)。

作為一個(gè)互聯(lián)網(wǎng)行業(yè)的設(shè)計(jì)師，我們更應(yīng)該在圖標(biāo)以外去尋找靈感，包括建筑、字體、工業(yè)設(shè)計(jì)、心理學(xué)、自然或其他領(lǐng)域。現(xiàn)在的圖標(biāo)之間，風(fēng)格和設(shè)計(jì)樣式看起來(lái)越來(lái)越像，所以每個(gè)人都應(yīng)該提高自己的水平，設(shè)計(jì)出區(qū)別于他們的圖標(biāo)，讓自己處于一個(gè)領(lǐng)先的位置。

END.

我是呆呆。交互設(shè)計(jì)師一枚，喜歡看書(shū)和寫(xiě)作。如果你讀完我的文章有一丟丟收獲，那就試試打賞、關(guān)注和點(diǎn)贊哈！