所有偉大的圖標(biāo)都是一樣的偉大，所有失敗的圖標(biāo)都玩著不一樣的戲碼。

和絕大多數(shù)優(yōu)秀的設(shè)計一樣，最優(yōu)秀最偉大的圖標(biāo)大多是……隱形的。

最為我們熟知的搜索圖標(biāo)，可以說是極為完美的，它簡單，可識別度強(qiáng)，每個人都知道它代表著什么。

圖標(biāo)如果設(shè)計失誤，我們一定是會注意到的。

很難想象，這種素質(zhì)的圖標(biāo)居然來自于一家著名的企業(yè)。

好圖標(biāo)的設(shè)計原則

那么，到底是什么東西成就了一個優(yōu)秀的圖標(biāo)呢？

　簡單點總結(jié)一下設(shè)計好圖標(biāo)的原則：

　保持簡約

單個圖標(biāo)要貼合語境（所處的APP和網(wǎng)站），而圖標(biāo)之間又彼此不同

真正要做到這一點，并不簡單。對于設(shè)計師而言，有大量的誘惑，促使著他們讓圖標(biāo)設(shè)計變得復(fù)雜，混亂，甚至無法識別。接下來我所提到的6個誘惑，是讓設(shè)計師毀掉圖標(biāo)的主要原因。

誘惑1：想用圖標(biāo)表現(xiàn)全部的功能

回想一下，當(dāng)我們想打印一份文檔的時候，會通過軟件中的打印功能來達(dá)成目標(biāo)，通常會點擊一下文檔打印的圖標(biāo)。這個時候，你通常還會碰到一個問題，打印機(jī)設(shè)置、查找打印機(jī)、添加打印機(jī)的圖標(biāo)也是差不多的，甚至完全一樣的打印機(jī)圖標(biāo)。這個案例被記錄在經(jīng)典的 UI交互設(shè)計書《About Face 3》當(dāng)中，直到今天，這個案例依然經(jīng)典得讓你無法忘懷。

也許你覺得這個問題是可以被解釋清楚的，可是不論怎么復(fù)盤，如何推導(dǎo)，還是很難解釋清楚。即使是最簡單的功能圖標(biāo)，當(dāng)你看到它的時候，也常常無法準(zhǔn)確地解釋清楚它的真實功能。

就像 Office 的菜單當(dāng)中，這一堆信封圖標(biāo)，就無法準(zhǔn)確清晰地表明它們的功能（如果不看旁邊的文本標(biāo)簽的話）。

事實上，就是解釋不清，沒有必要在設(shè)計的時候強(qiáng)求一定要使用一個圖標(biāo)闡述清楚一個復(fù)雜的功能。

誘惑2：在圖標(biāo)中保留3個甚至更多的視覺對象

在圖標(biāo)中包含2個以上視覺對象本就是一件非常麻煩的事情。當(dāng)然，即使是16×16 px的小圖標(biāo)，包含2個簡單的對象也是可以的，但是，「可以」僅僅是一種針對承載能力的表述，并不是說這樣做就一定好，事實上，減少對象的數(shù)量可以增加圖標(biāo)本身的可讀性和識別度。

作為設(shè)計師，適當(dāng)取舍，嘗試使用圖標(biāo)來闡述一方面的功能。比如「網(wǎng)絡(luò)管理員」的圖標(biāo)，可以使用一個帶著眼鏡的男性角色來代表，這個形象比較符合大眾對于這一角色的固有認(rèn)知，就不要再在圖標(biāo)上加上扳手或者電腦這樣的元素了。

而這個安裝包圖標(biāo)就是一個包含對象過多的典型。我們已經(jīng)清楚的知道軟件是需要安裝到計算上的，所以沒必要弄這么復(fù)雜。而考慮到軟件安裝包圖標(biāo)的整個發(fā)展歷史和 CD光盤之間的緊密關(guān)聯(lián)，所以這個圖標(biāo)的設(shè)計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3：對于細(xì)節(jié)刻畫過于具體

圖標(biāo)本質(zhì)上只是傳達(dá)信息，作為符號代表，和翻譯一樣是需要講究「信、雅、達(dá)」，而不是「抄現(xiàn)實」的繪畫：

這個圖標(biāo)的設(shè)計確實是很有風(fēng)格，也足夠有調(diào)性，貌似也表達(dá)了什么，但是大概的含義也并不清晰，功能性也不具備，作為個人表達(dá)還行，但是在商業(yè)產(chǎn)品中實際上是并不具備可用性的。

誘惑4：融入過多的品牌元素

作為設(shè)計師，如果你想使用品牌化的設(shè)計來取悅甲方或者老板，這是無可厚非的。這個時候，你可能會使用品牌色將產(chǎn)品中的圖標(biāo)統(tǒng)一起來，讓它們看看起來是一致的。千萬別這樣做！

