如何用最經典的迪士尼動畫設計原則賦予 UI 靈性？

學習動畫的同學應該都知道迪士尼的動畫設計12原則吧？這可能是傳統動畫領域，最爲重要、價值不可估量的原則之一。它是 Ollie Johnston 和 Frank Thomas 在他們的書《生命的幻覺》中所提出的。雖然這些原則最初是應用在動畫設計當中，但是實際上在如今的 UI 界面當中，同樣是適用，並且效果拔羣的。

這12條原則當中，絕大多數都可以應用到 UI 的動效和交互設計當中，從而讓交互和體驗更上一層樓。這篇文章基於這12條原則，梳理出了 9 條適用於 UI 設計的原則，一起來看看吧：

1、擠壓和拉伸

在動畫當中，擠壓和拉伸主要體現在對象在受到重力影響的情況下，物體的表現，這種動畫效果能夠體現出質量、重量和柔韌感。當彈球在撞擊地面的時候，會呈現出這樣的擠壓和拉伸。在UI 界面當中，擠壓和拉伸則多呈現在按鈕類的元素上。

比如當按鈕被按下的時候，可以加入擠壓拉伸的效果，通過這種動效能夠很快讓按鈕呈現出接近真實的物理感。當然，除了按鈕之外，它還可以體現在很多其他的交互元素上。

2、預備動作

預備動作，通常指的是提前告知用戶即將發生的事情，讓設計和用戶的預期貼合起來。一個角色要將箭射出去，他需要抬起手臂向後拉，你會清晰地看到射箭之前「引而不發」的狀態，然後你會對於箭射出有所預期。在用戶界面當中，當你懸停在按鈕之上的時候，按鈕會變化，進入「懸停」狀態，它就昭示着它是可被點擊的，這就是它的預備動作。

懸停交互會告訴用戶下一步可以做什麼。

水平滾動的控件通常會展示出某些元素的一部分，讓用戶意識到可以滑動交互。

3、時間控制

在傳統的動畫當中，時間控制決定了幀數的繪製數量和內容。幀數越多，動畫就越流暢，相應的內容變化也可能更慢。同時，一個動畫所耗費的時間長短，也會影響到其中角色的表現力和用戶的心情。

時間控制是動畫設計的基礎。時間控制和緩動在動畫編排中發揮着重要的作用，過於漫長的過渡會讓用戶等太久，如果太快，用戶可能會覺得錯過重要的信息。通常，絕大多數的動畫時長會控制在 200ms 到 600ms 之間，諸如懸停和點擊反饋通常會控制在 300ms，而過渡則多爲 500ms，你可以參考 Material Design 中動畫的時間處理。

右側的過渡會讓用戶覺得等待太久。

4、漸快和漸慢

現實世界當中，絕大多數的事物的運動規律都遵循緩動的規律。換句話說，沒有東西是突然開始運動，又突然停止的，自由落體也是有加速過程的。

所以，向 UI 元素當中添加緩動效果，能夠讓元素看起來更加自然，符合預期，結合緩動和時間控制，就能夠定義整個界面的運動系統了。

左側的爲勻速運動，沒有緩動，而右側加了緩動之後，看起來更加自然。

5、表演與呈現方式

爲角色設置舞臺，讓角色像登上舞臺一樣進入場景。換句話說，你需要借用動畫效果來進行「敘事」，考慮如何讓它進入場景，如何呈現，怎樣表演，如何借用鏡頭語言來引導用戶的注意力。

在 UI 界面當中，表演和呈現方式對應的就是元素的放置位置，以及元素如何進入界面，怎麼抓住用戶注意力，進行合理的動畫編排。

當你在思考如何呈現一個音樂 APP 的界面的時候，你可能需要基於用戶喜好來推薦類似歌曲，那麼喜歡/收藏音樂將會是一個重要的交互，和這首歌相關的歌曲可能需要一個獨立的界面來呈現，於是你要凸顯喜歡/收藏按鈕，要讓歌曲從列表中跳出，並且在下方列舉出相關的音樂。

6、弧形運動軌跡

純粹的直線運動的事物很少，從高出拋出的球的運動軌跡是弧形的。很多時候弧形軌跡更符合自然規律也符合我們的日常認知。

在 UI 界面當中，重要的元素可以使用弧形運動軌跡來呈現，會顯得更加自然舒適，尤其是那種沿着對角線運動的元素。

7、附屬動作

在傳統動畫中，附屬動作主要是用來支撐和輔助主要動作的。比如一個正在行走的角色，他的頭部的擺動和轉動通常會被視作爲附屬動作，

在 UI 界面當中，輔助動作可以讓主要的動畫效果更加突出。這些元素在需要用戶反饋的地方，顯得非常有用。所有的微交互幾乎都是基於「附屬動作」的原理來進行設計的。

此處的粒子效果增強了按鈕本身的功能。

8、誇張

在很多場景當中，角色需要具備有足夠的吸引人，那麼可以使用某些誇張的動作來吸引更多的關注。

在 UI 界面當中，最重要的交互可以使用誇張的動效來強化，引起用戶的注意。Material Design 當中的 FAB 動效就是一個最典型的誇張式的動效，它最終的靜態效果是很吸引人的，因爲它將一個按鈕的色彩擴展到整個界面，並且在所有元素的最上層，強調到了極致。

使用 FAB 動效來進行誇張

在支付類APP中使用誇張的效果來強化

9、跟隨動作和重疊動作

沒有任何一種物體會突然停滯，通常運動是一個接着一個的。還有一個更加簡潔的表述爲「動者恆動」。想象一下一隻兔子從高出跳下，當兔子開始運動的時候，它的耳朵會隨着運動而自然地偏移和擺動，當兔子落地的時候，身體基本靜止之後，它的耳朵可能還在動。前一種情況是「跟隨動作」，視差滾動就是典型的跟隨動作。而後者則是「重疊動作」，前一個動作停止之後，某些部分仍然處於運動的狀態。

在 UI 界面當中，可以讓元素在靜止之前，調用一個其他的交互和動效，從而讓整個動效和交互更加流暢連貫，且自然。