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