有段時間沒有寫UI動效相關的文章了，之前寫過一篇《超全面！動效設計標準與規範》的動畫文章，裡面會講到一些更具體的參數範圍，實用性拉滿，看完就可以用到你的動效調優里，干到擰不出水。今天的這篇更偏方法一些，強烈推薦你把2篇結合一起看，效果更佳！如今對用戶來說，好的體驗是界面一致、易讀和簡單。設計師要如何才能讓UI更加符合用戶的自然直覺呢？動效，可以讓界面變得更加自然，填補部分體驗上的隔閡。今天這篇文章會講到常用的12個UI/UX動畫原則，幫你做出富有樂趣的界面設計。1. 緩動」緩動「指的是在一個動作在過渡中進行的方式。你可以把緩動理解為加速或減速。一個物體可以從界面的一側緩慢啟動，然後加速，最後到另一側突然停止。或者，物體可以快速啟動，然後逐漸減速到停止。關鍵幀表示了動畫的開始和結束，緩動決定了中間過程。
將緩動應用於補間動畫的一種簡單方法是使用「屬性」面板(彩雲註：這裡彩雲還專門去查了下資料，這個功能是AE的一個Beta版本的功能，叫 Properties panel，可以很方便的修改屬性) 。緩動值的範圍從 –100 到 100。負值會從起始位置產生更平緩的變化（稱為緩入）， 正值會導致逐漸減速（稱為緩出）。
（彩雲註：在我們現在用的AE正式版中，可以直接修改緩動屬性然後配合曲線也可以修改緩動幅度，如果有體驗過Beta版本的同學歡迎文末留言交流呀）。
2. 偏移和延遲當多個UI元素同時移動時，用戶傾向於將它們分組在一起，而忽略了每個元素都可能有自己的功能。
偏移和延遲在同時移動的UI元素之間創建了層次結構，並說明它們是相關的，但又是不同的。不同於完全的同步，元素的時間、速度和間隔是交錯的，從而產生了微妙的「一個接一個」的效果。（彩雲註：動效本質上也是為了打造層次感，其實這又是上2期講的底層設計原則的應用之一了。所以，我們在看一個知識點的時候，要學會系統性地去思考）
當用戶在屏幕之間切換時，偏移和延遲表明存在多個交互元素。
3. 父子關係」父子關係「意思是將一個UI元素的屬性鏈接到其他元素的屬性。當父元素中的屬性發生變化時，子元素的鏈接屬性也會發生變化。所有元素屬性都可以相互鏈接。
例如，父元素的位置可以綁定到子元素的比例。當父元素移動時，子元素的大小會增大或減少。
父子級創建了UI元素之間的關係，建立了層次結構，這樣方便用戶同時與多個元素互動。在實際交互中，這種形式非常有影響力。
4. 變換變換發生在一個UI元素過渡到另一個UI元素時。例如，一個下載按鈕變換到一個進度條，進度條完成後轉換成完成圖標。
從用戶的角度來看，變換是顯示用戶與目標相關狀態的有效方法（保證系統狀態的可見性）。特別是對於UI元素有從開始到結束狀態變換時，這種變換動效尤其有用。比如說這裡的文件下載動效。（彩雲註：做這樣的動效是有效的，對於用戶體驗的ROI很高）
5. 數值變化數值變化動效（數字、文本或圖形）在界面中非常常見，比如在銀行APP，日曆，電商網站等等各類產品中。這些變化與現實中用戶的需求產生關聯，所以可以隨時被調整變化。
這種數值變化表明了數據的動態性質，動效告訴用戶數據是可交互的。如果沒有這些動態變化時，用戶的參與意願會降低。
6. 滑動和變焦滑動和變焦這樣的動效可以讓用戶在界面的UI元素中」旅行「，能增加畫面的層次細節。
滑動: 當用戶的視角接近(或遠離)一個UI元素時，就會產生滑動。想象一個人拿着相機走到一朵花前想要近距離拍攝。變焦：通過變焦，用戶的視角和UI元素保持不變，但元素在用戶屏幕中的大小會增加(或減少)。現在想象這個人呆在原地，用相機的變焦功能讓花看起來更大。
7. 維度維度使UI元素看起來好像有多個交互面，就像物理世界中的對象一樣。這種行為是通過使元素看起來像是可摺疊的、可翻轉的、浮動的，或賦予現實的深度屬性來實現的。
作為一種敘事手段，維度意味着UI元素的不同側面是連接的，並有助於無縫的屏幕轉換。
8. 視差當兩個（或更多）UI 元素同時移動但速度不同時，會產生視差，其目的是建立層次結構。
視差將用戶引向交互UI元素，同時允許非交互元素留在屏幕上，並保持設計的統一性。
9. 模糊想象一扇磨砂玻璃門， 它需要互動才能打開，但也可以隱約看到門後面的東西。
模糊效果也是如此。它為用戶提供了一個需要交互的界面，同時顯示屏幕提示，引導用戶聚集。導航菜單、鎖屏和文件夾/文件窗口中都有經常被使用到。
10. 克隆克隆是一種動態行為，把一個 UI 元素分裂成其他元素。這是一種突出重要信息或交互選項的聰明方法。
當UI元素在界面中具體化時，它們需要一個清晰的原點，用來鏈接到已經在界面上的元素。如果元素突然出現或消失，用戶就很難清楚地記住上下文。
11. 疊加在2D空間中，沒有所謂的深度，UI元素只能在X和Y軸上移動。疊加在UI的2D空間中創造出前景/背景區分的錯覺。通過模擬深度，疊加可以根據用戶需要隱藏和顯示元素。
在使用疊加時，信息層次結構是一個重要的考慮因素。例如，用戶在筆記應用中首先看到的應該是他們的筆記列表。然後，疊加可以用來為每條消息提供次要選項——比如刪除或保存。
12. 蒙版蒙版是對UI元素的部分進行顯示和隱藏。通過改變元素的顯示區域，蒙版區域產生變化，同時允許元素本身保持可識別。因此，照片和插圖等視覺元素非常適合用在這種動效上。
從可用性的角度來看，設計師可以使用蒙版，給用戶反饋，讓用戶知道每一步操作的反饋和進度。
原文：https://bootcamp.uxdesign.cc/12-principles-of-ui-ux-animation-you-should-know-75cf41e49e62
作者：Ayoub ┃Marhouse
譯者：彩雲Sky
本文翻譯已獲得作者的正式授權（授權截圖如下）
彩雲在知識社區每日更新日常思考，有3D、UI、插畫等打卡活動，還可以免費幫忙查看作品集和私密直播，詳細情況查看《這是我打造的第一個社群，歡迎你來體驗使用》介紹，歡迎你的加入！（目前已有500位+優秀同學加入，現在來還能趕上本月末的私密分享會哦！）
掃碼即可加入我的知識星球，與我一起擴展思維的邊界！
有關彩雲的更多思考，請關注下面這個號，會發一些這邊看不到的內容，期待大家的關注！
近期必讀熱門文章
超全面的設計底層理論，優秀設計背後離不開這些（下）
留言列表