截止到目前為止，越來越多的設(shè)計(jì)師將動畫作為一種功能元素融入其中，以增強(qiáng)用戶體驗(yàn)。動畫不再只是為了娛樂；它是完成交互的最重要工具之一。

然而，動畫在設(shè)計(jì)中只有用在合適的時間和地點(diǎn)的時候，才能夠增強(qiáng)用戶體驗(yàn)。好的用戶界面動畫是有目的的；它們有意義，而且功能性強(qiáng)。在本文中，我們將討論功能動畫在UX設(shè)計(jì)中的作用，并了解何時將動畫運(yùn)用到設(shè)計(jì)中。

什么是功能動畫？

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

1、減少認(rèn)知負(fù)擔(dān)

2、防止變化迷失

3、在空間關(guān)系中建立更好的聯(lián)系

動畫使用戶界面栩栩如生。在以用戶為中心的設(shè)計(jì)方法中，用戶是主要焦點(diǎn)，用戶界面需要直觀、快速響應(yīng)和人性化。功能動畫就可以幫助你實(shí)現(xiàn)這些目標(biāo)。

功能動畫在用戶界面設(shè)計(jì)中的作用

經(jīng)過深思熟慮和經(jīng)過測試的功能動畫有可能實(shí)現(xiàn)多種功能。

用戶操作的可視反饋

良好的交互設(shè)計(jì)提供反饋。這種反饋會讓你覺得你正在與屏幕上的元素進(jìn)行交互，并演示這種交互的結(jié)果（不管它是否成功）。

用戶界面元素，如按鈕和控件，即使它們位于一層玻璃的后面，也應(yīng)該是可感知的。

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

當(dāng)您需要告訴用戶操作結(jié)果時，視覺反饋也很很重要。在操作未成功完成的情況下，功能動畫以快速、簡單的方式提供有關(guān)問題的信息。例如，當(dāng)輸入錯誤的密碼時，可以使用震動動畫。這樣很容易理解，因?yàn)榛蝿邮且粋€普遍表達(dá)“不”的含義，就像搖頭是人們相互反饋的方式。

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

目的

確認(rèn)系統(tǒng)已收到用戶的操作。

確認(rèn)（或拒絕）用戶的操作。

系統(tǒng)狀態(tài)的可見性

作為尼爾森的可用性的10大法則之一，系統(tǒng)狀態(tài)的可見性仍然是用戶界面設(shè)計(jì)中最重要的原則之一。用戶希望在任何給定時間知道他們在系統(tǒng)中的當(dāng)前位置，并且應(yīng)用程序不應(yīng)該讓他們猜測，系統(tǒng)應(yīng)該通過適當(dāng)?shù)囊曈X反饋告訴用戶發(fā)生了什么。

數(shù)據(jù)上傳和下載得到過程是使用功能動畫的最好時機(jī)。例如，下載進(jìn)度條，給用戶實(shí)時反饋和心理預(yù)期。

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

功能動畫還可以用于吸引用戶注意應(yīng)用程序中的重要狀態(tài)變化，例如來電：

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

目的：

提供系統(tǒng)狀態(tài)的實(shí)時通知，并使用戶能夠快速了解正在發(fā)生的事情。

視覺提示

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

當(dāng)涉及到教用戶如何使用你的UI界面時，你應(yīng)該提供一組視覺提示，來傳達(dá)哪些是可能存在的交互。這種功能性動畫驅(qū)使用戶注意到可能存在的交互。

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

==相機(jī)應(yīng)用程序中的快門圖像===

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

用途：

告訴用戶即將發(fā)生什么給用戶足夠的心理預(yù)期  幫助用戶定位自己在界面中的位置  告訴用戶他們怎樣做才能與屏幕上的元素進(jìn)行交互

導(dǎo)航過渡

