功能性動畫如何幫助改善用戶體驗

由於人類是視覺驅動的生物，圖像的影響隻有在動畫的幫助下才會增加。我們的眼睛天生就會特別關注移動的物體，而動畫就像糖果一樣，吸引人的注意力，有助於區分應用程序和競爭對手。

截止到目前為止，越來越多的設計師將動畫作為一種功能元素融入其中，以增強用戶體驗。動畫不再隻是為了娛樂；它是完成交互的最重要工具之一。

然而，動畫在設計中隻有用在合適的時間和地點的時候，才能夠增強用戶體驗。好的用戶界麵動畫是有目的的；它們有意義，而且功能性強。在本文中，我們將討論功能動畫在UX設計中的作用，並了解何時將動畫運用到設計中。

什麼是功能動畫？

功能動畫是嵌入在UI設計中的一個微妙元素，它是該設計功能的一部分。並且它強化了設計，具有非常明確和合乎邏輯的目的，包括：

1、減少認知負擔

2、防止變化迷失

3、在空間關係中建立更好的聯係

動畫使用戶界麵栩栩如生。在以用戶為中心的設計方法中，用戶是主要焦點，用戶界麵需要直觀、快速響應和人性化。功能動畫就可以幫助你實現這些目標。

功能動畫在用戶界麵設計中的作用

經過深思熟慮和經過測試的功能動畫有可能實現多種功能。

用戶操作的可視反饋

良好的交互設計提供反饋。這種反饋會讓你覺得你正在與屏幕上的元素進行交互，並演示這種交互的結果（不管它是否成功）。

用戶界麵元素，如按鈕和控件，即使它們位於一層玻璃的後麵，也應該是可感知的。

按鈕和其他活動控件應通過視覺反饋響應用戶操作。（圖片來源：Behance）

當您需要告訴用戶操作結果時，視覺反饋也很很重要。在操作未成功完成的情況下，功能動畫以快速、簡單的方式提供有關問題的信息。例如，當輸入錯誤的密碼時，可以使用震動動畫。這樣很容易理解，因為晃動是一個普遍表達“不”的含義，就像搖頭是人們相互反饋的方式。

用戶看到此動畫並立即了解問題。圖片來源：thekineticui

目的

確認係統已收到用戶的操作。

確認（或拒絕）用戶的操作。

係統狀態的可見性

作為尼爾森的可用性的10大法則之一，係統狀態的可見性仍然是用戶界麵設計中最重要的原則之一。用戶希望在任何給定時間知道他們在係統中的當前位置，並且應用程序不應該讓他們猜測，係統應該通過適當的視覺反饋告訴用戶發生了什麼。

數據上傳和下載得到過程是使用功能動畫的最好時機。例如，下載進度條，給用戶實時反饋和心理預期。

有趣的動畫也會分散用戶的注意力，並使他們等待更長時間。

功能動畫還可以用於吸引用戶注意應用程序中的重要狀態變化，例如來電：

或收件箱中的新電子郵件。

目的：

提供係統狀態的實時通知，並使用戶能夠快速了解正在發生的事情。

視覺提示

用戶在第一次使用某個應用程序時，通常需要一些幫助來理解如何使用該應用程序。特別是含有不熟悉或者獨特交互方式的界麵（如手勢操作的界麵），這一點尤為重要。如果沒有幫助，用戶可能會對如何與應用程序交互感到困惑。

當涉及到教用戶如何使用你的UI界麵時，你應該提供一組視覺提示，來傳達哪些是可能存在的交互。這種功能性動畫驅使用戶注意到可能存在的交互。

視覺提示可以讓用戶了解將要發生的事情。例如，可以在iOS相機應用程序（iOS 7之前）中找到功能動畫，它為用戶拍攝照片做準備。

==相機應用程序中的快門圖像===

或者，通過演示設計中的某些功能是如何工作的，這種方式可以讓用戶采取進一步的步驟。同時，視覺提示也可以提高產品的可用性。

