學習動畫的同學應該都知道迪士尼的動畫設計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 界面當中，可以讓元素在靜止之前，調用一個其他的交互和動效，從而讓整個動效和交互更加流暢連貫，且自然。

模態彈出框的跟隨動作，在底層動效停止之后依然運動，然后才靜止下來。

在滾動的時候，卡片和底部的元素以不同的速率運動，類似視差。

結語

在實際的設計過程中，UI動效和交互應當根據實際的情況來靈活調整，讓整個 UI 界面在保持自然的情況下，在正確的位置加入不同的交互、動效以及微交互，這回讓整個交互和 UI 界面本身的功能更深層地結合到一起。

延伸閱讀：