移動(dòng)應(yīng)用中的過(guò)渡動(dòng)效

動(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)擊元素傻昙。

通知用戶他們的行為結(jié)果? ? ?圖:?Colin Garven

· 下拉刷新頁(yè)面內(nèi)容。 加載指示圖標(biāo)的動(dòng)效帶來(lái)的視覺(jué)反饋可幫助用戶了解系統(tǒng)正在處理他們的請(qǐng)求彩扔。

微妙的動(dòng)效可以幫助用戶理解正在發(fā)生的事情? ? ?圖:?Ramotion

· 等待內(nèi)容加載妆档。?加載不一定是很無(wú)聊的,幾乎所有的應(yīng)用都可以在加載內(nèi)容時(shí)利用微妙的動(dòng)效來(lái)防止用戶離開(kāi)虫碉。?加載動(dòng)效會(huì)通過(guò)視覺(jué)反饋吸引用戶的注意贾惦,用戶也會(huì)因此感覺(jué)到更短的等待時(shí)間。


甚至在應(yīng)用程序完全加載之前,動(dòng)效可以保持用戶參與? ? ?圖:?UI8

在多步過(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)串起一系列線性的事件绪颖。

圖:?JakubAntalík

動(dòng)效可以幫助設(shè)計(jì)師實(shí)現(xiàn)漸進(jìn)式披露?。 漸進(jìn)式披露通過(guò)減少一次提供的信息量甜奄,使界面更易于被理解柠横。?以下是兩個(gè)很好的例子,它們使用了漸進(jìn)式披露课兄,通過(guò)有意義的塊來(lái)提供信息:

圖:?Ramotion
圖: Anton Skvortsov

引入新的元素

當(dāng)我們?cè)陧?yè)面上引入一個(gè)新元素時(shí)牍氛,我們嘗試將用戶的注意力集中在該對(duì)象上,并幫助他們回答“為什么我會(huì)看到一個(gè)新元素烟阐?”這個(gè)問(wèn)題搬俊。當(dāng)引入新元素時(shí),動(dòng)效果可以幫助您定義元素關(guān)系和層次結(jié)構(gòu)曲饱。


動(dòng)效可以顯示新元素來(lái)自哪里? ? ?圖:?Virgil Pana

給用戶一種空間定位感

動(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)效讓你知道你現(xiàn)在在哪里與你來(lái)自哪里? ? ? 圖:?Jae-seong卵凑,Jeong

在下面的例子中,浮動(dòng)播放按鈕的狀態(tài)轉(zhuǎn)換胜臊,明確地用戶說(shuō)明兩者之間的關(guān)系勺卢。

動(dòng)效可以幫助你建立元素之間的關(guān)系? ? ?圖:?Anish Chandran

減少認(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)涉及到用戶輸入時(shí)贸诚,不要依賴用戶記憶, 使所有關(guān)鍵信息可見(jiàn)? ? ? 圖:?MDS

讓用戶理解功能變化

功能變化指當(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)。

點(diǎn)擊按鈕時(shí)的動(dòng)效哪亿,繃住用戶看到變化铃芦。?圖:?Jurre Houtkamp

在某些情況下,單個(gè)元素的功能變化會(huì)導(dǎo)致整個(gè)視圖的變化奢人。?例如,一個(gè)漢堡菜單變成'X'并激活一個(gè)新的視圖。

向用戶明確表示對(duì)象的功能已更改? ? ?圖:?Tamas Kojo


結(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

原文鏈接:http://babich.biz/animated-transitions-in-mobile-apps/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末伴箩,一起剝皮案震驚了整個(gè)濱河市入愧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌嗤谚,老刑警劉巖棺蛛,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異呵恢,居然都是意外死亡鞠值,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門渗钉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)彤恶,“玉大人钞钙,你說(shuō)我怎么就攤上這事∩耄” “怎么了芒炼?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)术徊。 經(jīng)常有香客問(wèn)我本刽,道長(zhǎng),這世上最難降的妖魔是什么赠涮? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任子寓,我火速辦了婚禮,結(jié)果婚禮上笋除,老公的妹妹穿的比我還像新娘斜友。我一直安慰自己,他們只是感情好垃它,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布鲜屏。 她就那樣靜靜地躺著,像睡著了一般国拇。 火紅的嫁衣襯著肌膚如雪洛史。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,929評(píng)論 1 290
  • 那天酱吝,我揣著相機(jī)與錄音也殖,去河邊找鬼。 笑死掉瞳,一個(gè)胖子當(dāng)著我的面吹牛毕源,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播陕习,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼霎褐,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了该镣?” 一聲冷哼從身側(cè)響起冻璃,我...
    開(kāi)封第一講書(shū)人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎损合,沒(méi)想到半個(gè)月后省艳,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嫁审,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年跋炕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片律适。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡辐烂,死狀恐怖遏插,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情纠修,我是刑警寧澤胳嘲,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站扣草,受9級(jí)特大地震影響了牛,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜辰妙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一鹰祸、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧密浑,春花似錦福荸、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)背传。三九已至呆瞻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間径玖,已是汗流浹背痴脾。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留梳星,地道東北人赞赖。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像冤灾,于是被迫代替她去往敵國(guó)和親前域。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容