如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

沒(méi)有用戶會(huì)拒絕任何產(chǎn)品的錦上添花，而功能性動(dòng)效對(duì)于產(chǎn)品來(lái)講，在滿足功能效率的同時(shí)，能夠帶來(lái)更多額外的附加體驗(yàn)，是一種相對(duì)比較容易引發(fā)體驗(yàn)峰值的途徑，下面和大家介紹 功能性動(dòng)效的定義和類型。

一、功能性動(dòng)效的定義

功能性動(dòng)效的主要類型有頁(yè)面空間轉(zhuǎn)換、視覺(jué)信息反饋、功能操作引導(dǎo)、品牌與趣味，本文就來(lái)談?wù)勥@四種功能性動(dòng)效在移動(dòng)端的使用。

定義：功能性動(dòng)效是一種嵌入 UI 設(shè)計(jì)中微妙的動(dòng)畫(huà)，有著明確、合理的目標(biāo)

功能性動(dòng)效的主要類型：

頁(yè)面空間轉(zhuǎn)換；

視覺(jué)信息反饋；

功能操作引導(dǎo)；

品牌與趣味。

二、功能性動(dòng)效的類型

類型 1 ：頁(yè)面空間轉(zhuǎn)換動(dòng)效

1.1 主要作用

頁(yè)面空間轉(zhuǎn)換的動(dòng)效，主要是為了讓用戶通過(guò)理解頁(yè)面中空間轉(zhuǎn)換的動(dòng)效，了解到界面和元素之間的空間關(guān)系，并隨時(shí)感知到空間元素的變化。

告訴用戶對(duì)象和窗口的狀態(tài)是如何變化的，防止頁(yè)面轉(zhuǎn)換視盲，在空間上也能營(yíng)造更好的印象。

1.2 使用場(chǎng)景

頁(yè)面空間轉(zhuǎn)換類動(dòng)效，主要使用在輪播 banner／頁(yè)面切換/導(dǎo)航菜單切換。

1.3 優(yōu)秀案例賞析

案例 (1) ：輪播 Banner 中的空間轉(zhuǎn)換動(dòng)效

案例 (2) ：導(dǎo)航菜單切換

導(dǎo)航欄的的轉(zhuǎn)換是指 App 中導(dǎo)航菜單狀態(tài)的變換，有不同級(jí)菜單之間和同級(jí)菜單之間的轉(zhuǎn)換，解釋菜單之間的層級(jí)關(guān)系，讓用戶明白菜單轉(zhuǎn)換的過(guò)程中到底發(fā)生了什么，下一步操作具體如何去做。

類型 2 ：視覺(jué)信息反饋動(dòng)效類型

具備良好用戶體驗(yàn)的產(chǎn)品，都應(yīng)該給用戶的每一個(gè)操作都提供反饋，無(wú)論成功與否，反饋會(huì)使用戶覺(jué)得自己與屏幕上的元素進(jìn)行真實(shí)互動(dòng)。即便隔著屏幕，也能讓用戶看起來(lái)是在直接操作，增加操作的可控性真實(shí)自然的體感。

2.1 主要作用

視覺(jué)信息反饋類動(dòng)效主要是為了告訴用戶目前操作到哪里了，時(shí)時(shí)狀態(tài)怎么樣，緩解用戶對(duì)應(yīng)用處理速度的量化感知。

具體表現(xiàn)為：

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

確認(rèn)（或拒絕）用戶的行為;

明確告知用戶當(dāng)前操作的進(jìn)度／狀態(tài)，緩解用戶的緊張／焦慮感。

2.2 使用場(chǎng)景

系統(tǒng)信息提示／狀態(tài)反饋／操作結(jié)果反饋／進(jìn)度提示／加載提示。

2.3 優(yōu)秀案例賞析

案例 (1)：系統(tǒng)提示反饋

系統(tǒng)反饋，當(dāng)系統(tǒng)狀態(tài)發(fā)生重要的變化時(shí)，功能性動(dòng)畫(huà)也可以用來(lái)提醒用戶，可以給用戶一個(gè)快速而有簡(jiǎn)潔的一個(gè)反饋。例如：短信提示、來(lái)電提示。如下圖：

案例 (2) ：操作結(jié)果反饋

案例 (3) ：進(jìn)度提示反饋

