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

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

1、擠壓和拉伸

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

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

2、預(yù)備動(dòng)作

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

懸停交互會(huì)告訴用戶(hù)下一步可以做什么。

水平滾動(dòng)的控件通常會(huì)展示出某些元素的一部分，讓用戶(hù)意識(shí)到可以滑動(dòng)交互。

3、時(shí)間控制

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

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

右側(cè)的過(guò)渡會(huì)讓用戶(hù)覺(jué)得等待太久。

4、漸快和漸慢

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

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

左側(cè)的為勻速運(yùn)動(dòng)，沒(méi)有緩動(dòng)，而右側(cè)加了緩動(dòng)之后，看起來(lái)更加自然。

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

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

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

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

6、弧形運(yùn)動(dòng)軌跡

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

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

7、附屬動(dòng)作

在傳統(tǒng)動(dòng)畫(huà)中，附屬動(dòng)作主要是用來(lái)支撐和輔助主要?jiǎng)幼鞯?。比如一個(gè)正在行走的角色，他的頭部的擺動(dòng)和轉(zhuǎn)動(dòng)通常會(huì)被視作為附屬動(dòng)作，

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

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

8、夸張

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

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

使用 FAB 動(dòng)效來(lái)進(jìn)行夸張

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

9、跟隨動(dòng)作和重疊動(dòng)作

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

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

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

在滾動(dòng)的時(shí)候，卡片和底部的元素以不同的速率運(yùn)動(dòng)，類(lèi)似視差。

結(jié)語(yǔ)

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

作者：Ruthi