視覺(jué)元素在產(chǎn)品ux交互設(shè)計(jì)中所起的作用


視覺(jué)信息時(shí)代

在視覺(jué)信息時(shí)代,我們幾乎將看到的所有信息都有意識(shí)或無(wú)意識(shí)地汲取到腦海中,這些信息在我們的決策和行為中起著巨大的作用。

 

在這個(gè)時(shí)代,每天有超過(guò)5億人在Facebook上觀看視頻(其中有85%被靜音)Snapchat每秒共享9,000張照片,每天有超過(guò)5億人使用Instagram,在上面評(píng)論和發(fā)布圖片故事。

 

第一個(gè)原因來(lái)自我們的DNA。埃里克·詹森(Eric Jensen)在他的《基于大腦的學(xué)習(xí)》一書(shū)中指出,40%的腦神經(jīng)都與視網(wǎng)膜相連。致力于視覺(jué)的神經(jīng)元比其他所有感官的總和還多,大概90%出現(xiàn)在我們腦海中的事物都是由視覺(jué)刺激觸發(fā)的。此外,最近的研究表明,大約65%的人是視覺(jué)學(xué)習(xí)者,他們傾向于在與視覺(jué)元素相關(guān)聯(lián)的情況下進(jìn)行學(xué)習(xí)并與信息互動(dòng)。要知道,我們的大腦可以在短短13毫秒內(nèi)捕獲眼睛看到的圖像,這速度比眨眼快10倍。

 


我們使用圖像來(lái)表達(dá)自己已有數(shù)千年的歷史。通過(guò)繪畫(huà),人類(lèi)可以傳達(dá)周?chē)澜绲年P(guān)鍵信息,例如繪制地圖和警告掠食者。就像我們?cè)谟行问澜缰兴龅囊粯?,我們還使用視覺(jué)元素來(lái)代表主觀性:我們周?chē)膲Ρ谏喜粩嗝枥L著神明,民族,精神和當(dāng)?shù)匚幕?/p>

 

作為設(shè)計(jì)師,我們知道:在用戶界面上使用視覺(jué)元素(例如圖標(biāo),形狀,顏色,字體,圖像和插圖)會(huì)對(duì)我們?cè)O(shè)計(jì)的產(chǎn)品帶來(lái)相關(guān)影響。



但是這些視覺(jué)元素有效嗎?他們?nèi)绾问刮覀兪芤??他們有什么影響?最后,是什么使我們相信它們?cè)谟脩襞c我們?cè)O(shè)計(jì)的產(chǎn)品的交互中起著重要的作用?


在本文中,我們將探討視覺(jué)元素如何幫助我們:

  1. 加快數(shù)據(jù)感知(speed up data perception)

  2. 保留更長(zhǎng)時(shí)間的數(shù)據(jù)(retain data for much longer)

  3. 觸發(fā)愉悅(trigger pleasure)

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

  5. 塑造通用型界面(make user interface universal)

 

1.加快數(shù)據(jù)感知

視覺(jué)感知是向大腦發(fā)送信息的最有效,最快的方法之一。根據(jù)S.Thorpe,D.Fize和C.Marlot的一項(xiàng)研究,即“人類(lèi)視覺(jué)系統(tǒng)中的處理速度”,大腦處理圖像只需要150毫秒,而理解圖像的意義又需要100毫秒。


 

研究表明,我們的大腦識(shí)別圖像,插圖和圖標(biāo)的速度比識(shí)別單詞或中等長(zhǎng)度的內(nèi)容快6萬(wàn)倍。顯然,使用插圖,圖像和圖標(biāo)并不能替代文字和標(biāo)簽。然而將它們組合在一起,您可以更快,更有效地進(jìn)行界面的處理,尤其是當(dāng)我們需要在幾秒鐘內(nèi)完成許多基本交互時(shí)。

 

但是,并非所有用戶的識(shí)別率都相同。一項(xiàng)對(duì)60名參與者進(jìn)行的了解數(shù)字界面交互中圖標(biāo)識(shí)別速度的研究表明,盡管性別不是一個(gè)相關(guān)因素-男性候選人的識(shí)別率僅比女性候選人高4%。與此同時(shí),認(rèn)知隨年齡變化很大。

 

60歲以上的參與者對(duì)圖標(biāo)含義的識(shí)別率達(dá)到60%,而20-30歲之間的參與者對(duì)圖標(biāo)含義的識(shí)別率接近90%,這是一個(gè)很大的差異。

 


此外,與符號(hào)圖標(biāo)相比,顯示真實(shí)物體的圖標(biāo)更易于識(shí)別。這就是為什么在為界面設(shè)計(jì)視覺(jué)組件之前考慮用戶背景如此重要的原因。

 

例如,簡(jiǎn)單警報(bào)圖標(biāo)的識(shí)別率變化60 pp。在下圖中-使用時(shí)鐘表示警報(bào)-識(shí)別率是100%,而使用日歷圖標(biāo)的識(shí)別率僅為40%。



2.保留更長(zhǎng)時(shí)間的數(shù)據(jù)

即使圖像只暴露一次,人類(lèi)也具有令人印象深刻的長(zhǎng)期記憶能力。這使得在我們的產(chǎn)品流程中常常使用視覺(jué)刺激加深用戶體驗(yàn)。

 

