如何創(chuàng)造有生命力的動(dòng)態(tài)效果？ (下)?
作者：Tony Tong
繼上篇《最有生命力的動(dòng)態(tài)效果，都遵循這 12 條經(jīng)典原則（上）》中介紹了迪斯尼經(jīng)典的12項(xiàng)動(dòng)態(tài)原則之后，我們接著討論如何在實(shí)戰(zhàn)中運(yùn)用這些原則進(jìn)行動(dòng)態(tài)交互設(shè)計(jì)。
除了常見(jiàn)的純動(dòng)畫(huà)元素（GIF 動(dòng)畫(huà)等）所起到的綴飾作用之外，也可以在用戶的操作流程中嘗試運(yùn)用這類富有生命力的動(dòng)態(tài)效果。比如，現(xiàn)在有一套 APP 的 UI 菜單，形式是圓形環(huán)繞式排布的按鈕，要設(shè)計(jì)它的出場(chǎng)動(dòng)態(tài)效果，該如何進(jìn)行呢？
請(qǐng)注意，我們這里僅從動(dòng)態(tài)設(shè)計(jì)的思路出發(fā)，討論如何創(chuàng)造有生命力的動(dòng)態(tài)效果。
1、“吸引力”（Appeal）
首先，遵循“吸引力”（Appeal）原則，為整個(gè) UI 設(shè)計(jì)一種“個(gè)性”。在排版和圖形風(fēng)格的基礎(chǔ)上，動(dòng)態(tài)效果也要契合這種“個(gè)性”。舉例而言，圓形扁平化的圖形風(fēng)格，動(dòng)態(tài)也可以適當(dāng)?shù)叵蚧顫婌`動(dòng)的方向靠攏，更貼近用戶。
2、“登場(chǎng)”（Staging）
其次，確定角色們“登場(chǎng)”（Staging）的主次先后。在該 UI 菜單的出場(chǎng)動(dòng)畫(huà)里，就應(yīng)該確定他們的排版位置，出場(chǎng)的次序、方向、運(yùn)動(dòng)的軌跡等。舉例而言，環(huán)繞式排布的按鈕，在逐個(gè)彈出的同時(shí)，可嘗試順沿圓形的運(yùn)動(dòng)路徑做旋轉(zhuǎn)，符合對(duì)排版動(dòng)勢(shì)的預(yù)期。
3、“節(jié)奏”（Timing）
控制“節(jié)奏”（Timing），同樣要符合 UI 的排版和圖形風(fēng)格。舉例而言，輕快的運(yùn)動(dòng)速率符合該 UI 的“個(gè)性”，因此可以嘗試將整個(gè)動(dòng)態(tài)的時(shí)長(zhǎng)控制在1-2秒左右甚至更短。各個(gè)元素的出場(chǎng)時(shí)間點(diǎn)有錯(cuò)位和重疊，且盡量保證簡(jiǎn)潔干脆。
4、“動(dòng)勢(shì)漸進(jìn)漸出”（Slow In & Slow Out）
同時(shí)，也要符合“動(dòng)勢(shì)漸進(jìn)漸出”（Slow In & Slow Out）的原則，將動(dòng)態(tài)的前后速率進(jìn)行快慢調(diào)節(jié)，進(jìn)一步營(yíng)造輕快的感覺(jué)。
5、“跟隨與重疊動(dòng)作”（Follow Through & Overlapping Action）
運(yùn)用“跟隨與重疊動(dòng)作”（Follow Through & Overlapping Action）原則，進(jìn)一步細(xì)微調(diào)整各個(gè)元素出場(chǎng)時(shí)間點(diǎn)的錯(cuò)位和重疊，且模擬真實(shí)世界的物理運(yùn)動(dòng)效果。在控制節(jié)奏的同時(shí)，也創(chuàng)造了輕微的彈性效果，豐富了視覺(jué)體驗(yàn)。
6、“弧形動(dòng)作”（Arc）
可以將“弧形動(dòng)作”（Arc）的原則融入其中，稍稍破除死板的既定走向，增加一點(diǎn)“拋物線”的動(dòng)勢(shì)，讓物體產(chǎn)生由遠(yuǎn)到近朝鏡頭方向“投擲”出來(lái)的視覺(jué)感覺(jué)。
7、擠壓與拉伸”（Squash & Stretch）
在各個(gè)元素沿路徑運(yùn)動(dòng)的過(guò)程中，可以適當(dāng)加入“擠壓與拉伸”（Squash & Stretch）的效果，讓細(xì)節(jié)更有趣。
8、“期待”（Anticipation）
如果時(shí)長(zhǎng)允許，甚至可以加入一些“期待”（Anticipation）的手法在其中，讓出場(chǎng)動(dòng)態(tài)的開(kāi)端變得更加精彩耐看。
9、最終效果呈現(xiàn)。
上述流程，并非每次都要按部就班執(zhí)行；沒(méi)有提及的剩余動(dòng)畫(huà)原則，也并非每條都要用上。正確的設(shè)計(jì)思路，應(yīng)該是根據(jù)吸引力原則所塑造的“個(gè)性”和實(shí)際 情況來(lái)衡量哪些動(dòng)態(tài)效果真正適用。比如，在該事例中，夸張的手法會(huì)顯得太“過(guò)火”，太多細(xì)節(jié)動(dòng)作會(huì)顯得瑣碎凌亂，而三維立體的造型也與扁平化的圖形風(fēng)格相 悖。這種判斷，需要的是對(duì)現(xiàn)實(shí)世界動(dòng)態(tài)規(guī)律的長(zhǎng)期觀察、描摹和拆解。
況且，有質(zhì)感的動(dòng)態(tài)效果的最終實(shí)現(xiàn)，也要考慮到成本和技術(shù)難度是否對(duì)等，尤其是在移動(dòng)端上（容量、加載速度、代碼冗余等）。所以說(shuō)，適當(dāng)?shù)亍㈧`活地、有節(jié)制地選用富有生命力的動(dòng)態(tài)效果，才會(huì)真正增色不少。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）