我們生活在一個(gè)信息爆炸的時(shí)代，每天所看到的信息都是有意識(shí)或無意識(shí)地被我們大腦所吸收赐写，這些信息在我們決策和行為中有著很大的影響力。

受DNA的影響

第一個(gè)原因來自于我們的DNA膜赃，E.詹森在他的《基于腦的學(xué)習(xí)》一書中指出挺邀，40%的腦神經(jīng)與視網(wǎng)膜相連，與所有其他感官的總和相比更多的神經(jīng)元致力于視覺跳座，大腦中所有東西端铛，約有90%由視覺刺激觸發(fā)的。此外疲眷，研究表明禾蚕，約65%的人是視覺學(xué)習(xí)者，他們更喜歡學(xué)習(xí)和接觸與視覺元素相關(guān)的信息狂丝。

我們的大腦只需13ms就可以捕捉到眼睛看到的圖像换淆，比眨眼快10倍哗总，這意味著我們的大腦以驚人的速度吸收著視覺信息。

用戶界面

因此人們通常認(rèn)為倍试，在用戶界面上使用一些視覺元素讯屈，諸如：插畫、圖形县习、色彩涮母、排版、圖標(biāo)等會(huì)給我們?cè)O(shè)計(jì)的產(chǎn)品帶來比較好的視覺吸引力躁愿。

但是這些視覺元素有效嗎叛本？它們對(duì)我們有什么好處？他們的影響是什么攘已？最后炮赦，是什么讓我們相信它們?cè)谟脩襞c產(chǎn)品的交互中起著重要的作用？

為了回答這些問題样勃，我做了一次調(diào)研吠勘，采訪了各類設(shè)計(jì)師，調(diào)查了一些關(guān)于用戶行為的研究峡眶。因此剧防，我總結(jié)了5個(gè)理由來解釋：為什么視覺設(shè)計(jì)對(duì)于用戶行為和整體產(chǎn)品體驗(yàn)如此重要：

1. 加速視覺感知

2. 加強(qiáng)長期記憶

3. 觸發(fā)愉悅感

4. 引導(dǎo)注意力

5. 可訪問性

一. 加速視覺感知

視覺感知是向大腦發(fā)送信息最有效、最快的方式之一辫樱。

根據(jù)《思考峭拘，快與慢》的作者丹尼爾·卡尼曼的說法，這是因?yàn)槲覀兊拇竽X有兩個(gè)系統(tǒng)狮暑，第一個(gè)系統(tǒng)稱為：系統(tǒng)1（感性思維鸡挠，依賴于情感、記憶和經(jīng)驗(yàn)作出迅速的反應(yīng)和判斷）搬男，第二個(gè)系統(tǒng)為：系統(tǒng)2（理性思維拣展，通過調(diào)動(dòng)注意力來分析、思考缔逛、解決問題备埃，并作出決定。）

關(guān)鍵是當(dāng)我們使用插畫褐奴、圖形按脚、色彩等視覺元素時(shí)，我們的大腦會(huì)立即運(yùn)行系統(tǒng)1敦冬，因此我們所吸收信息的速度要快得多辅搬，比如當(dāng)我們看到下圖時(shí)，會(huì)立即觸發(fā)系統(tǒng)1脖旱，只有在遇到問題時(shí)我們才會(huì)切換至系統(tǒng)2伞辛。

根據(jù)S.Thorpe 的一項(xiàng)研究表明烂翰，人類視覺系統(tǒng)中的處理速度非常快蚤氏，大腦處理圖像只需要150ms甘耿，而理解圖像的意思僅需要100ms。

研究表明竿滨，我們大腦識(shí)別圖像佳恬、顏色、插畫等的速度比文本內(nèi)容快6萬倍于游，但僅使用這些視覺元素并不能完全代替文本或標(biāo)簽毁葱，通常將它們組合在一起，可以使界面的識(shí)別速度更快贰剥、更高效倾剿。

但是，并非所有用戶群體的識(shí)別率都是一樣的蚌成。研究表明前痘，識(shí)別率隨著年齡的增長而下降。

60歲以上的用戶對(duì)圖標(biāo)含義的識(shí)別率為60%担忧，而20-30歲的用戶對(duì)圖標(biāo)含義的識(shí)別率高達(dá)90%芹缔。

此外，圖標(biāo)的復(fù)雜度影響視覺識(shí)別瓶盛。如下圖最欠，數(shù)據(jù)顯示：鬧鐘的識(shí)別率為100%，而日歷的識(shí)別率只有40%惩猫。

二. 加強(qiáng)長期記憶

即使圖片只展示一次芝硬，人類也具有令人驚艷的長期記憶的能力。這使得我們?cè)诋a(chǎn)品設(shè)計(jì)中使用視覺元素成為用戶體驗(yàn)的一種方式轧房。

