UX中好的動(dòng)畫(huà)的重要性

　　與精心設(shè)計(jì)的動(dòng)畫(huà)相比，數(shù)字產(chǎn)品中的事物更令人愉悅。他們使我們咧嘴笑，并幫助我們了解產(chǎn)品。但是，動(dòng)畫(huà)不僅是誘發(fā)微笑的事后思考。良好的功能動(dòng)畫(huà)使用戶(hù)界面更具吸引力和可用性。本文AAA教育的武老師對(duì)UX中好的動(dòng)畫(huà)的重要性進(jìn)行分享。
 

　　當(dāng)我們談?wù)摴δ軇?dòng)畫(huà)時(shí)，我們所談?wù)摰氖蔷哂忻鞔_邏輯目的的微妙動(dòng)畫(huà)類(lèi)型。它減少了認(rèn)知負(fù)擔(dān)，防止了變更盲目性，并且建立了對(duì)空間關(guān)系的更好理解。簡(jiǎn)而言之，動(dòng)畫(huà)使用戶(hù)界面栩栩如生。
 

　　為什么好的動(dòng)畫(huà)很重要
 

　　當(dāng)談到出色的UX設(shè)計(jì)時(shí)，動(dòng)畫(huà)可以具有多種用途，UI動(dòng)畫(huà)很重要。首先，它可以展示或推斷功能。從某種意義上說(shuō)，它起著小型隨身攜帶的作用。此外，它可以增加一層樂(lè)趣和樂(lè)趣。它還可以為交互提供保證和意義。UX設(shè)計(jì)和UI設(shè)計(jì)。
 

　　當(dāng)您執(zhí)行某項(xiàng)操作時(shí)會(huì)感到很自在，并且動(dòng)畫(huà)暗示發(fā)生了預(yù)期的結(jié)果，例如刪除某項(xiàng)后該項(xiàng)逐漸消失或滑出屏幕。它比在頁(yè)面上的項(xiàng)目重新排序時(shí)簡(jiǎn)單地消失一個(gè)項(xiàng)目要少得多。動(dòng)畫(huà)使我們不僅可以釋放設(shè)計(jì)中的含義，還可以提供新的交互模型。
 

　　相關(guān)：5個(gè)正確完成網(wǎng)絡(luò)動(dòng)畫(huà)的示例
 

　　使用UX動(dòng)畫(huà)的正確方法
 

　　動(dòng)畫(huà)是對(duì)內(nèi)容的有用補(bǔ)充，它在使UX更清晰方面扮演了次要角色。網(wǎng)站的功能，布局和導(dǎo)航的設(shè)計(jì)應(yīng)具有可用性，而動(dòng)畫(huà)可以填補(bǔ)空白。
 

　　我們內(nèi)部的一位資深設(shè)計(jì)師Steven Fabre說(shuō)：“好的動(dòng)畫(huà)是看不見(jiàn)的。您應(yīng)該不會(huì)注意到正在看動(dòng)畫(huà)。您要確保動(dòng)畫(huà)的時(shí)間安排和緩動(dòng)是正確的。在現(xiàn)實(shí)生活中，事情永遠(yuǎn)不會(huì)出現(xiàn)并突然停止。當(dāng)您停下汽車(chē)時(shí)，您走的越來(lái)越慢，然后停下。屏幕上應(yīng)該發(fā)生同樣的事情。”
 

　　以下是將動(dòng)畫(huà)合并到UX設(shè)計(jì)中的一些簡(jiǎn)單方法：
 

　　使用使用戶(hù)感興趣的加載順序
 

　　各種研究表明，超過(guò)40%的用戶(hù)期望網(wǎng)頁(yè)或應(yīng)用在2秒或更短的時(shí)間內(nèi)加載。如果花費(fèi)超過(guò)4秒鐘，普通用戶(hù)就會(huì)開(kāi)始感到沮喪。8秒后，他們離開(kāi)。只需將網(wǎng)站速度延遲一秒鐘，就可以將客戶(hù)轉(zhuǎn)化率降低7%。加載時(shí)間對(duì)于您的網(wǎng)站，應(yīng)用或程序的成功至關(guān)重要，并且如果您可以讓用戶(hù)保持這幾秒鐘/毫秒的速度，甚至更好。
 

　　根據(jù)用戶(hù)應(yīng)關(guān)注的位置進(jìn)行動(dòng)畫(huà)處理
 

