移動(dòng)UI設(shè)計(jì)中幼东,動(dòng)畫的3種主要用途

隨著技術(shù)的快速發(fā)展,動(dòng)畫不僅視覺奢華士骤,更是用戶期望的功能需求范删。動(dòng)畫解決了界面中的許多功能問題,使交互生動(dòng)起來拷肌,真正地響應(yīng)用戶到旦。

下面讓我們來探索下提高移動(dòng)界面功能和情感力量的關(guān)鍵動(dòng)畫策略。


1巨缘、系統(tǒng)狀態(tài)

在應(yīng)用后臺(tái)通常都會(huì)有很多進(jìn)程添忘,例如正在從服務(wù)器下載數(shù)據(jù),正在進(jìn)行計(jì)算等等若锁。這樣的進(jìn)程總是需要一定時(shí)間搁骑,所以你要讓你的用戶知道應(yīng)用沒有卡住,并且顯示出它正在處理的狀態(tài)。這種視覺信號(hào)能夠給用戶一種正在控制應(yīng)用的感覺仲器。

加載狀態(tài)

每個(gè)應(yīng)用的加載時(shí)間都不可避免煤率。雖然動(dòng)畫不能解決這個(gè)問題,但是它們能夠可以讓等待變得沒那么無聊乏冀。

“當(dāng)我們不能縮短距離時(shí)涕侈,我們可以讓等待更加愉快∶罕妫”

有創(chuàng)意的進(jìn)度顯示能夠減輕用戶對(duì)等待的感覺。動(dòng)畫會(huì)影響用戶對(duì)你產(chǎn)品的看法木张,使它看起來比實(shí)際上要好众辨。


下拉刷新

大家應(yīng)該都知道“下拉刷新”這個(gè)動(dòng)畫,它啟動(dòng)了移動(dòng)設(shè)備上的內(nèi)容更新過程舷礼。

提示:下拉刷新動(dòng)畫應(yīng)該符合應(yīng)用設(shè)計(jì)規(guī)范鹃彻,如果應(yīng)用程序最小,那動(dòng)畫也要妻献。


通知

移動(dòng)的物體很容易吸引你的注意蛛株,所以在通知上加動(dòng)畫是一種友好的通知方式


2.導(dǎo)航和過渡狀態(tài)

動(dòng)畫最基本的使用時(shí)轉(zhuǎn)換。這種類型的動(dòng)畫背后的邏輯是幫助用戶了解頁面布局剛剛發(fā)生的變化育拨,觸發(fā)更改的內(nèi)容以及如何再次啟動(dòng)更改谨履。一個(gè)典型的例子是一個(gè)抽屜導(dǎo)航來切換隱藏的內(nèi)容。

抽屜導(dǎo)航可能是這種場(chǎng)景下最好的選擇熬丧,但其實(shí)還有很多種導(dǎo)航動(dòng)畫笋粟、


傳遞導(dǎo)航的上下文

設(shè)計(jì)師用動(dòng)畫來平滑地切換導(dǎo)航,并解釋屏幕上元素的排列的變化



元素之間的視覺分層和連接

動(dòng)畫非常適合描述界面的對(duì)象析蝴,并說明它們之間的相互作用




功能改變

在某些情況下害捕,設(shè)計(jì)師被迫設(shè)計(jì)一個(gè)在特定條件下其功能發(fā)生變化的動(dòng)作按鈕。我們經(jīng)常在整體空間有限的移動(dòng)設(shè)計(jì)中看到這一點(diǎn)闷畸。


這種類型的動(dòng)畫顯示了當(dāng)用戶與其進(jìn)行交互時(shí)元素如何更改尝盼。在下面的例子中,當(dāng)用戶按浮動(dòng)動(dòng)作按鈕時(shí)佑菩,加號(hào)轉(zhuǎn)換成鉛筆盾沫。這表明鉛筆是主要的創(chuàng)作方法。這么小的細(xì)節(jié)意味著不得不猜測(cè)接下來會(huì)發(fā)生什么殿漠,并知道這個(gè)圖標(biāo)在任何一個(gè)狀態(tài)下是什么意思疮跑。



3.視覺反饋

