迪士尼動畫的12條原則是設(shè)計師必須要掌握的經(jīng)典指導(dǎo)性原則，是由 Ollie Johnston 和 Frank Thomas 在他們的書《The Illusion of Life》中提出來的觀點(diǎn)（譯者注：這本書在豆瓣的評分有9.3分，值得一看）。這些原則最初是用來為動畫片這種傳統(tǒng)的形式設(shè)計的，然而，這些原則也同樣適用于 UI設(shè)計。所以，我想在這里做一個有趣的嘗試，看能否將這些動畫原則聯(lián)系起來。

擠壓和拉伸

在動畫中，擠壓和拉伸代表了物體的重力，質(zhì)量，重量和靈活性。舉例來說，當(dāng)一個彈球在它撞擊地面時會發(fā)生形態(tài)變化，就是擠壓和拉伸。

在界面中，擠壓和拉伸很容易就聯(lián)想到按鈕。當(dāng)一個按鈕被按下時，就可以理解為受到了擠壓，通過控制按鈕的擠壓和拉伸，我們可以很輕易地做好一個按鈕的交互動畫。除了按鈕之外，這種原則也可以應(yīng)用于 UI 中的任何交互元素上。

△ 按鈕在交互時的擠壓和拉伸

△ 擠壓和拉伸被應(yīng)用于側(cè)邊欄

預(yù)期動作

讓觀眾能預(yù)先知道接下來將會發(fā)生什么，它是先于下一步會發(fā)生的動作。舉例來說，迪士尼動畫里經(jīng)常有從高空往下跳躍時會先彎曲膝蓋再跳，正在跑步的人要停止跑步前會逐漸變慢步伐等等。

在界面中，懸停狀態(tài)就是很好的例子。當(dāng)我們把鼠標(biāo)懸停在元素上時，元素會提供反饋，表明它是可以點(diǎn)擊的，并且在點(diǎn)擊時，又會有一些別的反饋。

△ 懸停的交互通常會暗示這個按鈕是可以點(diǎn)的

在有水平滾動界面里，通常在交互時會顯示下一個元素的部分內(nèi)容。這其實(shí)是一個很好的例子，因?yàn)樗窃诟嬷脩粝乱徊降囊恍┬畔ⅰ?

時間節(jié)奏

在傳統(tǒng)動畫中，時間會決定關(guān)鍵幀的繪制方式。幀數(shù)越多，動畫就越流暢，同時也更慢，時間能夠給動畫賦予情緒和性格。

時間的節(jié)奏感是任何動畫的基礎(chǔ)，速度在元素編排中起著非常重要的作用。速度太慢，用戶會不耐煩；速度太快，用戶又會錯過一些內(nèi)容。一般來說，大多數(shù) UI動畫在200-600ms之間，其中懸停和反饋交互時長大約為300ms，精細(xì)的轉(zhuǎn)場動畫大約在500ms。也可以去參考谷歌的動畫規(guī)范（https://material.io/design/motion/speed.html#duration），里面非常詳細(xì)地解釋了每種動畫類型的持續(xù)時間。

一些設(shè)計系統(tǒng)，如 Carbon（https://www.carbondesignsystem.com/guidelines/motion/）、 Lightning（https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/）都把運(yùn)動的節(jié)奏感視為一個很重要的方面，并為每種類型的過渡都制定了嚴(yán)格的規(guī)范。

△ 右邊的過渡動畫顯得太過于漫長，繁瑣。

漸快與漸慢

在現(xiàn)實(shí)世界中，大多數(shù)物體都遵循著緩動運(yùn)動規(guī)律。也就是說，物體的運(yùn)動并不會瞬間開始或瞬間結(jié)束，就像一個物體自由落體，也是一開始很慢后面才會變快。

△ 左側(cè)的卡片是沒有緩動的，右側(cè)的是帶有緩動的，看起來會自然很多。

給 UI 中的元素加上緩動會讓它看起來更加自然，緩動和節(jié)奏感都是可以有效的提升動畫的品質(zhì)。

呈現(xiàn)方式

