迪士尼的12條動(dòng)畫(huà)基本原則是傳統(tǒng)動(dòng)畫(huà)中最有價(jià)值的原理之一。它出自Johnston和Frank的書(shū)《生命的幻覺(jué)》。雖然這些原理最初是為傳統(tǒng)動(dòng)畫(huà)（例如角色動(dòng)畫(huà)）設(shè)計(jì)的，但在本文中，我們將探討如何將其中的一些原理應(yīng)用于UI動(dòng)效上。

01-擠壓和拉伸

在動(dòng)畫(huà)中，擠壓和拉伸表示對(duì)象的重力，質(zhì)量，彈性。當(dāng)場(chǎng)景中的彈球撞擊地面時(shí)會(huì)被擠壓。在UI界面中，擠壓和拉伸非常適合與按鈕相結(jié)合。

例如，按鈕的按下?tīng)顟B(tài)為擠壓。通過(guò)控制擠壓和拉伸，我們可以輕松地定義按鈕的狀態(tài)。除此之外，它還可以應(yīng)用于界面上的所有的交互式元素。

應(yīng)用于按鈕上的擠壓和拉伸

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

02-預(yù)備動(dòng)作

預(yù)備動(dòng)作為用戶(hù)展示了即將發(fā)生的事情。就像奔跑開(kāi)始時(shí)，我們的身體會(huì)先向后傾，然后才是加速跑，這就是預(yù)備動(dòng)作。在UI動(dòng)效中，懸停狀態(tài)就是很好的例子。每當(dāng)我們將鼠標(biāo)懸停在元素上時(shí)，某些元素都會(huì)做出反應(yīng)，表明它是可單擊的，并且當(dāng)您單擊它時(shí)會(huì)發(fā)生某些事情。

懸?；?dòng)通常會(huì)告訴我們接下來(lái)有一個(gè)動(dòng)作發(fā)生 

涉及水平滾動(dòng)的界面通常會(huì)顯示下一個(gè)元素的一部分，該元素會(huì)出現(xiàn)在滾動(dòng)/滑動(dòng)中

03-時(shí)間節(jié)奏

在傳統(tǒng)動(dòng)畫(huà)中，時(shí)間由繪制的幀動(dòng)畫(huà)來(lái)控制。幀數(shù)越多，動(dòng)畫(huà)將越流暢和越慢。時(shí)間還可以表現(xiàn)對(duì)象的情緒和性格。

時(shí)間也是所有UI動(dòng)效最基本的屬性。定時(shí)和緩動(dòng)功能在動(dòng)效設(shè)計(jì)中起著重要的作用。漫長(zhǎng)的過(guò)渡會(huì)使您的用戶(hù)等待太久。另一方面，如果動(dòng)畫(huà)太快，用戶(hù)可能會(huì)錯(cuò)過(guò)一些東西。通常，大多數(shù)界面動(dòng)畫(huà)在200到600毫秒之間。諸如懸停和反饋之類(lèi)的交互約為300毫秒，而諸如過(guò)渡之類(lèi)的復(fù)雜動(dòng)作約為500毫秒。您可以參考Material Design，其中對(duì)每種類(lèi)型的動(dòng)畫(huà)的持續(xù)時(shí)間都有很好的解釋。

右側(cè)的過(guò)渡會(huì)使用戶(hù)等待太久

04-動(dòng)畫(huà)的緩入緩出

現(xiàn)實(shí)世界中的大多數(shù)對(duì)象都遵循緩動(dòng)效果。換句話(huà)說(shuō)，物體的運(yùn)動(dòng)并不突然。就像自由下落的物體會(huì)在運(yùn)動(dòng)過(guò)程中逐漸加速。

向UI元素添加緩動(dòng)效果可以使它們看起來(lái)更生動(dòng)自然。制定時(shí)間節(jié)奏和緩動(dòng)標(biāo)準(zhǔn)可以讓你建立一個(gè)高效的動(dòng)效庫(kù)。

