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

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

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

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

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

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

更好的過(guò)渡動(dòng)效的 6 大原則

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

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

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

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

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

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

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

圖 1-3

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

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

圖 1-4 Profile View 界面從小卡片展開(kāi)為全屏的動(dòng)效

這是「Profile view」界面展開(kāi)的過(guò)渡動(dòng)效，下圖是這個(gè)動(dòng)效中全面 UI 元素的細(xì)分展現(xiàn)。

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

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

2.用縮放為動(dòng)效增加活力

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

又比如，當(dāng)后一屏出現(xiàn)的時(shí)候，你可以同時(shí)縮小當(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)的動(dòng)態(tài)，表現(xiàn)出更生動(dòng)的效果。這種過(guò)渡更優(yōu)雅，就好像下一屏從上往下滑入當(dāng)前屏一樣。

圖 2-2

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

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

圖 2-3

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

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

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

3.保持方向的一致性

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

圖3-1

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

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

圖 3-2

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

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

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

圖 3-3

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

（左）打開(kāi)菜單暗示 APP 的垂直瀏覽方向。

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

4.平衡動(dòng)效速度

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

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

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

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

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

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

圖 5-1

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

圖 5-2

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

圖5-3

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

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

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

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

圖 6-1

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

圖 6-2

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

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

圖 6-3

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

結(jié)語(yǔ)

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

參考來(lái)源：

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/

作者：陳子木