UX中好的動畫的重要性

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

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

　　為什么好的動畫很重要
 

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

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

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

　　使用UX動畫的正確方法
 

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

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

　　以下是將動畫合并到UX設(shè)計(jì)中的一些簡單方法：
 

　　使用使用戶感興趣的加載順序
 

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

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

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

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

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

　　防止用戶迷路
 

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

　　使用反饋來說明已完成的工作
 

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

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

　　在InVision Studio中設(shè)計(jì)動畫
 

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

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

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