做圖標(biāo)設(shè)計(jì)時(shí)，為了效果好看而強(qiáng)行附會(huì)各種復(fù)雜元素后，圖標(biāo)設(shè)計(jì)的設(shè)計(jì)效果或許會(huì)背離初衷。

人類(lèi)大腦對(duì)圖像的記憶遠(yuǎn)遠(yuǎn)勝過(guò)于對(duì)文字的記憶，因?yàn)樽竽X具有語(yǔ)言、數(shù)據(jù)、邏輯推理等功能；右腦具有音樂(lè)、繪畫(huà)、空間幾何、想像、綜合等功能。左腦的記憶回路是低速記憶，而右腦的是高速記憶，右腦處理圖形圖像的速度是左腦處理文字速度的60萬(wàn)倍，所以對(duì)于圖像更能讓人過(guò)目不忘，使得圖形成為設(shè)計(jì)中的標(biāo)配。比如我們看到齒輪就想到設(shè)置、房子寓意首頁(yè)的入口、山和太陽(yáng)組合表意圖像相冊(cè)等。這些圖形已經(jīng)在大腦中形成記憶軌跡，用戶接受起來(lái)更快，體驗(yàn)更好。

圖標(biāo)設(shè)計(jì)的優(yōu)勢(shì)

大腦對(duì)圖形的處理記憶的優(yōu)勢(shì)，道出了設(shè)計(jì)圖形可以更好地引導(dǎo)用戶。體驗(yàn)設(shè)計(jì)里的圖形更多體現(xiàn)圖標(biāo)上，圖標(biāo)設(shè)計(jì)除了有助于大腦更好記憶，還有什么其它優(yōu)勢(shì)能讓圖標(biāo)成為我們體驗(yàn)設(shè)計(jì)的標(biāo)配？我們概括了如下5點(diǎn)優(yōu)勢(shì)。

1：快速理解，視覺(jué)體驗(yàn)更好

看到圖標(biāo)，不用看介紹就能傳遞給用戶具體的含義，有助于快速理解，視覺(jué)體驗(yàn)好過(guò)于純文字的表達(dá)。比如天氣的圖標(biāo)，根本不需要有文字注釋?zhuān)缫呀?jīng)形成視覺(jué)記憶。

2：易國(guó)際化，不用單獨(dú)翻譯各個(gè)國(guó)家語(yǔ)言

產(chǎn)品左上角的一個(gè)左箭頭，輕松理解返回的操作，但如果用文字寫(xiě)上“返回”，不翻譯過(guò)來(lái)，國(guó)際化也很難擴(kuò)展。這個(gè)體驗(yàn)我們經(jīng)常會(huì)遇到，體驗(yàn)國(guó)外一些APP的時(shí)候，被這些國(guó)家的語(yǔ)言阻斷操作的進(jìn)程。比如下面旅游類(lèi)的圖標(biāo)，即使語(yǔ)言不通也大概能明白寓意。

3：易形成統(tǒng)一的品牌形象

圖標(biāo)有很多種表現(xiàn)手法，每一種設(shè)計(jì)的獨(dú)具匠心都可以自帶流量，對(duì)外形成統(tǒng)一的品牌形象，這就是為什么我們總是要制定設(shè)計(jì)規(guī)范，讓整個(gè)產(chǎn)品的設(shè)計(jì)風(fēng)格統(tǒng)一。Same的統(tǒng)一設(shè)計(jì)，形成獨(dú)特的品牌傳播。

4：優(yōu)化產(chǎn)品，無(wú)需更多注釋

圖標(biāo)可以表達(dá)出含義，就不需要那么多文字的注釋?zhuān)谠O(shè)計(jì)上就顯得更簡(jiǎn)潔，產(chǎn)品的邏輯更清晰，很好地優(yōu)化了產(chǎn)品體驗(yàn)。如下圖標(biāo)不用文字解釋就能清晰地傳遞出寓意。

5：好看，就是最好的理由

體驗(yàn)設(shè)計(jì)的核心就是好看、好用，放著圖標(biāo)可以提升整個(gè)設(shè)計(jì)的格調(diào)，那為什么不呢？如下沒(méi)有這個(gè)動(dòng)態(tài)圖標(biāo)的設(shè)計(jì)，比單獨(dú)文字的表達(dá)豐富了很多。

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

