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