超全面！寫給設(shè)計師的動效知識庫

Motion Graphic 也稱為 Mg 或者 Mograh，通常翻譯為動效或者動態(tài)圖形。

動效是什么？

Motion Graphic 也稱為 Mg 或者 Mograh，通常翻譯為動效設(shè)計或者動態(tài)圖形。它已經(jīng)成為了 UI 設(shè)計師不可或缺的技能之一。動效的目的是告訴用戶元素之間的關(guān)系以及哪些是可點擊的、哪些是不可點擊的元素。還會暗示界面將會出現(xiàn)什么內(nèi)容等等功能。在情感化設(shè)計理論中，動效是能夠拉近用戶與產(chǎn)品之間距離的設(shè)計手段。優(yōu)秀的動效會為常見的交互增加很多趣味，讓品牌更加深入人心。Material Design 的動效規(guī)范非常適合我們學(xué)習(xí)動效知識，但由于機翻不準(zhǔn)確和示例格式等問題給中國設(shè)計師學(xué)習(xí)帶來了一些困擾。為此，我用了一個月時間去消化并翻譯了較為準(zhǔn)確的專業(yè)詞匯，并結(jié)合我自身的動效經(jīng)驗內(nèi)容，為大家總結(jié)了這篇動效知識，希望對大家學(xué)習(xí)動效有所裨益。在我們開始之前，讓我們先來看一些優(yōu)秀的動效吧：

△ 該動效暗示了收件箱和郵件之間的層級結(jié)構(gòu)

△?該動效將菜單圖標(biāo)與操作結(jié)合在了一起

△?該動效暗示了頁卡和內(nèi)容之間的層次結(jié)構(gòu)

1. 反饋與狀態(tài)

動效設(shè)計除了具有暗示層級結(jié)構(gòu)的功能，也可以說明操作的狀態(tài)或是對操作進行反饋。扁平化設(shè)計是 UI 設(shè)計的主流趨勢，其缺點就是無法傳遞給用戶足夠多的情感，生動的動效剛好可以彌補這一點。設(shè)想一下，每點擊一個按鈕，它就像果凍或者是塑料一樣產(chǎn)生反饋，是不是特別有趣呢？

△?該動效提示了鍵盤輸入的操作，并告訴用戶這個操作是否成功

△?該動效暗示了內(nèi)容正在加載，并即將出現(xiàn)

2. 用戶教育

動效還可以指導(dǎo)第一次使用產(chǎn)品的用戶應(yīng)該如何操作，讓用戶在輕松的氛圍下學(xué)習(xí)。好的動效可以讓用戶在幾秒鐘的時間里看懂產(chǎn)品的使用方法，這要比生硬的圖文說明好多了。

△?該動效提示了如何滑動手勢來完成解鎖操作

△?該動效提示了所選項目的位置

3. 角色動畫

優(yōu)秀的角色動畫還可以為產(chǎn)品的交互增添個性和吸引力，讓用戶流連忘返。這也許就是我們在孩童時代就喜歡動畫片的原因吧。如果產(chǎn)品有吉祥物，就更需要我們來設(shè)計角色動畫了。準(zhǔn)備好為你的項目創(chuàng)建角色動畫了嗎？

△?優(yōu)秀的角色動效可以創(chuàng)造美好的第一印象

△?角色動畫可以為錯誤提示增加趣味性

動效的結(jié)構(gòu)

我們把動效的結(jié)構(gòu)分為：出場動畫、入場動畫和持續(xù)動畫。頁面中不需要運動的元素稱為靜態(tài)元素。元素的屬性決定了動效的轉(zhuǎn)換方式。我們在設(shè)計動效時一定要考慮每個元素的邏輯和屬性，再據(jù)此分配不同的效果。

• 導(dǎo)航圖標(biāo)等常駐元素的動畫
• 標(biāo)題使用出場動畫的淡出效果退出屏幕
• 操作選項使用入場動畫進入屏幕
• 如更多菜單這樣的靜態(tài)元素沒有動效

1. 動效的連續(xù)性