用途：

告訴用戶即將發生什麼給用戶足夠的心理預期  幫助用戶定位自己在界麵中的位置  告訴用戶他們怎樣做才能與屏幕上的元素進行交互

導航過渡

導航過渡是應用程序中狀態之間的轉換，例如，從主屏幕到細節屏幕。通常默認情況下的狀態變化是界麵之間很僵硬的切換，這樣很難區分界麵之間的層級關係。功能動畫可以幫助用戶更好的理解；它可以在導航上下文之間平滑轉換，並通過狀態的轉換創建可視連接來解釋屏幕上的變化。

導航過渡可以是分層轉換（親子過渡）或同行過渡（兄弟過渡）。當用戶探索應用程序的更深層次的時候，將使用分層轉換，這些應用程序是當前（父屏幕）的子級。運動突出顯示從父母到子女（子元素）的移動，同時加強父屏幕和子屏幕之間的關係。

同行過渡發生在層次結構的同一級別的元素之間。例如，當用戶瀏覽選項卡時使用此動畫。

每個標簽的內容和表麵保持在同一級別，動畫隻是引導視圖之間的焦點。

在這兩種情況下，功能動畫都可以幫助眼睛看到新對象在其顯示的位置以及隱藏對象的位置（並且可以再次找到）。它提供了視覺提示，使交互更容易被發現並強調已發生的事情。

用途：

定義屏幕和元素之間的空間關係  通過幫助用戶理解頁麵布局中剛剛發生的變化，避免出現意外的過渡

品牌塑造

通常情況下，有幾十個應用程序具有相同的功能並完成相同的任務。他們可能都有很好的用戶體驗，但是人們喜歡的東西不僅僅是提供一個良好的用戶體驗。用戶更希望與他們建立情感聯係。

品牌動畫負責參與品牌塑造。它可以作為營銷工具-支持公司的品牌價值或突出產品的優勢-同時使用戶體驗變得令人愉快和難忘。這種方法可能不是以用戶為中心的設計，但它有一個功能性的目的。為了成功，品牌動畫應該支持體驗的連續性。

用途：

娛樂用戶，為設計帶來同理心和樂趣  創建產品的標簽; 幫助用戶與產品建立關聯，增加品牌認知度

如何找到平衡

有用和炫酷的動畫之間的平衡在哪裏？花時間仔細考慮動畫何時恰當的何時是不恰當的非常重要的。

動畫的目的

動畫應該是有目的性的，不要為了動而動。當一個動畫不適合某個功能性的目的時，它可能會讓人感到厭煩，尤其是當它減慢了一個沒有任何動畫的過程的時候。

請記住，用戶出於某種目的訪問網站或啟動應用程序 – 我們需要在短時間內向他們展示他們所希望看到的內容。因此，當決定在應用程序中使用動畫時，隻有當動畫有意義並且不會幹擾用戶成功完成他們想要做的事情時，才加入動畫。

時刻牢記

即使是好的動畫，如果使用過度也會很煩人。在設計動畫時，問你自己一個問題：“動畫在第100次使用時會很煩人嗎，或者它是普遍清晰和不引人注目的嗎？

原型和測試動畫

在將UI動畫添加到你自己的工作中時，與實際用戶進行迭代原型設計和測試是非常正確的。原型設計是能夠表達你打算如何在設計中使用動畫的最佳方式。如果你使用交互原型，你將得到一個清晰的設計描述，關於怎樣工作和應用程序的缺陷隱藏在哪裏。通常，這會導致頻繁的返工，因為動畫的外觀與感覺不同。因此，經常迭代和快速迭代！在最微小的細節上多次嚐試和重複都會使你的動畫很棒。

結論

如果你要在設計中運用動畫，那麼應該好好的創造關聯，並且隻有當動畫是設計過程的自然組成部分時，這才是可能的。

作者：Coldrain1
個人主頁：https://i.ui.cn/ucenter/310170.html