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