旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計(jì) > UI設(shè)計(jì)動(dòng)效必須要掌握的要素

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

時(shí)間:2018-04-19來源:m.5wd995.cn點(diǎn)擊量:作者:馬晨皓
時(shí)間:2018-04-19點(diǎn)擊量:作者:馬晨皓
下面重點(diǎn)跟大家闡述一下關(guān)于場景UI 交互動(dòng)效的6個(gè)目的、4項(xiàng)作用以及5大應(yīng)用法則。希望對各位的場景UI交互動(dòng)效設(shè)計(jì)有一定的幫助。

更多內(nèi)容加入QQ群【199462590】學(xué)習(xí)。

Image title

 

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

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

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)造沉浸感和趣味性 

Image title

 

場景UI 四項(xiàng)作用:

1、支持微交互

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

3、解釋

4、裝飾

Image title

 

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

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

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

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

3、對象間的層級感和空間感

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

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

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

1.State

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

Image title

 

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

2. Attention

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

Image title

 

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

3. Feedback

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

Image title

 

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

4. Relief

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

Image title

 

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

5. Individuation

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

Image title

為了讓產(chǎn)品更有趣味性,可以在某些場合適當(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ì)是否還是處于一知半解,沒有頭緒,處于迷茫的境界呢?
這都不是問題,希望想學(xué)習(xí)的你,不管是什么基礎(chǔ),或者是想轉(zhuǎn)行都可以加群,更多內(nèi)容加入QQ群【199462590】學(xué)習(xí)。
感謝您的關(guān)注 期待與您一起進(jìn)步!加油

 

本文僅為提供更多信息,不代表AAA教育同意其觀點(diǎn)或描述,如需轉(zhuǎn)載請注明出處。


 

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