視覺(jué)注意力與動(dòng)效設(shè)計(jì)

數(shù)字產(chǎn)品中的動(dòng)效可能是一把雙刃劍。運(yùn)用得當(dāng)時(shí),動(dòng)效是引導(dǎo)用戶(hù)注意力的利器。它可以起到連接交互并有助于打造流暢的體驗(yàn)。但是過(guò)度或不相關(guān)的動(dòng)效會(huì)分散用戶(hù)的視覺(jué)注意力,導(dǎo)致混淆甚至增加認(rèn)知成本。

在我們的設(shè)計(jì)開(kāi)發(fā)中,重要的一步是提出一系列動(dòng)效設(shè)計(jì)的指導(dǎo)原則。我們的產(chǎn)品應(yīng)該如何優(yōu)化?從明確,重點(diǎn)突出的原則開(kāi)始,以便搭建一個(gè)框架,確保各種產(chǎn)品團(tuán)隊(duì)可以擴(kuò)展的方式評(píng)估各個(gè)組件動(dòng)效。

“為什么動(dòng)效會(huì)引起注意?并且如何才能幫助我們做出更好的設(shè)計(jì)決策?“

保持起碼的尊重

考慮到這一點(diǎn),我們?cè)贖ubspot 中提出的關(guān)鍵動(dòng)效設(shè)計(jì)原則之一(只有三個(gè))直接關(guān)系到注意力:

產(chǎn)品中的動(dòng)效應(yīng)該尊重用戶(hù)的注意力

動(dòng)效不宜華麗或多余。它應(yīng)該是被有意識(shí)地、巧妙地運(yùn)用,并且充分考慮了使用的場(chǎng)景。動(dòng)效尊重用戶(hù)的注意力,但不要在用戶(hù)當(dāng)前任務(wù)中吸引注意力,除非是特殊的目標(biāo)(如警報(bào))。

這看起來(lái)很明顯。當(dāng)然太多的動(dòng)效會(huì)分散注意力。但作為設(shè)計(jì)師,探索我們遵循的最佳實(shí)踐背后的深層原因很重要。任何人都可以告訴你太多的東西在屏幕上彈跳會(huì)讓人分心。但為什么動(dòng)效會(huì)引起注意?如何才能幫助我們做出更好的設(shè)計(jì)決策?

所以讓我們更深入地了解視覺(jué),視覺(jué)注意力以及動(dòng)效如何起作用。

饑渴的眼睛

人類(lèi)視覺(jué)是一個(gè)非常復(fù)雜的系統(tǒng),由幾個(gè)神經(jīng)器官和一系列處理階段組成。將光轉(zhuǎn)化為意義涉及很多。但在更高的層面上,它實(shí)際上非常簡(jiǎn)單。毫不奇怪,視覺(jué)注意力都始于你的眼睛。

眼球的組成

光線通過(guò)瞳孔進(jìn)入你的眼球,并在背面接觸到約一億三千萬(wàn)個(gè)稱(chēng)為視網(wǎng)膜的特定細(xì)胞層(沿著各種流體和血管行進(jìn))。在視網(wǎng)膜中有兩種類(lèi)型的細(xì)胞,其名稱(chēng)基于它們的形狀:桿狀和圓錐狀。在視網(wǎng)膜的正中央是中央凹。中央凹是一個(gè)重要的結(jié)構(gòu),因?yàn)樗枪饩€最直接照射到的地方。請(qǐng)記住:中央凹就是焦點(diǎn)。

明確視桿和視錐之間的差異,尤其是視網(wǎng)膜分布的差異,對(duì)于理解視覺(jué)和注意力非常重要。

視錐大約是視桿的20倍,也是專(zhuān)門(mén)用于細(xì)節(jié)和色彩視覺(jué)的細(xì)胞。中心凹處充滿(mǎn)了錐體。但錐體也具有敏銳的方向感,并且在弱光下不太好。激活錐體需要更多的光子。

另一方面,桿細(xì)胞在方向上不敏感。他們對(duì)各種角度的光進(jìn)行響應(yīng)。它們也比錐細(xì)胞更快地響應(yīng)光(它需要更少的光子來(lái)激活它們),并且它們對(duì)對(duì)比度差異更敏感。


視網(wǎng)膜上的視桿和視錐的分布

視桿細(xì)胞成大部分視網(wǎng)膜,但僅存在于中央凹之外。你可能認(rèn)為這個(gè)地區(qū)是你的周邊視野。外圍視覺(jué)中的視桿細(xì)胞將注意力吸引到未直接看到的事物上起著至關(guān)重要的作用。

現(xiàn)在我已經(jīng)把你放在我的視野里了

