場(chǎng)景UI 交互動(dòng)效的首要目標(biāo)應(yīng)是支持和增強(qiáng)用戶在狀態(tài)間的轉(zhuǎn)化，在進(jìn)行場(chǎng)景UI 交互動(dòng)效設(shè)計(jì)時(shí)，通常遵循著6個(gè)目的、4項(xiàng)作用以及5大應(yīng)用法則：

?

動(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 的4項(xiàng)作用：

1、支持微交互

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

3、解釋

4、裝飾

?

動(dòng)效具備描述空間關(guān)系，功能，富有美感和流動(dòng)性的目標(biāo)。動(dòng)效顯示了 APP 是如何組織的，動(dòng)效時(shí)刻在提示、引導(dǎo)用戶：

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

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

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

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

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

在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，動(dòng)效設(shè)計(jì)應(yīng)遵循5大法則：

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òng)效能夠有效描述物體之間的邏輯關(guān)系，同時(shí)通過視覺效果，可視化的描述用戶操作時(shí)候當(dāng)前的狀態(tài)，用戶可以很清晰的感受到物體與物體之間的位置或者層級(jí)關(guān)系。

在常見的動(dòng)效設(shè)計(jì)案例中，有12種經(jīng)典動(dòng)效設(shè)計(jì)：

?

1.滑動(dòng)

信息列表會(huì)跟隨著用戶的交互手勢(shì)而動(dòng)，然后卡片到相應(yīng)的位置上，保持整齊感，它屬于指向型動(dòng)畫，物體的滑動(dòng)取決于用戶是用那種手勢(shì)滑動(dòng)的。它的作用就是通過指向型轉(zhuǎn)場(chǎng)，有效幫助用戶清理頁面層級(jí)的排列情況。

?

2.擴(kuò)大

頁面中的卡片會(huì)從縮略圖轉(zhuǎn)化為全屏視圖（一般這個(gè)卡片的中心點(diǎn)也會(huì)跟隨移動(dòng)到屏幕的中央）。反向動(dòng)效就是卡片從全屏視圖轉(zhuǎn)換為縮略圖。它的優(yōu)點(diǎn)是能清楚的告訴用戶點(diǎn)擊的地方被放大了。

?

3.最小化

頁面元素點(diǎn)擊之后縮小，然后移動(dòng)到屏幕上相應(yīng)的位置，相反的動(dòng)效就是擴(kuò)大，從縮略圖重新變?yōu)槿?。這樣做的好處是能夠清楚的告訴用戶，最小化的元素可以在哪里被找到，如果沒有動(dòng)效引導(dǎo)，可能用戶需要花時(shí)間去尋找。

?

4.切換對(duì)象

當(dāng)前頁面移動(dòng)到后面，新的頁面移動(dòng)到前面，這樣能夠清楚解釋頁面之間是進(jìn)行切換的，不會(huì)顯得轉(zhuǎn)換的太突兀和莫名其妙。

5.展開推疊

堆疊在一起的元素被展開。能夠清楚的告訴用戶每個(gè)元素的排列情況，從哪里來到哪里去，也顯得更加有趣。

?

6.翻頁

當(dāng)用戶實(shí)施滑動(dòng)手勢(shì)的時(shí)候，出現(xiàn)像現(xiàn)實(shí)生活中翻頁一般的效果。真正動(dòng)效轉(zhuǎn)場(chǎng)也能夠清晰的展現(xiàn)列表層級(jí)的信息架構(gòu)，并且模仿現(xiàn)實(shí)生活中的動(dòng)效更加富有情感。

?

7.添加到列表

新的元素加入到原有的列表中，舊的元素被推開而不是替換，從而有現(xiàn)實(shí)中騰出位置的感覺，這種轉(zhuǎn)場(chǎng)效果能夠清楚的展現(xiàn)列表重新排列的過程，讓用戶知道新舊信息的位置，不會(huì)產(chǎn)生迷惑。

?

8.導(dǎo)航標(biāo)簽轉(zhuǎn)換

根據(jù)內(nèi)容的轉(zhuǎn)換，按鈕相應(yīng)的在視覺上做出改變，而標(biāo)題是隨著內(nèi)容移動(dòng)而改變的，這樣能夠清晰的展示標(biāo)簽和內(nèi)容之間的從屬關(guān)系，讓用戶能夠清晰理解頁面之間的架構(gòu)。

?

9.融合

元素會(huì)根據(jù)用戶的點(diǎn)擊交互而分離或者是結(jié)合，用戶可以感受到元素與元素之間的關(guān)聯(lián)，比起直接切換，顯然用融合動(dòng)畫更加有趣。

?

10.滾動(dòng)

根據(jù)用戶的手勢(shì)進(jìn)行滾動(dòng)操作，非常使用與列表信息的查看。這個(gè)交互方式是我們用的最頻繁的，我們也可以加入一些動(dòng)效使這個(gè)交互更加的有趣和豐富。

?

11.平移

當(dāng)一張圖片在我們有限的屏幕里沒有辦法看完的時(shí)候，會(huì)使用這樣的效果。除了放大效果，這樣的平移還可以加上動(dòng)效配合一些功能使用。

?

12.保存指示器

用戶一旦進(jìn)行保存、下載某個(gè)物體，物體會(huì)復(fù)制一份，同時(shí)縮小、移動(dòng)到保存指示器中。這樣可以提示用戶下載或者是收藏的內(nèi)容在哪里可以找到，能夠告訴用戶對(duì)象已經(jīng)被添加。

?

標(biāo)簽：