功能性動(dòng)畫的每一幀都有其目的，注意每一個(gè)細(xì)節(jié)，讓動(dòng)畫成為操作過程中一部分。數(shù)碼產(chǎn)品的用戶體驗(yàn)會(huì)因?yàn)楣δ苄詣?dòng)畫的使用而得到提升。

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

然而，動(dòng)畫只有在被合理的使用情況下才可以真正有效的提升用戶體驗(yàn)?，F(xiàn)如今好的UI動(dòng)畫都有具備功能性。在這篇文章中，我們將探討如何將功能性動(dòng)畫（functional animation）完美的融合到交互設(shè)計(jì)中。

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

功能性動(dòng)畫是一種嵌入U(xiǎn)I設(shè)計(jì)中微妙的動(dòng)畫，有著明確、合理的目標(biāo)。

1. 它能減少認(rèn)知負(fù)荷。
2. 防止頁面轉(zhuǎn)換視盲。
3. 在空間上營(yíng)造更好的印象。

我們都秉持著“以人為本”的設(shè)計(jì)理念。用戶的焦點(diǎn)在哪里，哪里就應(yīng)該直觀，反應(yīng)靈敏和人性化。功能性動(dòng)畫能幫助我們實(shí)現(xiàn)這一點(diǎn)。

功能性動(dòng)畫在UI設(shè)計(jì)中所扮演的角色

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

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

而作為系統(tǒng)，當(dāng)你需要向用戶通知操作的結(jié)果時(shí)，功能性動(dòng)畫也是一個(gè)很不錯(cuò)的選擇。當(dāng)操作沒有成功的時(shí)候，功能性動(dòng)畫可以給用戶一個(gè)快速而有簡(jiǎn)潔的一個(gè)反饋。例如，當(dāng)我們輸入密碼錯(cuò)誤的時(shí)候，我們采用來回晃動(dòng)的效果。這個(gè)效果會(huì)讓我們聯(lián)想到日常生活中的擺手和搖頭，而這些都代表著“no”。這些小細(xì)節(jié)的使用，是打造良好用戶體驗(yàn)的關(guān)鍵。

目的：

1. 確認(rèn)系統(tǒng)接收到用戶的操作；
2. 確認(rèn)（或拒絕）用戶的行為。

2.當(dāng)前狀態(tài)的指示器

給系統(tǒng)當(dāng)前所處狀態(tài)提供一個(gè)視覺指引是交互設(shè)計(jì)中最重要的一點(diǎn)。我們應(yīng)該讓用戶隨時(shí)隨地知道系統(tǒng)當(dāng)前所處的狀態(tài)，而不是讓用戶去猜。

數(shù)據(jù)的上傳與下載就是一個(gè)很好的例子。例如，加載動(dòng)畫會(huì)告訴用戶系統(tǒng)正在下載數(shù)據(jù)，而且還顯示了下載進(jìn)程與速度，用戶也對(duì)完成時(shí)間有了一個(gè)大致的期望。

當(dāng)系統(tǒng)狀態(tài)發(fā)生重要的變化時(shí)，功能性動(dòng)畫也可以用來提醒用戶。例如，來電提示。

或者，新短信提示。

目的：提供實(shí)時(shí)通知系統(tǒng)狀態(tài)，并讓用戶了解正在發(fā)生什么。

3.提示

當(dāng)用戶第一次使用你的app的時(shí)候，如果沒有幫助的話，他們可能會(huì)不知道如何操作。

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

當(dāng)一些操作用戶不是很容易發(fā)現(xiàn)時(shí)，功能性動(dòng)畫可以演示出操作步驟。

目的：

1. 通過給用戶一些線索來創(chuàng)造期望；
2. 幫助用戶更好的關(guān)注界面；
3. 告訴用戶如何能夠和應(yīng)該與界面上的元素進(jìn)行交互。

4.導(dǎo)航欄的過渡

導(dǎo)航欄的的轉(zhuǎn)換是指app中導(dǎo)航菜單狀態(tài)的變換。有不同級(jí)菜單之間和同級(jí)菜單之間的轉(zhuǎn)換。我們要盡可能的減少那些令人意想不到的過渡效果。功能性動(dòng)畫可以解釋菜單之間的層級(jí)關(guān)系，用戶明白菜單轉(zhuǎn)換的過程中到底發(fā)生了什么。

同級(jí)轉(zhuǎn)換發(fā)生在同一層級(jí)間元素的轉(zhuǎn)換。

