長沙UI設(shè)計(jì)學(xué)習(xí)UI動效設(shè)計(jì)如何做

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

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

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

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

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

       在移動設(shè)備(如手機(jī))上，動效持續(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í)慣，用戶對瀏覽器動效變化速率的預(yù)期仍然相對較快。

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

       大屏幕=較慢的動效

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

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

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

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

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

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