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

2019/4/26 10:04:48來源：互聯(lián)網(wǎng)

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

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

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

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

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

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

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

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

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

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

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

回想一下，當(dāng)我們想打印一份文檔的時(shí)候，會(huì)通過軟件中的打印功能來達(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ì)書《About Face 3》當(dāng)中，直到今天，這個(gè)案例依然經(jīng)典得讓你無法忘卻。

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

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

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

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

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

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

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

勾引3：對于細(xì)節(jié)刻畫過于詳細(xì)

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

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

勾引4：融入過多的品牌元素

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

將品牌配色和元素融入到圖標(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ī)范來做。

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

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

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

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

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

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

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

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

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

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

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

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

總而言之，圖標(biāo)是功能性的產(chǎn)物，它不是藝術(shù)品，它存在的目的是為用戶服務(wù)，清晰簡約是它應(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ì)中所面對的勾引，也間接反映了圖標(biāo)設(shè)計(jì)所必要遵循的原則。所以，在今天的文章結(jié)尾，我也附上 LOGO設(shè)計(jì)大師保羅·蘭德的 LOGO設(shè)計(jì)7原則，來供你參考和對比。

簡潔性

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