動效設(shè)計以運動的元素吸引著用戶的注意力。我們應(yīng)該設(shè)計前后關(guān)系明確的動效。我們可以使用以下技術(shù)表達動效的連續(xù)性：漸變、漸隱、共享變形。

2. 補間 Tweening

補間的作用是補充元素在兩種狀態(tài)間轉(zhuǎn)換時缺少的動作。例如，一個開關(guān)可以在屏幕上平滑移動，或者 FAB 可以通過補間變?yōu)樾碌捻撁婊蛘唔摽āＱa間只能應(yīng)用于那些具有中間值的屬性的變化，比如顏色。例如我們需要把紅色變?yōu)樗{色，可以通過紫色補間的變化實現(xiàn)。補間不能應(yīng)用于無法生成中間值或中間狀態(tài)的元素，例如柵格設(shè)計中的列數(shù)必須是整數(shù)，如 1 或 2，因此不能介于它們之間生成補間。

FAB 通過補間進行了位置、大小、高度、顏色和圓角的變化變成了一個浮層。補間也可以增加背景中的半透明黑色圖層。

3. 漸隱 Fading

漸隱動畫是通過利用元素之間的透明度變換來設(shè)計補間的。即使需要補間的兩個元素的屬性不具有中間狀態(tài)，我們也可以通過漸隱動畫創(chuàng)造平滑的過渡。比如一個圖片可以通過逐漸降低透明度露出另一個圖像的方法來轉(zhuǎn)換到另一個圖像。

4. 溶解 Dissolve

溶解動畫是在兩個重疊的元素之間創(chuàng)建過渡的動畫。例如下面演示中，前景元素進行淡入（顯示）或出場動畫（消失）后，顯示其后面隱藏的元素。

△ 一個元素消失以顯示隱藏在其后面的另一個元素

5. 交叉溶解 Cross-dissolve

交叉溶解動畫涉及兩個同時漸隱的元素：一個淡入另一個淡出，呈現(xiàn)交叉狀態(tài)。注意：如果界面中有多個交叉溶解動畫很可能會分散用戶的注意力。

△?雖然兩個元素同時進行了交叉溶解動畫，但在轉(zhuǎn)換的一瞬間仍然可以同時看到背景以及兩個元素

6. 漸隱穿透 Fade through

漸隱穿透是指是在另一個元素淡入前，該元素就已經(jīng)完全淡出的效果。這種過渡可以應(yīng)用于文本，圖標(biāo)和其他不完全重疊的元素。

△?兩個元素按順序淡出，在任何時候都不會同時顯示

7. 共享變形 Shared transformation

共享變形是在轉(zhuǎn)換的時候使多個元素進行類似的變換以增強動畫的連續(xù)性。例如下面 FAB 突然出現(xiàn)了兩個不同的圖標(biāo)的切換，這會讓用戶不知所措。共享變形使得兩個圖標(biāo)在出現(xiàn)時都進行旋轉(zhuǎn)，因此這個動畫效果不再突兀，變得更加易于理解。

△?①FAB中的圖標(biāo)切換太過突然；②在轉(zhuǎn)換時進行了平滑的切換

速度

速度是動效中最重要的一環(huán)，好的速度調(diào)整可以使動效更加順滑和流暢。在這里我們需要注意兩個方面：一個是持續(xù)時間，就是動效整體所花費的時間；第二個是緩動，也就是元素運動的軌跡和方式。

1. 方法

合理的動效速度可以讓用戶注意到應(yīng)該注意的位置和元素。我們設(shè)計動效時，應(yīng)當(dāng)在避免太突兀和讓用戶措手不及的同時，盡量縮短動效的時間。

△ 正確的方式：頁面切換時，動效應(yīng)該迅速且易于理解

△ 錯誤的方式：頁面跳轉(zhuǎn)太慢了，浪費了很多時間

2. 持續(xù)時間

無論動畫的風(fēng)格如何，過渡都不應(yīng)該過快或者過慢。選擇正確的持續(xù)時間和緩動可以讓動效變得流暢而清晰。

3. 復(fù)雜程度

動效的持續(xù)時間要依據(jù)內(nèi)容的復(fù)雜程度而定。如果內(nèi)容不太復(fù)雜，那么動效的速度就應(yīng)該快些；如果內(nèi)容比較復(fù)雜，那么相應(yīng)地動效持續(xù)時間應(yīng)該長一些，給用戶更多的時間以消化這些內(nèi)容。

△?這四個選擇控件的動效持續(xù)時間為100毫秒

△?對話框的動效，淡入時間：150ms 淡出時間：75ms

△?形狀的變形動效更加復(fù)雜，所以它們的動效持續(xù)時間應(yīng)該更長，動效長度為200ms

△?帶有許多動效細(xì)節(jié)的圖標(biāo)動效持續(xù)時間應(yīng)為500毫秒左右

4. 退出和關(guān)閉動效

關(guān)閉、折疊元素的動效應(yīng)該使用較短的時間，因為用戶的注意力更多的集中在接下來的任務(wù)上，因此退出和折疊動效不能喧賓奪主，搶奪用戶的注意力。

△?抽屜式導(dǎo)航的打開動效大約250毫秒，關(guān)閉動效大約200毫秒

△?該頁面展開大約300毫秒，關(guān)閉大約250毫秒

5. 小面積的動效

元素越大，為它設(shè)置的動效所花費的時間應(yīng)當(dāng)越長。這是考慮到用戶需要理解界面元素而設(shè)定的。下面按鈕面積比較小，所以運動速度很快。

△?按鈕切換動畫的時間為100毫秒

下面列出的底部菜單和紙片的動效涉及的面積相對較大，所以動效持續(xù)的時間長于上面的按鈕。

△?底部菜單展開時間：250毫秒 折疊時間：200毫秒

△?紙片的展開時間：250毫秒 折疊時間：200ms

6. 大面積的動效

運動元素的面積很大，為了讓用戶適應(yīng)，動效的持續(xù)時間應(yīng)當(dāng)更長。

△?卡片展開動效時間：300毫秒 折疊時間：250毫秒

△?持久表展開：300毫秒折疊：250ms

緩動 Easing

緩動是一種調(diào)整動畫速率的方式，它可以讓元素的運動具有速度的變化，而不是勻速進行。在現(xiàn)實世界中，運動不會立即開始或停止，元素在運動中都會加速和減速。這是由于初中時我們學(xué)過的加速度、空氣阻力、重力、萬有引力等因素引起的。加入了緩動的動效十分自然，看起來就像真實世界中的運動一樣。

△ 沒有加入緩動的運動看起來十分僵硬和機械

△ 正確的方式：使用緩動讓多個元素同時進行加速和減速。這些元素是同步運動的，產(chǎn)生了統(tǒng)一的感覺

△ 錯誤的方式：避免把應(yīng)該減速的元素進行加速運動，會產(chǎn)生雜亂無章的感覺

1. 緩動的類型

不同軟件里的緩動類型命名千差萬別，比如在 Adobe After Effects 和 Princple 等動效軟件里，對緩動的命名就不盡相同。但是根據(jù)我的個人經(jīng)驗，我們可以把緩動分為主要三種形式：緩入（先快后慢）、緩出（先慢后快）、緩動（先慢再快再慢）。

2. 緩動 Standard easing

緩動可以用在任何動效的開始和結(jié)束部分。緩動強調(diào)了該元素的運動，以吸引用戶的注意力。下圖的實例中有兩個緩動，分別為該元素的入場和出場緩動。在 AE 中默認(rèn)緩動的速度圖表為先慢再快再慢，當(dāng)然我們可以通過速度圖表編輯器改變運動的曲線，在速度圖表編輯器中，通常有 X 和 Y 兩個坐標(biāo)軸：Y軸為位置（或速度）；X軸為時間。

△ 應(yīng)用了緩動的動效，y軸表示位置，x軸表示時間

3. 緩入 Decelerate easing

應(yīng)用緩入效果的元素，它的運動速度會先快再慢，就像受到了阻力。好像一輛汽車慢慢停了下來，正好停到了用戶跟前等待用戶上車一樣。

△?使用了緩入的動效。 y軸表示位置，x軸表示時間

4. 緩出 Accelerate easing

元素要退出屏幕時可以使用緩出，它的運動速度是先慢再快的，讓用戶感覺到很「爽」。仿佛元素坐上了一輛汽車，慢慢加速離開了界面。

△?使用了緩出的動效。 y軸表示位置，x軸表示時間

動效需要「編舞」

人的視覺注意力往往一次只能關(guān)注一個動效。而新手容易犯的問題是在一個時間內(nèi)加入了多個動效，用戶的眼睛不知道要跟蹤哪個運動，造成了動效邏輯的混淆。所以我們要像指導(dǎo)一個芭蕾舞團一樣，安排界面上多個動效的出場順序和各自所要占用的時間。在前面的篇幅中我們了解到了動效所占用的時間受到元素的邏輯重要性、占據(jù)界面的面積等因素的影響，那么分配給各個動效的時間就全看我們的「編舞」能力了。

1. 簡單的「編舞」

簡單的編舞適合邏輯關(guān)系簡單的元素。比如底部頁卡伸展的動效，先使用了緩入拉出下面的信息，然后進行了 FAB 和背景顏色的反轉(zhuǎn)。用戶能理解到它是從哪里來的，并且能感知變化前后頁面的不同邏輯關(guān)系。

△ 底部頁卡的動效

2. 復(fù)雜的「編舞」

復(fù)雜的內(nèi)容轉(zhuǎn)換需要更加復(fù)雜的「編舞」，如查看聯(lián)系人列表中的詳細(xì)信息這個動效，可以將過渡分為兩部分來完成：第一是頂部導(dǎo)航區(qū)域的變換，第二是下面從某個聯(lián)系人單元擴展成整個頁面的變換。我們把將每個元素的動效分為四類：入場動畫（incoming），出場動畫（outgoing），持續(xù)動畫（persistent）和靜態(tài)（static）。

入場動畫元素在90毫秒內(nèi)完成，出場動畫元素在210毫秒內(nèi)完成。在入場動畫、出場動畫和持續(xù)動畫中都使用了緩動的效果。

變形

1. 簡單的變形

簡單的變形是通過補間的方式使某個控件從一個狀態(tài)轉(zhuǎn)換到另一個狀態(tài)。

△ 這個簡單的變形使開關(guān)組件從左向右移動并且從白漸變到紫色來切換它的狀態(tài)

2. 復(fù)雜的變形

涉及到復(fù)雜的版式變換的動效時，我們可以使用共同轉(zhuǎn)換的方式來創(chuàng)造平滑的過渡。界面中的元素可以作為一個單元共同進行變化。以單元為單位的變化很多是使用淡出等動效方式來設(shè)計的，這樣的變化容易讓用戶理解。

△ 正確的方式：盡量減少獨立運動的元素數(shù)。在一些單一元素運動的同時，整體單元的淡入淡出吸引了用戶主要的注意力，并且讓用戶感覺到界面的連續(xù)性。

△ 錯誤的方式：不要在一個動效中把許多元素關(guān)聯(lián)在一起。每個獨立的元素都會爭奪用戶的注意力，會使用戶分心。

△ 錯誤的方式：界面元素動效太跳躍，讓用戶無法集中注意力

3. 使用動畫容器層進行過渡

制作動效時，可以通過一個包含著很多元素的容器層進行變換，在變換的時候元素保持內(nèi)部的寬高比例，慢慢放大。

△?為容器層的外沿設(shè)置動效，內(nèi)部元素全部等比例縮放，沒有裁剪

4. 沒有容器層的過渡

當(dāng)一組元素沒有明確的邊界，也沒有容器層時，我們可以使用共享轉(zhuǎn)換創(chuàng)建平滑的過渡動畫。例如 FAB 動畫內(nèi)部圖標(biāo)的動效，雖然外輪廓的容器層沒有動畫，但是內(nèi)部動畫同樣可以創(chuàng)造連續(xù)感。

△?該動效的FAB圖標(biāo)使用了順時針的旋轉(zhuǎn)過渡

△?入場和出場通過左側(cè)的標(biāo)簽引導(dǎo)而出

5. 使用焦點元素

焦點元素是動效中最吸引用戶注意力的元素，也是補間中最重要的元素。

△?該動效中的標(biāo)題和圖像都是焦點元素，在折疊和展開的動效一直保持可見

自定義動畫

Material Design 鼓勵我們自定義符合產(chǎn)品風(fēng)格和品牌調(diào)性的動效。我們可以通過速度、位移、動效順序、獨特的圖標(biāo)和插圖來定制動效。其實國內(nèi)很多產(chǎn)品都已經(jīng)這么做了，比如站酷、QQ 等產(chǎn)品的 Tabbar 圖標(biāo)動效就非常符合自身品牌和調(diào)性，讓人過目不忘。

△ 正確的方式：①OWL產(chǎn)品使用了可愛的卡通動畫來設(shè)計動效；②獨特的晃動動效

△ 錯誤的方式：不要無視產(chǎn)品風(fēng)格和調(diào)性亂用動效。該動效案例中，產(chǎn)品調(diào)性比較嚴(yán)肅，但是動效相比之下太有趣和活潑了。

1. 情感連接

自定義動效在用戶使用的過程中創(chuàng)建了產(chǎn)品和用戶的情感連接。

△?獎勵用戶執(zhí)行任務(wù)的動畫可以創(chuàng)建愉悅感

2. 頻率

添加自定義動效時，我們需要考慮動畫的頻率。系統(tǒng)圖標(biāo)動畫可以設(shè)計的非常精細(xì)，但同時要避免過于頻繁的動畫分散了用戶的注意力。

△ 正確的方式：動畫圖標(biāo)為底部導(dǎo)航添色不少

△ 錯誤的方式：頻繁使用產(chǎn)品圖標(biāo)的動畫會阻礙用戶的操作

? 速度

1. 緩動

緩動適用于大多數(shù)的過渡動效，比如頂部導(dǎo)航或底部導(dǎo)航的出入場動效。

△?緩動適合很多界面的切換

2. 強調(diào)型緩動

強調(diào)型緩動一般加在動效的最后，用以強調(diào)某個元素的重要性。

△ 在界面返回后，強調(diào)型緩動強調(diào)了頁面是從哪里展開的

△ 強調(diào)型緩動可以給人輕松優(yōu)雅的感受

△ 與一般性緩動相比，強調(diào)型緩動的加速度更快，停止時更加緩慢

3. 持續(xù)時間

縮短動畫的持續(xù)時間可以讓它感覺更大膽，延長動畫的持續(xù)時間可以表達更輕松的氛圍。如果持續(xù)時間在 400ms 以上，一般性緩動可能表現(xiàn)不佳，在這些情況下考慮使用強調(diào)性緩動。為表達特定氛圍，可以對默認(rèn)持續(xù)時間進行小幅調(diào)整。將默認(rèn)值從 300 毫秒增加到 350 毫秒表示更放松的效果，而將其縮短到 250 毫秒則使其更加大膽。同時應(yīng)當(dāng)避免對默認(rèn)持續(xù)時間進行大幅調(diào)整。減緩這個過渡到 550 毫秒可能太慢了，加速到 115 毫秒可能會讓人震驚。

? 運動

當(dāng)元素變換時，它的運動軌跡稱為運動路徑。默認(rèn)情況下，運動路徑是線性的。如果一個元素需要改變大小或沿對角線移動，則運動路徑可以使用直線型或弧線型的運動路徑。

1. 直線運動 Linear motion

直線運動就是簡單的運動，適合大多數(shù)的過渡效果。這種動作極少會分散用戶的注意力。

△ 正確的方式：該動效的頁卡以直線的方式折疊和展開

△ 注意：該動效中有一個大的對角線運動，與其他元素的主要上下或左右運動不協(xié)調(diào)

2. 弧線運動 Arc motion

弧線運動是模仿自然的一種動效設(shè)計，它們適用于對界面進行大幅調(diào)整的動效?；【€運動可以在水平和垂直兩個方向上進行。

△ 正確的方式：該動效中底部元素在轉(zhuǎn)換成卡片設(shè)計過程中應(yīng)用了弧線運動的方式

3. 回彈 Overshoot

回彈是指讓元素在運動時超出其應(yīng)該停止位置的動畫，就好像這個元素被很大力推動而跑過了頭一樣。這樣的動效可以讓用戶感覺有趣和充滿質(zhì)感。

△ 正確的方式：回彈讓人感覺到一種自然的動力感

4. 晃動 Oscillation

晃動是非常吸引用戶注意力的，在一個手勢操作之后，使元素進行晃動會讓人感覺到動效的質(zhì)感，讓人覺得有趣。

△ 正確的方式：使用晃動來創(chuàng)造有趣的風(fēng)格

5. 伸展 Stretch

伸展是指元素在快速運動時會發(fā)生形變，多用于開關(guān)和滑塊。這種變化來源于現(xiàn)實中的柔軟物體，因此有伸展動畫的元素會讓人感覺到柔軟。

△?拉伸效果為指示器增添了有趣的細(xì)節(jié)

△?該動效的時針在擺動時有弧形的伸展動效

6. 視差滾動 Parallax

視差滾動是指 z 軸上多層元素進行速度不統(tǒng)一的滾動。這種不統(tǒng)一暗示了它們海拔的不同，從而讓用戶感知到 z 軸的存在。

△?視差滾動為界面增加了深度感

△?視差滾動可以暗示信息的Z軸關(guān)系

? 排序

1. 時間偏移 Temporal offset

在元素進行不同的動效時，可以使用時間偏移突出某一個元素。

△?該動效需要100ms 來讓FAB變大，有助于突出FAB

2. 搖晃 Stagger

搖晃指的是按順序?qū)r間偏移應(yīng)用于一組元素，如列表中。搖晃創(chuàng)造了一種簡單的聯(lián)級效果，可以使用戶將注意力集中在每個列表上。

