如今，在做Web或App設計時，除了常見的載入動效外，“進度條”也是設計師們常常要花費時間與精力來著重思考的元件設計。

進度條可以理解成視覺化等待，能緩解使用者在等待過程中的焦慮情緒，及時給予使用者反饋和提示，降低使用者在等待過程中跳出的頻率。

你是不是看到Loading0%的進度條很是焦慮？

那麼，進度條的設計究竟要如何既能兼顧使用者體驗，又能利用精美炫酷的色彩、動效抓住使用者眼球？

下面，小摹給大家整理了一些創意十足的進度條設計案例，一起來看看吧。

創意進度條設計例項

首先，咱們來看看這款進度條：

不得不說，使用者心理被設計師拿捏的死死的。

一開始小拖車拉著進度條走的很快，走到中間便開始勻速運動，動畫效果的展現形式，使用者會很有耐心地等待進度條走完。

中間的等待過程，軟體也進行了自身的載入，何樂而不為。

在滴滴打車時，介面中展示等待時間、已等待時間、前方排隊人數等細節，有了這些量化的資料，使用者可以自由安排時間。

如遇到打車難的情況，即使正在等待中，看到自己已等待的沉沒時間，也很難取消訂單，直至成功打到車。

將進度條像雪花般打散，是不是很能吸引到你的注意力，很大程度幫你緩解負面情緒呢？

甚至搞搞創意，利用各種小動畫來轉移人們的注意力，讓使用者意識不到需要等待。

對於某些進度資訊無法在短時間內徹底完成，那麼可以儘量將精準度與真實情況靠近，讓使用者知道目前最新進展，緩解使用者的焦慮之情。

這一點，淘寶的物流設計就十分可圈可點。

從最初的僅更新文字物流資訊，到現在從地圖上就能直觀地展示包裹已送至何處，預計送達時間是多久，越來越人性化了~

除此以外，紅綠燈上的讀秒、地鐵站中預計下一趟地鐵多久到達、外出吃飯，實時掃碼檢視前方還有多少桌在等待……這一切的一切，進度條發揮了應有的貢獻。

往小了說，進度安撫了人心，往大了說，進度讓生活得以安穩繼續。

在看過這麼多優秀的進度條設計後，接下來，咱們再來聊聊設計進度條時需要考慮什麼？

設計時需要考慮什麼？

在我看來，進度條設計的原則有三點：

1）降低干擾頻率

2）及時反饋

3）極致的使用者體驗

對於內容型產品，在設計進度條時可儘量弱化其存在，讓使用者能更沉浸式體驗內容本身。

類似於抖音，本身一條視訊的時間就比較短，使用者操作進度條的需求不高，因此弱化進度條，儘可能保證視訊的完播率。

當我們在看電影或電視劇這類時間較長的視訊時，快進、跳過等需求頻率大幅增加，因此在點選螢幕時，下面的進度條自動顯示，可便於使用者控制視訊的進度。

根據產品屬性規劃進度條出現的頻率，能有效幫助使用者更專注於內容本身，提升使用者體驗。

我們滑動進度條的目的在於加快或減慢進度，所以設計進度條時最需要考慮的是給使用者反饋時間。

總視訊的時長是多久？拖到了哪裡？是不是我想看的那一部分？

例如騰訊視訊，在播放過程中拖動進度條時，當前視訊內容可以正常播放，並會給整個螢幕加上一層蒙版後，中間展現拖動的時間和縮略畫面，以此在不妨礙當前播放的前提下，使用者還能及時知曉進度條進度和拖動的位置是否正確。

從操作方式來說，可以儘量避免將所有操作都限制在進度條中，例如在騰訊視訊中，長按螢幕可支援3倍快進/快退，整體視訊播放比拖拽進度條更加流暢。這樣可以避免喚醒進度條，誤觸風險產生。

從分散注意力方面而言，在王者榮耀即將對戰的loading中，左側會顯示所選英雄的使用小tips，右側的小拳頭動效可以點選，為一會兒的賽場加油打氣。在看攻略和加油助力的過程中，有些很快就能載入好，馬上就能全軍出擊了~

一款優秀的產品脫穎而出，雖說離不開產品及運營團隊的助力，可我們身為設計師，也要為產品設計做出應有的貢獻。

關注設計細節、提升使用者體驗、堅持使用者至上的原則來設計產品，這都是我們應該遵循的設計準則。雖然進度條只是一個很小的元件，但當我們把每一個小小的元件都設計精緻後，相信使用者體驗必能進階一大步！