數(shù)字產(chǎn)品中的動效可能是一把雙刃劍觅廓。運用得當時杈绸，動效是引導用戶注意力的利器瞳脓。它可以起到連接交互并有助于打造流暢的體驗。但是過度或不相關(guān)的動效會分散用戶的視覺注意力钝吮，導致混淆甚至增加認知成本奇瘦。
在我們的設(shè)計開發(fā)中劲弦，重要的一步是提出一系列動效設(shè)計的指導原則。我們的產(chǎn)品應(yīng)該如何優(yōu)化次坡？從明確砸琅，重點突出的原則開始轴踱，以便搭建一個框架，確保各種產(chǎn)品團隊可以擴展的方式評估各個組件動效壶唤。
“為什么動效會引起注意闸盔？并且如何才能幫助我們做出更好的設(shè)計決策迎吵？“
保持起碼的尊重
考慮到這一點针贬，我們在Hubspot 中提出的關(guān)鍵動效設(shè)計原則之一（只有三個）直接關(guān)系到注意力：
產(chǎn)品中的動效應(yīng)該尊重用戶的注意力
動效不宜華麗或多余坚踩。它應(yīng)該是被有意識地瞬铸、巧妙地運用嗓节，并且充分考慮了使用的場景。動效尊重用戶的注意力截粗，但不要在用戶當前任務(wù)中吸引注意力绸罗，除非是特殊的目標（如警報）珊蟀。
這看起來很明顯育灸。當然太多的動效會分散注意力昵宇。但作為設(shè)計師瓦哎，探索我們遵循的最佳實踐背后的深層原因很重要。任何人都可以告訴你太多的東西在屏幕上彈跳會讓人分心。但為什么動效會引起注意羡铲？如何才能幫助我們做出更好的設(shè)計決策也切？
所以讓我們更深入地了解視覺雷恃，視覺注意力以及動效如何起作用倒槐。
饑渴的眼睛
人類視覺是一個非常復雜的系統(tǒng)讨越，由幾個神經(jīng)器官和一系列處理階段組成两残。將光轉(zhuǎn)化為意義涉及很多。但在更高的層面上把跨，它實際上非常簡單人弓。毫不奇怪，視覺注意力都始于你的眼睛着逐。
光線通過瞳孔進入你的眼球崔赌，并在背面接觸到約一億三千萬個稱為視網(wǎng)膜的特定細胞層（沿著各種流體和血管行進）。在視網(wǎng)膜中有兩種類型的細胞耸别，其名稱基于它們的形狀：桿狀和圓錐狀健芭。在視網(wǎng)膜的正中央是中央凹秀姐。中央凹是一個重要的結(jié)構(gòu)吟榴，因為它是光線最直接照射到的地方。請記啄野狻：中央凹就是焦點吩翻。
明確視桿和視錐之間的差異，尤其是視網(wǎng)膜分布的差異锥咸，對于理解視覺和注意力非常重要狭瞎。
視錐大約是視桿的20倍，也是專門用于細節(jié)和色彩視覺的細胞搏予。中心凹處充滿了錐體熊锭。但錐體也具有敏銳的方向感，并且在弱光下不太好。激活錐體需要更多的光子碗殷。
另一方面精绎，桿細胞在方向上不敏感。他們對各種角度的光進行響應(yīng)锌妻。它們也比錐細胞更快地響應(yīng)光（它需要更少的光子來激活它們）代乃，并且它們對對比度差異更敏感。
視桿細胞成大部分視網(wǎng)膜仿粹，但僅存在于中央凹之外搁吓。你可能認為這個地區(qū)是你的周邊視野。外圍視覺中的視桿細胞將注意力吸引到未直接看到的事物上起著至關(guān)重要的作用吭历。
現(xiàn)在我已經(jīng)把你放在我的視野里了
視覺故事的其余部分主要發(fā)生在大腦中堕仔。視覺處理有幾個階段，根據(jù)他們發(fā)生的大腦區(qū)域命名晌区，如外側(cè)膝狀核（lgn）和視覺皮層1-6（v1 - v6）摩骨。
這些名字對于這次討論來說不是非常重要，但重要的是這些階段需要時間和過濾朗若。光線進入眼睛并被大腦處理的時間可能在數(shù)百毫秒之內(nèi)仿吞，而且在第三或第四階段之前，您并沒有意識到自己正在看什么捡偏。
甚至有一種方法可以“看到”這種延遲唤冈。
回想一下時間（或者現(xiàn)在嘗試一下），當你輕輕一瞥秒鐘银伟。你可能會注意到你虹，當前秒鐘，當你看著時鐘時彤避，看起來比以下時間更長傅物。那不是你的想象力。這就是所謂的時間平衡琉预，這是你的大腦為彌補視覺處理延遲所做的事董饰。
“在你意識到你在看什么之前，你的大腦已經(jīng)對事情的重量級做出了很多決策圆米∽湓荩”
每當你睜開眼睛時，會收集到大量的信息娄帖。幸運的是也祠，我們的大腦是基于啟發(fā)式的強大輸入過濾機器。在所有這些處理過程發(fā)生的時候近速，在你意識到你在看什么的時候诈嘿，你的大腦已經(jīng)對事情的重量級做出了很多決策堪旧。只有在物體通過這些門時有意識地注意場景中的任何特定物體才有可能看到它們。
在整個過程中奖亚，移動的東西會得到特殊的處理淳梦，這可能并不讓你感到驚訝。
Preattentive：注意力捷徑
即使我們的大腦正在積極處理所有通過視網(wǎng)膜攝取的信息昔字，但這些信息并不都是一視同仁的爆袍。有些像落在中央凹的東西，會在深層認知里處理李滴，同時被給予更多的權(quán)重螃宙。畢竟蛮瞄，任何時候這是你在關(guān)注的場景的一部分所坯。這通常是我們所說的（視覺上）所關(guān)注的。
另一方面挂捅，落在外圍的視覺信息通常對眼前的任務(wù)來說并不重要芹助。你的大腦通常不會有任何有意識的注意。
外圍的物體或事件被大腦標記為足夠重要闲先，我們稱之為注意力捕獲状土。你的眼睛會將這個區(qū)域帶入你的中心凹視野，并且它對認知處理的權(quán)重也更高伺糠。這時你就能關(guān)注它啦蒙谓。
所以大腦對視覺區(qū)域的“無意識的關(guān)注”，比你有意識的視覺區(qū)域大得多训桶。有趣的是累驮，該區(qū)域的大小（即可用于注意力捕獲的視野量）可能會發(fā)生變化舵揭。這種行為叫做變焦鏡頭模型谤专。
當一個人專注于復雜的任務(wù)時，“鏡頭”的大形缟（不要與眼睛的物理鏡頭混淆）可能很小置侍。但如果他們沒有參與進來，或者他們已經(jīng)接受了培訓能夠預(yù)期到外圍的事情能夠中斷拦焚，那么鏡頭會變得更大蜡坊。在這個模型中更關(guān)鍵的是鏡片的大小與認知處理的效率成反比。
換句話說赎败，無論你關(guān)注什么算色，潛意識事件導致注意力分散得越分散，認知效率越低螟够。再次灾梦，這可能看起來像常識峡钓，但至少現(xiàn)在我們對它發(fā)生的原因有一些基本的認識。
那么究竟是什么觸發(fā)了注意力捕獲若河？你的大腦用什么規(guī)則來決定場景中的哪些對象需要注意能岩？
Preattentive注意力線索
事實證明，整個過濾系統(tǒng)被調(diào)整為關(guān)注場景中的一組特定屬性萧福。因為這些屬性在信息被有意識地關(guān)注之前被用作過濾器拉鹃，所以它們被稱為preattentive線索。這很可能已經(jīng)為設(shè)計師所熟悉了鲫忍。它們包括方向膏燕，大小，色調(diào)和強度等特性悟民，當然還包括動效坝辫。
在視覺場景中，Preattentive線索的強烈變化將吸引注意力射亏。
一個影響任務(wù)容易度的Preattentive線索典型例子是在一組隨機數(shù)中計算3的數(shù)量：
這很困難近忙，需要很多有意識。您可能必須按順序掃描所有數(shù)字智润。但如果我們改變一個Preattentive屬性及舍，色調(diào)，它變得更容易：
視力正常的人幾乎可以立即計算出所有紅色3窟绷。這是因為顏色是Preattentive處理的锯玛。它可以更快地捕捉注意力，而不需要較慢的順序處理兼蜈。
通過動效捕捉注意力的更多例子
讓我們看看幾個在真實世界的Web界面中捕捉動作的例子：
在用戶可以在福特車的面板搜索過濾信息是動效捕捉注意力很好例子攘残。他們會幫助告訴你剛剛申請的過濾器正在被應(yīng)用，并且巧妙地捕捉到注意力饭尝，以至于你第一次可能會想念他們肯腕。但這不是一件壞事。
一小部分動效意味著強化一項具體行動并傳達更多關(guān)于剛剛完成的任務(wù)的信息钥平，這可能非常有效实撒。放置在這里，出現(xiàn)在用戶剛剛點擊的位置涉瘾，完美地完成了該任務(wù)知态，而不是分散注意力。
用于?MailChimp 下拉主菜單的過渡動畫效果非常好立叛。它們非常敏捷负敏，復雜程度也足以有效傳達空間定位（特別是對于子菜單屏幕）。子菜單輕微反彈是在產(chǎn)品運動中傳達其品牌風格秘蛇，同時不會分心的一個很好的例子其做。動效設(shè)計往往在某些細小的地方發(fā)揮更大的作用顶考。
回到原則上
在數(shù)字產(chǎn)品中有效應(yīng)用動效需要考慮注意力和用戶的目標。當用戶沉浸在任務(wù)時妖泄，即使小的視覺干擾也會堆積并增加處理信息的負擔驹沿。
另一方面，有意識的動效設(shè)計是一個強大的工具蹈胡，將引導用戶的注意力到我們想要的地方渊季。與當前任務(wù)直接相關(guān)的動效是一個強有力的強化機制。如果對象或事件彼此密切相關(guān)罚渐，則使用動效可以幫助傳達這種關(guān)系却汉。在有必要的時候，動效也可以在某些特殊的時刻的從當前任務(wù)中引起注意荷并。警報和通知系統(tǒng)就是很好的例子合砂。
所以要清點你產(chǎn)品中的動效。避免夸張的動效或打擾用戶的動效璧坟。明白為什么這個動效令人分心既穆。無論如何赎懦，引用動效設(shè)計的第三個原則：如果有疑問雀鹃，請加快速度。
進一步閱讀
?Colin Ware 寫的《信息可視化：設(shè)計的感知》和 Stephen Few 的《信息儀表板設(shè)計》都討論了preattentive處理的思考励两。前者對視覺感知的研究更為深入黎茎。
我強烈推薦兩個新聞通訊，其中包括動效設(shè)計和網(wǎng)頁動效方面的令人驚嘆的資源当悔，?Val Head’s UI Animation Newsletter?和?Rachel Nabors’ Web Animation Weekly.
