編者按：雖然動效設計和著名的迪士尼動畫十二原則上高度共通，但如今的數字設計領域的動效設計也有了長足的發展。由于在 UI/UX 領域當中，動效大都運用于轉場和微交互當中，這類動效設計的設計也有很多講究，這篇來自設計師 Dongkyu Lee 文章結合了大量的參考資料，梳理總結了 6 大設計原則，以及其中值得注意的細則，內容非常干，建議先收藏后細讀。
更多動效干貨：
在產品設計方面，動畫和動效的重要性怎么強調都不為過。正如知名用戶體驗研究機構 NNGroup 所強調的那樣，動效不僅能吸引注意力，還能增強用戶體驗，讓產品充滿新鮮感和現代感。當動效足夠復雜時，它可以為用戶的交互提供清晰的反饋，讓 UI 界面感覺更加直觀。
過渡動效在數字產品設計中尤其重要，因為它們可以絲滑地引導用戶從一個界面過渡到下一界面，使產品更易用、更具吸引力，自然地連接不同的交互步驟，進而提高產品的整體設計質量。
由于動效起著至關重要的作用，越來越多的產品團隊意識到它的重要性。設計師們也開始將動畫加入到原型當中，展示給其他團隊成員乃至于客戶，以便在正式發布前盡可能展示和測試產品。然而，想要設計出完美的動畫，仍然是一項復雜的工作。
這項工作的挑戰在于，如何在「微妙的動效」和「強調特定元素」之間找到合理的平衡。盡管現在已經有很多深入探討動畫復雜性的在線文章和相關素材，但我們都清楚，仍有大量的線上產品還沒在自己的產品中加入動效。
而這篇文章特別關注轉場和過渡動效。文中會通過基本且緊湊的范例，幫助大家了解這些過渡動效的原理。當然，這些總結并不是一成不變的死規則，而是創建動效的指導性參考。所以，你可以將這篇文章視為 UI 動效設計極簡實用指南。
- 結合透明度的淡入淡出
- 用縮放為動效增加活力
- 保持方向的一致性
- 平衡動效速度
- 確定優先級順序和分組
- 建立空間關系屬性
結合透明度的淡入淡出，是一個基本但非常有效的動效原則。即使單獨使用這一技巧，也可以帶來明顯的變化。從界面當前屏過渡到下一個屏時，你可以通過淡出不相關的 UI 元素，并讓下一屏元素淡入，來提供簡潔但是清晰的呈現。操作的時候，可以將特定元素的不透明度值從 100 更改為 0（或 0 更改為 100），結合動畫來實現這一效果。
圖1-1。對比添加了透明度淡入淡出的轉場動效的差別。
透明度淡入淡出效果添加前后的轉場效果對比。突然轉變的過渡感覺是不連貫的（左圖），但添加透明度淡入淡出感覺明顯更絲滑、更有視覺吸引力（右圖）。
圖 1-2。添加了帶透明度淡入淡出的菜單打開效果。
透明度淡入淡出效果添加前后的菜單打開效果對比。左圖所示的是從下到上突然打開的菜單，而右圖中，利用帶透明度的淡入淡出動效，提供更柔和、更流暢的過渡，這增強了用戶的參與度。
圖 1-3
這是帶透明度的淡入淡出動效從一種狀態轉換到另一種狀態的示例。此外，這個動效中，還加入了縮放和垂直移動的效果，進行處理牽涉到后面的一些設計原則和技巧。
這是一個進階用例，這個過渡動效無縫地接駁了兩個界面層和序列之間的交互。借助這種方法，用戶不會覺得場景轉換之間很割裂，許多成功的產品都采用這種設計來增強用戶體驗。
圖 1-4?Profile View 界面從小卡片展開為全屏的動效
這是「Profile view」界面展開的過渡動效，下圖是這個動效中全面 UI 元素的細分展現。
圖 1-5。細分圖層設置。
這種流暢的過渡是通過利用大小兩個「Profile View」層來實現的，通過合并縮放效果和兩層之間的平滑淡入淡出，讓過渡效果看起來就像一個層無縫地在兩個屏幕狀態之間切換。
添加縮放效果，可以為轉場過渡增加動感，視覺上更富活力，增加方向性。例如，當界面轉換到下一個屏時，你可以將現有組件和圖層從 100% 縮小到 90%，并添加淡出效果。
又比如，當后一屏出現的時候，你可以同時縮小當前界面。這給人的印象是新出現的界面層是從較高的位置進入，覆蓋了當前界面，這就突出了狀態之間的關聯性。你可以根據需求調整縮放的數值。縮放效果通常與上一原則淡入淡出一同使用。
圖 2-1
將縮放效果與淡入淡出相結合，可以使 UI 呈現出更強的動態，表現出更生動的效果。這種過渡更優雅，就好像下一屏從上往下滑入當前屏一樣。
圖 2-2
兩個范例當中，第一個顯示了使用縮放和輕微淡出來突出顯示活動層和非活動層之間的差異。
第二個范例展示了使用縮放文本和卡片層來實現更為生動的過渡效果。
圖 2-3
這兩個范例演示了較大的 UI 元素如何通過縮放過渡來呈現。
第一個范例是一個音樂 APP，其中專輯封面在轉場過渡時使用了熟悉的縮放效果。隨著音樂播放器界面層縮小，專輯封面會平滑地縮小到縮略圖大小。
第二個范例當中，打開新的疊加層時，之前的界面稍稍縮小，并且借助疊加層半透明的磨砂效果稍微透出一部分，這種效果向用戶暗示背景藏著之前的界面層。這是 iOS 默認的界面覆蓋樣式。
界面中的任何移動、縮放或運動，本質上都會呈現一個明確的方向。這個方向也暗示界面元素的上下文環境，并且明確的方向性能使過渡看起來一致。記錄詳細的方向信息非常重要，比如元素何時向上或向下移動、疊加層來自哪一側等等。而精心設計的產品動效，會與其所處環境保持清晰一致的方向性。
圖3-1
（左）通過水平導航切換查看選項，這是典型的社交媒體應用會采用的設計。用戶可以滑動或點擊切換按鈕來切換視圖。
（右）這一 APP 采用垂直導航布局，用戶可以通過上下滑動來切換查看選項的方式。
圖 3-2
當滾動瀏覽時候，運動方向可以和界面呈現的方向相反。
（左）正如預期的那樣，您可以通過上下滑動來瀏覽帖子。
（右）鑒于此 APP 具有垂直導航，因此滾動瀏覽方向將是水平的。
圖 3-3
即使打開菜單或其他組件的時候，你也需要清晰地暗示 APP 的整體方向性。
（左）打開菜單暗示 APP 的垂直瀏覽方向。
（右）菜單元素從左到右展示，暗示 APP 的水平瀏覽方向。
正確的動效和動畫速度，可以提供有效的反饋，和有意義的體驗。太慢的過渡會讓用戶感到厭煩，而太快的過渡則沒有意義。這就是為什么平衡速度至關重要。根據已有的一些經驗總結文章，100ms 到 500ms 的動效速度比較理想，適合大多數的情況。你可以遵循已有的這些經驗，但也可以根據你的產品進行自定義，這是創造與眾不同產品的另一種方式。
圖 4-1。左側加載速度適中，右側加載速度較慢。
快速操作（例如的快速滑動界面元素）對于向用戶提供的反饋速度是否適中，這一點非常重要。由于這是頁內 UI 元素的過渡，因此它應該比頁面之間的動效要稍快一些。
對于包含許多元素的頁面而言，頁面和頁面之間的過渡切換，則需要有一些上下文信息的引導，這樣用戶就不會感到與迷惑，不會在信息上出現脫節的情況。所以，這種情形下可能比頁面內的切換稍慢一點。不過這并不一定意味著動效速度要減慢很多，適度的速度依然至關重要，只要不會讓用戶感到動效緩慢不跟手，就行了。上面案例中右邊較慢的轉場，不會讓用戶失去上下文環境的理解。
當轉場和過渡涉及多個元素時，按重要性對它們進行排序，以幫助用戶專注于關鍵的交互。不要所有元素一次性全部都完成過渡轉變，而是按優先級對它們進行排序，將相似的元素分組到一起，然后對這些組進行排序，相關性低的組可以完全隱藏，以保持用戶對關鍵內容的關注度。
圖 5-1
如果這個界面上的所有 UI 元素同時加載動效，就會讓人在視覺上感覺忙亂復雜。這就是為什么它會按重要性和優先級逐步加載。在這個 APP 中，主要 UI 元素應該是「Profile View」和圖表，因為這些 UI 元素同時存在于兩種狀態中。然后，次要元素緊隨其后。
圖 5-2
這個音樂 APP 在最小化播放器視圖時，整個過渡動效頗為。但是只需要專注于封面和標題層就可以實現無縫過渡。你可以在下圖中看到更詳細的細分。
圖5-3
（左）這個動效顯示了播放器界面整體如何最小化。如你所見，全屏下的音樂標題和播放器元素通過滑到底部就會消失。
（右）屏幕最小化后，重新出現新的標題層。這樣它就不會分散用戶對播放器和封面過渡動效中主要元素的注意力。
盡管用戶交互區域適中在屏幕這個平面上，但設計可見框架之外「不可見」的空間同樣至關重要。建立 UI 元素和界面層的空間關系屬性，可以幫助用戶更快構建產品的心智模型，從而增強他們的體驗。通常，設計師使用多個功能層來為平面屏幕引入深度和空間感。
圖 6-1
上面的2個動畫顯示了這個音樂 APP 更詳細的上下文環境。兩者呈現了這個 APP 中的功能層由哪些部分組成，以及當全屏播放器視圖折疊為最小化視圖過程中，各個 UI 元素是如何過渡的。
圖 6-2
在這個范例當中，上方的圖展示了這個社交媒體 APP 在屏幕上的效果，下圖則拆解了它的空間層級結構。評論界面層是從底部滑入的，而原本的 UI 界面層縮小并在底下添加了深色背景層。
除此之外，所有定向運動的層和元素，其實都是整個空間的一部分。下方范例中，具有相同外觀的 UI 元素，其實在在空間中有各自的位置，它們不同的運動邏輯構建出不同的產品體驗。
圖 6-3
正如方向性原則中強調的那樣，這兩個 APP 當中具有不同的導航結構。通過屏幕區域的空間交互，用戶其實可以透過過渡和運動了解內容的來源，掌握總體空間結構。構建了這樣的空間框架，可以極大地豐富產品用戶體驗的獨特性。
透過復雜的過渡動畫，我們可以很明顯看到，看似微小的細節會對用戶體驗產生多么巨大影響。文中所提供的范例和原則，可以作為設計基礎，結合現有 APP 和產品，在日常交互中汲取屬于自己的靈感。
參考來源：
WWDC 2018 — Designing Fluid Interfaces
https://developer.apple.com/wwdc18/803WWDC 2023 — Animate with springs
https://developer.apple.com/wwdc23/10158Material Design 2 — Navigation Transitions
https://m2.material.io/design/navigation/navigation-transitions.htmlMaterial Design 3 — Transitions
https://m3.material.io/styles/motion/transitions/transition-patternsThe ultimate guide to proper use of animation in UX
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9Rauno Freiberg — Invisible details of interaction design
https://rauno.me/craft/interaction-designNielson Norman Group — Animation for Attention and Comprehension
https://www.nngroup.com/articles/animation-usability/Nielson Norman Group — UX Animations
https://www.nngroup.com/videos/ux-animations/Nielson Norman Group — Executing UX Animations: Duration and Motion Characteristics
https://www.nngroup.com/articles/animation-duration/Nielson Norman Group — The Role of Animation and Motion in UX
https://www.nngroup.com/articles/animation-purpose-ux/
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 Young