　　通常打開(kāi)一個(gè)應(yīng)用程序或網(wǎng)頁(yè)時(shí)，你在呈現(xiàn)畫(huà)面充滿(mǎn)項(xiàng)目，而你不知道從哪里開(kāi)始。動(dòng)畫(huà)解救!幫助用戶(hù)的一種好方法是提供有關(guān)這些對(duì)象的適當(dāng)性的線索。如何讓動(dòng)畫(huà)更有吸引力。
 

　　如果您有帖子列表，則滑動(dòng)它們(而不是僅顯示它們)可以幫助您的用戶(hù)理解他們可以不斷滑動(dòng)以查看更多內(nèi)容。您甚至可以通過(guò)定時(shí)項(xiàng)目的外觀來(lái)添加另一層動(dòng)畫(huà)，以使它們一個(gè)接一個(gè)地滑動(dòng)。這種動(dòng)畫(huà)風(fēng)格可以增強(qiáng)這些項(xiàng)目是分開(kāi)的，并且用戶(hù)可以單獨(dú)與每個(gè)項(xiàng)目進(jìn)行交互。
 

　　“當(dāng)談到出色的UX設(shè)計(jì)時(shí)，動(dòng)畫(huà)可以是多用途的。”
 

　　防止用戶(hù)迷路
 

　　一旦清理完用戶(hù)體驗(yàn)到幾乎無(wú)縫的程度，給用戶(hù)提供空間意識(shí)就變得至關(guān)重要?？紤]一下：如果一個(gè)對(duì)象從屏幕向左移出，則應(yīng)從其退出的空間重新進(jìn)入(如有必要)。這將幫助您的用戶(hù)了解您的應(yīng)用程序的工作原理，并使他們?cè)谂c應(yīng)用程序進(jìn)行交互時(shí)感到更加自在。UX設(shè)計(jì)用戶(hù)體驗(yàn)。
 

　　使用反饋來(lái)說(shuō)明已完成的工作
 

　　TomTom首席設(shè)計(jì)師JoséTorre表示：“在您的手指經(jīng)常遮住您按下的按鈕的世界中，動(dòng)畫(huà)在為用戶(hù)提供所需的保證方面發(fā)揮了巨大作用。”為什么選擇UX設(shè)計(jì)。
 

　　動(dòng)畫(huà)可以提供視覺(jué)反饋，顯示網(wǎng)站何時(shí)正常工作。正如 尼爾森·諾曼集團(tuán)(Nielsen Norman Group)的凱蒂·謝文(Katie Sherwin)所說(shuō)，這可以“通知用戶(hù)當(dāng)前的工作狀態(tài)，并通過(guò)減少不確定性來(lái)使該過(guò)程對(duì)用戶(hù)更具耐受性”。只是不要太可愛(ài)或占用太多時(shí)間。這些因素可能會(huì)使動(dòng)畫(huà)變得過(guò)時(shí)。
 

　　在InVision Studio中設(shè)計(jì)動(dòng)畫(huà)
 

　　在決定如何在InVision Studio中實(shí)現(xiàn)動(dòng)畫(huà)設(shè)計(jì)時(shí)，我們對(duì)所有這些實(shí)踐進(jìn)行了漫長(zhǎng)而艱辛的思考。Studio是一個(gè)以動(dòng)畫(huà)為核心的設(shè)計(jì)工具，因此您不必?fù)?dān)心切換工具。您可以專(zhuān)注于工作并保持這種狀態(tài)。
 

　　從第一次打開(kāi)Studio以來(lái)，您只需連接要設(shè)置動(dòng)畫(huà)的屏幕即可，并且可以正常工作。走出大門(mén)。我們有一個(gè)算法可以匹配圖層并自動(dòng)在它們之間創(chuàng)建連接。如果愿意，您可以通過(guò)緩動(dòng)曲線，各個(gè)圖層的時(shí)序等等來(lái)更深入地挖掘和微調(diào)動(dòng)畫(huà)。
 

　　如果需要，您可以使用數(shù)百個(gè)屏幕創(chuàng)建非常大的流。使用Studio，您可以真正了解整個(gè)設(shè)計(jì)的感覺(jué)，如果需要，則可以進(jìn)行更深入的研究，并研究特定區(qū)域的微交互和動(dòng)畫(huà)。這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~