設(shè)計(jì)圖標(biāo)的時(shí)候，肯定要抵制住這6個(gè)勾引！

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

和絕大多數(shù)良好的設(shè)計(jì)一樣，最良好最巨大的圖標(biāo)大多是……隱形的。

最為我們熟知的搜索圖標(biāo)，可以說(shuō)是極為完善的，它簡(jiǎn)單，可識(shí)別度強(qiáng)，每小我都知道它代表著什么。

圖標(biāo)假如設(shè)計(jì)失誤，我們肯定是會(huì)細(xì)致到的。

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

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

那么，到底是什么東西成就了一個(gè)良好的圖標(biāo)呢？

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

• 保持簡(jiǎn)約
• 單個(gè)圖標(biāo)要貼合語(yǔ)境（所處的APP和網(wǎng)站），而圖標(biāo)之間又彼此不同

真正要做到這一點(diǎn)，并不簡(jiǎn)單。對(duì)于設(shè)計(jì)師而言，有大量的勾引，促使著他們讓圖標(biāo)設(shè)計(jì)變得復(fù)雜，紊亂，甚至無(wú)法識(shí)別。接下來(lái)我所提到的6個(gè)勾引，是讓設(shè)計(jì)師毀掉圖標(biāo)的重要緣故原由。

勾引1：想用圖標(biāo)體現(xiàn)悉數(shù)的功能

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

大概你覺(jué)得這個(gè)題目是可以被詮釋清楚的，可是不論怎么復(fù)盤(pán)，如何推導(dǎo)，照舊很難詮釋清楚。即使是最簡(jiǎn)單的功能圖標(biāo)，當(dāng)你看到它的時(shí)候，也常常無(wú)法正確地詮釋清楚它的真實(shí)功能。

就像 Office 的菜單當(dāng)中，這一堆信封圖標(biāo)，就無(wú)法正確清晰地注解它們的功能（假如不看旁邊的文本標(biāo)簽的話）。

事實(shí)上，就是詮釋不清，沒(méi)有需要在設(shè)計(jì)的時(shí)候強(qiáng)求肯定要使用一個(gè)圖標(biāo)闡述清楚一個(gè)復(fù)雜的功能。

勾引2：在圖標(biāo)中保留3個(gè)甚至更多的視覺(jué)對(duì)象

在圖標(biāo)中包含2個(gè)以上視覺(jué)對(duì)象本就是一件特別很是麻煩的事情。當(dāng)然，即使是16×16 px的小圖標(biāo)，包含2個(gè)簡(jiǎn)單的對(duì)象也是可以的，但是，「可以」僅僅是一種針對(duì)承載能力的表述，并不是說(shuō)如許做就肯定好，事實(shí)上，削減對(duì)象的數(shù)量可以增長(zhǎng)圖標(biāo)自己的可讀性和識(shí)別度。

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

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

勾引3：對(duì)于細(xì)節(jié)刻畫(huà)過(guò)于詳細(xì)

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

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

勾引4：融入過(guò)多的品牌元素

作為設(shè)計(jì)師，假如你想使用品牌化的設(shè)計(jì)來(lái)取悅甲方或者老板，這是無(wú)可厚非的。這個(gè)時(shí)候，你可能會(huì)使用品牌色將產(chǎn)品中的圖標(biāo)同一起來(lái)，讓它們看看起來(lái)是同等的。萬(wàn)萬(wàn)別如許做！

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

上面的這組圖標(biāo)是按照營(yíng)銷(xiāo)部門(mén)的要求和感覺(jué)來(lái)做的，你覺(jué)得這都是些啥？

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

勾引5：在圖標(biāo)上使用筆墨來(lái)闡述功能

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

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

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

這些貨幣圖標(biāo)就比較合理，使用國(guó)家和地區(qū)的特性色彩和圖形加上貨幣符號(hào)來(lái)代表當(dāng)?shù)氐慕鹑趩挝?，而沒(méi)有直接使用 EUR、CAD 和 HKG 這些縮寫(xiě)文原本進(jìn)行傳達(dá)。

勾引6：增長(zhǎng)面部細(xì)節(jié)

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

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

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

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

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

One more thing

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

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

簡(jiǎn)潔性

簡(jiǎn)潔的設(shè)計(jì)并非當(dāng)代才有。簡(jiǎn)潔的設(shè)計(jì)才更加容易被記住，更加容易被理解，也更加易于被應(yīng)用。在信息過(guò)載的當(dāng)代設(shè)計(jì)，簡(jiǎn)潔的設(shè)計(jì)也更貼合大家的深層偏好。

獨(dú)特征

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

可視性

LOGO 的設(shè)計(jì)在視覺(jué)傳達(dá)的時(shí)候要具備有辨識(shí)度，在復(fù)雜的環(huán)境下，能夠抓人眼球，讓人馬上細(xì)致到，這一點(diǎn)同樣很緊張。

適應(yīng)性

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

可記憶性

品牌的認(rèn)知度高低和可記憶性有著緊密的關(guān)聯(lián)，這也是為什么良好的 LOGO設(shè)計(jì)，還必要搭配持續(xù)的營(yíng)銷(xiāo)和推廣的積累。

普適性

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

經(jīng)典不過(guò)時(shí)

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