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