學(xué)習(xí)動畫的同學(xué)應(yīng)該都知道迪士尼的動畫設(shè)計12原則吧？這可能是傳統(tǒng)動畫領(lǐng)域，最為重要、價值不可估量的原則之一。它是 Ollie Johnston 和 Frank Thomas 在他們的書《生命的幻覺》中所提出的。雖然這些原則最初是應(yīng)用在動畫設(shè)計當(dāng)中，但是實際上在如今的 UI 界面當(dāng)中，同樣是適用，并且效果拔群的。

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

1、擠壓和拉伸

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

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

2、預(yù)備動作

預(yù)備動作，通常指的是提前告知用戶即將發(fā)生的事情，讓設(shè)計和用戶的預(yù)期貼合起來。一個角色要將箭射出去，他需要抬起手臂向后拉，你會清晰地看到射箭之前「引而不發(fā)」的狀態(tài)，然后你會對于箭射出有所預(yù)期。在用戶界面當(dāng)中，當(dāng)你懸停在按鈕之上的時候，按鈕會變化，進(jìn)入「懸?！?fàn)顟B(tài)，它就昭示著它是可被點擊的，這就是它的預(yù)備動作。

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

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

3、時間控制

在傳統(tǒng)的動畫當(dāng)中，時間控制決定了幀數(shù)的繪制數(shù)量和內(nèi)容。幀數(shù)越多，動畫就越流暢，相應(yīng)的內(nèi)容變化也可能更慢。同時，一個動畫所耗費的時間長短，也會影響到其中角色的表現(xiàn)力和用戶的心情。

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

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

4、漸快和漸慢

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

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

左側(cè)的為勻速運動，沒有緩動，而右側(cè)加了緩動之后，看起來更加自然。

5、表演與呈現(xiàn)方式

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

在 UI 界面當(dāng)中，表演和呈現(xiàn)方式對應(yīng)的就是元素的放置位置，以及元素如何進(jìn)入界面，怎么抓住用戶注意力，進(jìn)行合理的動畫編排。

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

6、弧形運動軌跡

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

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

7、附屬動作

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

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

此處的粒子效果增強(qiáng)了按鈕本身的功能。

8、夸張

在很多場景當(dāng)中，角色需要具備有足夠的吸引人，那么可以使用某些夸張的動作來吸引更多的關(guān)注。

在 UI 界面當(dāng)中，最重要的交互可以使用夸張的動效來強(qiáng)化，引起用戶的注意。Material Design 當(dāng)中的 FAB 動效就是一個最典型的夸張式的動效，它最終的靜態(tài)效果是很吸引人的，因為它將一個按鈕的色彩擴(kuò)展到整個界面，并且在所有元素的最上層，強(qiáng)調(diào)到了極致。

使用 FAB 動效來進(jìn)行夸張

在支付類APP中使用夸張的效果來強(qiáng)化

9、跟隨動作和重疊動作

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

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

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

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

結(jié)語

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

延伸閱讀：