常見(jiàn)的Loading進(jìn)度條動(dòng)效形式

2015-5-12    用心設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：莫貝網(wǎng)

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

在瀏覽網(wǎng)頁(yè)、玩游戲、手機(jī)應(yīng)用等場(chǎng)景，因?yàn)榫W(wǎng)速慢或是硬件差的關(guān)系，難免會(huì)遇上等待加載的情況，沒(méi)人喜歡等待，耐心差的用戶(hù)可能因?yàn)椴僮鞯貌坏郊皶r(shí)反饋，直接選擇放棄。正所謂細(xì)節(jié)決定成敗，這時(shí)添加一個(gè)Loading進(jìn)度條動(dòng)畫(huà)，就可以大大緩解等待時(shí)候的無(wú)聊和焦慮，有效讓用戶(hù)明確知道目前Loading的狀態(tài)，并對(duì)結(jié)果有一個(gè)直觀的預(yù)期，甚至有趣巧妙的設(shè)計(jì)，能讓用戶(hù)愛(ài)上等待，把等待看成一件很美好的事。

那常見(jiàn)的Loading動(dòng)效有哪些形式呢？在觀摩過(guò)大量?jī)?yōu)秀的案例后，作者總結(jié)出Loading動(dòng)效通常有B.R.A三種形式。為避免誤解，下面逐一解釋一下：

B，Bar。Loading動(dòng)畫(huà)從某種角度也可以說(shuō)是進(jìn)度條，一般用于較長(zhǎng)時(shí)間的加載，通常配合百分比指數(shù)，讓用戶(hù)對(duì)當(dāng)前加載進(jìn)度和剩余等待時(shí)間有個(gè)明確的心理預(yù)期。

最常見(jiàn)的直線進(jìn)度條。

或者圓形進(jìn)度條。

進(jìn)度條和轉(zhuǎn)場(chǎng)完美融合。

也有給LOGO描線的進(jìn)度條。

R，Rotation。旋轉(zhuǎn)代表時(shí)間的流逝，暗示著時(shí)鐘一樣順時(shí)針旋轉(zhuǎn)。不停循環(huán)轉(zhuǎn)動(dòng)的動(dòng)畫(huà)，能有效吸引注意力，給用戶(hù)時(shí)間加速的錯(cuò)覺(jué)。旋轉(zhuǎn)Loading動(dòng)畫(huà)一般用在較短的加載中，要是一直轉(zhuǎn)卻始終加載不出來(lái)，用戶(hù)又該煩躁了。

最常見(jiàn)的自轉(zhuǎn)。

順時(shí)針自轉(zhuǎn)暗示著時(shí)間的流逝。

巧妙地用兩架飛機(jī)形成公轉(zhuǎn)。

不規(guī)則多向轉(zhuǎn)動(dòng)，讓用戶(hù)把等待的時(shí)間用在研究運(yùn)動(dòng)規(guī)律上。

A，Animation。如果在Loading時(shí)配上一個(gè)形象的動(dòng)畫(huà)，能大大提高產(chǎn)品的親和力和品牌識(shí)別度，用戶(hù)大多會(huì)接受并喜歡這樣的形式，一般品牌形象明確的產(chǎn)品會(huì)這么做。

用可愛(ài)的奔跑擬人形象來(lái)告訴用戶(hù)：我在很努力加載請(qǐng)耐心等待。

這樣萌的章魚(yú)，用戶(hù)一定舍不得加載界面的結(jié)束。

以上就是常見(jiàn)的三種形式，當(dāng)然創(chuàng)意是無(wú)止境的，還有很多Loading動(dòng)效同時(shí)融合了這幾種形式，或者用一種全新的形式，比如作者多年前在PSP上見(jiàn)過(guò)將小游戲植入到Loading界面中的情況，以至于感嘆Loading時(shí)間太短都不能好好玩耍了。。

如果你有見(jiàn)過(guò)什么更好的創(chuàng)意，歡迎交流，作者微博：MotionGraphic

進(jìn)度條的那些好文：
《手機(jī)下載進(jìn)度條：我真的很簡(jiǎn)單嗎？》
《你知道進(jìn)度條的來(lái)歷么？》
《40個(gè)的創(chuàng)意進(jìn)度條設(shè)計(jì)》
《談?wù)劶虞d(Loading)的那點(diǎn)事》

分享本文至：

日歷

鏈接

個(gè)人資料

存檔