如今對用戶來說，好的體驗是界面一致、易讀和簡單。設(shè)計師要如何才能讓 UI 更加符合用戶的自然直覺呢？

動效，可以讓界面變得更加自然，填補部分體驗上的隔閡。今天這篇文章會講到常用的 12 個 UI/UX 動畫原則，幫你做出富有樂趣的界面設(shè)計。

1. 緩動

"緩動"指的是在一個動作在過渡中進(jìn)行的方式。你可以把緩動理解為加速或減速。一個物體可以從界面的一側(cè)緩慢啟動，然后加速，最后到另一側(cè)突然停止?；蛘撸矬w可以快速啟動，然后逐漸減速到停止。關(guān)鍵幀表示了動畫的開始和結(jié)束，緩動決定了中間過程。

將緩動應(yīng)用于補間動畫的一種簡單方法是使用"屬性"面板(彩云注：這里彩云還專門去查了下資料，這個功能是 AE 的一個 Beta 版本的功能，叫 Properties panel，可以很方便的修改屬性) 。緩動值的范圍從 –100 到 100。負(fù)值會從起始位置產(chǎn)生更平緩的變化（稱為緩入）， 正值會導(dǎo)致逐漸減速（稱為緩出）。

（彩云注：在我們現(xiàn)在用的 AE 正式版中，可以直接修改緩動屬性然后配合曲線也可以修改緩動幅度，如果有體驗過 Beta 版本的同學(xué)歡迎文末留言交流呀）。

Saptarshi Prakash

2. 偏移和延遲

當(dāng)多個 UI 元素同時移動時，用戶傾向于將它們分組在一起，而忽略了每個元素都可能有自己的功能。

偏移和延遲在同時移動的 UI 元素之間創(chuàng)建了層次結(jié)構(gòu)，并說明它們是相關(guān)的，但又是不同的。不同于完全的同步，元素的時間、速度和間隔是交錯的，從而產(chǎn)生了微妙的"一個接一個"的效果。（彩云注：動效本質(zhì)上也是為了打造層次感，其實這又是上 2 期講的底層設(shè)計原則的應(yīng)用之一了。所以，我們在看一個知識點的時候，要學(xué)會系統(tǒng)性地去思考）

當(dāng)用戶在屏幕之間切換時，偏移和延遲表明存在多個交互元素。

3. 父子關(guān)系

"父子關(guān)系"意思是將一個 UI 元素的屬性鏈接到其他元素的屬性。當(dāng)父元素中的屬性發(fā)生變化時，子元素的鏈接屬性也會發(fā)生變化。所有元素屬性都可以相互鏈接。

例如，父元素的位置可以綁定到子元素的比例。當(dāng)父元素移動時，子元素的大小會增大或減少。

父子級創(chuàng)建了 UI 元素之間的關(guān)系，建立了層次結(jié)構(gòu)，這樣方便用戶同時與多個元素互動。在實際交互中，這種形式非常有影響力。

Ayoub Kada

4. 變換

變換發(fā)生在一個 UI 元素過渡到另一個 UI 元素時。例如，一個下載按鈕變換到一個進(jìn)度條，進(jìn)度條完成后轉(zhuǎn)換成完成圖標(biāo)。

從用戶的角度來看，變換是顯示用戶與目標(biāo)相關(guān)狀態(tài)的有效方法（保證系統(tǒng)狀態(tài)的可見性）。特別是對于 UI 元素有從開始到結(jié)束狀態(tài)變換時，這種變換動效尤其有用。比如說這里的文件下載動效。（彩云注：做這樣的動效是有效的，對于用戶體驗的 ROI 很高）

Y.J.Y

5. 數(shù)值變化

數(shù)值變化動效（數(shù)字、文本或圖形）在界面中非常常見，比如在銀行 APP，日歷，電商網(wǎng)站等等各類產(chǎn)品中。這些變化與現(xiàn)實中用戶的需求產(chǎn)生關(guān)聯(lián)，所以可以隨時被調(diào)整變化。

這種數(shù)值變化表明了數(shù)據(jù)的動態(tài)性質(zhì)，動效告訴用戶數(shù)據(jù)是可交互的。如果沒有這些動態(tài)變化時，用戶的參與意愿會降低。

Creative jeff

6. 滑動和變焦

滑動和變焦這樣的動效可以讓用戶在界面的 UI 元素中"旅行"，能增加畫面的層次細(xì)節(jié)。

1. 滑動: 當(dāng)用戶的視角接近(或遠(yuǎn)離)一個 UI 元素時，就會產(chǎn)生滑動。想象一個人拿著相機走到一朵花前想要近距離拍攝。
2. 變焦：通過變焦，用戶的視角和 UI 元素保持不變，但元素在用戶屏幕中的大小會增加(或減少)。現(xiàn)在想象這個人呆在原地，用相機的變焦功能讓花看起來更大。

7. 維度

維度使 UI 元素看起來好像有多個交互面，就像物理世界中的對象一樣。這種行為是通過使元素看起來像是可折疊的、可翻轉(zhuǎn)的、浮動的，或賦予現(xiàn)實的深度屬性來實現(xiàn)的。

作為一種敘事手段，維度意味著 UI 元素的不同側(cè)面是連接的，并有助于無縫的屏幕轉(zhuǎn)換。

Sang Nguyen

8. 視差

當(dāng)兩個（或更多）UI 元素同時移動但速度不同時，會產(chǎn)生視差，其目的是建立層次結(jié)構(gòu)。

1. 交互元素在前景中出現(xiàn)的更快
2. 非交互元素在背景中出現(xiàn)的更慢

視差將用戶引向交互 UI 元素，同時允許非交互元素留在屏幕上，并保持設(shè)計的統(tǒng)一性。

Netrix

9. 模糊

想象一扇磨砂玻璃門， 它需要互動才能打開，但也可以隱約看到門后面的東西。

模糊效果也是如此。它為用戶提供了一個需要交互的界面，同時顯示屏幕提示，引導(dǎo)用戶聚集。導(dǎo)航菜單、鎖屏和文件夾/文件窗口中都有經(jīng)常被使用到。

magazineduwebdesign

10. 克隆

克隆是一種動態(tài)行為，把一個 UI 元素分裂成其他元素。這是一種突出重要信息或交互選項的聰明方法。

當(dāng) UI 元素在界面中具體化時，它們需要一個清晰的原點，用來鏈接到已經(jīng)在界面上的元素。如果元素突然出現(xiàn)或消失，用戶就很難清楚地記住上下文。

Interface Market

11. 疊加

在 2D 空間中，沒有所謂的深度，UI 元素只能在 X 和 Y 軸上移動。疊加在 UI 的 2D 空間中創(chuàng)造出前景/背景區(qū)分的錯覺。通過模擬深度，疊加可以根據(jù)用戶需要隱藏和顯示元素。

在使用疊加時，信息層次結(jié)構(gòu)是一個重要的考慮因素。例如，用戶在筆記應(yīng)用中首先看到的應(yīng)該是他們的筆記列表。然后，疊加可以用來為每條消息提供次要選項——比如刪除或保存。

12. 蒙版

蒙版是對 UI 元素的部分進(jìn)行顯示和隱藏。通過改變元素的顯示區(qū)域，蒙版區(qū)域產(chǎn)生變化，同時允許元素本身保持可識別。因此，照片和插圖等視覺元素非常適合用在這種動效上。

從可用性的角度來看，設(shè)計師可以使用蒙版，給用戶反饋，讓用戶知道每一步操作的反饋和進(jìn)度。

By Min-Sang Choi

作者：彩云譯設(shè)計