設(shè)計思考:功能性動畫如何提升用戶體驗?
功能性動畫的每一幀都有其目的,注意每一個細節(jié),讓動畫成為操作過程中一部分。數(shù)碼產(chǎn)品的用戶體驗會因為功能性動畫的使用而得到提升。
人類是視覺動物,我們天生就會注意到移動的物體。在app和網(wǎng)頁中,小動畫對我們來說像是眼睛的甜點一樣,我們不自覺的就會被它們吸引。近來,越來越多的設(shè)計師將動畫作為一種功能性的元素來提升產(chǎn)品的用戶體驗。動畫不僅僅是裝飾性花瓶的存在了,它成為了提升用戶體驗的一項重要工具。
然而,動畫只有在被合理的使用情況下才可以真正有效的提升用戶體驗?,F(xiàn)如今好的UI動畫都有具備功能性。在這篇文章中,我們將探討如何將功能性動畫(functional animation)完美的融合到交互設(shè)計中。
什么是功能性動畫
功能性動畫是一種嵌入UI設(shè)計中微妙的動畫,有著明確、合理的目標。
- 它能減少認知負荷。
- 防止頁面轉(zhuǎn)換視盲。
- 在空間上營造更好的印象。
我們都秉持著“以人為本”的設(shè)計理念。用戶的焦點在哪里,哪里就應(yīng)該直觀,反應(yīng)靈敏和人性化。功能性動畫能幫助我們實現(xiàn)這一點。
功能性動畫在UI設(shè)計中所扮演的角色
1.為用戶操作提供視覺反饋
良好的交互設(shè)計應(yīng)該給用戶的每一個操作都提供反饋,無論成功與否。反饋會使用戶覺得自己與屏幕上的元素進行真實互動。功能性動畫可以直觀的演示出這種互動。即便隔著屏幕,也能讓用戶看起來是在直接操作。
而作為系統(tǒng),當(dāng)你需要向用戶通知操作的結(jié)果時,功能性動畫也是一個很不錯的選擇。當(dāng)操作沒有成功的時候,功能性動畫可以給用戶一個快速而有簡潔的一個反饋。例如,當(dāng)我們輸入密碼錯誤的時候,我們采用來回晃動的效果。這個效果會讓我們聯(lián)想到日常生活中的擺手和搖頭,而這些都代表著“no”。這些小細節(jié)的使用,是打造良好用戶體驗的關(guān)鍵。
目的:
- 確認系統(tǒng)接收到用戶的操作;
- 確認(或拒絕)用戶的行為。
2.當(dāng)前狀態(tài)的指示器
給系統(tǒng)當(dāng)前所處狀態(tài)提供一個視覺指引是交互設(shè)計中最重要的一點。我們應(yīng)該讓用戶隨時隨地知道系統(tǒng)當(dāng)前所處的狀態(tài),而不是讓用戶去猜。
數(shù)據(jù)的上傳與下載就是一個很好的例子。例如,加載動畫會告訴用戶系統(tǒng)正在下載數(shù)據(jù),而且還顯示了下載進程與速度,用戶也對完成時間有了一個大致的期望。
當(dāng)系統(tǒng)狀態(tài)發(fā)生重要的變化時,功能性動畫也可以用來提醒用戶。例如,來電提示。
或者,新短信提示。
目的:提供實時通知系統(tǒng)狀態(tài),并讓用戶了解正在發(fā)生什么。
3.提示
當(dāng)用戶第一次使用你的app的時候,如果沒有幫助的話,他們可能會不知道如何操作。
我們應(yīng)該給用戶提供一些視覺提示來告訴他們哪些操作是可行的。功能性的動畫可以提示用戶去注意那些可以完成的操作。視覺提示可以給用戶告知即將發(fā)生的事情。例如,iOS7中相機的這個拍攝動畫。
當(dāng)一些操作用戶不是很容易發(fā)現(xiàn)時,功能性動畫可以演示出操作步驟。
目的:
- 通過給用戶一些線索來創(chuàng)造期望;
- 幫助用戶更好的關(guān)注界面;
- 告訴用戶如何能夠和應(yīng)該與界面上的元素進行交互。
4.導(dǎo)航欄的過渡
導(dǎo)航欄的的轉(zhuǎn)換是指app中導(dǎo)航菜單狀態(tài)的變換。有不同級菜單之間和同級菜單之間的轉(zhuǎn)換。我們要盡可能的減少那些令人意想不到的過渡效果。功能性動畫可以解釋菜單之間的層級關(guān)系,用戶明白菜單轉(zhuǎn)換的過程中到底發(fā)生了什么。
同級轉(zhuǎn)換發(fā)生在同一層級間元素的轉(zhuǎn)換。
功能性動畫可以聚焦用戶的視覺焦點于轉(zhuǎn)換的元素上,用戶了解整個轉(zhuǎn)換過程中新的元素來自那里,舊的元素在哪里隱藏。它提供了視覺線索,增加了交互的可用性。
目的:
- 闡明界面和元素之間的空間關(guān)系;
- 通過幫助用戶理解頁面中發(fā)生的變化,避免了令人意想不到的過渡。
5.營造品牌效應(yīng)
市場上有很多同類型的app,他們有著相同的功能,可能都有著不錯的用戶體驗。但是那些脫穎而出的app肯定在用戶體驗上走得更遠—建立與用戶之間的感情聯(lián)系。
功能性動畫可以成為一個產(chǎn)品的營銷工具,用來表現(xiàn)一家公司的品牌價值或者突出產(chǎn)品的優(yōu)勢。同時給用戶一種愉快又難忘的用戶體驗。比如Lo-Flo Records網(wǎng)站中,這個動畫會鼓勵用戶進行操作,每一幀都精美的圖案會讓他們期待接下來會看到什么。
用戶比我們預(yù)想中更能注意到頁面中的細節(jié),動畫作為一種交互元素可以向用戶傳遞一種情感。一個風(fēng)格活潑可愛的下拉加載動畫可以給用戶帶來一個愉快的用戶體驗。
目的:
- 娛樂用戶,在用戶之間產(chǎn)生情感共鳴;
- 創(chuàng)建產(chǎn)品特征;增加品牌意識。
如何達到平衡
頁面中每一個動畫都應(yīng)該具有相應(yīng)的功能,作為一個”花瓶”用來充當(dāng)美化頁面的動畫不僅無法提升用戶體驗,而且動畫會降低頁面的加載速度。比如下方的一個電子收據(jù)動畫,這個動畫看起來很酷炫,但是它的存在使得用戶需要4秒鐘才能看到交易細節(jié)。這個等待時間顯然超過了用戶的心里預(yù)期。
用戶點擊進入網(wǎng)站或者使用app是帶有目的性的,他們肯定是為了解決特定的需求。搶火車票,看nba比賽亦或者是買一雙皮鞋。這時候我們的動畫應(yīng)該幫助用戶了解這個產(chǎn)品的空間構(gòu)架,幫助他們更快的了解,更好的操作。動畫如果做的太過于絢麗,反而會分散用戶的注意力。只有當(dāng)動畫有了意義,用戶才不會分心。
再好的動畫被過度使用后,也會讓用戶感覺很厭煩。當(dāng)我們設(shè)計一個動畫的時候,要問自己,“當(dāng)這個動畫第100次出現(xiàn)的時候,用戶會討厭還是直接無視?”
當(dāng)我們將動畫引入自己的設(shè)計時,前期原型圖的不斷修改和后期用戶測試是必不可免的。如果你的原型圖上可以完成交互操作,那么就會對整個流程有著一個清晰的認識。你會對動畫使用的時機與位置有著很好的理解。當(dāng)然為了使動畫與整體風(fēng)格兼容,你得不斷返工進行修改。重復(fù)不斷的修改,不斷的完善細節(jié)會創(chuàng)造出優(yōu)秀的動畫。
總結(jié)
功能性動畫的每一幀都有其目的,注意每一個細節(jié),讓動畫成為操作過程中一部分。數(shù)碼產(chǎn)品的用戶體驗會因為功能性動畫的使用而得到提升。
本文由 @王M爭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
文章不錯,短小精悍