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