編者按：雖然動效設(shè)計(jì)和著名的迪士尼動畫十二原則上高度共通，但如今的數(shù)字設(shè)計(jì)領(lǐng)域的動效設(shè)計(jì)也有了長足的發(fā)展。由于在 UI/UX 領(lǐng)域當(dāng)中，動效大都運(yùn)用于轉(zhuǎn)場和微交互當(dāng)中，這類動效設(shè)計(jì)的設(shè)計(jì)也有很多講究，這篇來自設(shè)計(jì)師 Dongkyu Lee 文章結(jié)合了大量的參考資料，梳理總結(jié)了 6 大設(shè)計(jì)原則，以及其中值得注意的細(xì)則，內(nèi)容非常干，建議先收藏后細(xì)讀。

在產(chǎn)品設(shè)計(jì)方面，動畫和動效的重要性怎么強(qiáng)調(diào)都不為過。正如知名用戶體驗(yàn)研究機(jī)構(gòu) NNGroup 所強(qiáng)調(diào)的那樣，動效不僅能吸引注意力，還能增強(qiáng)用戶體驗(yàn)，讓產(chǎn)品充滿新鮮感和現(xiàn)代感。當(dāng)動效足夠復(fù)雜時，它可以為用戶的交互提供清晰的反饋，讓 UI 界面感覺更加直觀。

過渡動效在數(shù)字產(chǎn)品設(shè)計(jì)中尤其重要，因?yàn)樗鼈兛梢越z滑地引導(dǎo)用戶從一個界面過渡到下一界面，使產(chǎn)品更易用、更具吸引力，自然地連接不同的交互步驟，進(jìn)而提高產(chǎn)品的整體設(shè)計(jì)質(zhì)量。

由于動效起著至關(guān)重要的作用，越來越多的產(chǎn)品團(tuán)隊(duì)意識到它的重要性。設(shè)計(jì)師們也開始將動畫加入到原型當(dāng)中，展示給其他團(tuán)隊(duì)成員乃至于客戶，以便在正式發(fā)布前盡可能展示和測試產(chǎn)品。然而，想要設(shè)計(jì)出完美的動畫，仍然是一項(xiàng)復(fù)雜的工作。

這項(xiàng)工作的挑戰(zhàn)在于，如何在「微妙的動效」和「強(qiáng)調(diào)特定元素」之間找到合理的平衡。盡管現(xiàn)在已經(jīng)有很多深入探討動畫復(fù)雜性的在線文章和相關(guān)素材，但我們都清楚，仍有大量的線上產(chǎn)品還沒在自己的產(chǎn)品中加入動效。

而這篇文章特別關(guān)注轉(zhuǎn)場和過渡動效。文中會通過基本且緊湊的范例，幫助大家了解這些過渡動效的原理。當(dāng)然，這些總結(jié)并不是一成不變的死規(guī)則，而是創(chuàng)建動效的指導(dǎo)性參考。所以，你可以將這篇文章視為 UI 動效設(shè)計(jì)極簡實(shí)用指南。

更好的過渡動效的 6 大原則

1. 結(jié)合透明度的淡入淡出
2. 用縮放為動效增加活力
3. 保持方向的一致性
4. 平衡動效速度
5. 確定優(yōu)先級順序和分組
6. 建立空間關(guān)系屬性

1.結(jié)合透明度的淡入淡出

結(jié)合透明度的淡入淡出，是一個基本但非常有效的動效原則。即使單獨(dú)使用這一技巧，也可以帶來明顯的變化。從界面當(dāng)前屏過渡到下一個屏?xí)r，你可以通過淡出不相關(guān)的 UI 元素，并讓下一屏元素淡入，來提供簡潔但是清晰的呈現(xiàn)。操作的時候，可以將特定元素的不透明度值從 100 更改為 0（或 0 更改為 100），結(jié)合動畫來實(shí)現(xiàn)這一效果。

圖1-1。對比添加了透明度淡入淡出的轉(zhuǎn)場動效的差別。

透明度淡入淡出效果添加前后的轉(zhuǎn)場效果對比。突然轉(zhuǎn)變的過渡感覺是不連貫的（左圖），但添加透明度淡入淡出感覺明顯更絲滑、更有視覺吸引力（右圖）。

圖 1-2。添加了帶透明度淡入淡出的菜單打開效果。

透明度淡入淡出效果添加前后的菜單打開效果對比。左圖所示的是從下到上突然打開的菜單，而右圖中，利用帶透明度的淡入淡出動效，提供更柔和、更流暢的過渡，這增強(qiáng)了用戶的參與度。

圖 1-3

這是帶透明度的淡入淡出動效從一種狀態(tài)轉(zhuǎn)換到另一種狀態(tài)的示例。此外，這個動效中，還加入了縮放和垂直移動的效果，進(jìn)行處理牽涉到后面的一些設(shè)計(jì)原則和技巧。

這是一個進(jìn)階用例，這個過渡動效無縫地接駁了兩個界面層和序列之間的交互。借助這種方法，用戶不會覺得場景轉(zhuǎn)換之間很割裂，許多成功的產(chǎn)品都采用這種設(shè)計(jì)來增強(qiáng)用戶體驗(yàn)。

