作者 José Torre 是 TomTom 公司的資深視覺設(shè)計(jì)師，有感于動(dòng)畫被大量錯(cuò)誤使用的現(xiàn)狀，結(jié)合自身多年的設(shè)計(jì)經(jīng)驗(yàn)，總結(jié)出 6 條動(dòng)畫設(shè)計(jì)原則，通過豐富的案例介紹了在何時(shí)、何處、如何使用動(dòng)畫及其克服障礙的心得體會。

1.動(dòng)畫不應(yīng)在最后添加

你確定了所有交互并且視覺設(shè)計(jì)已經(jīng)定稿，但是你感覺少了些什么。這時(shí)你可能會想「是時(shí)候加些動(dòng)畫點(diǎn)綴一下了」。這是一個(gè)巨大的錯(cuò)誤，也是動(dòng)畫被濫用的原因之一。在設(shè)計(jì)過程最后考慮動(dòng)畫通常會和在 PPT 中添加過渡效果混為一談，這是完全錯(cuò)誤的。

如果把用戶體驗(yàn)看作是一個(gè)蛋糕，在大多數(shù)的情況下，動(dòng)畫被認(rèn)為是蛋糕頂部的櫻桃，但是我完全不同意這個(gè)觀點(diǎn)。我認(rèn)為動(dòng)畫應(yīng)該是你混入蛋糕糊的另一種原料。
我為本文描述動(dòng)畫快速繪制的草圖

在你繪制線框圖的時(shí)候，動(dòng)畫就應(yīng)該成竹在胸了。這就像在按下按鈕后，特定物體會根據(jù)箭頭指示的方向移動(dòng)那么簡單。保持簡單有助于你無需關(guān)注過多樣式，就能發(fā)現(xiàn)動(dòng)效的目的（或特定目的的動(dòng)效）。也會讓你不過于依戀動(dòng)畫，因?yàn)閯?dòng)畫不總是問題的解決方案。如果它無法助你達(dá)成目標(biāo)，棄之即可，無用的動(dòng)畫將會成為最終用戶的障礙。

這就把我們直接帶入到下一條原則。

2.動(dòng)畫一定要有用

多余的動(dòng)畫會占用用戶寶貴的時(shí)間，并且用戶在獲得初次愉悅之后就會厭倦，這就是為什么動(dòng)畫需要有功能性的原因。假如你想知道哪些動(dòng)畫可以幫助你，下面是一些案例。

減輕生硬的切換

沒有過渡 vs 水平滑動(dòng)過渡

不管是不是設(shè)計(jì)師，我們都對此很熟悉。你在屏幕 A 中點(diǎn)按一個(gè)按鈕，砰！一個(gè)完全不同的屏幕（B）突然出現(xiàn)了。然后你會疑惑，它是從哪來的？我按下的是正確的按鈕嗎？接下來呢？如果「B」看起來和「A」很像怎么辦？用戶可能會認(rèn)為什么都未發(fā)生。這展示了動(dòng)畫中最常見的一類，變化時(shí)刻?？紤]下從屏幕 A 到 B 這次「旅程」花費(fèi)了多長時(shí)間，哪些對象應(yīng)在屏幕中保留，它們將如何達(dá)到那里？但請不要過度使用，因?yàn)榻酉聛砟銓l(fā)現(xiàn)，動(dòng)畫最好在「無形」中發(fā)揮作用。

提供上下文

沒有過渡 vs 從底部滑入

有時(shí)候你進(jìn)入了某個(gè)頁面，但是并不確定如何與之交互。一種幫助用戶理解的好方法就是在特定物體進(jìn)入時(shí)，提供一些它的特性的線索。以文章列表舉例，滑動(dòng)它們有助于用戶理解可以不停的刷動(dòng)查看更多。你甚至可以更進(jìn)一步，讓它們一個(gè)接一個(gè)的定時(shí)滑動(dòng)出現(xiàn)，強(qiáng)調(diào)這些項(xiàng)目都是分開的，你可以與當(dāng)中的任一個(gè)進(jìn)行交互。

