2021-3-15 鶴鶴
迪士尼的12條動(dòng)畫基本原則是傳統(tǒng)動(dòng)畫中最有價(jià)值的原理之一。它出自Johnston和Frank的書《生命的幻覺》。雖然這些原理最初是為傳統(tǒng)動(dòng)畫（例如角色動(dòng)畫）設(shè)計(jì)的，但在本文中，我們將探討如何將其中的一些原理應(yīng)用于UI動(dòng)效上。
在動(dòng)畫中，擠壓和拉伸表示對(duì)象的重力，質(zhì)量，彈性。當(dāng)場(chǎng)景中的彈球撞擊地面時(shí)會(huì)被擠壓。在UI界面中，擠壓和拉伸非常適合與按鈕相結(jié)合。
例如，按鈕的按下狀態(tài)為擠壓。通過(guò)控制擠壓和拉伸，我們可以輕松地定義按鈕的狀態(tài)。除此之外，它還可以應(yīng)用于界面上的所有的交互式元素。
應(yīng)用于按鈕上的擠壓和拉伸
應(yīng)用于側(cè)邊欄的擠壓和拉伸
預(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ì)告訴我們接下來(lái)有一個(gè)動(dòng)作發(fā)生
涉及水平滾動(dòng)的界面通常會(huì)顯示下一個(gè)元素的一部分，該元素會(huì)出現(xiàn)在滾動(dòng)/滑動(dòng)中
在傳統(tǒng)動(dòng)畫中，時(shí)間由繪制的幀動(dòng)畫來(lái)控制。幀數(shù)越多，動(dòng)畫將越流暢和越慢。時(shí)間還可以表現(xiàn)對(duì)象的情緒和性格。
時(shí)間也是所有UI動(dòng)效最基本的屬性。定時(shí)和緩動(dòng)功能在動(dòng)效設(shè)計(jì)中起著重要的作用。漫長(zhǎng)的過(guò)渡會(huì)使您的用戶等待太久。另一方面，如果動(dòng)畫太快，用戶可能會(huì)錯(cuò)過(guò)一些東西。通常，大多數(shù)界面動(dòng)畫在200到600毫秒之間。諸如懸停和反饋之類的交互約為300毫秒，而諸如過(guò)渡之類的復(fù)雜動(dòng)作約為500毫秒。您可以參考Material Design，其中對(duì)每種類型的動(dòng)畫的持續(xù)時(shí)間都有很好的解釋。
右側(cè)的過(guò)渡會(huì)使用戶等待太久
現(xiàn)實(shí)世界中的大多數(shù)對(duì)象都遵循緩動(dòng)效果。換句話說(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)更自然
轉(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è)音樂(lè)類的APP，轉(zhuǎn)場(chǎng)動(dòng)畫將歌曲封面和名稱放大置頂，并讓“喜歡”按鈕單獨(dú)出現(xiàn)，讓用戶一目了然
從高處拋出的球遵循了拋物線的路徑——弧線會(huì)讓事物更自然。在UI界面中，使用弧線運(yùn)動(dòng)會(huì)比使用直線運(yùn)動(dòng)更加的自然，要突出元素運(yùn)動(dòng)的路徑時(shí)可以使用弧線。
弧線運(yùn)動(dòng)更加生動(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)贊效果更飽滿
場(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)畫
夸張的支付按鈕更吸引人的眼球
試想，如果你坐在三輪車上，當(dāng)車前進(jìn)的時(shí)，身體會(huì)短暫后仰，然后也會(huì)隨之前進(jìn)，我們稱之為延時(shí)。突然剎車時(shí)，又會(huì)由于慣性運(yùn)動(dòng)身體向前傾然后回來(lái) 。
在UI界面中，同樣可以在元素靜止之前添加慣性運(yùn)動(dòng)，以使它們感覺更自然。不同元素直接也可以添加延時(shí)效果，讓動(dòng)效更細(xì)膩~
窗口放大時(shí)添加了慣性效果
圖像和文本添加了短暫的延時(shí)效果
文章來(lái)源：UI中國(guó) 作者：設(shè)計(jì)師深海
藍(lán)藍(lán)設(shè)計(jì)( m.izc.net.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.izc.net.cn