UI設(shè)計動效需掌握的要素
發(fā)布時間：2019-06-10 11:47:10 已幫助：776人 來源：北京AAA教育
UI動效越來越火，備受大家的青睞，那么什么樣的動效設(shè)計才算是優(yōu)秀的，才更符合用戶體驗(yàn)?zāi)?？該怎樣進(jìn)行UI動效設(shè)計呢？本文為大家找來了UI設(shè)計動效需掌握的要素介紹，一起來學(xué)習(xí)下吧。
Saffer(2013)提出使用動效存在下列6個目的：
1、吸引用戶注意力在指定區(qū)域
2、表現(xiàn)對象和用戶操作間的關(guān)系
3、維持多窗口或多狀態(tài)的上下文關(guān)系
4、提供持續(xù)性事件的認(rèn)知感
5、創(chuàng)造虛擬空間引導(dǎo)用戶在狀態(tài)和功能間轉(zhuǎn)化
6、創(chuàng)造沉浸感和趣味性
場景UI四項(xiàng)作用：
1、支持微交互
2、顯示運(yùn)動過程
3、解釋
4、裝飾
Google的Material Design(2017),提出在MD中、動效用來描述空間關(guān)系、功能、富有美感和流動性的目標(biāo)。
動效顯示APP是如何組織的以及它能夠做什么、具體如下：
1、引導(dǎo)窗口切換
2、提示用戶接下來發(fā)生的事
3、對象間的層級感和空間感
4、減緩用戶對等待事件的認(rèn)知
5、美感和個性化
綜上、筆者總結(jié)了交互動效的使用目的,SAFRI、游獵法則
1.State
告訴用戶對象和窗口的狀態(tài)是如何變化的
當(dāng)界面中對象狀態(tài)需要發(fā)生變化時、可以用動效展示變化的過程、讓用戶更清楚的感知到該變化。相應(yīng)的、當(dāng)窗口發(fā)生變化時、可以用動效更清楚展示窗口是如何從一個狀態(tài)轉(zhuǎn)變到另一個狀態(tài)的。
2.Attention
吸引用戶注意力、告訴用戶做什么
當(dāng)你想讓用戶關(guān)注某一個區(qū)域、或執(zhí)行某一個操作時、可以通過動效吸引他們的注意力。當(dāng)用戶需要執(zhí)行操作時、注意UI和動效的結(jié)合要能告知用戶需要進(jìn)行的操作。
3.Feedback
告訴用戶操作和對象間的關(guān)系
當(dāng)用戶執(zhí)行了某一操作后、動效是一個非常好用的反饋機(jī)制。通過動效的適當(dāng)運(yùn)用、用戶可以清晰感知到自己操作的反饋、讓用戶知道自己做了什么。
4.Relief
緩解用戶對應(yīng)用處理速度的感知
當(dāng)應(yīng)用執(zhí)行一個長時間操作時、可以用動效緩解用戶對時間的感知、甚至創(chuàng)建一個假的動效效果（其實(shí)應(yīng)用并不用處理這么長時間）。當(dāng)下許多APP下拉時的加載動效運(yùn)用的便是該原理。對于用戶、他們關(guān)注的是感受到的速度、而不是應(yīng)用實(shí)際消耗的速度。
5.Individuation
讓產(chǎn)品更有趣和個性
為了讓產(chǎn)品更有趣味性、可以在某些場合適當(dāng)運(yùn)用動效創(chuàng)造一些讓人愉悅的動畫效果。兩點(diǎn)是筆者覺得需要注意的、一是動效時間要足夠短、二是動效要足夠流暢。
需要說明的是、這些目的不是獨(dú)立存在的。設(shè)計師可以運(yùn)用其中任意幾條去設(shè)計一個動效。比如、兩個窗口間的切換動效不僅吸引了用戶的注意力、告訴用戶面板在切換了。而且還告訴用戶兩個面板的位置和空間關(guān)系、上下、左右還是前后。
北京新媒體運(yùn)營培訓(xùn)
北京原畫設(shè)計培訓(xùn)
北京產(chǎn)品經(jīng)理培訓(xùn)
北京大數(shù)據(jù)分析培訓(xùn)
北京UI交互設(shè)計培訓(xùn)