假如你決定點(diǎn)擊其中一個(gè)項(xiàng)目，然后它展開了那篇文章的全部內(nèi)容，之前與其他信息處于同一層級的信息現(xiàn)在變成了主要內(nèi)容。過渡動(dòng)畫是加強(qiáng)用戶選擇的一種好方法，不僅展示了你仍然和處于選中狀態(tài)的同一物體進(jìn)行交互，而且也會給你帶來更多的屏幕空間。

提供定位

當(dāng)用戶界面和用戶之間的所有障礙被移除后，用戶界面變得更加真實(shí)具體起來，因此賦予用戶空間定位感變得十分重要。你可以通過讓動(dòng)畫保持一致和 app 的結(jié)構(gòu)易于理解做到這一點(diǎn)。

一個(gè)物體向左移出屏幕，如果它再次出現(xiàn)，從邏輯上講，應(yīng)該來自其移出的地方。這將幫助你的用戶理解 app 的面貌，用戶在使用時(shí)會感覺更加舒暢。反之則會引發(fā)混亂，用戶甚至可能會認(rèn)為他們看到的完全不是同一個(gè)物體。

內(nèi)容從底部進(jìn)入 vs 內(nèi)容從右邊（箭頭的指向）進(jìn)入

這同樣適用于屏幕上出現(xiàn)的視覺提示。想象你點(diǎn)擊了一個(gè)帶有向右指示箭頭的列表項(xiàng)，邏輯上的過渡應(yīng)該是自右向左滑動(dòng)，好像用戶視圖向右移動(dòng)一樣，加強(qiáng)了用戶界面中的視覺線索。

