有用勝於有趣：6 條 UX 設計動畫原則
導讀：作者 José Torre 是 TomTom 公司的資深視覺設計師，有感於動畫被大量錯誤使用的現狀，結合自身多年的設計經驗，總結出 6 條動畫設計原則，通過豐富的案例介紹了在何時、何處、如何使用動畫及其克服障礙的心得體會。
1.動畫不應在最後添加
你確定了所有交互並且視覺設計已經定稿，但是你感覺少了些什麼。這時你可能會想「是時候加些動畫點綴一下了」。這是一個巨大的錯誤，也是動畫被濫用的原因之一。在設計過程最後考慮動畫通常會和在 PPT 中添加過渡效果混為一談，這是完全錯誤的。n
如果把用戶體驗看作是一個蛋糕，在大多數的情況下，動畫被認為是蛋糕頂部的櫻桃，但是我完全不同意這個觀點。我認為動畫應該是你混入蛋糕糊的另一種原料。n
我為本文描述動畫快速繪製的草圖n
在你繪製線框圖的時候，動畫就應該成竹在胸了。這就像在按下按鈕後，特定物體會根據箭頭指示的方向移動那麼簡單。保持簡單有助於你無需關注過多樣式，就能發現動效的目的（或特定目的的動效）。也會讓你不過於依戀動畫，因為動畫不總是問題的解決方案。如果它無法助你達成目標，棄之即可，無用的動畫將會成為最終用戶的障礙。n
這就把我們直接帶入到下一條原則。2.動畫一定要有用
多餘的動畫會佔用用戶寶貴的時間，並且用戶在獲得初次愉悅之後就會厭倦，這就是為什麼動畫需要有功能性的原因。假如你想知道哪些動畫可以幫助你，下面是一些案例。n
減輕生硬的切換
沒有過渡 vs 水平滑動過渡n
不管是不是設計師，我們都對此很熟悉。你在屏幕 A 中點按一個按鈕，砰！一個完全不同的屏幕（B）突然出現了。然後你會疑惑，它是從哪來的？我按下的是正確的按鈕嗎？接下來呢？如果「B」看起來和「A」很像怎麼辦？用戶可能會認為什麼都未發生。這展示了動畫中最常見的一類，變化時刻。考慮下從屏幕 A 到 B 這次「旅程」花費了多長時間，哪些對象應在屏幕中保留，它們將如何達到那裡？但請不要過度使用，因為接下來你將發現，動畫最好在「無形」中發揮作用。n
提供上下文
沒有過渡 vs 從底部滑入n
有時候你進入了某個頁面，但是並不確定如何與之交互。一種幫助用戶理解的好方法就是在特定物體進入時，提供一些它的特性的線索。以文章列表舉例，滑動它們有助於用戶理解可以不停的刷動查看更多。你甚至可以更進一步，讓它們一個接一個的定時滑動出現，強調這些項目都是分開的，你可以與當中的任一個進行交互。n
假如你決定點擊其中一個項目，然後它展開了那篇文章的全部內容，之前與其他信息處於同一層級的信息現在變成了主要內容。過渡動畫是加強用戶選擇的一種好方法，不僅展示了你仍然和處於選中狀態的同一物體進行交互，而且也會給你帶來更多的屏幕空間。n提供定位當用戶界面和用戶之間的所有障礙被移除後，用戶界面變得更加真實具體起來，因此賦予用戶空間定位感變得十分重要。你可以通過讓動畫保持一致和 app 的結構易於理解做到這一點。n
一個物體向左移出屏幕，如果它再次出現，從邏輯上講，應該來自其移出的地方。這將幫助你的用戶理解 app 的面貌，用戶在使用時會感覺更加舒暢。反之則會引發混亂，用戶甚至可能會認為他們看到的完全不是同一個物體。n
內容從底部進入 vs 內容從右邊（箭頭的指向）進入n
這同樣適用於屏幕上出現的視覺提示。想像你點擊了一個帶有向右指示箭頭的列表項，邏輯上的過渡應該是自右向左滑動，好像用戶視圖向右移動一樣，加強了用戶界面中的視覺線索。n
很多時候你會看到 UI 元素與過渡動效相矛盾。這有點惱人，我認為這些是我們應該避免的，否則動畫會讓用戶看起來很突兀，因為它們違反了用戶的預期。n提供及時反饋你曾否問過自己，我按下那個按鈕了嗎？它做了什麼？我應該再按一次嗎？回答可能是肯定的，你或許會一遍又一遍的點擊，只為確認實際上你在最初的時候就按下了。這就是為什麼提供及時反饋是重要的原因，即便 app 沒有立即做出反應。n在這個世界中，你的手指通常會蓋住點按按鈕，動畫在為用戶提供他們所需的安慰上發揮了巨大的作用。n
輕微的顏色變化 vs 快速動畫n
在某些情況下，你甚至可以更進一步並讓其更加吸引人。假如你的應用中有一個「星星」按鈕，它是你的「英雄」操作之一（從未見過，我知道）。這時你就可以好玩一點，來讓用戶開心。讓他們感到這是有獎勵的，用戶就會想要重複這個操作。注意下時間，動畫需要及時被感知，否則它就會變得緩慢並且很快就被討厭。還有一點，不要讓其吸引過頭。n
讓內容感覺是實時的
沒有過渡 vs 從頂部滑入n
如果你的 app 或者網頁有實時的內容，比如照片，評論或者某種計數器，動畫可以幫助你完成兩件事情：順暢地添加新元素以及緩衝載入這些元素可能造成的延遲。n
講故事幾乎在每一個應用程序中，都會有一個解釋事情出錯或者介紹新特性的地方。插圖在這裡發揮著巨大的作用，它提供了一種更加視覺化、及時的方式來幫助用戶理解某個問題，以及如何將其解決。如果說一圖勝千言的話，想像一下動畫，那可是每秒30張圖片。n
嘗試讓用戶微笑，即使是負面的消息。n
這種類型的屏幕頁面正是動畫可以大放異彩的時機，讓用戶難忘，給用戶帶來微笑，即使情況不妙。然而，如果你的 app 總是顯示一個錯誤頁面，那麼你可能希望忽略這點。你最不想要的就是讓用戶記住每次的錯誤。n
既然你了解了在何時（When）、何處（Where）使用動畫，那麼我們接下來便是如何（How）使用了。3.動畫必須反映品牌
考慮一下一個物體從左到右的簡單動效。事實上，僅僅通過調整緩動曲線就可以有無數種方法。基於此你可以為你的動畫賦予個性。看看下面的例子，它們使用了相同的動效和計時，唯一的區別就是緩動曲線。n
A：快速&活潑，B：順滑&自然，C：彈性n
雖然有無窮無盡的可能性，但是在你變得瘋狂以及讓你的轉場過渡像果凍一樣彈跳之前，考慮下你的品牌、用戶以及你希望傳播的調性。如果動畫與調性不符，你的用戶會感到尷尬並喪失對你品牌的信任。想像一下，如果你的銀行 app 擁有你在遊戲中看到的彈跳風格動畫，你會信任它嗎？n
雖然動畫反映品牌很重要，但是你在設計動畫時需要牢記的是下一條原則。4.動畫不應成為唯一的英雄
動畫是扭轉局面的英雄，但不是一個形單影隻的英雄，而更像是作為一個團隊並肩作戰的忍者神龜。如果你的動畫佔據了舞台中心，你不是在設計一個體驗，而是在強迫用戶觀看一場電影。n
炫酷 vs 一致n
動畫應該是體驗整體的一部分，作為視覺設計的補充和交互體驗的支持，保持克制是動畫設計的關鍵。 在大多數情況下，優秀的動畫甚至不會引起用戶的注意。n
如果你正在設計動畫，你的工作不是取悅用戶，而是儘可能用一種最簡單、最直觀和最自然的方式來助其實現目標，下一條原則就是與之相關的。5.動畫必須感覺自然
線性動畫 vs 緩入緩出n
我知道「感覺」這個單詞可能有點模稜兩可，但請耐心聽我說。因為用戶直接與用戶界面進行交互，那麼在某種程度上會有一種對用戶界面遵循物理規律的特定預期。雖然你與之交互的列表會根據快慢進行回應是個好案例，但這同樣適用於其他對象。n
然而，這並不意味著所有的 app 都應該有同樣的反應。在真實的世界中，如果你踢下球，它們並不會以同樣的方式作為反應。足球會飛走但是保齡球有可能讓你的腳受傷。就像我在前面的原則中提到的，這都關乎你希望品牌傳遞的調性和重點。n你必須定義應用的「材料」和重點是什麼，並展示對應的行為，但請記住如果需要應該不斷地優化調整，這樣才不會違背下條原則。6.動畫不應該浪費時間
兩個動畫都是6秒。n
動畫可被用來調整用戶的感知時間，所以在對你有利的時候使用它。對於人類的大腦來說，任何少於 0.1 秒的動作都可看作是瞬時的，少於 1 秒的動作視為無縫的。所以，如果一個過程耗時 6 秒，你可將其分解為幾個不同的的動畫。這個技巧會讓整個過程感覺更快並且讓用戶保持關注。n
你也可以用動畫來偽裝一個即時動作，這個動作實際上在後台會耗時更長。這會讓應用看起來響應更快，即便整個過程會花費比用戶看起來更長的時間。n
你無法模仿現實世界中的一切，你需要考慮用戶的預期。如果你在用戶界面按了一個按鈕，你會預期一個及時反饋，因此這就不是應用物理規律的最佳時機，不要在像這樣的情況下使用緩入動畫。n好了，如果你做到了我真正相信的那些，如果你運用了這些原則，那麼你正以正確的方式來製作最佳的動畫，這提升的不僅是你的用戶界面的觀感，還有用戶對其的體驗。既然你了解了這些原則，你仍然需要越過一些障礙。最後的障礙
Invisible animation by Steven Fabre
Creating Usability with Motion: The UX in Motion Manifesto by Issara Willenskomer原文作者：José Torre
原文地址：https://blog.prototypr.io/6-animation-guidelines-for-ux-design-74c90eb5e47a
推薦閱讀：
※知乎上哪些用戶已經體驗過，韓國大宇（Daewoo）出的這款壁掛式全自動滾筒洗衣機， 真實體驗如何？
※【 周鴻禕自述：我的互聯網方法論-讀書筆記 】
※關於UX在VR/AR里的這波浪潮，你還趕得上嗎？
※設計師的入行與職業生涯 - 有什麼要問張海龍的？
※Google數據分析師：從數據到洞見，如何構建你的商業藍圖【UXRen譯#143】