上面列舉了圖標(biāo)設(shè)計(jì)的一些優(yōu)勢(shì)，那怎么設(shè)計(jì)圖標(biāo)才能顯現(xiàn)這些優(yōu)勢(shì)呢？才能起到正確引導(dǎo)用戶的作用呢？圖標(biāo)設(shè)計(jì)需遵循如下5點(diǎn)設(shè)計(jì)原則。

1：符號(hào)化，越簡(jiǎn)單越好

圖標(biāo)就是一個(gè)LOGO，提煉出表意清晰的元素開(kāi)始符號(hào)化，設(shè)計(jì)的越簡(jiǎn)單易懂越好。如下圖標(biāo)的圖標(biāo)從寓意元素中提煉出的符號(hào)設(shè)計(jì)，簡(jiǎn)單易懂。

2：表意清晰，避免產(chǎn)生歧義

圖標(biāo)設(shè)計(jì)是為了更好地傳達(dá)，勢(shì)必需要準(zhǔn)確表達(dá)寓意，容易產(chǎn)生歧義的設(shè)計(jì)會(huì)對(duì)用戶產(chǎn)生不必要的困擾，就失去圖標(biāo)設(shè)計(jì)的意義。如下的圖標(biāo)設(shè)計(jì)不是配合文字，特別是次卡的設(shè)計(jì)，很容易產(chǎn)生歧義。

3：圖標(biāo)盡量結(jié)合文字的組合設(shè)計(jì)

圖標(biāo)設(shè)計(jì)有助于提升產(chǎn)品的體驗(yàn)，但并不是所有圖標(biāo)都能精確地表達(dá)出所有的功能入口，有數(shù)據(jù)表明圖標(biāo)配合文字的點(diǎn)擊率88%，只有圖標(biāo)不添加文字點(diǎn)擊率將至34%?？梢?jiàn)圖標(biāo)結(jié)合文字的設(shè)計(jì)體驗(yàn)更好。除非是識(shí)別性很強(qiáng)的圖標(biāo)，設(shè)置之類(lèi)。如下圖same的表情設(shè)計(jì)沒(méi)有文字解釋理解起來(lái)可能會(huì)有點(diǎn)困難。

4：設(shè)計(jì)風(fēng)格統(tǒng)一

圖標(biāo)的設(shè)計(jì)風(fēng)格有很多，線形圖標(biāo)、面形圖標(biāo)、線面結(jié)合圖標(biāo)、斷點(diǎn)圖標(biāo)、插畫(huà)圖標(biāo)、光影圖標(biāo)等等。設(shè)計(jì)的風(fēng)格統(tǒng)一才能更容易形成記憶軌跡。如下圖same的表情設(shè)計(jì)非常一致，形成統(tǒng)一的設(shè)計(jì)風(fēng)格。

5：5秒設(shè)計(jì)原則

用戶感知體驗(yàn)時(shí)間是0.1秒，2秒是產(chǎn)品比較好的一個(gè)體驗(yàn)原則，是用戶能接受延遲的最佳等待時(shí)間。針對(duì)用戶的圖形識(shí)別5秒是個(gè)坎，所以當(dāng)用戶5秒沒(méi)能識(shí)別出圖標(biāo)表達(dá)的寓意，可能就要優(yōu)化圖標(biāo)的設(shè)計(jì)。下圖同樣是Same的表情，我反正是看了10秒都沒(méi)太懂其中的寓意。

不適合使用圖標(biāo)的場(chǎng)景

上面總結(jié)了圖標(biāo)設(shè)計(jì)的優(yōu)勢(shì)和原則，是不是意味著哪都能用圖標(biāo)來(lái)設(shè)計(jì)，很顯然不是的。如下的4種場(chǎng)景下不適合使用圖標(biāo)設(shè)計(jì)。

1：表達(dá)的寓意太復(fù)雜或者信息很多

圖標(biāo)設(shè)計(jì)的目的是為了幫助用戶更好理解，如果寓意太復(fù)雜或者信息太多，不太適合使用圖標(biāo)來(lái)表達(dá)。圖標(biāo)畫(huà)的太復(fù)雜，反倒會(huì)影響用戶的理解。比如下圖的圖標(biāo)設(shè)計(jì)非常復(fù)雜，表達(dá)的寓意也完全看不懂，可以地追求統(tǒng)一。

