轉(zhuǎn)場(chǎng)動(dòng)畫(huà)可以通過(guò)很多種方式來(lái)強(qiáng)化用戶(hù)行為，那移動(dòng)應(yīng)用里有些什么轉(zhuǎn)場(chǎng)動(dòng)畫(huà)呢？在這篇文章中，我們將講述當(dāng)功能性的動(dòng)畫(huà)補(bǔ)充視覺(jué)設(shè)計(jì)和支持交互時(shí)的常見(jiàn)情況。

動(dòng)畫(huà)是用戶(hù)體驗(yàn)的重要組成部分。當(dāng)涉及到移動(dòng)應(yīng)用的轉(zhuǎn)場(chǎng)時(shí)，你可以通過(guò)細(xì)致的動(dòng)畫(huà)傳遞豐富的信息。發(fā)送信息、打開(kāi)設(shè)置、點(diǎn)擊復(fù)選框、導(dǎo)航去其他頁(yè)面-這些都是變化的時(shí)刻，對(duì)轉(zhuǎn)場(chǎng)進(jìn)行動(dòng)畫(huà)設(shè)計(jì)是一種強(qiáng)化用戶(hù)行為的絕佳方式。

在這篇文章中，我們將講述當(dāng)功能性的動(dòng)畫(huà)補(bǔ)充視覺(jué)設(shè)計(jì)和支持交互時(shí)的常見(jiàn)情況。

一、提供系統(tǒng)的狀態(tài)

當(dāng)用戶(hù)觸發(fā)了某些操作時(shí)，他們期望得到一個(gè)視覺(jué)反饋，系統(tǒng)需要清晰地表明它已經(jīng)接收到這個(gè)操作請(qǐng)求同時(shí)正在運(yùn)行中。

這里有一些有益于用戶(hù)體驗(yàn)的動(dòng)畫(huà)反饋案例：

1. 確認(rèn)用戶(hù)操作

用戶(hù)得到系統(tǒng)對(duì)于該操作的確認(rèn)，當(dāng)用戶(hù)可以得到有效的視覺(jué)反饋，這就可以防止用戶(hù)重新點(diǎn)擊操作元素。

Notify users of the results of their actions. Image:?Colin?Garven

2. 使用下拉刷新對(duì)于頁(yè)面的內(nèi)容進(jìn)行更新

加載提示的視覺(jué)反饋幫助用戶(hù)理解系統(tǒng)正在對(duì)于用戶(hù)的請(qǐng)求做處理。

Subtle animation helps users understand what is going on. Image:?Ramotion

3. 等待內(nèi)容加載

加載并不一定很枯燥，幾乎所有的移動(dòng)應(yīng)用都可以在頁(yè)面加載時(shí)，利用微妙的動(dòng)畫(huà)來(lái)防止用戶(hù)離開(kāi)。加載動(dòng)畫(huà)可以持續(xù)占據(jù)用戶(hù)的視覺(jué)反饋，結(jié)果就是用戶(hù)感覺(jué)等待的時(shí)間更短。

Animation can keep the user engaged even before the app fully loads. Image:?UI8

二、在任務(wù)流程中連接不同的步驟

有時(shí)用戶(hù)需要一系列的步驟來(lái)完成操作，而這些步驟需要清晰的標(biāo)明他們是緊密相連的，動(dòng)畫(huà)能夠幫助你連接不同的步驟創(chuàng)造一個(gè)完整的體驗(yàn)。

下面是一個(gè)如何利用動(dòng)畫(huà)來(lái)創(chuàng)造連續(xù)線(xiàn)性事件的優(yōu)秀案例：

Image:?Jakub?Antalík

動(dòng)畫(huà)可以幫助設(shè)計(jì)師創(chuàng)造漸進(jìn)式展現(xiàn)，漸進(jìn)式展現(xiàn)通過(guò)減少同一時(shí)間內(nèi)信息量的展現(xiàn)，使界面更加簡(jiǎn)單易學(xué)。

這里有兩個(gè)很好的例子，說(shuō)明使用漸進(jìn)式展現(xiàn)提供有意義的信息塊。

Image:?Anton Skvortsov

三、引入新元素

當(dāng)我們?cè)陧?yè)面上引入一個(gè)新的元素時(shí)，我們嘗試將用戶(hù)的注意力聚焦在這個(gè)對(duì)象上，同時(shí)幫助他們回答這樣一個(gè)問(wèn)題：“為什么我會(huì)看到這個(gè)新對(duì)象”？