羅杰·謝潑德(Roger Shepard)進(jìn)行的一項(xiàng)名為“學(xué)習(xí)10000張圖片”的研究表明,在兩次替代測(cè)試中被要求記住612張圖片的觀眾在大約6秒鐘內(nèi)達(dá)到了98%的命中率。而測(cè)試者將類(lèi)似的記憶單詞和簡(jiǎn)短句子進(jìn)行測(cè)試,該比率則下降到88%。



實(shí)驗(yàn)還表明,圖片記憶始終優(yōu)于語(yǔ)言記憶。首先,因?yàn)閳D像的存儲(chǔ)容量幾乎是無(wú)限的,其次是因?yàn)閳D像比文本具有更好的存儲(chǔ)率。


 

通過(guò)比較視覺(jué)環(huán)境和聽(tīng)覺(jué)環(huán)境,我們?nèi)阅芸闯霾町?。埃德加·戴爾(Edgar Dale)的一項(xiàng)研究表明,當(dāng)人們聽(tīng)到信息時(shí),三天后他們記住該信息的可能性為10%。但是,當(dāng)相同的信息與視覺(jué)元素(圖像,圖標(biāo)或顏色)配對(duì)時(shí),即使在相同的3天之后,仍保留了所傳輸內(nèi)容的近65%。

 

因此,通過(guò)使用視覺(jué)效果,我們可以更快地識(shí)別信息(如前所示,為250毫秒),并且在大腦中的保留時(shí)間更長(zhǎng)(在3天內(nèi)可持續(xù)高達(dá)65%)。

 

當(dāng)然,其他變量也會(huì)影響信息吸收。年齡,主觀性和對(duì)比曲線會(huì)影響識(shí)別和記憶,但是視覺(jué)組件的使用仍然是改善用戶學(xué)習(xí)曲線的有力工具。

 

3.觸發(fā)愉悅

當(dāng)我們的大腦通過(guò)少量的認(rèn)知努力就可以快速理解內(nèi)容時(shí),我們的身體就會(huì)做出積極的反應(yīng),從而激發(fā)愉悅感。研究人員Piotr Winkielman和John T. Cacioppo進(jìn)行的一項(xiàng)名為“輕松地讓臉上露出微笑”的研究表明了這一點(diǎn)。

 

實(shí)驗(yàn)讓參與者觀看了一系列圖像,同時(shí)監(jiān)控了他們的表情。這些圖像中的一些更易于識(shí)別,而有些則難以識(shí)別。

由于表情的變化太細(xì)微且太短,以至于觀察者無(wú)法察覺(jué),因此將設(shè)備放置在臉頰,眉毛和眼睛周?chē)员O(jiān)視圖像上情緒波動(dòng)的跡象。

 

兩項(xiàng)研究的結(jié)果均表明,易于處理的刺激與肌肉區(qū)域更大的活動(dòng)有關(guān),這是控制我們微笑的原因。


 

如預(yù)期的那樣,當(dāng)人們更容易看到和識(shí)別圖像時(shí),人們會(huì)露出輕微的微笑和額頭放松,并產(chǎn)生認(rèn)知舒適感和良好的感覺(jué)。

 

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

視覺(jué)元素可以改善整個(gè)界面的導(dǎo)航。字體,空格,CTA,字體和圖像都可以作為分區(qū)之間的可視分隔符,使用戶可以清楚地看到它們前面發(fā)生的事情。

 

尼爾森·諾曼集團(tuán)(Nielsen Norman Group)進(jìn)行的一項(xiàng)研究發(fā)現(xiàn),即使文本內(nèi)容占用了316%的屏幕空間,用戶觀看演講者照片所花的時(shí)間也比閱讀他們的傳記要多10%。



另一個(gè)示例是Uber如何通過(guò)更改視覺(jué)元素來(lái)優(yōu)化著陸頁(yè)。



用戶對(duì)右側(cè)新標(biāo)題的顯示時(shí)間為1秒鐘,而左邊舊版本中,用戶花了1.5秒才能看到標(biāo)題。


為什么會(huì)有這些變化?盡管進(jìn)行了一些細(xì)微的調(diào)整(例如,將頁(yè)面標(biāo)題居中和改進(jìn)內(nèi)容),但對(duì)轉(zhuǎn)換影響最大的還是更改了封面圖像。

 與頁(yè)面內(nèi)容相比,左邊界面中男孩“看著”用戶吸引了用戶過(guò)多的注意力,而右圖看著文本的男人則將所有用戶注意力重定向到了標(biāo)語(yǔ)。


圖像上字符位置的細(xì)微差別使用戶的注意力大大不同。

 

5.塑造通用型界面

最后,界面中的圖標(biāo),顏色,插圖和其他類(lèi)型的視覺(jué)組件可以使應(yīng)用程序或網(wǎng)站更易于訪問(wèn),尤其是當(dāng)來(lái)自不同國(guó)家的人們使用該應(yīng)用程序或網(wǎng)站時(shí)。


使用圖標(biāo)可以提高用戶對(duì)內(nèi)容的整體理解度。此外,圖像為受文字識(shí)別障礙(例如閱讀障礙),閱讀困難或無(wú)法閱讀的人拓展了感知的界限

每天更新,
全站高品質(zhì)素材免費(fèi)下載!