和朋友聊天時如何表達自己?最有可能的是,進行眼神交流,微笑,大笑,并運用輕微的身體情感來表達您的興趣,并參與他們所說的話。
 
這些微妙的舒適和放心行為在我們的社交習慣中根深蒂固,您甚至可能根本沒有注意到自己正在這樣做。然而,它們是維持有意義的關系的基本技能。同樣,動畫可以為設計增添生氣,提供上下文并為用戶與界面交互的方式提供溫暖。
 
交互動畫
 
什么是設計動畫?
 
設計動畫描述了如何使用移動數字圖像來補充數字設計。好的設計動畫既實用又令人愉悅,是一項受歡迎的功能,可以增強您的網站或應用程序的整體可用性。
 
UX in Motion的 創始人,前IDEO顧問Issara Willenskomer 已經確定了設計動畫支持可用性的四種方式:
1.期望。設計動畫可以縮短用戶感知對象是什么以及對象實際行為之間的距離。它設定了期望。
2.連續性 設計動畫可以增加用戶流程和用戶旅程的一致性。它創造了全面的體驗。
3.敘述性的。設計動畫可以幫助連接構成用戶體驗的線性事件和時刻。它講一個故事。
4.關系。設計動畫可以彌合用戶理解和界面之間的差距。它指導用戶做出的決策。
 
一些交互動畫效果
 
為什么要使用設計動畫
 
在人們與gif進行完整對話的世界中,可以肯定地說設計動畫不再新穎。可以預料的 如果操作正確,它可以使您的網站或應用更易于使用,同時使每次交互都充滿愉悅的目的。設計動畫就像設計工具的瑞士軍刀一樣:它的多功能性使其可以改善您設計的幾乎每個部分的體驗。這就是為什么它如此重要的原因。在“ UX中優秀動畫的重要性”中,InVision內容策略師Will Fanguy分解了動畫如何使用戶體驗更好:當我們談論功能動畫時,我們所談論的是具有明確邏輯目的的細微動畫類型。它減少了認知負擔,防止了變更盲目性,并建立了對空間關系的更好理解。
 
如果只是偶爾將動畫放入設計中,則設計動畫就沒有好處。它必須是有用的,它可以支持用戶執行的操作,并幫助他們更有效地從A點到達B點。

引導式設計動畫

設計動畫可創建更無縫的導航體驗。門是逐漸打開的,而不是突然打開的。沒有人愿意每次打開門都尖叫,因為它會不斷從鉸鏈上飛出或撞到墻上。以類似的方式,設計動畫可以幫助您的用戶在瀏覽您的網站或應用程序時輕松過渡。通過將用戶從界面的一部分連接到另一部分,可以增強用戶的空間意識。
 
設計動畫為用戶提供了關鍵的視覺確認和反饋,其中包括:
是,該網站正在正常運行,并具有您期望的方式,或者
否,您對界面的這一部分所做的操作不正確。請嘗試其他方法。
 
屏幕后面的按鈕和控件對用戶來說可能太過靜態。設計動畫使這些圖像具有所需的動感,以便讓用戶知道它們正在與您的界面正確地實時交互。懸停動畫是一個很好的例子,說明如何向用戶顯示他們正在有效地操作界面。拉動刷新動畫和密碼搖動也是設計動畫可以確認或拒絕用戶操作的有用方式。

懸停設計動畫

設計動畫可以加深您的用戶對正在發生的事情的了解。例如,動畫加載條對過程需要多長時間設定了合理的期望,而動畫通知則為用戶提供了他們實時接收的信息的準確刻畫。當您提供狀態更新時,有趣的動畫可以使您分心。就像拿著音樂。如果有人將您置于保持狀態而您聽到靜音,則您可能會掛斷電話,因為您認為呼叫已斷開。保持音樂可以讓您不必等待而感到沮喪。Domino的Pizza Tracker是一個很好的例子,它展示了有趣的設計動畫如何為用戶提供所需的信息,同時提供視覺上的舒適感。他們將常見的挫敗感(無法知道您的比薩餅何時上路)變成了令人愉悅且令人放心的互動。

如何制作設計動畫
 
為了發揮其全部潛力,從一開始,設計動畫就應該成為可用性工作流程的一部分。當您繪制站點的功能,布局和導航的地圖時,請注意功能動畫可以在哪些地方增加用戶體驗的價值。
 
設計動畫案例