圖 1-4 Profile View 界面從小卡片展開為全屏的動效

這是「Profile view」界面展開的過渡動效，下圖是這個動效中全面 UI 元素的細(xì)分展現(xiàn)。

圖 1-5。細(xì)分圖層設(shè)置。

這種流暢的過渡是通過利用大小兩個「Profile View」層來實(shí)現(xiàn)的，通過合并縮放效果和兩層之間的平滑淡入淡出，讓過渡效果看起來就像一個層無縫地在兩個屏幕狀態(tài)之間切換。

2.用縮放為動效增加活力

添加縮放效果，可以為轉(zhuǎn)場過渡增加動感，視覺上更富活力，增加方向性。例如，當(dāng)界面轉(zhuǎn)換到下一個屏?xí)r，你可以將現(xiàn)有組件和圖層從 100% 縮小到 90%，并添加淡出效果。

又比如，當(dāng)后一屏出現(xiàn)的時候，你可以同時縮小當(dāng)前界面。這給人的印象是新出現(xiàn)的界面層是從較高的位置進(jìn)入，覆蓋了當(dāng)前界面，這就突出了狀態(tài)之間的關(guān)聯(lián)性。你可以根據(jù)需求調(diào)整縮放的數(shù)值?？s放效果通常與上一原則淡入淡出一同使用。

圖 2-1

將縮放效果與淡入淡出相結(jié)合，可以使 UI 呈現(xiàn)出更強(qiáng)的動態(tài)，表現(xiàn)出更生動的效果。這種過渡更優(yōu)雅，就好像下一屏從上往下滑入當(dāng)前屏一樣。

圖 2-2

兩個范例當(dāng)中，第一個顯示了使用縮放和輕微淡出來突出顯示活動層和非活動層之間的差異。

第二個范例展示了使用縮放文本和卡片層來實(shí)現(xiàn)更為生動的過渡效果。

圖 2-3

這兩個范例演示了較大的 UI 元素如何通過縮放過渡來呈現(xiàn)。

第一個范例是一個音樂 APP，其中專輯封面在轉(zhuǎn)場過渡時使用了熟悉的縮放效果。隨著音樂播放器界面層縮小，專輯封面會平滑地縮小到縮略圖大小。

第二個范例當(dāng)中，打開新的疊加層時，之前的界面稍稍縮小，并且借助疊加層半透明的磨砂效果稍微透出一部分，這種效果向用戶暗示背景藏著之前的界面層。這是 iOS 默認(rèn)的界面覆蓋樣式。

3.保持方向的一致性

界面中的任何移動、縮放或運(yùn)動，本質(zhì)上都會呈現(xiàn)一個明確的方向。這個方向也暗示界面元素的上下文環(huán)境，并且明確的方向性能使過渡看起來一致。記錄詳細(xì)的方向信息非常重要，比如元素何時向上或向下移動、疊加層來自哪一側(cè)等等。而精心設(shè)計(jì)的產(chǎn)品動效，會與其所處環(huán)境保持清晰一致的方向性。

圖3-1

（左）通過水平導(dǎo)航切換查看選項(xiàng)，這是典型的社交媒體應(yīng)用會采用的設(shè)計(jì)。用戶可以滑動或點(diǎn)擊切換按鈕來切換視圖。

（右）這一 APP 采用垂直導(dǎo)航布局，用戶可以通過上下滑動來切換查看選項(xiàng)的方式。

圖 3-2

當(dāng)滾動瀏覽時候，運(yùn)動方向可以和界面呈現(xiàn)的方向相反。

（左）正如預(yù)期的那樣，您可以通過上下滑動來瀏覽帖子。

（右）鑒于此 APP 具有垂直導(dǎo)航，因此滾動瀏覽方向?qū)⑹撬降摹?/p>

圖 3-3

即使打開菜單或其他組件的時候，你也需要清晰地暗示 APP 的整體方向性。

（左）打開菜單暗示 APP 的垂直瀏覽方向。

（右）菜單元素從左到右展示，暗示 APP 的水平瀏覽方向。

4.平衡動效速度

正確的動效和動畫速度，可以提供有效的反饋，和有意義的體驗(yàn)。太慢的過渡會讓用戶感到厭煩，而太快的過渡則沒有意義。這就是為什么平衡速度至關(guān)重要。根據(jù)已有的一些經(jīng)驗(yàn)總結(jié)文章，100ms 到 500ms 的動效速度比較理想，適合大多數(shù)的情況。你可以遵循已有的這些經(jīng)驗(yàn)，但也可以根據(jù)你的產(chǎn)品進(jìn)行自定義，這是創(chuàng)造與眾不同產(chǎn)品的另一種方式。

圖 4-1。左側(cè)加載速度適中，右側(cè)加載速度較慢。

快速操作（例如的快速滑動界面元素）對于向用戶提供的反饋速度是否適中，這一點(diǎn)非常重要。由于這是頁內(nèi) UI 元素的過渡，因此它應(yīng)該比頁面之間的動效要稍快一些。

