武漢卓意設(shè)計(jì)下面重點(diǎn)跟大家闡述一下關(guān)于場(chǎng)景UI 交互動(dòng)效的6個(gè)目的足画、4項(xiàng)作用以及5大應(yīng)用法則。希望對(duì)各位的場(chǎng)景UI交互動(dòng)效設(shè)計(jì)有一定的幫助黎泣。
場(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)過(guò)程
3诉字、解釋
4懦尝、裝飾
Google 的Material Design(2017), 提出在 MD 中，動(dòng)效用來(lái)描述空間關(guān)系壤圃，功能陵霉，富有美感和流動(dòng)性的目標(biāo)。
動(dòng)效顯示 APP 是如何組織的以及它能夠做什么伍绳，具體如下：
1踊挠、引導(dǎo)窗口切換
2、提示用戶接下來(lái)發(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)效展示變化的過(guò)程旺芽，讓用戶更清楚的感知到該變化沪猴。相應(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í)担租，可以通過(guò)動(dòng)效吸引他們的注意力砸民。當(dāng)用戶需要執(zhí)行操作時(shí)，注意 UI 和動(dòng)效的結(jié)合要能告知用戶需要進(jìn)行的操作奋救。
3. Feedback
告訴用戶操作和對(duì)象間的關(guān)系
當(dāng)用戶執(zhí)行了某一操作后阱洪，動(dòng)效是一個(gè)非常好用的反饋機(jī)制。通過(guò)動(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)畫(huà)效果。兩點(diǎn)是筆者覺(jué)得需要注意的捻脖，一是動(dòng)效時(shí)間要足夠短锐峭，二是動(dòng)效要足夠流暢。
需要說(shuō)明的是可婶，這些目的不是獨(dú)立存在的沿癞。設(shè)計(jì)師可以運(yùn)用其中任意幾條去設(shè)計(jì)一個(gè)動(dòng)效。比如矛渴，兩個(gè)窗口間的切換動(dòng)效不僅吸引了用戶的注意力椎扬，告訴用戶面板在切換了。而且還告訴用戶兩個(gè)面板的位置和空間關(guān)系具温，上下蚕涤，左右還是前后。
