常見的Loading進度條動效形式

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

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

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

來源:莫貝網(wǎng)

 如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

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

那常見的Loading動效有哪些形式呢?在觀摩過大量優(yōu)秀的案例后,作者總結(jié)出Loading動效通常有B.R.A三種形式。為避免誤解,下面逐一解釋一下:

B,Bar。Loading動畫從某種角度也可以說是進度條,一般用于較長時間的加載,通常配合百分比指數(shù),讓用戶對當前加載進度和剩余等待時間有個明確的心理預(yù)期。

最常見的直線進度條。

或者圓形進度條。

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

也有給LOGO描線的進度條。

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

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

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

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

不規(guī)則多向轉(zhuǎn)動,讓用戶把等待的時間用在研究運動規(guī)律上。

A,Animation。如果在Loading時配上一個形象的動畫,能大大提高產(chǎn)品的親和力和品牌識別度,用戶大多會接受并喜歡這樣的形式,一般品牌形象明確的產(chǎn)品會這么做。

用可愛的奔跑擬人形象來告訴用戶:我在很努力加載請耐心等待。

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

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

如果你有見過什么更好的創(chuàng)意,歡迎交流,作者微博:MotionGraphic

進度條的那些好文:
手機下載進度條:我真的很簡單嗎?
你知道進度條的來歷么?
40個的創(chuàng)意進度條設(shè)計
談?wù)劶虞d(Loading)的那點事

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.bouu.cn

存檔