在UX交互設(shè)計中正確使用動效的終極指南

                         


動效是界面設(shè)計中重要的組成部分,本文內(nèi)容精選自設(shè)計師 Taras Skytskyi 的經(jīng)驗沉淀(文末附英文原文鏈接),總結(jié)了一些如何做出優(yōu)質(zhì)動效的技巧,相信會對你有所幫助。



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


當(dāng)元素更改其狀態(tài)或位置時,動效的持續(xù)時間要適當(dāng),既不能過快,使用戶注意不到更改;又不能過慢,使用戶產(chǎn)生無聊感。


大量研究表明,任何短于 100 毫秒的動畫都是瞬時的,基本不會被識別;而當(dāng)動畫的持續(xù)時間超過 1 秒,就會傳達(dá)出一種延遲感,對于用戶來說會感到很無聊:



接下來介紹一些動效設(shè)計的規(guī)則和技巧:


    1. 設(shè)備大小影響動效的持續(xù)時間    


   移動端

對于移動端,Material Design 將手機的交互動效的持續(xù)時間限制為 200 - 300 毫秒;平板電腦上,則要將持續(xù)時間延長 30%,大約在 400 - 450 毫秒,因為屏幕的尺寸更大,元素在更改位置時需要移動更長的距離;在可穿戴的小型智能設(shè)備上,持續(xù)時間應(yīng)該縮短 30%,大約在 150 - 200 毫秒,因為在較小的屏幕上,元素運動的距離更短:



   PC 端

對于 PC 端,動效的處理方式又有所不同:由于我們習(xí)慣在瀏覽器中立即打開網(wǎng)頁,所以我們對于頁面中的其他動畫效果也會有相同的預(yù)期,潛意識里會認(rèn)為動效應(yīng)該立即顯現(xiàn),不然就會有電腦卡機或者網(wǎng)速太慢的感受。因此除了一些裝飾性內(nèi)容的動畫可以不在乎時間限制, Web的動效持續(xù)時間通常在 150 - 200 毫秒為宜:




    2. 元素面積和變化大小影響動效    


通常來說,面積較小變化較小的元素,動效的持續(xù)時間更短面積較大變化較大的元素,動效的持續(xù)時間更長。如下圖,相同大小的兩個元素,移動距離長的物體用時更長;而移動距離相同時,變化大的元素用時更長:





    3. 適當(dāng)加入緩動效果    


恰當(dāng)?shù)木弰有Ч麜乖氐膭有Ц鼮樽匀唬尤刖弰泳腿缤紤]了慣性、阻力等因素,讓元素的運動方式更接近現(xiàn)實生活中的運動。緩動效果又分很多種,需要配合不同的場景進(jìn)行應(yīng)用:


   緩入效果(加速曲線運動)

這種動效在剛開始時變化緩慢,速度隨時間逐漸增加,這意味著元素在做加速度運動:



應(yīng)用在界面設(shè)計中的場景可能是將卡片刪除,用戶不再需要閱讀卡片:



   緩出效果(減速曲線運動)

這種動效在剛開始時變化較快,速度隨時間逐漸降低,直到元素最終停止:



應(yīng)用在界面設(shè)計中的場景可能是新的卡片出現(xiàn),很想吸引用戶的注意力:



   緩進(jìn)緩出效果(S 型標(biāo)準(zhǔn)曲線運動)

這是最常用的動效,同時具備緩入和緩出,當(dāng)你的不知該如何選用動效時,可以用這個效果:



應(yīng)用在界面設(shè)計中,可以避免用戶分散過多的注意力,體驗會更為舒適。比如下圖中的導(dǎo)航抽屜效果,在打開時采用的減速曲線運動效果,以便得到用戶的更多關(guān)注;在關(guān)閉時采用 S 型標(biāo)準(zhǔn)曲線運動效果,減少分散用戶的注意力:



   無緩動效果(勻速直線運動)

相比之下,無緩動效果的勻速直線運動就顯得呆板和不自然:



即使是運動距離相同,不同的運動曲線也可以使元素傳達(dá)出不同的情感和意義:





動效的編排和組織


通常一個界面中會出現(xiàn)多種運動的元素,這就需要將動效按照規(guī)律和順序編排起來,形成視線流,引導(dǎo)用戶瀏覽界面。編排和組織動效的方式有兩種:平級交互從屬交互


    1. 平級交互    


當(dāng)運動的元素都處于同一個層級時,可以從單一的方向,引導(dǎo)用戶的視線。如下圖的卡片列表,按照一定順序依次出現(xiàn)的體驗會更順暢:



再比如下圖中的卡片表格,采用對角線的動效方式會更為舒適:




    2. 從屬交互    


當(dāng)一個元素從一個層級向另一個層級轉(zhuǎn)變時,界面中的其他元素都從屬于它,動效需要表現(xiàn)出這種秩序感,將用戶的注意力集中在最主要的內(nèi)容上去:



此外,當(dāng)一個元素改變其大小時,元素放大后的形狀和比例會影響動效的選擇。比如當(dāng)元素在變化的過程中的寬度增加,則選用緩入曲線運動的方式;而當(dāng)元素比例保持一致時,則采用勻速直線運動的方式:






避免使用的動畫效果


在動效的應(yīng)用過程中,除非必要或有特殊意義,否則盡量避免使用以下動效:


   反彈效果

當(dāng)元素間發(fā)生碰撞時,最好排除反彈效果,過多的反彈效果會干擾用戶的注意力:



   模糊效果

元素在運動的過程中要盡量保持清晰,不要采用運動模糊效果:



   階段延遲效果

列表項元素之間的延遲應(yīng)盡量保持在 20 - 25 毫秒之間,如果太慢,會顯得卡頓并影響用戶的注意力: 



   路徑交叉

元素在移動的過程中需要避免與其他元素的路徑進(jìn)行交叉,可以選擇高于其他元素,進(jìn)行移動: 





英文原文來源:

https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

Taras Skytskyi <The ultimate guide to proper use of animation in UX>

每天更新,
全站高品質(zhì)素材免費下載!