視覺(jué)故事的其余部分主要發(fā)生在大腦中。視覺(jué)處理有幾個(gè)階段,根據(jù)他們發(fā)生的大腦區(qū)域命名,如外側(cè)膝狀核(lgn)和視覺(jué)皮層1-6(v1 - v6)。

這些名字對(duì)于這次討論來(lái)說(shuō)不是非常重要,但重要的是這些階段需要時(shí)間和過(guò)濾。光線進(jìn)入眼睛并被大腦處理的時(shí)間可能在數(shù)百毫秒之內(nèi),而且在第三或第四階段之前,您并沒(méi)有意識(shí)到自己正在看什么。

甚至有一種方法可以“看到”這種延遲。

回想一下時(shí)間(或者現(xiàn)在嘗試一下),當(dāng)你輕輕一瞥秒鐘。你可能會(huì)注意到,當(dāng)前秒鐘,當(dāng)你看著時(shí)鐘時(shí),看起來(lái)比以下時(shí)間更長(zhǎng)。那不是你的想象力。這就是所謂的時(shí)間平衡,這是你的大腦為彌補(bǔ)視覺(jué)處理延遲所做的事。

“在你意識(shí)到你在看什么之前,你的大腦已經(jīng)對(duì)事情的重量級(jí)做出了很多決策。”

每當(dāng)你睜開(kāi)眼睛時(shí),會(huì)收集到大量的信息。幸運(yùn)的是,我們的大腦是基于啟發(fā)式的強(qiáng)大輸入過(guò)濾機(jī)器。在所有這些處理過(guò)程發(fā)生的時(shí)候,在你意識(shí)到你在看什么的時(shí)候,你的大腦已經(jīng)對(duì)事情的重量級(jí)做出了很多決策。只有在物體通過(guò)這些門(mén)時(shí)有意識(shí)地注意場(chǎng)景中的任何特定物體才有可能看到它們。

在整個(gè)過(guò)程中,移動(dòng)的東西會(huì)得到特殊的處理,這可能并不讓你感到驚訝。

Preattentive:注意力捷徑

即使我們的大腦正在積極處理所有通過(guò)視網(wǎng)膜攝取的信息,但這些信息并不都是一視同仁的。有些像落在中央凹的東西,會(huì)在深層認(rèn)知里處理,同時(shí)被給予更多的權(quán)重。畢竟,任何時(shí)候這是你在關(guān)注的場(chǎng)景的一部分。這通常是我們所說(shuō)的(視覺(jué)上)所關(guān)注的。

另一方面,落在外圍的視覺(jué)信息通常對(duì)眼前的任務(wù)來(lái)說(shuō)并不重要。你的大腦通常不會(huì)有任何有意識(shí)的注意。

外圍的物體或事件被大腦標(biāo)記為足夠重要,我們稱(chēng)之為注意力捕獲。你的眼睛會(huì)將這個(gè)區(qū)域帶入你的中心凹視野,并且它對(duì)認(rèn)知處理的權(quán)重也更高。這時(shí)你就能關(guān)注它啦。

注意“變焦鏡頭”和注意力的捕捉

所以大腦對(duì)視覺(jué)區(qū)域的“無(wú)意識(shí)的關(guān)注”,比你有意識(shí)的視覺(jué)區(qū)域大得多。有趣的是,該區(qū)域的大小(即可用于注意力捕獲的視野量)可能會(huì)發(fā)生變化。這種行為叫做變焦鏡頭模型。

當(dāng)一個(gè)人專(zhuān)注于復(fù)雜的任務(wù)時(shí),“鏡頭”的大小(不要與眼睛的物理鏡頭混淆)可能很小。但如果他們沒(méi)有參與進(jìn)來(lái),或者他們已經(jīng)接受了培訓(xùn)能夠預(yù)期到外圍的事情能夠中斷,那么鏡頭會(huì)變得更大。在這個(gè)模型中更關(guān)鍵的是鏡片的大小與認(rèn)知處理的效率成反比。

換句話說(shuō),無(wú)論你關(guān)注什么,潛意識(shí)事件導(dǎo)致注意力分散得越分散,認(rèn)知效率越低。再次,這可能看起來(lái)像常識(shí),但至少現(xiàn)在我們對(duì)它發(fā)生的原因有一些基本的認(rèn)識(shí)。

那么究竟是什么觸發(fā)了注意力捕獲?你的大腦用什么規(guī)則來(lái)決定場(chǎng)景中的哪些對(duì)象需要注意?

Preattentive注意力線索

