視覺設計在產品中的價值

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

受DNA的影響

第一個原因來自於我們的DNA，E.詹森在他的《基於腦的學習》一書中指出，40%的腦神經與視網膜相連，與所有其他感官的總和相比更多的神經元致力於視覺，大腦中所有東西，約有90%由視覺刺激觸發的。此外，研究表明，約65%的人是視覺學習者，他們更喜歡學習和接觸與視覺元素相關的信息。

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

用戶界麵

因此人們通常認為，在用戶界麵上使用一些視覺元素，諸如：插畫、圖形、色彩、排版、圖標等會給我們設計的產品帶來比較好的視覺吸引力。

但是這些視覺元素有效嗎？它們對我們有什麼好處？他們的影響是什麼？最後，是什麼讓我們相信它們在用戶與產品的交互中起著重要的作用？

為了回答這些問題，我做了一次調研，采訪了各類設計師，調查了一些關於用戶行為的研究。因此，我總結了5個理由來解釋：為什麼視覺設計對於用戶行為和整體產品體驗如此重要：

一、加速視覺感知
二、加強長期記憶
三、觸發愉悅感
四、引導注意力
五、可訪問性

一. 加速視覺感知

視覺感知是向大腦發送信息最有效、最快的方式之一。

根據《思考，快與慢》的作者丹尼爾·卡尼曼的說法，這是因為我們的大腦有兩個係統，第一個係統稱為：係統1（感性思維，依賴於情感、記憶和經驗作出迅速的反應和判斷），第二個係統為：係統2（理性思維，通過調動注意力來分析、思考、解決問題，並作出決定。）

關鍵是當我們使用插畫、圖形、色彩等視覺元素時，我們的大腦會立即運行係統1，因此我們所吸收信息的速度要快得多，比如當我們看到下圖時，會立即觸發係統1，隻有在遇到問題時我們才會切換至係統2。

根據S.Thorpe 的一項研究表明，人類視覺係統中的處理速度非常快，大腦處理圖像隻需要150ms，而理解圖像的意思僅需要100ms。

研究表明，我們大腦識別圖像、顏色、插畫等的速度比文本內容快6萬倍，但僅使用這些視覺元素並不能完全代替文本或標簽，通常將它們組合在一起，可以使界麵的識別速度更快、更高效。

但是，並非所有用戶群體的識別率都是一樣的。

研究表明，識別率隨著年齡的增長而下降。如下圖，數據顯示：60歲以上的用戶對圖標含義的識別率為60%，而20-30歲的用戶對圖標含義的識別率高達90%。

此外，圖標的複雜度影響視覺識別。如下圖，數據顯示：鬧鍾的識別率為100%，而日曆的識別率隻有40%。

二. 加強長期記憶

即使圖片隻展示一次，人類也具有令人驚豔的長期記憶的能力。這使得我們在產品設計中使用視覺元素成為用戶體驗的一種方式。

研究表明，當被要求在兩個不同的測試中記住612張圖片時，觀眾在6秒內命中率高達98%。與單詞或短句記憶測驗相比，這一比率下降到88%。

實驗還表明，圖片記憶始終優於語言記憶。

第一，因為圖像的記憶能力幾乎是無限的。

第二，因為圖像比文本有更好的記憶率。而且，生動的圖像比正常的圖像能更好的保存在我們的大腦中。

視覺與聽覺也是有差異的，在埃德加·戴爾的一項研究中表明，當人們聽到信息時，3天後該信息被記住的可能性約為15%。但是當相同的信息用視覺元素去表達時，3天後該信息被記住的可能性將近55%。

三. 觸發愉悅感

通過研究專家Piotr Winkielman與John T. Cacioppo的一項名為“頭腦輕鬆，麵帶微笑”的研究中表明，當我們的大腦通過少量的認知就可以快速理解時，我們的身體就會做出積極的反應，從而觸發一種愉悅感。

實驗讓參與者觀察一係列圖像，同時監控他們的表情。由於表情的變化過於微妙和短暫，觀察者無法察覺，所以在臉頰、眉毛和眼睛周圍放置了設備，以監測圖像上情緒波動的跡象。

研究表明：當圖像更容易識別時，人們會漏出輕微的笑容和額頭放鬆。這似乎是係統1的一個特點，即認知舒適度與良好的感覺有關。

因此，由於視覺元素的使用首先驅動了係統1的快速和自動化識別，可以說這些視覺元素的使用也為用戶在使用產品的過程中提供了愉悅感。

四. 引導注意力

視覺元素可以改善整個界麵導航。字體、留白、CTA、排版和圖像等都可以作為模塊間的可視分隔符，使用戶可以清楚地看到前麵發生的事情。

尼爾森的一項研究表明，盡管文本內容占用了316%的屏幕空間，但用戶看圖片的時間比看文本的時間多10%。

我們來看下Uber是如何通過更改視覺元素來優化著落頁的？

通過替換第一頁的封麵圖片和排版，100%的測試人員可以看到標題，而在上一個版本中隻有90%的測試人員看到，這意味著有10%的人沒有注意到標題內容。

此外，新版標題被識別時間大約為1秒，舊版本中用戶則需要1.5秒才看到標題。

為什麼會有這些變化呢？

盡管進行了一些排版細微上的調整，比如將標題字號放大、加粗、優化文本等，但是對數據影響最大的是更改了封麵圖片。

五. 可訪問性

最後，界麵中的圖標、色彩、插圖以及其他類型的視覺元素可以使產品更容易訪問，特別不同用戶群在使用產品時。

因此，我們可以說圖形化的運用提高了整體的理解力。此外，對於那些文本識別障礙（如閱讀障礙、閱讀困難或無法閱讀）的用戶來說，圖形化也會打破他們的感知界限。