2：圖標(biāo)太多，反倒會(huì)增加學(xué)習(xí)成本

圖標(biāo)不宜太多，使用的太多的圖標(biāo)，反倒會(huì)增加用戶的學(xué)習(xí)成本，效果適得其反。如下的游戲類(lèi)圖標(biāo)設(shè)計(jì)太多，反倒會(huì)增加學(xué)習(xí)成本。

3：容易產(chǎn)生歧義，寓意不直觀的圖標(biāo)

圖標(biāo)表達(dá)的寓意不夠精確，或者會(huì)有多種理解，這樣就會(huì)造成很多不必要的干擾信息。比如下圖的設(shè)置幾種圖標(biāo)，但還是第一種用的最多。

4：為了好看而設(shè)計(jì)圖標(biāo)

有時(shí)候?yàn)榱嗽O(shè)計(jì)上好看，刻意加上圖標(biāo)的設(shè)計(jì)，這樣的設(shè)計(jì)反倒增加頁(yè)面的視覺(jué)負(fù)擔(dān)。比如下圖世界杯的運(yùn)營(yíng)設(shè)計(jì)，純粹為了好看而設(shè)計(jì)。

項(xiàng)目案例總結(jié)

我們?cè)诟陌嬉豢钇?chē)應(yīng)用的APP，優(yōu)化某一個(gè)頁(yè)面的時(shí)候，產(chǎn)生了很大的分歧，就是關(guān)于是否使用圖標(biāo)的問(wèn)題，這也是為什么今天特別寫(xiě)了一篇關(guān)于圖標(biāo)設(shè)計(jì)的文章，就為了分享這個(gè)案例。

汽車(chē)的應(yīng)用里面有一個(gè)頁(yè)面，關(guān)于汽車(chē)有多少種配置，汽車(chē)的配置大概有100多個(gè)，將這些配置分為幾類(lèi)呈現(xiàn)，為了讓頁(yè)面呈現(xiàn)的更美觀，就想著將這些配置都加上圖標(biāo)來(lái)表達(dá)，看著效果確實(shí)還不錯(cuò)，可問(wèn)題來(lái)了，100多個(gè)配置，這些配置的圖標(biāo)又特別復(fù)雜，不能完全表達(dá)出來(lái)設(shè)計(jì)的標(biāo)簽。如果上提到的不適宜使用圖標(biāo)的場(chǎng)景原因被這個(gè)頁(yè)面給占全了。所以就設(shè)計(jì)了如下兩個(gè)頁(yè)面進(jìn)行PK。

PK結(jié)果大大出乎我們的意料之外，大家都一致贊成使用圖標(biāo)的設(shè)計(jì)，看起來(lái)確實(shí)比較美觀，可這些圖標(biāo)沒(méi)幾個(gè)能把汽車(chē)配置的寓意表達(dá)出來(lái)，而且那么多，顯得太復(fù)雜，所以為這個(gè)爭(zhēng)論了很久，后來(lái)我們將設(shè)計(jì)規(guī)范的理念重新捋了一遍，我們追求的是“輕”，這個(gè)設(shè)計(jì)增加了頁(yè)面的視覺(jué)負(fù)擔(dān)，沒(méi)能很好地體現(xiàn)出“輕”。每個(gè)圖標(biāo)還有下一個(gè)層級(jí)，需要引導(dǎo)用戶去點(diǎn)擊，所以我們最終還是確定了簡(jiǎn)潔的設(shè)計(jì)方案，如下圖右側(cè)的設(shè)計(jì)。

寫(xiě)在最后

圖標(biāo)的設(shè)計(jì)能保持簡(jiǎn)潔、快速識(shí)別、寓意鮮明、容易易記就可以正確地引導(dǎo)用戶高效地體驗(yàn)。設(shè)計(jì)的不好會(huì)對(duì)用戶產(chǎn)生不必要的干擾，還會(huì)產(chǎn)生阻斷性的影響。特別在實(shí)際應(yīng)用中，我們分析清楚體驗(yàn)的場(chǎng)景再?zèng)Q定是否做圖標(biāo)設(shè)計(jì)來(lái)，最終提升體驗(yàn)，形成統(tǒng)一的品牌傳播。

本文由 @VV體驗(yàn) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議