在進(jìn)度條設(shè)計(jì)中，明確告知用戶當(dāng)前的具體進(jìn)度和狀態(tài)，讓用戶隨時(shí)隨地知道還需要等待多久，對(duì)當(dāng)前操作環(huán)境是可控的，而不是讓用戶去猜，讓用戶對(duì)當(dāng)前的操作環(huán)境不可控。例如：他當(dāng)下操作的步驟；目前數(shù)據(jù)下載／狀態(tài)的具體執(zhí)行進(jìn)度等，讓用戶有心理預(yù)期。

類型 3 ：功能操作引導(dǎo)

當(dāng)用戶第一次使用你的app的時(shí)候，如果沒(méi)有幫助的話，他們可能會(huì)不知道如何操作。 我們應(yīng)該給用戶提供一些視覺(jué)提示來(lái)告訴他們哪些操作是可行的。

3.1 主要作用

功能性的動(dòng)畫(huà)可以提示用戶去注意那些可以完成的操作，視覺(jué)提示可以給用戶告知即將發(fā)生的事情。

3.2 使用場(chǎng)景

新手引導(dǎo)/功能操作引導(dǎo)。

3.3 優(yōu)秀案例賞析

案例 1 ：新手引導(dǎo)

案例 2 ：功能操作中的引導(dǎo)

下圖中的例子，是一個(gè)游戲里面的小例子，直接用動(dòng)效完美詮釋了“手把手教導(dǎo)”，這樣用戶理解的成本就非常低，根本不用思考，按照引導(dǎo)去做就能完成任務(wù)。是一種非常清晰的解決問(wèn)題的方式。

類型 4 ：品牌與趣味

4.1 主要作用

為了避免與市場(chǎng)上很多APP同質(zhì)化，千篇一律的用戶體驗(yàn)，品牌動(dòng)畫(huà)可以成為一個(gè)產(chǎn)品的營(yíng)銷工具，用來(lái)表現(xiàn)一家公司的品牌價(jià)值或者突出產(chǎn)品的優(yōu)勢(shì)，同時(shí)給用戶一種愉快又難忘的用戶體驗(yàn)。

4.1 使用場(chǎng)景

加載細(xì)節(jié)／動(dòng)效速度感知／動(dòng)效色彩的具體場(chǎng)景中使用。

4.3 優(yōu)秀案例

案例（1）：Uber 啟動(dòng)頁(yè)的打開(kāi)加載動(dòng)效

Uber 的打開(kāi)動(dòng)效不僅讓用戶體會(huì)到愉悅感，而且它的展開(kāi)式動(dòng)效還很好地“控制”了用戶雙眼的視覺(jué)焦點(diǎn)。如下圖：

案例（2）：輸入操作中的動(dòng)效

下圖的例子是一個(gè)輸入賬號(hào)密碼操作時(shí)的動(dòng)效，是動(dòng)效帶來(lái)趣味體驗(yàn)的典型案例：

當(dāng)用戶輸入密碼的時(shí)候，這個(gè)動(dòng)作其實(shí)是一個(gè)非常隱私的動(dòng)作，所以現(xiàn)實(shí)生活中，自己輸密碼的時(shí)候，都會(huì)希望身邊的陌生人轉(zhuǎn)身／不要直接盯著看。

而下面的例子就把保護(hù)用戶隱私作為一種生理的本能，把這種生活中的習(xí)慣延續(xù)到界面細(xì)節(jié)當(dāng)中，當(dāng)用戶輸入密碼的時(shí)候，輸入框上面的貓頭鷹自覺(jué)的捂住了自己的眼睛，向用戶傳達(dá)系統(tǒng)的安全性之外，也和用戶進(jìn)行了一次無(wú)聲的趣味互動(dòng)，是一個(gè)很好的信息反饋的案例。

除了上面的賬號(hào)輸入案例，還有其他類似的動(dòng)效例子。例如：很多結(jié)果輸入的反饋里，如果結(jié)果輸入錯(cuò)誤，那么輸入框和文字則會(huì)來(lái)回晃動(dòng)，同時(shí)輸入的文字／輸入框同時(shí)變紅。這個(gè)效果會(huì)讓我們聯(lián)想到日常生活中的擺手和搖頭，而這些都代表著“no”，是一種非常自然的動(dòng)效交互邏輯。而正是這些小細(xì)節(jié)的使用，是打造良好用戶體驗(yàn)的關(guān)鍵。

結(jié)語(yǔ)

其實(shí)，用戶比我們預(yù)想中更能注意到頁(yè)面中的細(xì)節(jié)，動(dòng)效除了要幫助用戶快速找到他想要的東西，達(dá)到他想完成的任務(wù)，也是一種可以給用戶傳遞情感的交互元素。

藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)