△?使用搖晃為重要的元素添加潤色

△?優(yōu)秀的搖晃動效

圖標(biāo)和插畫

給圖標(biāo)、插圖和產(chǎn)品圖標(biāo)加入動效可以為用戶體驗增添喜悅和趣味性。

1. 系統(tǒng)圖標(biāo)

系統(tǒng)圖標(biāo)的動效可以設(shè)計出微妙的運動細(xì)化。它們有助于給用戶完美的用戶體驗。

△?這些圖標(biāo)動畫為細(xì)節(jié)增添了俏皮感

△?Owl中圖標(biāo)動效反映了其產(chǎn)品的調(diào)性

2. 產(chǎn)品圖標(biāo)

產(chǎn)品圖標(biāo)的動畫給用戶一種溫暖和關(guān)懷的感覺。

△?這個鉆石造型的產(chǎn)品圖標(biāo)動效含有3D旋轉(zhuǎn)的效果

△?該動效中的產(chǎn)品圖標(biāo)有線條和動態(tài)的豐富變化，非常有趣

△?該動畫中鳥的運動更加為造型增添了趣味

△?該動畫讓用戶感知了產(chǎn)品的調(diào)性

3. 插圖

插圖的動效可以給用戶創(chuàng)造驚喜的感覺。國內(nèi)的互聯(lián)網(wǎng)設(shè)計師都會為產(chǎn)品繪制一些插圖，如果這些插圖會動，那么更會讓用戶感覺到驚喜和愉悅了。

△ 當(dāng)產(chǎn)品發(fā)生錯誤和意外時，在錯誤提示中可以使用插圖的動效增添趣味

△?插圖動畫可以引導(dǎo)用戶做下一步的操作

4. 自適應(yīng)的動畫

屏幕的轉(zhuǎn)向、窗口的縮放等改變會引起界面的變化，在這里可以加入自適應(yīng)的動畫。

△?網(wǎng)頁中不同尺寸圖片切換的變換

相關(guān)資料

• MD動效部分原文：https://material.io/design/motion/understanding-motion.html
• 國外優(yōu)秀的動效收集網(wǎng)站：https://uimovement.com/
• 動效元素周期表：http://foxcodex.html.xdomain.jp/

歡迎關(guān)注作者的微信公眾號：「西見」