舞臺中的表演需要合適的編排才會精彩。也就是說，對象在場景中如何擺放，每個動畫又如何出現(xiàn)，關(guān)乎演出的質(zhì)量。通過這種編排，能夠?qū)⒆⒁饬σ蜃钪匾慕巧?

在界面中，呈現(xiàn)方式能夠決定元素的位置，以及在交互時，它應(yīng)該如何編排才能將用戶的注意力引向預(yù)期的元素。

比如現(xiàn)在有一個基于興趣的音樂APP，對這個應(yīng)用來說，最重要的事就是讓動畫引導(dǎo)用戶選擇他們所喜歡的音樂。因此，有必要將類似的操作與其他元素分開編排，有目的的引導(dǎo)用戶。

弧形軌跡

一個從高處拋出的小球，運(yùn)動軌跡會做拋物線軌跡運(yùn)動，弧線能使物體的運(yùn)動更加自然。

在界面中，沿著對角線的元素沿著弧線軌跡將會使運(yùn)動變得更加自然。當(dāng)需要凸顯出元素的運(yùn)動路徑時，多嘗試使用弧線軌跡。

△ 通過對比，能夠發(fā)現(xiàn)右側(cè)的弧線運(yùn)動軌跡會比左側(cè)的直線運(yùn)動軌跡顯得更加自然。

附屬動作

在動畫中，次要動作能夠起到烘托主要動作，比如動畫中的角色在走路時，頭部的晃動就是次要動作，卻能夠讓角色行走顯得更加自然。

在界面中，次要操作能夠起到強(qiáng)化關(guān)鍵動作，當(dāng)元素需要向用戶提供反饋時，這個方法非常管用。所有的微交互都是基于這個附屬動作原理。

△ 按鈕邊上的粒子效果強(qiáng)化了主按鈕的點(diǎn)擊效果

夸張和吸引力

場景中的重要角色通常會采用一些比較夸張的動作來獲得更多的注意力。

在界面中，重要的交互也會通過一些夸張的動畫來引起用戶的注意。谷歌設(shè)計規(guī)范中的 FAB按鈕就是一個很好的例子，F(xiàn)AB按鈕在不動的時候也比較能引起注意，因?yàn)樗ǔв斜容^鮮明的顏色，并且是獨(dú)立懸浮在界面元素之上的。當(dāng)它被點(diǎn)擊時，F(xiàn)AB的動畫被放大，把整個界面都占滿，使得它完全占據(jù)用戶的注意力。

△ FAB夸張的交互形式

△ 對于支付這么重要功能的按鈕，通過夸張的動效引起用戶的注意

跟隨動作和重疊動作

想象一只兔子從高處跳下來，當(dāng)兔子開始起跳時，它的耳朵動作會與身體動作發(fā)生錯位。然后當(dāng)它著陸時，它的身體停下來了，但是耳朵還在動。前者稱之為跟隨動作，后者被稱為重疊動作。其原理說的就是：沒有任何一種物體會突然停止，物體的運(yùn)動是一個部分接著另一個部分的。

在界面中，可以使元素在停止之前超過它們原本的位置，使得元素運(yùn)動更加自然。（譯者注：大白話就是我們常說的回彈效果。）

△ 界面有一定的回彈，會顯得更加自然。

△ 當(dāng)界面滾動時，文字會跟隨圖片的運(yùn)動，圖片與文字以不同的速度運(yùn)動會更加自然。（譯者注：像是被拖著走的那種感覺）

總結(jié)

界面中的每一次交互都必須在適當(dāng)?shù)膱鼍爸芯脑O(shè)計，讓整個體驗(yàn)更具沉浸感。在正確的地方使用這些原則能夠確保產(chǎn)品中的交互體驗(yàn)更加協(xié)調(diào)自然。

這些原則正在以不同的形式應(yīng)用于當(dāng)今的數(shù)字產(chǎn)品中，值得敬畏的是，30年前設(shè)計的一套規(guī)則到今天仍然適用。

（譯者注：這又應(yīng)了迪特·拉姆斯的設(shè)計十誡，好的設(shè)計是不會過時的。）

作者：彩云Sky         來源：站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。