當前位置:
首頁 > 知識 > 讓用戶喜歡等待!Loading進度條動效設計形式

讓用戶喜歡等待!Loading進度條動效設計形式

在瀏覽網頁、玩遊戲、手機應用等場景,因為網速慢或是硬體差的關係,難免會遇上等待載入的情況,沒人喜歡等待,耐心差的用戶可能因為操作得不到及時反饋,直接選擇放棄。


正所謂細節決定成敗,這時添加一個Loading進度條動畫,就可以大大緩解等待時候的無聊和焦慮,有效讓用戶明確知道目前Loading的狀態,並對結果有一個直觀的預期,甚至有趣巧妙的設計,能讓用戶愛上等待,把等待看成一件很美好的事。


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

讓用戶喜歡等待!Loading進度條動效設計形式 點擊播放 GIF/3251K



最常見的直線進度條。

讓用戶喜歡等待!Loading進度條動效設計形式 點擊播放 GIF/196K


或者圓形進度條。

讓用戶喜歡等待!Loading進度條動效設計形式 點擊播放 GIF/77K



進度條和轉場完美融合。

讓用戶喜歡等待!Loading進度條動效設計形式 點擊播放 GIF/985K



也有給LOGO描線的進度條。


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

讓用戶喜歡等待!Loading進度條動效設計形式 點擊播放 GIF/30K


最常見的自轉。

讓用戶喜歡等待!Loading進度條動效設計形式 點擊播放 GIF/127K


順時針自轉暗示著時間的流逝。

讓用戶喜歡等待!Loading進度條動效設計形式 點擊播放 GIF/190K



巧妙地用兩架飛機形成公轉。

讓用戶喜歡等待!Loading進度條動效設計形式 點擊播放 GIF/61K



不規則多向轉動,讓用戶把等待的時間用在研究運動規律上。

讓用戶喜歡等待!Loading進度條動效設計形式 點擊播放 GIF/56K



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

讓用戶喜歡等待!Loading進度條動效設計形式 點擊播放 GIF/165K



這樣萌的章魚,用戶一定捨不得載入界面的結束。


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


請您繼續閱讀更多來自 PS軟體零基礎學習 的精彩文章:

194種創意拓展思路,創意萌發!
讓你的設計高大上起來
您可能感興趣

Python使用擴展庫progressbar顯示進度條
非常普遍的ProgressBar進度條
AsyncTask用法解析-下載文件動態更新進度條
寫一個網頁進度loading
「js高手之路」html5新增定時器requestAnimationFrame實戰進度條
Cycles:喜歡 Apple Watch 的漂亮進度圓圈?這個記錄養成 App 給你#iOS
spring-boot-starter-swagger迎新夥伴支持,加速更新進度
iPhone X面部識別組件依然存在問題 影響量產進度
微軟官方確認Project Scorpio天蠍主機發布進度十分順利《我的世界》將支持4K解析度
iPhone 8 生產進度內部會議漏出,最初有後置 Touch ID
iPhone 8生產進度內部會議漏出,最初有後置 Touch ID
用Excel管理項目進度,用這個模版就夠了!
夏語心單身5年羞認「fall in love」泄戀愛進度
Handler實現線程之間的通信-下載文件動態更新進度條
讓巨頭汗顏的進度:Zipline無人機快遞服務即將進入坦尚尼亞
CD Projekt Red回應工作環境惡劣傳言:《賽博朋克2077》進度不會受影響
首款iPhone開發像驚悚片,現在則是蘋果大戰泄密者;一文掌握世界各國推動5G發展之進度;確認iPhone 8將支持3D感知
Intel公布10nm進度:這管牙膏簡直了……
iPhone 8 生產照進度不會延後開賣?傳已開始量產