右側(cè)添加了緩動(dòng)效果，所以看起來(lái)更自然

05-轉(zhuǎn)場(chǎng)

轉(zhuǎn)場(chǎng)，它包括如何將對(duì)象放置在場(chǎng)景中，如何以及何時(shí)進(jìn)行每個(gè)動(dòng)畫(huà)等等。它將用戶(hù)的注意力引向場(chǎng)景中最重要的對(duì)象。

對(duì)于UI界面，轉(zhuǎn)場(chǎng)決定了元素的放置位置以及在發(fā)生交互時(shí)如何對(duì)元素進(jìn)行排版。它將用戶(hù)的注意力引向最關(guān)鍵的元素。

這是一個(gè)音樂(lè)類(lèi)的APP，轉(zhuǎn)場(chǎng)動(dòng)畫(huà)將歌曲封面和名稱(chēng)放大置頂，并讓“喜歡”按鈕單獨(dú)出現(xiàn)，讓用戶(hù)一目了然

06-弧線(xiàn)運(yùn)動(dòng)

從高處拋出的球遵循了拋物線(xiàn)的路徑——弧線(xiàn)會(huì)讓事物更自然。在UI界面中，使用弧線(xiàn)運(yùn)動(dòng)會(huì)比使用直線(xiàn)運(yùn)動(dòng)更加的自然，要突出元素運(yùn)動(dòng)的路徑時(shí)可以使用弧線(xiàn)。

弧線(xiàn)運(yùn)動(dòng)更加生動(dòng)自然

07-輔助動(dòng)畫(huà)

在動(dòng)畫(huà)中，輔助動(dòng)畫(huà)用于強(qiáng)調(diào)場(chǎng)景中發(fā)生主要?jiǎng)幼鳌＠?，角色的頭發(fā)在行走時(shí)的微妙移動(dòng)，或者是面部表情的微妙變化。

在UI界面中，輔助動(dòng)畫(huà)可以使主要?jiǎng)幼鞲油怀觯@在向用戶(hù)反饋信息時(shí)非常有幫助，所有微交互的作用均基于此原理。

輔助的例子動(dòng)畫(huà)讓點(diǎn)贊效果更飽滿(mǎn)

08-夸張

場(chǎng)景中的重要角色必須具有吸引力，通常會(huì)將某些動(dòng)作進(jìn)行夸大以引起更多關(guān)注。

在UI界面中，重要的交互作用也需要更夸張一些，以引起用戶(hù)的注意。下圖的設(shè)計(jì)就是一個(gè)很好的例子，懸浮的按鈕在靜態(tài)狀態(tài)很顯眼，因?yàn)樗念伾?，并且懸浮在所有元素之上。?dāng)發(fā)生任何交互時(shí)，夸張的動(dòng)畫(huà)讓它可以占據(jù)整個(gè)屏幕，使其吸引力更上一層樓。

占滿(mǎn)全屏的夸張動(dòng)畫(huà)

夸張的支付按鈕更吸引人的眼球

09-慣性與延時(shí)

試想，如果你坐在三輪車(chē)上，當(dāng)車(chē)前進(jìn)的時(shí)，身體會(huì)短暫后仰，然后也會(huì)隨之前進(jìn)，我們稱(chēng)之為延時(shí)。突然剎車(chē)時(shí)，又會(huì)由于慣性運(yùn)動(dòng)身體向前傾然后回來(lái) 。

在UI界面中，同樣可以在元素靜止之前添加慣性運(yùn)動(dòng)，以使它們感覺(jué)更自然。不同元素直接也可以添加延時(shí)效果，讓動(dòng)效更細(xì)膩~

窗口放大時(shí)添加了慣性效果

圖像和文本添加了短暫的延時(shí)效果

文章來(lái)源：UI中國(guó)   作者：設(shè)計(jì)師深海

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)