5招教你如何用動畫增強用戶體驗

網站或應用里的每一個動畫都會傳達給用戶一些信息,比如“你現在需要看看這個!”或者“你的操作成功啦!”等等。動畫不是用來給用戶看著玩的,而是要幫助用戶理解發生了什么,并指導他們高效地使用你的應用。正如Zurb所說:

作為一個設計者,我們要做的已不再是把內容放在屏幕里給用戶看,而是要通過動畫等手段來幫助用戶理解屏幕上的內容。


動畫集美觀與實用于一身,用途非常廣泛。它可以影響用戶行為,可以呈現數據的狀態,也可以吸引用戶的注意,還可以幫助用戶看到他們操作的結果。下面這5招可以幫助大家通過動畫來增強用戶體驗,每一招都配有示例進行說明,希望可以幫助大家改進自己的設計。




加載過程不要太無聊

码报开奖结果本期 www.iwqgw.icu 如果你的應用有不可避免的加載延遲的話,那么務必在內容加載出來之前配上加載動畫,不要讓用戶干等著。但是也不要用一個“旋轉的圈圈”(最常見但卻是最乏味的loading動畫)敷衍了事。不論是什么網站或應用都可以根據內容的特點來搭一個“架子”(或者叫骨架、模板)。像下面左邊這個示例一樣,將加載好的內容逐個放到“架子”里展示,比一下子呈現所有內容(下面右邊的示例那樣)要更好一些。


使切換動畫流暢自然

給導航欄的切換配上流暢自然的動畫可以使用戶明白從哪切換到了哪。優秀的設計能夠讓用戶清楚地知道應該關注哪些內容。Adrian Zumbrunnen提供了一個很不錯的例子。當用戶點擊一個鏈接時,滾動動畫可以幫助用戶了解點擊前后分別看了哪部分內容。比較下面兩個例子,高下立判。自然流暢的過渡動畫可以幫助用戶理解頁面上內容的順序,同時還能告訴用戶接下來該看什么。


這個是不帶動畫的切換:

下面這個是帶滾動動畫的切換:



說明元素之間的關系

優秀的動畫可以改善用戶的操作體驗。比如在用戶點擊之后,一個菜單圖標流暢地變成一個播放按鈕,并在暫?;蛘咄V共シ諾氖焙蛟儔浠乩矗ㄈ縵巒妓荊?。這種圖標之間的互相轉化可以幫助用戶理解兩個圖標的功能,同時還能表示他們“不能同時出現”且“控制的是同一個播放器”的關系。


再看一個Material Design的例子。點擊一個浮動的“+”按鈕之后會彈出一個菜單,同時它會變成一個顏色明顯區別于其他菜單圖標的鉛筆圖標。這暗示了鉛筆代表的“編輯”功能是這個菜單的主要功能。這種細節可以幫助用戶理解每個圖標的含義及優先級,而不是讓用戶去猜這些按鈕的功能。



出錯時給用戶一個反饋

優秀的動畫可以提升用戶的輸入體驗,比如我們可以利用動畫來增強表單輸入的效果。如果用戶輸入正確,那么在用戶完成輸入的時候表單會“點頭”。相反,如果用戶輸入錯誤,那么表單就會“搖頭”??吹秸庵侄蠢≈笥沒砩暇湍苤朗淙氳慕峁欠裾?。



操作完成時給用戶一個反饋

優秀的動畫可以讓用戶看到他們操作的結果。遵循“用圖形展示而不是用文字說明”的原則可以給用戶提供體驗良好的操作完成反饋。在下面這個例子中,當用戶點擊“Pay”(支付)之后,在提示支付成功之前會出現一個打對勾的動畫。這個簡短的小動畫可以讓用戶覺得支付過程非常輕松、快捷。這種看似不起眼的小細節其實可以大大增強用戶體驗。




結語

動畫效果用好了可以起到非常棒的效果。設計者必須要花時間琢磨自己設計的動畫是否合理。在你剛一開始設計的時候就要思考如何設計動畫,同時還要考慮動畫是否流暢自然、是否符合自己的設計需求。設計不僅僅要考慮視覺效果。正如喬布斯所說:

“設計不僅僅要考慮看上去怎么樣和帶給人什么感覺,還要考慮它的作用到底是什么?!?/p>

來源:igeekbar

上一篇: 第四屆中國用戶體驗峰會將于11月在北京舉行

下一篇: 設計記錄!10年網頁設計都發生了什么變化?

分享到: 更多
彩票数据分析软件 七乐彩结果彩票 欢乐二八杠完美作弊器下载 排三六码历史最大遗漏 湖北快三计划软件下载 时时彩稳赚不赔之定胆技巧 浙江大乐透基本走势图 夫人猛料六肖中特 时时彩稳赚不赔杀号 时时彩倍投方法和投资策略 两张扑克牌比大小怎么玩 熊猫计划软件免费版 香港正版刘伯温四不像一肖 香港管家婆四??像 时时彩组六固定杀一码 七星彩永久规律