動(dòng)效是用戶體驗(yàn)的重要組成部分秩贰。在移動(dòng)應(yīng)用中,您可以通過(guò)過(guò)渡動(dòng)效非常巧妙地進(jìn)行傳達(dá)很多事情柔吼。?發(fā)送消息毒费、打開(kāi)設(shè)置、勾選選項(xiàng)愈魏、跳轉(zhuǎn)到其它頁(yè)面 —— 這些都是變化的時(shí)刻觅玻, 對(duì)轉(zhuǎn)場(chǎng)制作過(guò)渡動(dòng)效是強(qiáng)化用戶行為的絕佳方式。
在本文中培漏,我們將回顧功能性動(dòng)效可以補(bǔ)充視覺(jué)設(shè)計(jì)和支持交互的常見(jiàn)情況溪厘。
指示系統(tǒng)狀態(tài)
當(dāng)用戶觸發(fā)某些操作時(shí),他們希望看到一個(gè)視覺(jué)響應(yīng) - 系統(tǒng)應(yīng)該明確表示它已收到請(qǐng)求并進(jìn)行處理北苟。?以下是動(dòng)效反饋可以提升用戶體驗(yàn)的幾種情況:
· 確認(rèn)用戶操作?桩匪。?用戶得到系統(tǒng)收到該操作的確認(rèn)。?當(dāng)用戶有視覺(jué)反饋時(shí)友鼻,這可以防止他們重復(fù)點(diǎn)擊元素傻昙。
· 下拉刷新頁(yè)面內(nèi)容。 加載指示圖標(biāo)的動(dòng)效帶來(lái)的視覺(jué)反饋可幫助用戶了解系統(tǒng)正在處理他們的請(qǐng)求彩扔。
· 等待內(nèi)容加載妆档。?加載不一定是很無(wú)聊的,幾乎所有的應(yīng)用都可以在加載內(nèi)容時(shí)利用微妙的動(dòng)效來(lái)防止用戶離開(kāi)虫碉。?加載動(dòng)效會(huì)通過(guò)視覺(jué)反饋吸引用戶的注意贾惦,用戶也會(huì)因此感覺(jué)到更短的等待時(shí)間。
在多步過(guò)程中串聯(lián)不同的步驟
有時(shí)用戶需要通過(guò)一系列步驟來(lái)完成操作须板。 用戶應(yīng)該清楚步驟之間是相互連接的碰镜。動(dòng)效可以幫助你連接每一環(huán)節(jié)來(lái)創(chuàng)建一個(gè)完整的體驗(yàn)。
下面是一個(gè)很棒的例子习瑰,它通過(guò)動(dòng)效來(lái)串起一系列線性的事件绪颖。
動(dòng)效可以幫助設(shè)計(jì)師實(shí)現(xiàn)漸進(jìn)式披露?。 漸進(jìn)式披露通過(guò)減少一次提供的信息量甜奄,使界面更易于被理解柠横。?以下是兩個(gè)很好的例子,它們使用了漸進(jìn)式披露课兄,通過(guò)有意義的塊來(lái)提供信息:
引入新的元素
當(dāng)我們?cè)陧?yè)面上引入一個(gè)新元素時(shí)牍氛,我們嘗試將用戶的注意力集中在該對(duì)象上,并幫助他們回答“為什么我會(huì)看到一個(gè)新元素烟阐?”這個(gè)問(wèn)題搬俊。當(dāng)引入新元素時(shí),動(dòng)效果可以幫助您定義元素關(guān)系和層次結(jié)構(gòu)曲饱。
給用戶一種空間定位感
動(dòng)效可以幫助用戶建立更好的空間信息心智模型悠抹。?這對(duì)于移動(dòng)用戶來(lái)說(shuō)尤其重要 - 將短時(shí)間關(guān)注和小屏幕尺寸組合在一起可能會(huì)導(dǎo)致用戶在屏幕迷宮中迷失的情況。
我們可以使用動(dòng)效來(lái)指導(dǎo)用戶扩淀。?動(dòng)效有助于解釋信息如何從一個(gè)狀態(tài)流向另一個(gè)相關(guān)的狀態(tài)楔敌。?通過(guò)向用戶提供關(guān)于他們目前正在進(jìn)行的操作的信息,可以防止用戶出現(xiàn)困惑驻谆。
在下面的例子中,浮動(dòng)播放按鈕的狀態(tài)轉(zhuǎn)換胜臊,明確地用戶說(shuō)明兩者之間的關(guān)系勺卢。
減少認(rèn)知負(fù)擔(dān)
認(rèn)知負(fù)擔(dān)是使用產(chǎn)品所需的心里上的付出。?認(rèn)知負(fù)擔(dān)直接影響用戶與您的應(yīng)用交互的方式象对。?一般來(lái)說(shuō)黑忱,產(chǎn)品所需的努力越多,用戶就越?jīng)]有使用它的欲望勒魔。
作為設(shè)計(jì)師甫煞,我們的目標(biāo)應(yīng)該是創(chuàng)建一個(gè)易于使用的界面。?如果將動(dòng)效使用得當(dāng)冠绢,可以減少完成任務(wù)所需的用戶負(fù)擔(dān)抚吠。
在幾乎所有應(yīng)用中,用戶都必須填寫一些表單弟胀。?許多表單都將標(biāo)簽寫在該字段的默認(rèn)位置楷力, 當(dāng)用戶點(diǎn)擊這個(gè)字段時(shí)喊式,標(biāo)簽就消失了。?因此萧朝,用戶很難弄清這個(gè)字段代表什么岔留。?浮動(dòng)標(biāo)簽可幫助用戶保持上下文,并使其與長(zhǎng)表單交互更加舒適剪勿。
讓用戶理解功能變化
功能變化指當(dāng)元素在交互之后改變其功能厕吉。?例如,當(dāng)用戶點(diǎn)擊按鈕時(shí)械念,該按鈕將意味著不同的事情头朱。?這個(gè)動(dòng)效可以幫助用戶理解“這個(gè)元素現(xiàn)在做什么?”
可以在許多移動(dòng)應(yīng)用中看到功能變化的一個(gè)常見(jiàn)例子是開(kāi)關(guān)。 動(dòng)效可以幫助用戶了解元素的狀態(tài)。
在某些情況下,單個(gè)元素的功能變化會(huì)導(dǎo)致整個(gè)視圖的變化奢人。?例如,一個(gè)漢堡菜單變成'X'并激活一個(gè)新的視圖。
結(jié)論
通過(guò)一些復(fù)雜巧妙的方式運(yùn)用動(dòng)效亚隙,動(dòng)效可以發(fā)揮非常強(qiáng)大的作用。?它解決了界面中的許多功能問(wèn)題违崇,并使其鮮活起來(lái)并真正對(duì)用戶給予及時(shí)的反饋阿弃。?無(wú)論你設(shè)計(jì)什么應(yīng)用,它都是在向用戶講故事羞延,動(dòng)效可以幫助你更生動(dòng)而有效地講述這個(gè)故事渣淳。
謝謝!
原文作者:?Nick Babich
UX Planet:?Twitter?|?Facebook? ?最初發(fā)表于?babich.biz