如何創造有生命力的動態效果？（上）
作者：Tony Tong
幾天前看了文章《花了7天看了上千個交互動效神作，我總結出5個技巧》，佩服它概括得非常到位。基于實際的用戶體驗考慮的出發點，和“去繁化簡”的做法，我都非常贊同。尤其是它所指的“克制”，的確是非常多動態設計者會犯的毛 病。有時候看到那些動態設計的神作，就會“癡迷”其中，忘了全局。動態效果是為了流暢的用戶體驗而存在的，不是單純的動畫炫技。希望大家都能先看一下那篇文章。
我這里想要討論的，是傳統動畫的設計思路如何運用于交互界面。換句話說，我們這里要先討論如何“炫技”，然后再根據具體情況進行“收斂”。
標題中所謂“有生命力的動態效果”，即用符合有機體動力學特征的運動方式（Dynamic motions）去表現物體的動作。傳統的游戲、動畫等長期以來都有著力于創造這種由生命力的動態效果。隨著技術的進步，越來越多的網站或 APP 也都傾向于借鑒游戲和動畫的做法，用更為軟性和擬人化的動態方式穿插或點綴。大到整體視覺表現，小到頁面切換方式、互動反饋動畫、動態 icon、loading 動畫等等，都會涉及。它有效地淡化了一般概念里電子設備的“高科技”距離感。避免了僵硬機械化的動態，而選用更靈活、軟性、有機、有彈性的運動方式。只要把 控得當，細節入微，適量的有生命力的動態更有助于貼近用戶，使操作體驗的好感度增加。
Sergey Valiukh - GIF Animation of an App
Hoang Nguyen - Pull down and refresh
更多的動效神作，直接可以移步以下這些文章：
《這有 36 個UI動效設計，也許能幫你從細節上提升產品逼格》
《靈感：31個Logo動畫設計，好的創意總是令人驚嘆！（第二期）》
每次看到這些動效神作，總會不自覺盯著研究幾十次，細細體會設計師那種對于細節的追求。從動畫的基礎上來講，還是可以總結出一定可循的規律的。1981年出版的《The Illusion of Life：Disney Animation》 一書中，動畫制作人 Ollie Johnston 和 Frank Tomas 確立了迪斯尼經典的12條動畫經典原則。這些原則因其實用性和可延展性，不斷地被后來的動畫制作人沿用至今。對于現在新媒體平臺的動態設計而言，這些原則也有非常好的借鑒意義。
The Illusion of Life：Disney Animation (Wikipedia)
1. 擠壓與拉伸（Squash & Stretch）
任何物體在進行運動的過程中，多 少都會受到各種力的作用，被自身質量擠壓或拉扯伸展而產生變形。加上動畫獨有的夸張表現方式，會使物體的動態看起來有彈性、有質量、更有“活物”的感覺。 拉伸效果有助于營造速度感，當用在交互界面時，可以參考此原則創造干脆、利落的視覺觀感。
Squash & Stretch
2. 期待（Anticipation）
讓動畫角色在進行主要動作前，先做一個讓觀眾產生“預先 判斷”的準備動作。比如說，沖刺動作前先弓起腰背，抬起腿部，彎曲手肘；或者發射炮彈前，炮管先微微鼓起。這么做，是為了讓觀眾對接下來要發生的動作產生 “期待”，營造“蓄勢待發”的感覺。同時，這也符合現實的視覺經驗，有助于引導觀眾的注意力，讓其集中在主要動作上。舉例來說，不少實時資訊類 APP（如 新聞客戶端）在頁面頂端，都會設計用戶主動刷新的功能，用于隨時查看最新的消息。這時，相應的手勢操作里就會包括“拖拽下拉”和“放開”這兩步動作，動態 效果就可以巧妙借用期待的原則，讓刷新操作變得更有趣。
Anticipation
3. 登場（Staging）
Johnson 和 Thomas 在書中將這條定義為“將任何想法完整無誤地、清晰地呈現”。跟 舞臺戲劇一樣，所有動畫中的構圖、運鏡、動作、走位都需要經過仔細的設計安排，避免在同一時間點出現過多瑣碎的動作變化。換句話說，要明確每個演出段落中的主次之分，盡力避免不必要的細節，讓動畫整體的觀看流程更順暢有序。在移動端設備里，適時出現的動態效果會有利于對用戶視覺焦點的引導。
Staging
4. 連續動作與姿態對應（Straight Ahead Action & Pose to Pose）
“連續動作”和“姿態對應”是繪制動畫的兩種不同的方法。“連續動作”是將動作從第一幀開始，按順序逐幀繪制。“姿勢對應”則是將動作拆解成多個重要的關鍵幀（定格動作），然后補上關鍵幀之間的“補間動畫”，進而產生動態的效果。
Straight Ahead Action & Pose to Pose
5. 跟隨與重疊動作（Follow Through & Overlapping Action）
跟 隨和重疊動作的技巧，是相互關聯的，它們是基于現實去模擬真實物理動力學。利用諸如慣性等原則讓角色的動作看起來更生動。“跟隨動作”的意思是當角色的動 作停止時，其它與其相關聯的部件仍然會保持動勢而移動，用來模擬有彈性、有速度感的動作。比如，在模擬有機生命角色時，其動作停止越急驟，關聯部件的跟隨 動作幅度越大。“重疊動作”的意思則是將角色的各部件拆解，將主次動作的起止時間錯開，以不同的速率移動，產生分離重疊的時間差和夸張的變形，增加動畫戲 劇性與表現力。比如，突然啟動奔跑的人物，他的假發會來不及反應，留在原地，慢半拍跟隨人物飛走。同樣的效果，也可以用于移動端，如網站頁面上微小元素跟 隨大面積元素做錯時運動，在下拉瀏覽的過程中，會大大豐富視覺體驗。
Follow Through & Overlapping Action
6. 動勢漸進漸出（Slow In & Slow Out）
真實世界里，任何角色動作的起 止，從零速度到全速，都有一個緩沖的過程。普通生活中常見的物體動作，都需要時間來加速或減緩。動畫的漸進漸出技巧也是順應這一物理原則而出現的，可以讓 動作更加真實可信。同樣的，也是為了迎合觀眾的視覺習慣，引導視線焦點，在動勢的起止點，都會創造不同程度的緩沖時間。舉例來說，在移動端設備上，當對某 一元素進行點按，觸發后的動態效果開頭都可以適當加入緩動漸進，讓用戶的視覺有個短暫的適應時間。即便這個適應時間短到無法察覺，也會讓人產生“恰到好 處”的貼切感覺。
Slow In & Slow Out
7. 弧形動作（Arcs）
除了機械運動之外，真實世界大部分的有機活物都不會遵循完全直線的運 動軌跡。動畫中，角色的動勢也要遵循這個原則，都要以不同程度的弧線的方式進行，可以讓其看起來更加真實。有時候，即便是非活物的物體，也可以適當用到這 個原則，讓其更有生命力。比如，伸出手臂指向遠方的動作，都會劃出淺弧線的運動軌跡。這里有例外是，如果要強調高速動作或者純機械動作的話，直線運動軌跡 也許對塑造更有利。
Arcs
8. 次級動作（Secondary Action）
在主要動作之外，增加細微的次級動作，起到 支持主要動作的作用。次級動作會讓畫面更活潑，起到畫龍點睛的效果。次級動作并非可忽略的不必要動作，而是用以強化主要動作，且不會把觀眾的注意力帶走。 它的設計可以使角色更生動真實有生命。比如，奔跳的角色，每次跳躍時帽子都會微微彈起，營造輕盈活躍的動感。
Secondary Action
9. 節奏（Timing）
控制運動的關鍵是動作的節奏。動作的節奏就是速度的快慢，過快或過慢 都會讓該動作看起來不自然。優秀的節奏控制，在于通過模擬真實物理情境，創造速度和質量上的不同。正確的出現時機和速度，會使得物體更符合物理原則。移動 端的界面，尤其是扁平化設計大行其道的今天，輕量化的圖形和色彩更會讓用戶產生好感。同時，動態的效果也要通過不同的節奏控制，符合這種輕量化視覺的預期 才行。比如，模擬紙張設計的APP界面，切換的速率也同樣要柔和且輕盈。
Timing
10. 夸張手法（Exaggeration）
前面敘述的幾種技巧，都是以模擬物理世界為準則 的。但如果完全遵循現實來展現，會讓動畫變得很無趣呆板。動畫的魅力在于，它本身就是偏夸張的表現方式。透過角色的夸張表現，強化劇情起伏，讓觀眾更容易 融入且樂在其中。夸張不只是把動作幅度擴大，而是巧妙地將劇情所需要的情緒釋放出來。在設計動作之初，動畫師對角色夸張程度的拿捏，即是動畫精彩與否的關 鍵。大部分的 APP 和網站，夸張的手法都不適合貫穿始終運用，技術上也不允許這么做。但適當在關鍵時間點運用這一原則，會和一般動態產生反差，讓其體驗更 為出色。
Exaggeration
11. 立體造型（Solid Drawing）
對立體造型的把握是每個動畫師都應該掌握的技 巧。它代表了在三維的空間形態里，給予物體透視、體積、重量、光影等等，讓其存在感可信。想要達成這點，需要對扎實的繪畫功底，以及大量對現實物體的描摹 經驗。比起當年需要逐幀描繪立體動態而言，現在電腦能計算生成大多數的立體形象，肯定是方便多了。但對動畫師三維視覺經驗的要求，依然很高。在移動端，雖 然現在都提倡扁平化的設計，但在很多地方仍然適用立體造型的設計思路，讓細節更豐富耐看。
Solid Drawing
12. 吸引力（Appeal）
吸引力原則是任何一種藝術形式的最終準則。綜合前面所述的所有技 巧，來創造一個富有生命力的、活潑有趣的角色，是吸引力原則的關鍵。動畫有別于其他藝術形式的地方在于，它的自由度極高，所有內容都是由動畫工作者一手創 造出來的，充滿了想象力。因此，吸引力原則尤其倚仗于動畫師對技巧的純熟運用。正如一個網站或者 APP 的動態效果首先必須為它的功能服務的。因此外在表象 上，不能像一些動畫片或舞臺劇那樣純粹靠動作和表演去吸引觀眾。動態吸引力的運用，更多時候是“畫龍點睛”，而非“搶戲”。
Appeal
上述12條經典動畫原則的視覺化片段，由 Cento lodigiani 制作：Cento lodigiani - The illusion of life
了解了這些經典動畫原則，相信會給創造有生命力的動態元素有了基本的概念。落實到實際的設計思路上，該如何考慮呢？
我們在下半期文章里會逐步展現如果運用這些原則進行動態設計 《創造有生命力的動態效果（下）》
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）