設計思考：功能性動畫如何提升用戶體驗？

功能性動畫的每一幀都有其目的，注意每一個細節，讓動畫成為操作過程中一部分。數碼產品的用戶體驗會因為功能性動畫的使用而得到提升。

人類是視覺動物，我們天生就會注意到移動的物體。在app和網頁中，小動畫對我們來說像是眼睛的甜點一樣，我們不自覺的就會被它們吸引。近來，越來越多的設計師將動畫作為一種功能性的元素來提升產品的用戶體驗。動畫不僅僅是裝飾性花瓶的存在了，它成為了提升用戶體驗的一項重要工具。

然而，動畫只有在被合理的使用情況下才可以真正有效的提升用戶體驗。現如今好的UI動畫都有具備功能性。在這篇文章中，我們將探討如何將功能性動畫（functional animation）完美的融合到交互設計中。

什麼是功能性動畫

功能性動畫是一種嵌入UI設計中微妙的動畫，有著明確、合理的目標。

• 它能減少認知負荷。
• 防止頁面轉換視盲。
• 在空間上營造更好的印象。

我們都秉持著「以人為本」的設計理念。用戶的焦點在哪裡，哪裡就應該直觀，反應靈敏和人性化。功能性動畫能幫助我們實現這一點。

功能性動畫在UI設計中所扮演的角色

1.為用戶操作提供視覺反饋

良好的交互設計應該給用戶的每一個操作都提供反饋，無論成功與否。反饋會使用戶覺得自己與屏幕上的元素進行真實互動。功能性動畫可以直觀的演示出這種互動。即便隔著屏幕，也能讓用戶看起來是在直接操作。

而作為系統，當你需要向用戶通知操作的結果時，功能性動畫也是一個很不錯的選擇。當操作沒有成功的時候，功能性動畫可以給用戶一個快速而有簡潔的一個反饋。例如，當我們輸入密碼錯誤的時候，我們採用來回晃動的效果。這個效果會讓我們聯想到日常生活中的擺手和搖頭，而這些都代表著「no」。這些小細節的使用，是打造良好用戶體驗的關鍵。

目的：

• 確認系統接收到用戶的操作；
• 確認（或拒絕）用戶的行為。

2.當前狀態的指示器

給系統當前所處狀態提供一個視覺指引是交互設計中最重要的一點。我們應該讓用戶隨時隨地知道系統當前所處的狀態，而不是讓用戶去猜。

數據的上傳與下載就是一個很好的例子。例如，載入動畫會告訴用戶系統正在下載數據，而且還顯示了下載進程與速度，用戶也對完成時間有了一個大致的期望。

當系統狀態發生重要的變化時，功能性動畫也可以用來提醒用戶。例如，來電提示。

或者，新簡訊提示。

目的：提供實時通知系統狀態，並讓用戶了解正在發生什麼。

3.提示

當用戶第一次使用你的app的時候，如果沒有幫助的話，他們可能會不知道如何操作。

我們應該給用戶提供一些視覺提示來告訴他們哪些操作是可行的。功能性的動畫可以提示用戶去注意那些可以完成的操作。視覺提示可以給用戶告知即將發生的事情。例如，iOS7中相機的這個拍攝動畫。

當一些操作用戶不是很容易發現時，功能性動畫可以演示出操作步驟。

目的：

• 通過給用戶一些線索來創造期望；
• 幫助用戶更好的關注界面；
• 告訴用戶如何能夠和應該與界面上的元素進行交互。

4.導航欄的過渡

導航欄的的轉換是指app中導航菜單狀態的變換。有不同級菜單之間和同級菜單之間的轉換。我們要儘可能的減少那些令人意想不到的過渡效果。功能性動畫可以解釋菜單之間的層級關係，用戶明白菜單轉換的過程中到底發生了什麼。

同級轉換髮生在同一層級間元素的轉換。

功能性動畫可以聚焦用戶的視覺焦點於轉換的元素上，用戶了解整個轉換過程中新的元素來自那裡，舊的元素在哪裡隱藏。它提供了視覺線索，增加了交互的可用性。

目的：

• 闡明界面和元素之間的空間關係；
• 通過幫助用戶理解頁面中發生的變化，避免了令人意想不到的過渡。

5.營造品牌效應

市場上有很多同類型的app，他們有著相同的功能，可能都有著不錯的用戶體驗。但是那些脫穎而出的app肯定在用戶體驗上走得更遠—建立與用戶之間的感情聯繫。

功能性動畫可以成為一個產品的營銷工具，用來表現一家公司的品牌價值或者突出產品的優勢。同時給用戶一種愉快又難忘的用戶體驗。比如Lo-Flo Records網站中，這個動畫會鼓勵用戶進行操作，每一幀都精美的圖案會讓他們期待接下來會看到什麼。

用戶比我們預想中更能注意到頁面中的細節，動畫作為一種交互元素可以向用戶傳遞一種情感。一個風格活潑可愛的下拉載入動畫可以給用戶帶來一個愉快的用戶體驗。

目的：

• 娛樂用戶，在用戶之間產生情感共鳴；
• 創建產品特徵；增加品牌意識。

如何達到平衡

頁面中每一個動畫都應該具有相應的功能，作為一個"花瓶"用來充當美化頁面的動畫不僅無法提升用戶體驗，而且動畫會降低頁面的載入速度。比如下方的一個電子收據動畫，這個動畫看起來很酷炫，但是它的存在使得用戶需要4秒鐘才能看到交易細節。這個等待時間顯然超過了用戶的心裡預期。

用戶點擊進入網站或者使用app是帶有目的性的，他們肯定是為了解決特定的需求。搶火車票，看nba比賽亦或者是買一雙皮鞋。這時候我們的動畫應該幫助用戶了解這個產品的空間構架，幫助他們更快的了解，更好的操作。動畫如果做的太過於絢麗，反而會分散用戶的注意力。只有當動畫有了意義，用戶才不會分心。

再好的動畫被過度使用后，也會讓用戶感覺很厭煩。當我們設計一個動畫的時候，要問自己，「當這個動畫第100次出現的時候，用戶會討厭還是直接無視？」

當我們將動畫引入自己的設計時，前期原型圖的不斷修改和後期用戶測試是必不可免的。如果你的原型圖上可以完成交互操作，那麼就會對整個流程有著一個清晰的認識。你會對動畫使用的時機與位置有著很好的理解。當然為了使動畫與整體風格兼容，你得不斷返工進行修改。重複不斷的修改，不斷的完善細節會創造出優秀的動畫。

總結

功能性動畫的每一幀都有其目的，注意每一個細節，讓動畫成為操作過程中一部分。數碼產品的用戶體驗會因為功能性動畫的使用而得到提升。

本文由 @王M爭 原創發佈於人人都是產品經理。未經許可，禁止轉載。