事實(shí)證明,整個(gè)過(guò)濾系統(tǒng)被調(diào)整為關(guān)注場(chǎng)景中的一組特定屬性。因?yàn)檫@些屬性在信息被有意識(shí)地關(guān)注之前被用作過(guò)濾器,所以它們被稱(chēng)為preattentive線索。這很可能已經(jīng)為設(shè)計(jì)師所熟悉了。它們包括方向,大小,色調(diào)和強(qiáng)度等特性,當(dāng)然還包括動(dòng)效。

在視覺(jué)場(chǎng)景中,Preattentive線索的強(qiáng)烈變化將吸引注意力。

一個(gè)影響任務(wù)容易度的Preattentive線索典型例子是在一組隨機(jī)數(shù)中計(jì)算3的數(shù)量:

這很困難,需要很多有意識(shí)。您可能必須按順序掃描所有數(shù)字。但如果我們改變一個(gè)Preattentive屬性,色調(diào),它變得更容易:

視力正常的人幾乎可以立即計(jì)算出所有紅色3。這是因?yàn)轭伾荘reattentive處理的。它可以更快地捕捉注意力,而不需要較慢的順序處理。

通過(guò)動(dòng)效捕捉注意力的更多例子

讓我們看看幾個(gè)在真實(shí)世界的Web界面中捕捉動(dòng)作的例子:



篩選項(xiàng)設(shè)計(jì)案例:福特車(chē)型瀏覽

在用戶(hù)可以在福特車(chē)的面板搜索過(guò)濾信息是動(dòng)效捕捉注意力很好例子。他們會(huì)幫助告訴你剛剛申請(qǐng)的過(guò)濾器正在被應(yīng)用,并且巧妙地捕捉到注意力,以至于你第一次可能會(huì)想念他們。但這不是一件壞事。

一小部分動(dòng)效意味著強(qiáng)化一項(xiàng)具體行動(dòng)并傳達(dá)更多關(guān)于剛剛完成的任務(wù)的信息,這可能非常有效。放置在這里,出現(xiàn)在用戶(hù)剛剛點(diǎn)擊的位置,完美地完成了該任務(wù),而不是分散注意力。



導(dǎo)航菜單設(shè)計(jì)案例

用于?MailChimp 下拉主菜單的過(guò)渡動(dòng)畫(huà)效果非常好。它們非常敏捷,復(fù)雜程度也足以有效傳達(dá)空間定位(特別是對(duì)于子菜單屏幕)。子菜單輕微反彈是在產(chǎn)品運(yùn)動(dòng)中傳達(dá)其品牌風(fēng)格,同時(shí)不會(huì)分心的一個(gè)很好的例子。動(dòng)效設(shè)計(jì)往往在某些細(xì)小的地方發(fā)揮更大的作用。

回到原則上

在數(shù)字產(chǎn)品中有效應(yīng)用動(dòng)效需要考慮注意力和用戶(hù)的目標(biāo)。當(dāng)用戶(hù)沉浸在任務(wù)時(shí),即使小的視覺(jué)干擾也會(huì)堆積并增加處理信息的負(fù)擔(dān)。

另一方面,有意識(shí)的動(dòng)效設(shè)計(jì)是一個(gè)強(qiáng)大的工具,將引導(dǎo)用戶(hù)的注意力到我們想要的地方。與當(dāng)前任務(wù)直接相關(guān)的動(dòng)效是一個(gè)強(qiáng)有力的強(qiáng)化機(jī)制。如果對(duì)象或事件彼此密切相關(guān),則使用動(dòng)效可以幫助傳達(dá)這種關(guān)系。在有必要的時(shí)候,動(dòng)效也可以在某些特殊的時(shí)刻的從當(dāng)前任務(wù)中引起注意。警報(bào)和通知系統(tǒng)就是很好的例子。

所以要清點(diǎn)你產(chǎn)品中的動(dòng)效。避免夸張的動(dòng)效或打擾用戶(hù)的動(dòng)效。明白為什么這個(gè)動(dòng)效令人分心。無(wú)論如何,引用動(dòng)效設(shè)計(jì)的第三個(gè)原則:如果有疑問(wèn),請(qǐng)加快速度。

進(jìn)一步閱讀

?Colin Ware 寫(xiě)的《信息可視化:設(shè)計(jì)的感知》和 Stephen Few 的《信息儀表板設(shè)計(jì)》都討論了preattentive處理的思考。前者對(duì)視覺(jué)感知的研究更為深入。

我強(qiáng)烈推薦兩個(gè)新聞通訊,其中包括動(dòng)效設(shè)計(jì)和網(wǎng)頁(yè)動(dòng)效方面的令人驚嘆的資源,?Val Head’s UI Animation Newsletter?和?Rachel Nabors’ Web Animation Weekly.


原文鏈接

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容