功能性動(dòng)畫可以聚焦用戶的視覺焦點(diǎn)于轉(zhuǎn)換的元素上，用戶了解整個(gè)轉(zhuǎn)換過程中新的元素來自那里，舊的元素在哪里隱藏。它提供了視覺線索，增加了交互的可用性。

目的：

1. 闡明界面和元素之間的空間關(guān)系；
2. 通過幫助用戶理解頁面中發(fā)生的變化，避免了令人意想不到的過渡。

5.營(yíng)造品牌效應(yīng)

市場(chǎng)上有很多同類型的app，他們有著相同的功能，可能都有著不錯(cuò)的用戶體驗(yàn)。但是那些脫穎而出的app肯定在用戶體驗(yàn)上走得更遠(yuǎn)—建立與用戶之間的感情聯(lián)系。

功能性動(dòng)畫可以成為一個(gè)產(chǎn)品的營(yíng)銷工具，用來表現(xiàn)一家公司的品牌價(jià)值或者突出產(chǎn)品的優(yōu)勢(shì)。同時(shí)給用戶一種愉快又難忘的用戶體驗(yàn)。比如Lo-Flo Records網(wǎng)站中，這個(gè)動(dòng)畫會(huì)鼓勵(lì)用戶進(jìn)行操作，每一幀都精美的圖案會(huì)讓他們期待接下來會(huì)看到什么。

用戶比我們預(yù)想中更能注意到頁面中的細(xì)節(jié)，動(dòng)畫作為一種交互元素可以向用戶傳遞一種情感。一個(gè)風(fēng)格活潑可愛的下拉加載動(dòng)畫可以給用戶帶來一個(gè)愉快的用戶體驗(yàn)。

目的：

1. 娛樂用戶，在用戶之間產(chǎn)生情感共鳴；
2. 創(chuàng)建產(chǎn)品特征；增加品牌意識(shí)。

如何達(dá)到平衡

頁面中每一個(gè)動(dòng)畫都應(yīng)該具有相應(yīng)的功能，作為一個(gè)”花瓶”用來充當(dāng)美化頁面的動(dòng)畫不僅無法提升用戶體驗(yàn)，而且動(dòng)畫會(huì)降低頁面的加載速度。比如下方的一個(gè)電子收據(jù)動(dòng)畫，這個(gè)動(dòng)畫看起來很酷炫，但是它的存在使得用戶需要4秒鐘才能看到交易細(xì)節(jié)。這個(gè)等待時(shí)間顯然超過了用戶的心里預(yù)期。

用戶點(diǎn)擊進(jìn)入網(wǎng)站或者使用app是帶有目的性的，他們肯定是為了解決特定的需求。搶火車票，看nba比賽亦或者是買一雙皮鞋。這時(shí)候我們的動(dòng)畫應(yīng)該幫助用戶了解這個(gè)產(chǎn)品的空間構(gòu)架，幫助他們更快的了解，更好的操作。動(dòng)畫如果做的太過于絢麗，反而會(huì)分散用戶的注意力。只有當(dāng)動(dòng)畫有了意義，用戶才不會(huì)分心。

再好的動(dòng)畫被過度使用后，也會(huì)讓用戶感覺很厭煩。當(dāng)我們?cè)O(shè)計(jì)一個(gè)動(dòng)畫的時(shí)候，要問自己，“當(dāng)這個(gè)動(dòng)畫第100次出現(xiàn)的時(shí)候，用戶會(huì)討厭還是直接無視？”

當(dāng)我們將動(dòng)畫引入自己的設(shè)計(jì)時(shí)，前期原型圖的不斷修改和后期用戶測(cè)試是必不可免的。如果你的原型圖上可以完成交互操作，那么就會(huì)對(duì)整個(gè)流程有著一個(gè)清晰的認(rèn)識(shí)。你會(huì)對(duì)動(dòng)畫使用的時(shí)機(jī)與位置有著很好的理解。當(dāng)然為了使動(dòng)畫與整體風(fēng)格兼容，你得不斷返工進(jìn)行修改。重復(fù)不斷的修改，不斷的完善細(xì)節(jié)會(huì)創(chuàng)造出優(yōu)秀的動(dòng)畫。

總結(jié)

功能性動(dòng)畫的每一幀都有其目的，注意每一個(gè)細(xì)節(jié)，讓動(dòng)畫成為操作過程中一部分。數(shù)碼產(chǎn)品的用戶體驗(yàn)會(huì)因?yàn)楣δ苄詣?dòng)畫的使用而得到提升。

本文由 @王M爭(zhēng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。