設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

來(lái)源:jianshu 作者:MotionGraphic 學(xué)習(xí):5818人次

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

B:Bar

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

設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

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

設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

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

設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

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

設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

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

R:Rotation

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

設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

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

設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

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

設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

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

設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

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

A:Animation

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

設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

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

設(shè)計(jì)知識(shí),說(shuō)說(shuō)Loading進(jìn)度條動(dòng)效形式

這樣萌的章魚(yú),用戶一定舍不得加載界面的結(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)度條有創(chuàng)意?來(lái)這里學(xué)習(xí)!

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!