跟迪士尼學動效設計（下篇）

01-26

接上文~

三、PAE動效設計模型

通過上面的介紹，可以看出上述的十二條原則適用於動畫的不同階段，因此我們可以按照時間維度，將這12條原則分為運動前、運動中和運動後三部分。

運動前的適用規則有：實體繪圖、預備動作、演出布局，這些原則傳達的主要思想是在提供必要的視覺線索，讓用戶提前感知，了解動作接下來會發生什麼變化，是動畫的展現方面（Presentation）。
運動中的適用原則有：擠壓與拉伸、緩入與緩出、順畫法與定點畫法、跟隨動作與重疊動作、弧形軌跡、次要動作、時間節奏、誇張等原則，由於數量較多，可以進一步劃分為動作、形變、時機三部分，這些原則強調在運動中要符合物理與自然規律，進行真實但不尋常的形變，是動畫的動作方面（Action）。
運動後的適用原則是吸引力，是運動的結果，本質上一個綜合性的概念，強調要引起觀眾或用戶的共鳴，是動畫的情感方面（Emotion）。

由此我們可以提煉出PAE動效設計模型。

一個好動效設計需要從展現、動作、情感三個方面滿足，這三方面緊密聯繫，互為補充。在進行動效設計時需要注意展現可感知、動作合規律以及情感有共鳴，每一方面可以運用相關規則進行恰當表現。

四、動效非卡通

卡通和動效有著很大的區別。卡通是被動式的享受和娛樂，以讓觀眾產生情感共鳴為主要目標，對娛樂性的要求高於實用性。用戶界面是用戶主動用來完成工作的媒介，需要用戶的互動式參與，動效以幫助用戶達到使用目的為主要目標，實用性重於娛樂性，因此好的動效設計不應以炫酷作為目的。

在進行動效設計時，需要做到：

1.足夠清晰，幫助用戶理解界面、元素之間的關係。

2.足夠簡潔，減少用戶執行和理解的時間。

3.足夠吸引，讓產品使用體驗更加愉快。

五、後記

要做出一個完美的動效設計，僅僅記住這些原則是不夠的。你要深刻理解了解物理、自然規律，人的感受，而不是機械地運用。這些原則很重要，但你要做的是理解並忘掉它們。

參考資料：

圖書：

1.Ollie Johnston, Frank Thomas. The Illusion of Life. Disney Editions, 1995-10-19

2.弗蘭克·托馬斯, 奧利·約翰斯頓著. 生命的幻象[M]. 方麗譯. 北京：中國青年出版社, 2011-4-1

網頁

1.動畫十二原則. 動畫十二原則（+2） | AnimApp.tw 動畫社群

2.[ISUX譯轉]移動用戶體驗設計新要素. [ISUX譯轉]移動用戶體驗設計新要素移動端動畫設計的12個原則

3.動效設計原理:從卡通動畫到UI動效. 動效設計原理:從卡通動畫到UI動效

4.不一樣的方法論，從迪斯尼動畫學到的五大UX設計原則. 不一樣的方法論，從迪斯尼動畫學到的五大UX設計原則

5.動效設計基礎（二）：動效的應用. 動效設計基礎（二）：動效的應用 | 騰訊網UED

6.「迪士尼九老」給今天的動畫師留下了哪些遺產? 「迪士尼九老」給今天的動畫師留下了哪些遺產？ - 馬小褂的回答 - 知乎

7.Principles of Physical Animation. Frank & Ollie

8.12 basic principles of animation. 12 basic principles of animation

9.Jedi Principles of UI Animation. https://medium.com/@adaptivepath/jedi-principles-of-ui-animation-2b88423b1dac#.cdjhwr737

10.The Principles of UX Choreography. https://medium.freecodecamp.com/the-principles-of-ux-choreography-69c91c2cbc2a#.8scoynl7u

視頻（需翻牆）

1. Squash & Stretch - 12 Principles of Animation. https://www.youtube.com/watch?v=haa7n3UGyDc

2. Anticipation - 12 Principles of Animation.https://www.youtube.com/watch?v=F8OtE60T8yU

3. Staging - 12 Principles of Animation. https://www.youtube.com/watch?v=u-SXLaQGg50

4. Straight Ahead & Pose to Pose - 12 Principles of Animation. https://www.youtube.com/watch?v=v8quCbt4C-c

5. Follow Through & Overlapping Action - 12 Principles of Animation. https://www.youtube.com/watch?v=4OxphYV8W3E

6. Slow In & Slow Out - 12 Principles of Animation. https://www.youtube.com/watch?v=fQBFsTqbKhY

7. Arcs - 12 Principles of Animation. https://www.youtube.com/watch?v=I1_tZ9LhJD4

8. Secondary Action - 12 Principles of Animation. https://www.youtube.com/watch?v=MjBHWw1TbP4

9. Timing - 12 Principles of Animation. https://www.youtube.com/watch?v=BarOk2p38LQ

10. Exaggeration - 12 Principles of Animation. https://www.youtube.com/watch?v=HfFj-VQKiAM

11. Solid Drawing - 12 Principles of Animation. https://www.youtube.com/watch?v=7An0jukOkCI

12. Appeal - 12 Principles of Animation. https://www.youtube.com/watch?v=_SplEuWp0Yw

13.Glen Keane sharing tips for character animation. https://www.youtube.com/watch?v=MhKD6T2S98E&index=4&list=PLolGM5slKEIX4e27PaHAA6Y8t1m5toToG

14.Material Design Motion. https://www.youtube.com/watch?v=cQzien5H2Do&list=PLolGM5slKEIXQ1yPz3cxD3xf8mBIhGnCz&index=8
推薦閱讀：