UI設(shè)計(jì)動(dòng)效需掌握的要素

發(fā)布時(shí)間：2019-06-10 11:47:10 已幫助：776人來源：北京AAA教育

UI動(dòng)效越來越火，備受大家的青睞，那么什么樣的動(dòng)效設(shè)計(jì)才算是優(yōu)秀的，才更符合用戶體驗(yàn)?zāi)兀吭撛鯓舆M(jìn)行UI動(dòng)效設(shè)計(jì)呢？本文為大家找來了UI設(shè)計(jì)動(dòng)效需掌握的要素介紹，一起來學(xué)習(xí)下吧。

新聞內(nèi)容：

“

場(chǎng)景UI交互動(dòng)效的首要目標(biāo)應(yīng)是支持和增強(qiáng)用戶在狀態(tài)間的轉(zhuǎn)化。

Saffer(2013)提出使用動(dòng)效存在下列6個(gè)目的：

1、吸引用戶注意力在指定區(qū)域

2、表現(xiàn)對(duì)象和用戶操作間的關(guān)系

3、維持多窗口或多狀態(tài)的上下文關(guān)系

4、提供持續(xù)性事件的認(rèn)知感

5、創(chuàng)造虛擬空間引導(dǎo)用戶在狀態(tài)和功能間轉(zhuǎn)化

6、創(chuàng)造沉浸感和趣味性

場(chǎng)景UI四項(xiàng)作用：

1、支持微交互

2、顯示運(yùn)動(dòng)過程

3、解釋

4、裝飾

Google的Material Design(2017),提出在MD中、動(dòng)效用來描述空間關(guān)系、功能、富有美感和流動(dòng)性的目標(biāo)。

動(dòng)效顯示APP是如何組織的以及它能夠做什么、具體如下：

1、引導(dǎo)窗口切換

2、提示用戶接下來發(fā)生的事

3、對(duì)象間的層級(jí)感和空間感

4、減緩用戶對(duì)等待事件的認(rèn)知

5、美感和個(gè)性化

綜上、筆者總結(jié)了交互動(dòng)效的使用目的,SAFRI、游獵法則

1.State

告訴用戶對(duì)象和窗口的狀態(tài)是如何變化的

當(dāng)界面中對(duì)象狀態(tài)需要發(fā)生變化時(shí)、可以用動(dòng)效展示變化的過程、讓用戶更清楚的感知到該變化。相應(yīng)的、當(dāng)窗口發(fā)生變化時(shí)、可以用動(dòng)效更清楚展示窗口是如何從一個(gè)狀態(tài)轉(zhuǎn)變到另一個(gè)狀態(tài)的。

2.Attention

吸引用戶注意力、告訴用戶做什么

當(dāng)你想讓用戶關(guān)注某一個(gè)區(qū)域、或執(zhí)行某一個(gè)操作時(shí)、可以通過動(dòng)效吸引他們的注意力。當(dāng)用戶需要執(zhí)行操作時(shí)、注意UI和動(dòng)效的結(jié)合要能告知用戶需要進(jìn)行的操作。

3.Feedback

告訴用戶操作和對(duì)象間的關(guān)系

當(dāng)用戶執(zhí)行了某一操作后、動(dòng)效是一個(gè)非常好用的反饋機(jī)制。通過動(dòng)效的適當(dāng)運(yùn)用、用戶可以清晰感知到自己操作的反饋、讓用戶知道自己做了什么。

4.Relief

緩解用戶對(duì)應(yīng)用處理速度的感知

當(dāng)應(yīng)用執(zhí)行一個(gè)長(zhǎng)時(shí)間操作時(shí)、可以用動(dòng)效緩解用戶對(duì)時(shí)間的感知、甚至創(chuàng)建一個(gè)假的動(dòng)效效果（其實(shí)應(yīng)用并不用處理這么長(zhǎng)時(shí)間）。當(dāng)下許多APP下拉時(shí)的加載動(dòng)效運(yùn)用的便是該原理。對(duì)于用戶、他們關(guān)注的是感受到的速度、而不是應(yīng)用實(shí)際消耗的速度。

5.Individuation

讓產(chǎn)品更有趣和個(gè)性

為了讓產(chǎn)品更有趣味性、可以在某些場(chǎng)合適當(dāng)運(yùn)用動(dòng)效創(chuàng)造一些讓人愉悅的動(dòng)畫效果。兩點(diǎn)是筆者覺得需要注意的、一是動(dòng)效時(shí)間要足夠短、二是動(dòng)效要足夠流暢。

需要說明的是、這些目的不是獨(dú)立存在的。設(shè)計(jì)師可以運(yùn)用其中任意幾條去設(shè)計(jì)一個(gè)動(dòng)效。比如、兩個(gè)窗口間的切換動(dòng)效不僅吸引了用戶的注意力、告訴用戶面板在切換了。而且還告訴用戶兩個(gè)面板的位置和空間關(guān)系、上下、左右還是前后。

”

以上就是小編為大家找來的UI設(shè)計(jì)動(dòng)效需掌握的要素介紹，有需要的學(xué)員可以來做個(gè)相關(guān)的學(xué)習(xí)應(yīng)用，想要了解更多相關(guān)的知識(shí)可以繼續(xù)關(guān)注小編的后續(xù)文章更新，北京AAA教育為學(xué)員設(shè)置UI設(shè)計(jì)培訓(xùn)班，歡迎學(xué)員咨詢了解。

上一篇:大數(shù)據(jù)分析必備常識(shí)

下一篇:IT求職面試注意事項(xiàng)

相關(guān)新聞

UI設(shè)計(jì)動(dòng)效需掌握的要素

相關(guān)課程