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