由于人類是視覺驅(qū)動(dòng)的生物，圖像的影響只有在動(dòng)畫的幫助下才會(huì)增加。我們的眼睛天生就會(huì)特別關(guān)注移動(dòng)的物體，而動(dòng)畫就像糖果一樣，吸引人的注意力，有助于區(qū)分應(yīng)用程序和競(jìng)爭(zhēng)對(duì)手。

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

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

什么是功能動(dòng)畫？

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

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

2、防止變化迷失

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

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

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

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

用戶操作的可視反饋

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

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

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

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

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

目的

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

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

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

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

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

有趣的動(dòng)畫也會(huì)分散用戶的注意力，并使他們等待更長時(shí)間。

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

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

目的：

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

視覺提示

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

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

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

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

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

用途：

告訴用戶即將發(fā)生什么給用戶足夠的心理預(yù)期  幫助用戶定位自己在界面中的位置  告訴用戶他們?cè)鯓幼霾拍芘c屏幕上的元素進(jìn)行交互

導(dǎo)航過渡

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

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

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

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

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

用途：

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

品牌塑造

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

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

用途：

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

如何找到平衡

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

動(dòng)畫的目的

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

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

時(shí)刻牢記

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

原型和測(cè)試動(dòng)畫

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

結(jié)論

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

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