六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

將迪士尼的10大動(dòng)畫原理應(yīng)用于UI動(dòng)效設(shè)計(jì)

2021-3-15 ui設(shè)計(jì)分享達(dá)人

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

01-擠壓和拉伸

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

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

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

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

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

預(yù)備動(dòng)作為用戶展示了即將發(fā)生的事情。就像奔跑開始時(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ì)告訴我們接下來有一個(gè)動(dòng)作發(fā)生

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

07-輔助動(dòng)畫

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

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

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

08-夸張

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

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

占滿全屏的夸張動(dòng)畫