談?wù)劰δ苄詣?dòng)效在移動(dòng)端的使用
功能性動(dòng)效的主要類型有頁(yè)面空間轉(zhuǎn)換、視覺信息反饋、功能操作引導(dǎo)、品牌與趣味,本文就來談?wù)勥@四種功能性動(dòng)效在移動(dòng)端的使用。
功能性動(dòng)效的定義
定義:功能性動(dòng)效是一種嵌入 UI 設(shè)計(jì)中微妙的動(dòng)畫,有著明確、合理的目標(biāo)
功能性動(dòng)效的主要類型:
- 頁(yè)面空間轉(zhuǎn)換;
- 視覺信息反饋;
- 功能操作引導(dǎo);
- 品牌與趣味。
類型 1 :頁(yè)面空間轉(zhuǎn)換類動(dòng)效
頁(yè)面空間轉(zhuǎn)換告訴用戶對(duì)象和窗口的狀態(tài)是如何變化的,防止頁(yè)面轉(zhuǎn)換視盲,在空間上也能營(yíng)造更好的印象。
1.1 使用場(chǎng)景
頁(yè)面空間轉(zhuǎn)換的動(dòng)效,主要是為了讓用戶通過理解頁(yè)面中空間轉(zhuǎn)換的動(dòng)效,了解到界面和元素之間的空間關(guān)系,并隨時(shí)感知到空間元素的變化。
1.2 使用場(chǎng)景
頁(yè)面空間轉(zhuǎn)換類動(dòng)效,主要使用在輪播 banner/頁(yè)面切換/導(dǎo)航菜單切換。
1.3 優(yōu)秀案例賞析
案例 (1) :輪播 Banner 中的空間轉(zhuǎn)換動(dòng)效
案例 (2) : 頁(yè)面空間轉(zhuǎn)換動(dòng)效
案例 (3) :導(dǎo)航菜單切換?
導(dǎo)航欄的的轉(zhuǎn)換是指 App 中導(dǎo)航菜單狀態(tài)的變換,有不同級(jí)菜單之間和同級(jí)菜單之間的轉(zhuǎn)換,解釋菜單之間的層級(jí)關(guān)系,讓用戶明白菜單轉(zhuǎn)換的過程中到底發(fā)生了什么,下一步操作具體如何去做。
類型 2 :視覺信息反饋動(dòng)效類型
具備良好用戶體驗(yàn)的產(chǎn)品,都應(yīng)該給用戶的每一個(gè)操作都提供反饋,無論成功與否,反饋會(huì)使用戶覺得自己與屏幕上的元素進(jìn)行真實(shí)互動(dòng)。即便隔著屏幕,也能讓用戶看起來是在直接操作,增加操作的可控性真實(shí)自然的體感。
2.1 主要作用
視覺信息反饋類動(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)畫也可以用來提醒用戶,可以給用戶一個(gè)快速而有簡(jiǎn)潔的一個(gè)反饋。例如:短信提示、來電提示。
如下圖:
案例 (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í)候,如果沒有幫助的話,他們可能會(huì)不知道如何操作。 我們應(yīng)該給用戶提供一些視覺提示來告訴他們哪些操作是可行的。
3.1 主要作用
功能性的動(dòng)畫可以提示用戶去注意那些可以完成的操作,視覺提示可以給用戶告知即將發(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ù)。是一種非常高效清晰的解決問題的方式。
類型 4 :品牌與趣味
4.1 主要作用
為了避免與市場(chǎng)上很多APP同質(zhì)化,千篇一律的用戶體驗(yàn),品牌動(dòng)畫可以成為一個(gè)產(chǎn)品的營(yíng)銷工具,用來表現(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è)的打開加載動(dòng)效
Uber 的打開動(dòng)效不僅讓用戶體會(huì)到愉悅感,而且它的展開式動(dòng)效還很好地“控制”了用戶雙眼的視覺焦點(diǎn)。
如下圖:
案例(2):輸入操作中的動(dòng)效
下圖的例子是一個(gè)輸入賬號(hào)密碼操作時(shí)的動(dòng)效,是動(dòng)效帶來趣味體驗(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í)候,輸入框上面的貓頭鷹自覺的捂住了自己的眼睛,向用戶傳達(dá)系統(tǒng)的安全性之外,也和用戶進(jìn)行了一次無聲的趣味互動(dòng),是一個(gè)很好的信息反饋的案例。
除了上面的賬號(hào)輸入案例,還有其他類似的動(dòng)效例子。例如:很多結(jié)果輸入的反饋里,如果結(jié)果輸入錯(cuò)誤,那么輸入框和文字則會(huì)來回晃動(dòng),同時(shí)輸入的文字/輸入框同時(shí)變紅。這個(gè)效果會(huì)讓我們聯(lián)想到日常生活中的擺手和搖頭,而這些都代表著“no”,是一種非常自然的動(dòng)效交互邏輯。而正是這些小細(xì)節(jié)的使用,是打造良好用戶體驗(yàn)的關(guān)鍵。
結(jié)語
其實(shí),用戶比我們預(yù)想中更能注意到頁(yè)面中的細(xì)節(jié),動(dòng)效除了要幫助用戶快速找到他想要的東西,達(dá)到他想完成的任務(wù),也是一種可以給用戶傳遞情感的交互元素。
沒有用戶會(huì)拒絕任何產(chǎn)品的錦上添花,而功能性動(dòng)效對(duì)于產(chǎn)品來講,在滿足功能效率的同時(shí),能夠帶來更多額外的附加體驗(yàn),是一種相對(duì)比較容易引發(fā)體驗(yàn)峰值的途徑,希望大家有時(shí)間可以有針對(duì)自己產(chǎn)品需求和調(diào)性體驗(yàn)一番,共勉。
作者:薇子,TXD技術(shù)體驗(yàn)團(tuán)隊(duì),阿里巴巴交互設(shè)計(jì)師
本文由 @TXD技術(shù)體驗(yàn)團(tuán)隊(duì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 dribbble,設(shè)計(jì)師?abbily_yang,版權(quán)屬于原作者
挺好的,贊一個(gè)
學(xué)習(xí)了,感謝分享
想請(qǐng)教一下花時(shí)間與精力做這些相對(duì)來說較炫的交互效果對(duì)業(yè)務(wù)來說有什么意義呢?投入產(chǎn)出比怎么計(jì)算呢?
我試著回答一下吧,具體的意義怎么定義,會(huì)因人和不同的業(yè)務(wù)而異,但是可以從下面幾個(gè)角度出發(fā)思考下:
1,對(duì)業(yè)務(wù)的增值絕對(duì)不可能是業(yè)務(wù)中一個(gè)點(diǎn)就能做到的,而是多點(diǎn)串聯(lián)貫通而成,在其他的核心點(diǎn)不掉鏈子的情況下,有這么個(gè)驚艷的點(diǎn),就像一個(gè)人專業(yè)過關(guān),還有其他特長(zhǎng)一樣,產(chǎn)品的好體驗(yàn)印象分就很容易拿到了。如果要計(jì)算/驗(yàn)證這個(gè)投入產(chǎn)出比,可以做定性的用戶反饋(例如滿意度調(diào)研等)或者看定量的具體業(yè)務(wù)數(shù)據(jù)的變化(增加動(dòng)效前后的數(shù)據(jù)差異),多維度去比較分析。
2,除了對(duì)業(yè)務(wù)價(jià)值的影響,其實(shí)獲益更多的應(yīng)該是個(gè)人的成長(zhǎng),你通過做這個(gè)學(xué)到了什么,你學(xué)到的東西又能反哺給團(tuán)隊(duì)帶來什么?這個(gè)是業(yè)務(wù)價(jià)值延伸外,對(duì)個(gè)人更重要的成長(zhǎng)價(jià)值。
3,拋開這些,對(duì)炫酷本身的嘗試和學(xué)習(xí)本身就是一種探索和創(chuàng)新,概念性的的方案帶給我們的啟發(fā)和靈感不也算是另一種意義嗎?
希望以上回答可以幫到你。 ??
畫風(fēng)很萌