將品牌配色和元素融入到圖標(biāo)的設(shè)計當(dāng)中，尤其是系統(tǒng)化地「格式化」圖標(biāo)的時候，99%的可能會造成圖標(biāo)可讀性降低。圖標(biāo)的設(shè)計和使用，盡量還是遵循平臺（iOS、Andrlid、Material Design 或者 Windows）的設(shè)計規(guī)范來做。

上面的這組圖標(biāo)是按照營銷部門的要求和感覺來做的，你覺得這都是些啥？

上面是另外一個反面案例，實際上看完也根本不清楚這些圖標(biāo)代表什么含義。這難道是某種游戲？

誘惑5：在圖標(biāo)上使用文字來闡述功能

不要在圖標(biāo)上使用文本來闡述它的功能了，和圖標(biāo)搭配在一起的文本標(biāo)簽就能實現(xiàn)這個功能，圖標(biāo)更多的是用來做視覺化表達(dá)的。否則，兩者功能就重疊了，意義何在呢？

看著圖標(biāo)上的縮寫來猜測它的功能，還不如看旁邊的文本標(biāo)簽，后者表述更加清晰，可讀性也更強(qiáng)。圖標(biāo)本身的圖形化的信息，本質(zhì)上能夠讓用戶通過圖形更快地判斷圖標(biāo)背后所代表的功能、領(lǐng)域和屬性。

事實上，圖標(biāo)+文本的搭配在很多情況下是必須的，作為設(shè)計師沒有必要在這個事情上糾結(jié)，也沒有必要非將繁復(fù)的文本信息融入到圖標(biāo)當(dāng)中。

這些貨幣圖標(biāo)就比較合理，使用國家和地區(qū)的特征色彩和圖形加上貨幣符號來代表當(dāng)?shù)氐慕鹑趩挝唬鴽]有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進(jìn)行傳達(dá)。

誘惑6：增加面部細(xì)節(jié)

在設(shè)計帶有人物形象的圖標(biāo)的時候，盡量不要讓面部包含太多的細(xì)節(jié)元素，因為這會分散用戶的注意力。

△ iOS 中的帶有面孔的圖標(biāo)

△ Office 中帶有面孔的圖標(biāo)

為什么這么說呢？看看下面 Bidstrup 的經(jīng)典漫畫中，面孔能夠傳達(dá)多少情緒吧。在很多情況下，圖標(biāo)是功能性的，但是人類先天會對面部細(xì)節(jié)極為敏感，不自覺地就會被面孔和表情所吸引。

總而言之，圖標(biāo)是功能性的產(chǎn)物，它不是藝術(shù)品，它存在的目的是為用戶服務(wù)，清晰簡約是它應(yīng)有的屬性。

One more thing

圖標(biāo)和 LOGO 的設(shè)計常常被并舉，但是兩者在功能和定位上，存在著不小的區(qū)別。圖標(biāo)本身是功能性優(yōu)先的，而 LOGO 則在很多時候承載著品牌傳達(dá)和形象構(gòu)建的工作，兩者目標(biāo)上的差異使得實際的設(shè)計需求和規(guī)則有著不小的區(qū)別。

其實設(shè)計師在圖標(biāo)設(shè)計中所面對的誘惑，也間接反映了圖標(biāo)設(shè)計所需要遵循的原則。所以，在今天的文章結(jié)尾，我也附上 LOGO設(shè)計大師保羅·蘭德的 LOGO設(shè)計7原則，來供你參考和對比。

簡潔性

簡潔的設(shè)計并非現(xiàn)代才有。簡潔的設(shè)計才更加容易被記住，更加容易被理解，也更加易于被應(yīng)用。在信息過載的現(xiàn)代設(shè)計，簡潔的設(shè)計也更貼合大家的深層偏好。

獨特性

獨特性反映的是品牌的氣質(zhì)，獨特性讓品牌形象更加突出，在市場競爭中更容易脫穎而出。而這也是 LOGO設(shè)計當(dāng)中最考驗人的部分，而圖標(biāo)設(shè)計上，則不會對獨特性有苛刻的要求。

可視性

LOGO 的設(shè)計在視覺傳達(dá)的時候要具備有辨識度，在復(fù)雜的環(huán)境下，能夠抓人眼球，讓人立刻注意到，這一點同樣很重要。

適應(yīng)性

品牌LOGO 的適用范圍是很廣，盡量使用簡約直觀的幾何圖形，具有凝聚力的配色和更加純粹的元素，才能確保 LOGO 在不同的環(huán)境下都能使用。

可記憶性

品牌的認(rèn)知度高低和可記憶性有著緊密的關(guān)聯(lián)，這也是為什么優(yōu)秀的 LOGO設(shè)計，還需要搭配持續(xù)的營銷和推廣的積累。

普適性

設(shè)計師需要站在更高、更加普世的角度上，來找到能被更多人所能感知和共鳴的元素來進(jìn)行設(shè)計。

經(jīng)典不過時

LOGO 的設(shè)計能夠不受時代審美的局限，擁有著持久的生命力，隨著時間的推移能夠逐漸凸顯出獨特的品牌價值。