視覺反饋對(duì)于任何用戶界面至關(guān)重要。它使用戶感覺到控制凸舵,對(duì)于用戶來說祖娘,控制意味著在任何給定的時(shí)間知道和理解系統(tǒng)中的當(dāng)前上下文。


識(shí)別性

用戶界面元素(如按鈕和控件)應(yīng)顯示為實(shí)體,即使它們位于一層玻璃幕后面渐苏。

“在物理世界中掀潮,按鈕,控件和其他對(duì)象根據(jù)我們與他們的交互響應(yīng)琼富。人們期望用戶界面控件具有類似的響應(yīng)能力仪吧。”

為了彌合差距鞠眉,視覺和運(yùn)動(dòng)應(yīng)該立即反饋薯鼠,并以直觀的動(dòng)畫顯示。


可視化操作的結(jié)果

動(dòng)畫可以增強(qiáng)每個(gè)交互點(diǎn)械蹋,并加強(qiáng)用戶執(zhí)行的動(dòng)作出皇。

在Stripe的示例中,當(dāng)用戶點(diǎn)擊“付款”時(shí)哗戈,會(huì)在應(yīng)用程序顯示成功狀態(tài)之前短暫顯示一個(gè)微調(diào)郊艘。復(fù)選標(biāo)記動(dòng)畫使用戶感覺到他們很容易完成付款,用戶也很喜歡這樣重要的細(xì)節(jié)唯咬。



結(jié)論

當(dāng)以復(fù)雜的方式使用時(shí)纱注,動(dòng)畫是強(qiáng)大的。它把設(shè)計(jì)帶進(jìn)生活里胆胰,甚至使用戶進(jìn)行最常規(guī)的任務(wù)狞贱,當(dāng)然也可以讓您從人群中脫穎而出。精心設(shè)計(jì)的動(dòng)畫能提升用戶體驗(yàn)蜀涨。



——————

原文鏈接:3 Key Uses for Animation in Mobile UI Design

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末斥滤,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子勉盅,更是在濱河造成了極大的恐慌佑颇,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,122評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件草娜,死亡現(xiàn)場(chǎng)離奇詭異挑胸,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)宰闰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門茬贵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人移袍,你說我怎么就攤上這事解藻。” “怎么了葡盗?”我有些...
    開封第一講書人閱讀 164,491評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵螟左,是天一觀的道長。 經(jīng)常有香客問我,道長胶背,這世上最難降的妖魔是什么巷嚣? 我笑而不...
    開封第一講書人閱讀 58,636評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮钳吟,結(jié)果婚禮上廷粒,老公的妹妹穿的比我還像新娘。我一直安慰自己红且,他們只是感情好坝茎,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,676評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著暇番,像睡著了一般嗤放。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上奔誓,一...
    開封第一講書人閱讀 51,541評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音搔涝,去河邊找鬼厨喂。 笑死,一個(gè)胖子當(dāng)著我的面吹牛庄呈,可吹牛的內(nèi)容都是我干的蜕煌。 我是一名探鬼主播,決...
    沈念sama閱讀 40,292評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼诬留,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼斜纪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起文兑,我...
    開封第一講書人閱讀 39,211評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤盒刚,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后绿贞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體因块,經(jīng)...
    沈念sama閱讀 45,655評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,846評(píng)論 3 336
  • 正文 我和宋清朗相戀三年籍铁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了涡上。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,965評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡拒名,死狀恐怖吩愧,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情增显,我是刑警寧澤雁佳,帶...
    沈念sama閱讀 35,684評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響甘穿,放射性物質(zhì)發(fā)生泄漏腮恩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,295評(píng)論 3 329
  • 文/蒙蒙 一温兼、第九天 我趴在偏房一處隱蔽的房頂上張望秸滴。 院中可真熱鬧,春花似錦募判、人聲如沸荡含。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽释液。三九已至,卻和暖如春装处,著一層夾襖步出監(jiān)牢的瞬間误债,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評(píng)論 1 269
  • 我被黑心中介騙來泰國打工妄迁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留寝蹈,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,126評(píng)論 3 370
  • 正文 我出身青樓登淘,卻偏偏與公主長得像箫老,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子黔州,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,914評(píng)論 2 355

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