動(dòng)畫(huà)是用戶(hù)體驗(yàn)的重要組成部分。當(dāng)涉及到頁(yè)面變換時(shí)，你可以通過(guò)巧妙的動(dòng)畫(huà)與用戶(hù)進(jìn)行交流。發(fā)送消息、打開(kāi)設(shè)置、選中該框、跳轉(zhuǎn)到另一頁(yè)，這些都是變化的時(shí)刻。制作過(guò)渡動(dòng)畫(huà)是強(qiáng)化用戶(hù)體驗(yàn)的絕佳方式。
在本文中，我們看看在常見(jiàn)的情況下，怎么使用動(dòng)畫(huà)讓視覺(jué)和交互變得更好。
表明系統(tǒng)狀態(tài)
當(dāng)用戶(hù)觸發(fā)某些操作時(shí)，他們希望在視覺(jué)上得到回應(yīng)，系統(tǒng)應(yīng)該明確表示它已收到該請(qǐng)求并進(jìn)行處理。以下是通過(guò)動(dòng)畫(huà)反饋提升用戶(hù)體驗(yàn)的幾個(gè)案例。
確認(rèn)用戶(hù)操作。用戶(hù)得到系統(tǒng)收到該操作的確認(rèn)。當(dāng)用戶(hù)有視覺(jué)反饋時(shí)，可以防止他們?cè)俅吸c(diǎn)擊該元素。
下拉刷新，loading動(dòng)畫(huà)反饋可以讓用戶(hù)了解到系統(tǒng)正在處理他們的請(qǐng)求。
加載中，加載也不一定很無(wú)聊。幾乎所有的應(yīng)用程序都可以在加載時(shí)利用巧妙的動(dòng)畫(huà)來(lái)防止用戶(hù)離開(kāi)。加載動(dòng)畫(huà)可以讓用戶(hù)直觀(guān)的得到反饋，因此可以讓用戶(hù)感覺(jué)等待時(shí)間更短。
在多步驟中進(jìn)行連接
有時(shí)用戶(hù)需要一系列的步驟來(lái)完成操作。你應(yīng)該清楚，步驟是相互鏈接的，動(dòng)畫(huà)可以幫助你連接每一步，最后創(chuàng)造出一個(gè)完整的旅程。
下面的動(dòng)畫(huà)完美的詮釋了一系列的流程
動(dòng)畫(huà)可以幫助設(shè)計(jì)師創(chuàng)造漸進(jìn)式的信息展示，逐步展示信息可以減少一次性提供的信息量，使界面更易學(xué)習(xí)。以下是逐漸展示信息的兩個(gè)很好的案例：
導(dǎo)入新的元素
當(dāng)我們?cè)陧?yè)面上引入一個(gè)新元素時(shí)，我們嘗試將用戶(hù)的注意力集中在該對(duì)象上，并幫助他理解為什么我會(huì)看到一個(gè)新對(duì)象。當(dāng)引入新的元素時(shí)，動(dòng)畫(huà)可以幫你定義對(duì)象的層次和結(jié)構(gòu)。
給用戶(hù)進(jìn)行空間定位
動(dòng)畫(huà)可以幫助用戶(hù)建立更好的空間信息心智模型。這對(duì)移動(dòng)用戶(hù)來(lái)說(shuō)尤其重要，在快速操作中，用戶(hù)很容易在屏幕的迷宮中迷路。
我們通過(guò)動(dòng)畫(huà)來(lái)指導(dǎo)用戶(hù)。動(dòng)畫(huà)有助于讓用戶(hù)了解信息是如何從這區(qū)域到達(dá)另一個(gè)區(qū)域。通過(guò)向用戶(hù)提供關(guān)于他們目前正在進(jìn)行的操作的信息，可以防止用戶(hù)迷路。
在下面的例子中，懸浮按鈕在轉(zhuǎn)換，清楚地向用戶(hù)說(shuō)明了這兩個(gè)對(duì)象之間的關(guān)系。
盡量減少認(rèn)知負(fù)荷
認(rèn)知負(fù)荷是使用產(chǎn)品所需的心理消耗量。認(rèn)知負(fù)荷直接影響用戶(hù)與你的應(yīng)用交互方式。一般來(lái)說(shuō)，認(rèn)知負(fù)荷越大，產(chǎn)品就越不理想。
幾乎在任何應(yīng)用中，用戶(hù)都會(huì)填寫(xiě)一些表單。許多表單中都將文本占位作為字段的標(biāo)簽。當(dāng)用戶(hù)點(diǎn)擊這個(gè)字段時(shí)，標(biāo)簽消失。因此，用戶(hù)可能在操作時(shí)忘記了這個(gè)字段代表什么，浮動(dòng)標(biāo)簽可幫用戶(hù)理解上下文，尤其是在使用長(zhǎng)表單時(shí)交互更加舒適。
讓用戶(hù)理解功能變化
當(dāng)元素在交互之后發(fā)生功能改變。例如，當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，該按鈕引起了功能變化，這個(gè)動(dòng)畫(huà)可以清楚的幫助用戶(hù)明白我現(xiàn)在處于什么狀態(tài)。
可以在很多移動(dòng)界面中看到的一個(gè)列子就是切換。動(dòng)畫(huà)可以幫助用戶(hù)了解元素的狀態(tài)。
在某些情況下，單個(gè)元素的功能變化會(huì)導(dǎo)致整個(gè)視圖的變化。例如，一個(gè)漢堡菜單變成x，并轉(zhuǎn)到了一個(gè)新的頁(yè)面。
結(jié)論
動(dòng)畫(huà)是強(qiáng)大的，當(dāng)界面復(fù)雜時(shí)，它解決了許多功能性的問(wèn)題。動(dòng)畫(huà)具有活力并對(duì)用戶(hù)的操作作出了明確的響應(yīng)。