很多時(shí)候你會看到 UI 元素與過渡動(dòng)效相矛盾。這有點(diǎn)惱人，我認(rèn)為這些是我們應(yīng)該避免的，否則動(dòng)畫會讓用戶看起來很突兀，因?yàn)樗鼈冞`反了用戶的預(yù)期。

提供及時(shí)反饋

你曾否問過自己，我按下那個(gè)按鈕了嗎？它做了什么？我應(yīng)該再按一次嗎？回答可能是肯定的，你或許會一遍又一遍的點(diǎn)擊，只為確認(rèn)實(shí)際上你在最初的時(shí)候就按下了。這就是為什么提供及時(shí)反饋是重要的原因，即便 app 沒有立即做出反應(yīng)。

在這個(gè)世界中，你的手指通常會蓋住點(diǎn)按按鈕，動(dòng)畫在為用戶提供他們所需的安慰上發(fā)揮了巨大的作用。

輕微的顏色變化 vs 快速動(dòng)畫

在某些情況下，你甚至可以更進(jìn)一步并讓其更加吸引人。假如你的應(yīng)用中有一個(gè)「星星」按鈕，它是你的「英雄」操作之一（從未見過，我知道）。這時(shí)你就可以好玩一點(diǎn)，來讓用戶開心。讓他們感到這是有獎(jiǎng)勵(lì)的，用戶就會想要重復(fù)這個(gè)操作。注意下時(shí)間，動(dòng)畫需要及時(shí)被感知，否則它就會變得緩慢并且很快就被討厭。還有一點(diǎn)，不要讓其吸引過頭。

讓內(nèi)容感覺是實(shí)時(shí)的

沒有過渡 vs 從頂部滑入

如果你的 app 或者網(wǎng)頁有實(shí)時(shí)的內(nèi)容，比如照片，評論或者某種計(jì)數(shù)器，動(dòng)畫可以幫助你完成兩件事情：順暢地添加新元素以及緩沖加載這些元素可能造成的延遲。

講故事

幾乎在每一個(gè)應(yīng)用程序中，都會有一個(gè)解釋事情出錯(cuò)或者介紹新特性的地方。插圖在這里發(fā)揮著巨大的作用，它提供了一種更加視覺化、及時(shí)的方式來幫助用戶理解某個(gè)問題，以及如何將其解決。如果說一圖勝千言的話，想象一下動(dòng)畫，那可是每秒30張圖片。

嘗試讓用戶微笑，即使是負(fù)面的消息。

這種類型的屏幕頁面正是動(dòng)畫可以大放異彩的時(shí)機(jī)，讓用戶難忘，給用戶帶來微笑，即使情況不妙。然而，如果你的 app 總是顯示一個(gè)錯(cuò)誤頁面，那么你可能希望忽略這點(diǎn)。你最不想要的就是讓用戶記住每次的錯(cuò)誤。

既然你了解了在何時(shí)（When）、何處（Where）使用動(dòng)畫，那么我們接下來便是如何（How）使用了。

3.動(dòng)畫必須反映品牌

考慮一下一個(gè)物體從左到右的簡單動(dòng)效。事實(shí)上，僅僅通過調(diào)整緩動(dòng)曲線就可以有無數(shù)種方法?；诖四憧梢詾槟愕膭?dòng)畫賦予個(gè)性?？纯聪旅娴睦?，它們使用了相同的動(dòng)效和計(jì)時(shí)，唯一的區(qū)別就是緩動(dòng)曲線。

A：快速&活潑，B：順滑&自然，C：彈性

雖然有無窮無盡的可能性，但是在你變得瘋狂以及讓你的轉(zhuǎn)場過渡像果凍一樣彈跳之前，考慮下你的品牌、用戶以及你希望傳播的調(diào)性。如果動(dòng)畫與調(diào)性不符，你的用戶會感到尷尬并喪失對你品牌的信任。想象一下，如果你的銀行 app 擁有你在游戲中看到的彈跳風(fēng)格動(dòng)畫，你會信任它嗎？

雖然動(dòng)畫反映品牌很重要，但是你在設(shè)計(jì)動(dòng)畫時(shí)需要牢記的是下一條原則。

4.動(dòng)畫不應(yīng)成為唯一的英雄

動(dòng)畫是扭轉(zhuǎn)局面的英雄，但不是一個(gè)形單影只的英雄，而更像是作為一個(gè)團(tuán)隊(duì)并肩作戰(zhàn)的忍者神龜。如果你的動(dòng)畫占據(jù)了舞臺中心，你不是在設(shè)計(jì)一個(gè)體驗(yàn)，而是在強(qiáng)迫用戶觀看一場電影。

炫酷 vs 一致

動(dòng)畫應(yīng)該是體驗(yàn)整體的一部分，作為視覺設(shè)計(jì)的補(bǔ)充和交互體驗(yàn)的支持，保持克制是動(dòng)畫設(shè)計(jì)的關(guān)鍵。 在大多數(shù)情況下，優(yōu)秀的動(dòng)畫甚至不會引起用戶的注意。

如果你正在設(shè)計(jì)動(dòng)畫，你的工作不是取悅用戶，而是盡可能用一種最簡單、最直觀和最自然的方式來助其實(shí)現(xiàn)目標(biāo)，下一條原則就是與之相關(guān)的。

5.動(dòng)畫必須感覺自然

線性動(dòng)畫 vs 緩入緩出

我知道「感覺」這個(gè)單詞可能有點(diǎn)模棱兩可，但請耐心聽我說。因?yàn)橛脩糁苯优c用戶界面進(jìn)行交互，那么在某種程度上會有一種對用戶界面遵循物理規(guī)律的特定預(yù)期。雖然你與之交互的列表會根據(jù)快慢進(jìn)行回應(yīng)是個(gè)好案例，但這同樣適用于其他對象。

然而，這并不意味著所有的 app 都應(yīng)該有同樣的反應(yīng)。在真實(shí)的世界中，如果你踢下球，它們并不會以同樣的方式作為反應(yīng)。足球會飛走但是保齡球有可能讓你的腳受傷。就像我在前面的原則中提到的，這都關(guān)乎你希望品牌傳遞的調(diào)性和重點(diǎn)。

你必須定義應(yīng)用的「材料」和重點(diǎn)是什么，并展示對應(yīng)的行為，但請記住如果需要應(yīng)該不斷地優(yōu)化調(diào)整，這樣才不會違背下條原則。

6.動(dòng)畫不應(yīng)該浪費(fèi)時(shí)間

兩個(gè)動(dòng)畫都是6秒。

動(dòng)畫可被用來調(diào)整用戶的感知時(shí)間，所以在對你有利的時(shí)候使用它。對于人類的大腦來說，任何少于 0.1 秒的動(dòng)作都可看作是瞬時(shí)的，少于 1 秒的動(dòng)作視為無縫的。所以，如果一個(gè)過程耗時(shí) 6 秒，你可將其分解為幾個(gè)不同的的動(dòng)畫。這個(gè)技巧會讓整個(gè)過程感覺更快并且讓用戶保持關(guān)注。

你也可以用動(dòng)畫來偽裝一個(gè)即時(shí)動(dòng)作，這個(gè)動(dòng)作實(shí)際上在后臺會耗時(shí)更長。這會讓應(yīng)用看起來響應(yīng)更快，即便整個(gè)過程會花費(fèi)比用戶看起來更長的時(shí)間。

你無法模仿現(xiàn)實(shí)世界中的一切，你需要考慮用戶的預(yù)期。如果你在用戶界面按了一個(gè)按鈕，你會預(yù)期一個(gè)及時(shí)反饋，因此這就不是應(yīng)用物理規(guī)律的最佳時(shí)機(jī)，不要在像這樣的情況下使用緩入動(dòng)畫。

好了，如果你做到了我真正相信的那些，如果你運(yùn)用了這些原則，那么你正以正確的方式來制作最佳的動(dòng)畫，這提升的不僅是你的用戶界面的觀感，還有用戶對其的體驗(yàn)。既然你了解了這些原則，你仍然需要越過一些障礙。

最后的障礙

如果你希望吸引用戶，你需要提供一個(gè)無縫的體驗(yàn)，如果運(yùn)用得當(dāng)?shù)脑挘瑒?dòng)畫絕對會助你完成目標(biāo)。然而這并非一帆風(fēng)順，因?yàn)闊o論設(shè)計(jì)任何東西，你都需要為一個(gè)不斷迭代的過程做好準(zhǔn)備。

你還需要知道如何制作原型并收集反饋，如果你的同事缺乏相關(guān)詞匯，溝通起來將會十分困難。如果不使用擬聲詞（例如「那個(gè)按鈕更像是嗖的一聲發(fā)射然后嘣的一聲爆炸，你知道吧？」），他們將無法評論你的動(dòng)畫。因此我認(rèn)為最好的方法就是向人們介紹下動(dòng)畫的 12 條基本原則，他們在熟悉了那些術(shù)語之后就能夠以你能理解的方式來表達(dá)自我了。

最后一個(gè)要跨越的障礙就是你的開發(fā)團(tuán)隊(duì)能夠/希望投入到動(dòng)畫中的精力。你真的需要推動(dòng)并且向他們展示在一個(gè)動(dòng)畫作為良好用戶體驗(yàn)固有成分的世界里，問題不是是否要，而是在何時(shí)你們必須緊跟這一潮流？你們做的越快，效果越好。用戶將對此十分感激，而你們也會大獲其益。

延伸閱讀：

Transitional Interfaces?by?Pasquale D’Silva

UI Animation and UX: A Not-So-Secret Friendship?by?Val Head

Invisible animation?by?Steven Fabre

Creating Usability with Motion: The UX in Motion Manifesto?by?Issara Willenskomer

原文作者：José Torre

翻譯作者：孫啟玉

譯文來源：https://zhuanlan.zhihu.com/p/27620327?utm_medium=social&utm_source

原文地址：https://blog.prototypr.io/6-animation-guidelines-for-ux-design-74c90eb5e47a

本文由 @孫啟玉 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。