迪士尼的12部動畫原理是考慮傳統(tǒng)動畫時不可估量的指南之一。它是奧利約翰斯頓和弗蘭克托馬斯在他們的書 - 《生命的幻覺》中提出的。這些原則最初是為角色動畫等傳統(tǒng)動畫而設(shè)計的。但是，這些原則仍可用于設(shè)計界面動畫。因此，這只是在設(shè)計界面動畫時將一些原則聯(lián)系起來的奇怪嘗試。

迪士尼的12個動畫原理

壓縮和拉伸

在動畫中，壓縮和拉伸表示物體的重力，質(zhì)量，重量和靈活性。一個場景中的彈跳球在它撞擊地面時伸展，是壓縮和拉伸的。

在界面中，壓縮和拉伸可以很容易地與按鈕相關(guān)聯(lián)。按鈕的按下狀態(tài)是壓縮。通過控制壓縮和拉伸，我們可以輕松地為按鈕定義一個狀態(tài)。除按鈕外，它還可以應(yīng)用于界面中的任何交互元素。

按鈕在相互作用時擠壓和伸展。

預(yù)期

預(yù)期告訴觀眾將會發(fā)生什么。它先于下一步發(fā)生的行動。一個人在釋放標槍之前將他的手臂拉回來是一種期待。

在界面中，懸停狀態(tài)就是很好的例子。每當我們懸停在元素上時，某些元素會對它做出反應(yīng)，表明它是可點擊的，點擊它就會發(fā)生一些事情。

懸停的相互作用通常告訴我們接下來會發(fā)生一些行動。

涉及水平滾動的界面通常傾向于顯示滾動/滑動時出現(xiàn)的下一個元素的一部分。這是預(yù)期的一個很好的例子，因為它揭示了關(guān)于下一件事的信息。

定時

在傳統(tǒng)動畫中，時間通知如何繪制幀。幀越多，動畫越平滑，越慢。時間也給對象帶來情緒和特征。

時序是任何界面動畫的基本方面。時間和緩和功能在運動編排中起著重要作用。漫長的過渡會讓你的用戶等待太久。另一方面，如果你的動畫太快，用戶可能會遺漏某些內(nèi)容。通常，大多數(shù)界面動畫介于200-600ms之間。像懸停和反饋這樣的交互大約是300毫秒，過渡的動作大約是500毫秒。你可以參考Material design（材料設(shè)計），它可以很好地解釋每種動畫的持續(xù)時間。

一些設(shè)計系統(tǒng)（如碳和閃電）已將運動視為一個重要方面，并為每種類型的過渡制定了規(guī)格（時間，緩和等）。

右側(cè)的過渡使用戶等待時間過長。

慢進來和慢下來

現(xiàn)實世界中的大多數(shù)物體都遵循緩和的運動。也就是說，物體的運動并不突然。一個自由落體的物體開始緩慢然后獲得動力。

左邊的卡片沒有緩動。你可以看到右邊的過渡似乎更自然。

為界面元素添加緩動可以提供更長的使用壽命，并使它們看起來更自然。單獨定時和緩和可以有效地用于定義你的運動系統(tǒng)。

表演

舞臺編排舞蹈。也就是說，如何將對象放置在場景中，每個動畫的發(fā)生方式和時間等等。它將注意力引向場景中最重要的對象。

在接口中，分段決定元素的放置位置以及交互發(fā)生時如何編排元素。它將用戶的注意力引導到預(yù)期的元素。

考慮一個根據(jù)我們的興趣推薦音樂的音樂應(yīng)用。因此，應(yīng)用程序必須做的重要事情是，如果用戶想要收聽類似的歌。因此，有必要將LIKE動作與其他編排元素分開。

弧

從高處拋出的球遵循拋物線路徑?；⌒问故挛锔匀?。

在界面中，跟隨對角線路徑的元素可以通過跟隨弧線而變得更自然。當你想要突出顯示元素的路徑時，可以使用圓弧。

你可以看到弧后面的元素看起來比對角線更好。

輔助動作

在動畫中，輔助動作用于支持或增強對象的主要操作。行走時角色頭部的動作是次要動作。

在界面中，可以使用輔助操作使主要操作更加突出。這些在元素需要向用戶提供反饋的地方非常有用。所有微觀互動都基于次要行動原則。

顆粒的二次反應(yīng)增強了主按鈕的作用。

夸張和情趣

場景中的重要角色必須具有吸引力，同時，某些動作可能會被夸大以獲得更多關(guān)注。

在界面中，可以夸大重要的交互以獲得用戶的注意。材料設(shè)計中的FAB就是一個很好的例子。FAB本身的靜態(tài)狀態(tài)很吸引人，因為它具有強調(diào)色，并且還浮在所有元素之上。當發(fā)生任何交互時，可以夸大FAB的動畫以占據(jù)整個屏幕以使其更具吸引力。

FAB在互動上被夸大了。

主要操作被夸大的付款應(yīng)用上的互動。

跟進和重疊動作

考慮一只兔子從高處跳躍。當兔子開始運動時，它的耳朵可能會以身體的偏移開始。當它落地時，它的耳朵仍然在運動。前者稱為重疊動作，角色的不同部分以不同的速率運行。后者稱為“ 跟隨”，即使在角色停止后角色的某些部分仍然處于運動狀態(tài)。

在界面中，可以使元素在停下來之前超過（跟隨）它們的位置以使它們感覺更自然。

一個模式窗口展示跟進。它超越了它的位置然后穩(wěn)定下來。

滾動時，圖像卡片和文本以不同的速率開始，表現(xiàn)出重疊動作。

界面中的每個交互都必須使用正確的上下文精心制作，以使體驗更加身臨其境。在正確的位置使用這些原則可確保你的交互與你的界面不同。

其中許多原則正在以不同的形式和方式用于今天的數(shù)字產(chǎn)品中。

---

分享最新鮮的設(shè)計文章！提供最優(yōu)質(zhì)的設(shè)計服務(wù)！