數(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ì)比度差異更敏感。
視桿細(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)作的例子：
在用戶(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ù)，而不是分散注意力。
用于?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.