動(dòng)畫(huà)可以幫助你在引入新元素時(shí)定義對(duì)象之間的關(guān)系和層級(jí)。

Animation can show where new objects are coming from. Image:?Virgil?Pana

四、提供用戶(hù)空間方位感

動(dòng)畫(huà)能夠幫助用戶(hù)構(gòu)建空間感更好的心智模型，尤其是對(duì)手機(jī)用戶(hù)而言，在小屏幕上進(jìn)行短時(shí)間關(guān)注這種組合方式，很容易導(dǎo)致用戶(hù)在屏幕之間迷失方向。

我們可以用動(dòng)畫(huà)引導(dǎo)用戶(hù)，動(dòng)畫(huà)有助于解釋信息如何從一種狀態(tài)流向另一種狀態(tài)。通過(guò)向用戶(hù)提供關(guān)于他們目前正在進(jìn)行的操作的信息，可以防止用戶(hù)迷失方向。

Orientational animation lets you know where are you now in relation to where you came from. Image:?Jae-seong, Jeong

在接下來(lái)的案例中，浮動(dòng)操作按鈕(FAB)轉(zhuǎn)換到頂部，并向用戶(hù)說(shuō)明這兩個(gè)對(duì)象之間的相互關(guān)系。

Animation can help you build a relationship between elements. Image:?Anish?Chandran

五、減少認(rèn)知負(fù)荷

認(rèn)知負(fù)荷是使用產(chǎn)品所需的腦力勞動(dòng)，認(rèn)知負(fù)荷直接影響用戶(hù)如何輕松地與移動(dòng)應(yīng)用產(chǎn)生交互。一般來(lái)說(shuō)，使用產(chǎn)品的工作量越大，產(chǎn)品就越不理想。

作為設(shè)計(jì)師，我們的目標(biāo)應(yīng)該是創(chuàng)造簡(jiǎn)單易用的界面。如果過(guò)使用得當(dāng)，動(dòng)畫(huà)可以減少用戶(hù)在完成任務(wù)時(shí)的工作量。

在大多數(shù)的移動(dòng)應(yīng)用中，用戶(hù)不得不填寫(xiě)很多表單，許多表單都將文本占位符作為字段區(qū)域的標(biāo)簽。當(dāng)用戶(hù)點(diǎn)擊這些字段區(qū)域時(shí)，標(biāo)簽就會(huì)消失。

結(jié)果就是：用戶(hù)很難弄清這個(gè)字段區(qū)域代表什么，浮動(dòng)標(biāo)簽幫助用戶(hù)理解上下文，同時(shí)讓用戶(hù)在與長(zhǎng)表單發(fā)生交互時(shí)感到舒適。

When it comes to user input, don’t rely on users memory. Make all critical information visible. Image:?MDS

六、幫助用戶(hù)理解功能變化

當(dāng)元素交互后，元素的功能也隨之變化。舉個(gè)例子：當(dāng)用戶(hù)點(diǎn)擊了一個(gè)按鈕后，這個(gè)按鈕就代表了不同的含義，動(dòng)畫(huà)可以幫助用戶(hù)找到“這個(gè)元素現(xiàn)在做什么”的答案。

在手機(jī)界面中，開(kāi)關(guān)就是個(gè)常見(jiàn)的功能性改變的例子，動(dòng)畫(huà)幫助用戶(hù)理解當(dāng)前元素的含義。

Button animates on tap so users can see the change. Image:?Jurre?Houtkamp

在一些案例中，單個(gè)元素的功能性改變會(huì)導(dǎo)致整體界面的變化。例如：漢堡菜單變成“x”同時(shí)激活了新的界面。

Make it clear to users that object utility was changed. Image:?Tamas?Kojo

七、總結(jié)

動(dòng)畫(huà)在復(fù)雜場(chǎng)景中的使用是非常強(qiáng)大的，它解決了界面中很多功能性問(wèn)題，同時(shí)讓用戶(hù)感覺(jué)到產(chǎn)品真實(shí)和真誠(chéng)的反應(yīng)。無(wú)論你設(shè)計(jì)哪一款移動(dòng)應(yīng)用，動(dòng)畫(huà)都將幫助你向用戶(hù)更加有效地講述故事。

原文作者：pazzamanu

原文鏈接：https://uxplanet.org/animated-transitions-in-mobile-apps-412b8e8478e7

譯文作者：pazzamanu

譯文鏈接：https://www.jianshu.com/p/7f6648a09149

本文由 @pazzamanu 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議