研究表明拌阴，當(dāng)被要求在兩個(gè)不同的測(cè)試中記住612張圖片時(shí)，觀眾在6秒內(nèi)命中率高達(dá)98%锯厢。與單詞或短句記憶測(cè)驗(yàn)相比皮官，這一比率下降到88%脯倒。

實(shí)驗(yàn)還表明实辑，圖片記憶始終優(yōu)于語言記憶。第一藻丢，因?yàn)閳D像的記憶能力幾乎是無限的剪撬。第二，因?yàn)閳D像比文本有更好的記憶率悠反。而且残黑，生動(dòng)的圖像比正常的圖像能更好的保存在我們的大腦中馍佑。

視覺與聽覺也是有差異的，在埃德加·戴爾的一項(xiàng)研究中表明梨水，當(dāng)人們聽到信息時(shí)拭荤，3天后該信息被記住的可能性約為15%。但是當(dāng)相同的信息用視覺元素去表達(dá)時(shí)疫诽，3天后該信息被記住的可能性將近55%舅世。

三. 觸發(fā)愉悅感

通過研究專家Piotr Winkielman與John T. Cacioppo的一項(xiàng)名為“頭腦輕松，面帶微笑”的研究中表明奇徒，當(dāng)我們的大腦通過少量的認(rèn)知就可以快速理解時(shí)雏亚，我們的身體就會(huì)做出積極的反應(yīng)，從而觸發(fā)一種愉悅感摩钙。

?

實(shí)驗(yàn)讓參與者觀察一系列圖像罢低，同時(shí)監(jiān)控他們的表情。由于表情的變化過于微妙和短暫胖笛，觀察者無法察覺网持，所以在臉頰、眉毛和眼睛周圍放置了設(shè)備匀钧，以監(jiān)測(cè)圖像上情緒波動(dòng)的跡象翎碑。

研究表明：當(dāng)圖像更容易識(shí)別時(shí)，人們會(huì)漏出輕微的笑容和額頭放松之斯。這似乎是系統(tǒng)1的一個(gè)特點(diǎn)日杈，即認(rèn)知舒適度與良好的感覺有關(guān)。

因此佑刷，由于視覺元素的使用首先驅(qū)動(dòng)了系統(tǒng)1的快速和自動(dòng)化識(shí)別莉擒，可以說這些視覺元素的使用也為用戶在使用產(chǎn)品的過程中提供了愉悅感。

四. 引導(dǎo)注意力

視覺元素可以改善整個(gè)界面導(dǎo)航瘫絮。字體涨冀、留白、CTA麦萤、排版和圖像等都可以作為模塊間的可視分隔符鹿鳖，使用戶可以清楚地看到前面發(fā)生的事情。

尼爾森的一項(xiàng)研究表明壮莹，盡管文本內(nèi)容占用了316%的屏幕空間翅帜，但用戶看圖片的時(shí)間比看文本的時(shí)間多10%。

我們來看下Uber是如何通過更改視覺元素來優(yōu)化著落頁的命满？

通過替換第一頁的封面圖片和排版涝滴，100%的測(cè)試人員可以看到標(biāo)題，而在上一個(gè)版本中只有90%的測(cè)試人員看到，這意味著有10%的人沒有注意到標(biāo)題內(nèi)容歼疮。

此外杂抽，新版標(biāo)題被識(shí)別時(shí)間大約為1秒，舊版本中用戶則需要1.5秒才看到標(biāo)題韩脏。

為什么會(huì)有這些變化呢缩麸？

盡管進(jìn)行了一些排版細(xì)微上的調(diào)整，比如將標(biāo)題字號(hào)放大赡矢、加粗匙睹、優(yōu)化文本等，但是對(duì)數(shù)據(jù)影響最大的是更改了封面圖片济竹。

五. 可訪問性

最后痕檬，界面中的圖標(biāo)、色彩送浊、插圖以及其他類型的視覺元素可以使產(chǎn)品更容易訪問梦谜，特別不同用戶群在使用產(chǎn)品時(shí)。

因此袭景，我們可以說圖形化的運(yùn)用提高了整體的理解力唁桩。此外，對(duì)于那些文本識(shí)別障礙（如閱讀障礙耸棒、閱讀困難或無法閱讀）的用戶來說荒澡，圖形化也會(huì)打破他們的感知界限。

本文已獲得作者正式授權(quán)（截圖如下）

原文地址：https://uxdesign.cc/the-power-of-visual-in-product-design-e1308542698b

作者：Jonny Czar

譯者：haselina

Welcome Follow me

歡 | 迎 | 關(guān)?|?注