在瀏覽網頁、玩遊戲、手機應用等場景,因為網速慢或是硬件差的關系,難免會遇上等待加載的情況,沒人喜歡等待,耐心差的用戶可能因為操作得不到及時反饋,直接選擇放棄。
正所謂細節決定成敗,這時添加一個Loading進度條動畫,就可以大大緩解等待時候的無聊和焦慮,有效讓用戶明確知道目前Loading的狀態,並對結果有一個直觀的預期,甚至有趣巧妙的設計,能讓用戶愛上等待,把等待看成一件很美好的事。
那常見的Loading動效有哪些形式呢?在觀摩過大量優秀的案例後,作者總結出Loading動效通常有B.R.A三種形式。為避免誤解,下面逐一解釋一下:
B,Bar。Loading動畫從某種角度也可以說是進度條,一般用於較長時間的加載,通常配合百分比指數,讓用戶對當前加載進度和剩餘等待時間有個明確的心理預期。
最常見的直線進度條。
或者圓形進度條。
進度條和轉場完美融合。
也有給LOGO描線的進度條。
R,Rotation。旋轉代表時間的流逝,暗示著時鍾一樣順時針旋轉。不停循環轉動的動畫,能有效吸引注意力,給用戶時間加速的錯覺。旋轉Loading動畫一般用在較短的加載中,要是一直轉卻始終加載不出來,用戶又該煩躁了。
最常見的自轉。
順時針自轉暗示著時間的流逝。
巧妙地用兩架飛機形成公轉。
不規則多向轉動,讓用戶把等待的時間用在研究運動規律上。
A,Animation。如果在Loading時配上一個形象的動畫,能大大提高產品的親和力和品牌識別度,用戶大多會接受並喜歡這樣的形式,一般品牌形象明確的產品會這麼做。
用可愛的奔跑擬人形象來告訴用戶:我在很努力加載請耐心等待。
這樣萌的章魚,用戶一定舍不得加載界面的結束。
以上就是常見的三種形式,當然創意是無止境的,還有很多Loading動效同時融合了這幾種形式,或者用一種全新的形式,比如作者多年前在PSP上見過將小遊戲植入到Loading界面中的情況,以至於感歎Loading時間太短都不能好好玩耍了。。
推薦設計
優秀海報設計精選集(8)海報設計2022-09-23
充滿自然光線!32平米精致裝修設計2022-08-14
親愛的圖書館 | VERSE雜誌版版式設計2022-07-11
生活,就該這麼愛!2022天海報設計2022-06-02
最新文章
25款純CSS的星級評定效果實網頁理論2019-07-04
網頁柵格係統應該怎麼用網頁理論2019-06-24
UI界面圖標設計終極指南網頁理論2019-06-02
創建用戶友好型表單網頁理論2018-07-20