UI動(dòng)效設(shè)計(jì)如何做?動(dòng)畫效果現(xiàn)在已經(jīng)滲透到UI界面的每個(gè)角落，由于動(dòng)效效應(yīng)，屏幕之間的切換更加連貫，而交互式的語境邏輯由于動(dòng)效效應(yīng)而更加清晰。下面讓我們一起來看看UI動(dòng)效設(shè)計(jì)如何做吧。

       UI動(dòng)效設(shè)計(jì)如何做?

       動(dòng)效的持續(xù)時(shí)間和速度

       當(dāng)元素的位置和狀態(tài)發(fā)生變化時(shí)，動(dòng)效的速度應(yīng)該足夠慢，以保持足夠長的時(shí)間讓用戶注意到變化，但同時(shí)，不應(yīng)該慢到需要用戶等待。

       大量研究表明，動(dòng)效的最佳持續(xù)時(shí)間在200毫秒到500毫秒之間。這個(gè)研究數(shù)字是基于人腦的認(rèn)知方式和信息消化的速度。任何小于100毫秒的動(dòng)效對(duì)于人眼來說幾乎是瞬間的，難以識(shí)別。然而，超過一秒鐘的動(dòng)效又會(huì)讓人感覺遲鈍。

       在移動(dòng)設(shè)備(如手機(jī))上，動(dòng)效持續(xù)時(shí)間應(yīng)控制在200至300毫秒之間，而在平板電腦上，持續(xù)時(shí)間應(yīng)延長約30%，即持續(xù)時(shí)間應(yīng)在400至450毫秒之間。網(wǎng)頁的處理方式也不同。因?yàn)槲覀兞?xí)慣于直接在瀏覽器中打開網(wǎng)頁，考慮到瀏覽器的性能和大家的使用習(xí)慣，用戶對(duì)瀏覽器動(dòng)效變化速率的預(yù)期仍然相對(duì)較快。

       與移動(dòng)終端中的動(dòng)效速度相比，網(wǎng)頁中的速度會(huì)快上一倍，換句話說，動(dòng)效的持續(xù)時(shí)間應(yīng)該在150到200毫秒之間。如果持續(xù)時(shí)間太長，用戶會(huì)覺得網(wǎng)頁卡住了。

       大屏幕=較慢的動(dòng)效

       事實(shí)絕對(duì)不是這樣。

       請(qǐng)記住，動(dòng)效的持續(xù)時(shí)間不僅僅取決于屏幕大小和運(yùn)動(dòng)距離，還取決于平臺(tái)特性、元素大小、功能設(shè)置等。不管是什么平臺(tái)，元素越小或變化越小，相應(yīng)的動(dòng)效應(yīng)該越快。因此，大而復(fù)雜的元素動(dòng)效持續(xù)時(shí)間更長，看起來更舒適一點(diǎn)。

       動(dòng)效的運(yùn)動(dòng)規(guī)律應(yīng)符合物理規(guī)律，當(dāng)元素移動(dòng)到邊界并發(fā)生碰撞時(shí)，碰撞的“能量”將最終均勻分布。然而，彈跳的特效在大多數(shù)情況下并不適用，僅適用于特殊情況。

       元素的運(yùn)動(dòng)過程應(yīng)該是清晰的，盡量不要在運(yùn)動(dòng)中使用模糊效果，模糊效果不適合ui界面。

       列表項(xiàng)使用的動(dòng)效在實(shí)際的移動(dòng)過程中，項(xiàng)與項(xiàng)之間應(yīng)有輕微的延遲，元素之間的延遲應(yīng)控制在20 ~ 25毫秒之間。如果持續(xù)時(shí)間較長，可能會(huì)給人一種遲滯的觀感。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.hebeijilong.cn/news-id-65290.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050