2021-3-15 鶴鶴
迪士尼的12條動畫基本原則是傳統(tǒng)動畫中最有價(jià)值的原理之一。它出自Johnston和Frank的書《生命的幻覺》。雖然這些原理最初是為傳統(tǒng)動畫(例如角色動畫)設(shè)計(jì)的,但在本文中,我們將探討如何將其中的一些原理應(yīng)用于UI動效上。
在動畫中,擠壓和拉伸表示對象的重力,質(zhì)量,彈性。當(dāng)場景中的彈球撞擊地面時(shí)會被擠壓。在UI界面中,擠壓和拉伸非常適合與按鈕相結(jié)合。
例如,按鈕的按下狀態(tài)為擠壓。通過控制擠壓和拉伸,我們可以輕松地定義按鈕的狀態(tài)。除此之外,它還可以應(yīng)用于界面上的所有的交互式元素。
應(yīng)用于按鈕上的擠壓和拉伸
應(yīng)用于側(cè)邊欄的擠壓和拉伸
預(yù)備動作為用戶展示了即將發(fā)生的事情。就像奔跑開始時(shí),我們的身體會先向后傾,然后才是加速跑,這就是預(yù)備動作。在UI動效中,懸停狀態(tài)就是很好的例子。每當(dāng)我們將鼠標(biāo)懸停在元素上時(shí),某些元素都會做出反應(yīng),表明它是可單擊的,并且當(dāng)您單擊它時(shí)會發(fā)生某些事情。
懸停互動通常會告訴我們接下來有一個(gè)動作發(fā)生
涉及水平滾動的界面通常會顯示下一個(gè)元素的一部分,該元素會出現(xiàn)在滾動/滑動中
在傳統(tǒng)動畫中,時(shí)間由繪制的幀動畫來控制。幀數(shù)越多,動畫將越流暢和越慢。時(shí)間還可以表現(xiàn)對象的情緒和性格。
時(shí)間也是所有UI動效最基本的屬性。定時(shí)和緩動功能在動效設(shè)計(jì)中起著重要的作用。漫長的過渡會使您的用戶等待太久。另一方面,如果動畫太快,用戶可能會錯(cuò)過一些東西。通常,大多數(shù)界面動畫在200到600毫秒之間。諸如懸停和反饋之類的交互約為300毫秒,而諸如過渡之類的復(fù)雜動作約為500毫秒。您可以參考Material Design,其中對每種類型的動畫的持續(xù)時(shí)間都有很好的解釋。
右側(cè)的過渡會使用戶等待太久
現(xiàn)實(shí)世界中的大多數(shù)對象都遵循緩動效果。換句話說,物體的運(yùn)動并不突然。就像自由下落的物體會在運(yùn)動過程中逐漸加速。
向UI元素添加緩動效果可以使它們看起來更生動自然。制定時(shí)間節(jié)奏和緩動標(biāo)準(zhǔn)可以讓你建立一個(gè)高效的動效庫。
右側(cè)添加了緩動效果,所以看起來更自然
轉(zhuǎn)場,它包括如何將對象放置在場景中,如何以及何時(shí)進(jìn)行每個(gè)動畫等等。它將用戶的注意力引向場景中最重要的對象。
對于UI界面,轉(zhuǎn)場決定了元素的放置位置以及在發(fā)生交互時(shí)如何對元素進(jìn)行排版。它將用戶的注意力引向最關(guān)鍵的元素。
這是一個(gè)音樂類的APP,轉(zhuǎn)場動畫將歌曲封面和名稱放大置頂,并讓“喜歡”按鈕單獨(dú)出現(xiàn),讓用戶一目了然
從高處拋出的球遵循了拋物線的路徑——弧線會讓事物更自然。在UI界面中,使用弧線運(yùn)動會比使用直線運(yùn)動更加的自然,要突出元素運(yùn)動的路徑時(shí)可以使用弧線。
弧線運(yùn)動更加生動自然
在動畫中,輔助動畫用于強(qiáng)調(diào)場景中發(fā)生主要?jiǎng)幼?。例如,角色的頭發(fā)在行走時(shí)的微妙移動,或者是面部表情的微妙變化。
在UI界面中,輔助動畫可以使主要?jiǎng)幼鞲油怀?,這在向用戶反饋信息時(shí)非常有幫助,所有微交互的作用均基于此原理。
輔助的例子動畫讓點(diǎn)贊效果更飽滿
場景中的重要角色必須具有吸引力,通常會將某些動作進(jìn)行夸大以引起更多關(guān)注。
在UI界面中,重要的交互作用也需要更夸張一些,以引起用戶的注意。下圖的設(shè)計(jì)就是一個(gè)很好的例子,懸浮的按鈕在靜態(tài)狀態(tài)很顯眼,因?yàn)樗念伾?,并且懸浮在所有元素之上。?dāng)發(fā)生任何交互時(shí),夸張的動畫讓它可以占據(jù)整個(gè)屏幕,使其吸引力更上一層樓。
占滿全屏的夸張動畫
夸張的支付按鈕更吸引人的眼球
試想,如果你坐在三輪車上,當(dāng)車前進(jìn)的時(shí),身體會短暫后仰,然后也會隨之前進(jìn),我們稱之為延時(shí)。突然剎車時(shí),又會由于慣性運(yùn)動身體向前傾然后回來 。
在UI界面中,同樣可以在元素靜止之前添加慣性運(yùn)動,以使它們感覺更自然。不同元素直接也可以添加延時(shí)效果,讓動效更細(xì)膩~
窗口放大時(shí)添加了慣性效果
圖像和文本添加了短暫的延時(shí)效果
文章來源:UI中國 作者:設(shè)計(jì)師深海
藍(lán)藍(lán)設(shè)計(jì)( www.kadanni.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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://www.kadanni.com.cn