導(dǎo)航過渡是應(yīng)用程序中狀態(tài)之間的轉(zhuǎn)換，例如，從主屏幕到細(xì)節(jié)屏幕。通常默認(rèn)情況下的狀態(tài)變化是界面之間很僵硬的切換，這樣很難區(qū)分界面之間的層級關(guān)系。功能動畫可以幫助用戶更好的理解；它可以在導(dǎo)航上下文之間平滑轉(zhuǎn)換，并通過狀態(tài)的轉(zhuǎn)換創(chuàng)建可視連接來解釋屏幕上的變化。

導(dǎo)航過渡可以是分層轉(zhuǎn)換（親子過渡）或同行過渡（兄弟過渡）。當(dāng)用戶探索應(yīng)用程序的更深層次的時候，將使用分層轉(zhuǎn)換，這些應(yīng)用程序是當(dāng)前（父屏幕）的子級。運(yùn)動突出顯示從父母到子女（子元素）的移動，同時加強(qiáng)父屏幕和子屏幕之間的關(guān)系。

同行過渡發(fā)生在層次結(jié)構(gòu)的同一級別的元素之間。例如，當(dāng)用戶瀏覽選項(xiàng)卡時使用此動畫。

每個標(biāo)簽的內(nèi)容和表面保持在同一級別，動畫只是引導(dǎo)視圖之間的焦點(diǎn)。

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

用途：

定義屏幕和元素之間的空間關(guān)系  通過幫助用戶理解頁面布局中剛剛發(fā)生的變化，避免出現(xiàn)意外的過渡

品牌塑造

通常情況下，有幾十個應(yīng)用程序具有相同的功能并完成相同的任務(wù)。他們可能都有很好的用戶體驗(yàn)，但是人們喜歡的東西不僅僅是提供一個良好的用戶體驗(yàn)。用戶更希望與他們建立情感聯(lián)系。

品牌動畫負(fù)責(zé)參與品牌塑造。它可以作為營銷工具-支持公司的品牌價值或突出產(chǎn)品的優(yōu)勢-同時使用戶體驗(yàn)變得令人愉快和難忘。這種方法可能不是以用戶為中心的設(shè)計(jì)，但它有一個功能性的目的。為了成功，品牌動畫應(yīng)該支持體驗(yàn)的連續(xù)性。

用途：

娛樂用戶，為設(shè)計(jì)帶來同理心和樂趣  創(chuàng)建產(chǎn)品的標(biāo)簽; 幫助用戶與產(chǎn)品建立關(guān)聯(lián)，增加品牌認(rèn)知度

如何找到平衡

有用和炫酷的動畫之間的平衡在哪里？花時間仔細(xì)考慮動畫何時恰當(dāng)?shù)暮螘r是不恰當(dāng)?shù)姆浅Ｖ匾摹?/p>

動畫的目的

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

請記住，用戶出于某種目的訪問網(wǎng)站或啟動應(yīng)用程序 – 我們需要在短時間內(nèi)向他們展示他們所希望看到的內(nèi)容。因此，當(dāng)決定在應(yīng)用程序中使用動畫時，只有當(dāng)動畫有意義并且不會干擾用戶成功完成他們想要做的事情時，才加入動畫。

時刻牢記

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

原型和測試動畫

在將UI動畫添加到你自己的工作中時，與實(shí)際用戶進(jìn)行迭代原型設(shè)計(jì)和測試是非常正確的。原型設(shè)計(jì)是能夠表達(dá)你打算如何在設(shè)計(jì)中使用動畫的最佳方式。如果你使用交互原型，你將得到一個清晰的設(shè)計(jì)描述，關(guān)于怎樣工作和應(yīng)用程序的缺陷隱藏在哪里。通常，這會導(dǎo)致頻繁的返工，因?yàn)閯赢嫷耐庥^與感覺不同。因此，經(jīng)常迭代和快速迭代！在最微小的細(xì)節(jié)上多次嘗試和重復(fù)都會使你的動畫很棒。

結(jié)論

如果你要在設(shè)計(jì)中運(yùn)用動畫，那么應(yīng)該好好的創(chuàng)造關(guān)聯(lián)，并且只有當(dāng)動畫是設(shè)計(jì)過程的自然組成部分時，這才是可能的。

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