5000字干貨!UI 轉(zhuǎn)場(chǎng)過(guò)渡動(dòng)效設(shè)計(jì)必知的 6 大設(shè)計(jì)原則
編者按:雖然動(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 大原則
- 結(jié)合透明度的淡入淡出
- 用縮放為動(dòng)效增加活力
- 保持方向的一致性
- 平衡動(dòng)效速度
- 確定優(yōu)先級(jí)順序和分組
- 建立空間關(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/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/
作者:陳子木
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/19563.html