對于包含許多元素的頁面而言，頁面和頁面之間的過渡切換，則需要有一些上下文信息的引導(dǎo)，這樣用戶就不會感到與迷惑，不會在信息上出現(xiàn)脫節(jié)的情況。所以，這種情形下可能比頁面內(nèi)的切換稍慢一點(diǎn)。不過這并不一定意味著動效速度要減慢很多，適度的速度依然至關(guān)重要，只要不會讓用戶感到動效緩慢不跟手，就行了。上面案例中右邊較慢的轉(zhuǎn)場，不會讓用戶失去上下文環(huán)境的理解。

5.確定優(yōu)先級順序和分組

當(dāng)轉(zhuǎn)場和過渡涉及多個元素時，按重要性對它們進(jìn)行排序，以幫助用戶專注于關(guān)鍵的交互。不要所有元素一次性全部都完成過渡轉(zhuǎn)變，而是按優(yōu)先級對它們進(jìn)行排序，將相似的元素分組到一起，然后對這些組進(jìn)行排序，相關(guān)性低的組可以完全隱藏，以保持用戶對關(guān)鍵內(nèi)容的關(guān)注度。

圖 5-1

如果這個界面上的所有 UI 元素同時加載動效，就會讓人在視覺上感覺忙亂復(fù)雜。這就是為什么它會按重要性和優(yōu)先級逐步加載。在這個 APP 中，主要 UI 元素應(yīng)該是「Profile View」和圖表，因?yàn)檫@些 UI 元素同時存在于兩種狀態(tài)中。然后，次要元素緊隨其后。

圖 5-2

這個音樂 APP 在最小化播放器視圖時，整個過渡動效頗為。但是只需要專注于封面和標(biāo)題層就可以實(shí)現(xiàn)無縫過渡。你可以在下圖中看到更詳細(xì)的細(xì)分。

圖5-3

（左）這個動效顯示了播放器界面整體如何最小化。如你所見，全屏下的音樂標(biāo)題和播放器元素通過滑到底部就會消失。

（右）屏幕最小化后，重新出現(xiàn)新的標(biāo)題層。這樣它就不會分散用戶對播放器和封面過渡動效中主要元素的注意力。

6.建立空間關(guān)系屬性

盡管用戶交互區(qū)域適中在屏幕這個平面上，但設(shè)計(jì)可見框架之外「不可見」的空間同樣至關(guān)重要。建立 UI 元素和界面層的空間關(guān)系屬性，可以幫助用戶更快構(gòu)建產(chǎn)品的心智模型，從而增強(qiáng)他們的體驗(yàn)。通常，設(shè)計(jì)師使用多個功能層來為平面屏幕引入深度和空間感。

圖 6-1

上面的2個動畫顯示了這個音樂 APP 更詳細(xì)的上下文環(huán)境。兩者呈現(xiàn)了這個 APP 中的功能層由哪些部分組成，以及當(dāng)全屏播放器視圖折疊為最小化視圖過程中，各個 UI 元素是如何過渡的。

圖 6-2

在這個范例當(dāng)中，上方的圖展示了這個社交媒體 APP 在屏幕上的效果，下圖則拆解了它的空間層級結(jié)構(gòu)。評論界面層是從底部滑入的，而原本的 UI 界面層縮小并在底下添加了深色背景層。

除此之外，所有定向運(yùn)動的層和元素，其實(shí)都是整個空間的一部分。下方范例中，具有相同外觀的 UI 元素，其實(shí)在在空間中有各自的位置，它們不同的運(yùn)動邏輯構(gòu)建出不同的產(chǎn)品體驗(yàn)。

圖 6-3

正如方向性原則中強(qiáng)調(diào)的那樣，這兩個 APP 當(dāng)中具有不同的導(dǎo)航結(jié)構(gòu)。通過屏幕區(qū)域的空間交互，用戶其實(shí)可以透過過渡和運(yùn)動了解內(nèi)容的來源，掌握總體空間結(jié)構(gòu)。構(gòu)建了這樣的空間框架，可以極大地豐富產(chǎn)品用戶體驗(yàn)的獨(dú)特性。

結(jié)語

透過復(fù)雜的過渡動畫，我們可以很明顯看到，看似微小的細(xì)節(jié)會對用戶體驗(yàn)產(chǎn)生多么巨大影響。文中所提供的范例和原則，可以作為設(shè)計(jì)基礎(chǔ)，結(jié)合現(xiàn)有 APP 和產(chǎn)品，在日常交互中汲取屬于自己的靈感。

參考來源：

WWDC 2018 — Designing Fluid Interfaces
https://developer.apple.com/wwdc18/803

WWDC 2023 — Animate with springs
https://developer.apple.com/wwdc23/10158

Material Design 2 — Navigation Transitions
https://m2.material.io/design/navigation/navigation-transitions.Html

Material Design 3 — Transitions
https://m3.material.io/styles/motion/transitions/transition-patterns

The ultimate guide to proper use of animation in UX
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

Rauno Freiberg — Invisible details of interaction design
https://rauno.me/craft/interaction-design

Nielson 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/

作者：陳子木