產品需要時時刻刻關注用戶體驗，而在日常生活中，等待場景是一個非常容易降低用戶體驗、導致用戶流失的環節，這時候，產品就需要提供可以緩解用戶焦慮的設計，比如合理地利用進度條，來讓用戶提升耐心。本文作者就對進度條的設計策略做了總結，一起來看看吧。

用戶在做任何一件事情時，最反感的事情就是沒有預期的等待，千萬不要高看其耐心。當用戶在完成某個任務時等的太久而耗費過多的時間成本，可能會毫不猶豫地離開，轉身投入其他產品的懷抱。

當然，如果你有足夠的信心能召回用戶、或產品屬于壟斷性質用戶不得不使用的除外。

有時候，通過技術手段可以在一定程度上加快程序響應速度，但遇到部分實時處理信息或需要系統精確的計算則沒辦法加快，用戶別無選擇、只能等待。

想減少用戶在等待過程中的無聊、焦慮感，這時，在你的產品任務流程中可增加一個清晰可見的進度條來幫助用戶追蹤信息，利用實時反饋當前進度讓用戶具有掌控感，并且還能通過趣味化的視覺效果或提供有幫助的信息來消耗其等待的時間，甚至一度超出用戶預期，驚喜之余，用戶的接受程度自然也就更高。

不管是PC端還是移動端，進度條的使用都非常廣泛，如視頻/音樂播放頁、下載頁、任務完成情況、調查問卷填寫進度等，其表現方式也是多種多樣。

進度條的目的是降低用戶在等待過程中的焦慮感，當進度條的反饋速度較快或即將完成時，用戶還會有所期待或產生激動的心情，所以在設計之前我們需要對進度條有一個清晰的認知。在本文中，筆者將帶領大家一起探討進度條的設計技巧及使用方法。

一、進度條基礎知識

1. 為什么需要有進度條

有這么一句話“人類的一切恐懼都是來自于未知”，不難看出，焦慮的原因大多都是來自于對未來的不確定性。焦慮無處不在，尤其是近幾年很多年輕人人一邊打著“財富自由”的名號、一邊卻享受著“佛系”生存方式，在認知、能力、資源都沒有跟上的時候依然迷之自信，焦慮大概就是最好的陪伴了。

• 當你下載文件突然在中途卡住了是否會焦慮？
• 到了飯點、點的外賣遲遲未到是否會焦慮？
• 線上買的商品過了好幾天快遞還沒有送達是否會焦慮？

這些種種都是源于對時間的未知、對后續失去了掌控。在互聯網如此發達的今天，緩解上述焦慮并不是難事，只需要一個進度條便能解決大部分問題。

進度條并非局限于口頭上的“條形”，其視覺樣式千變萬化，最需要突出的應該是“進度”，能讓用戶清晰當前狀態，通過圖形、色彩、數字百分比與各種場景結合，將本身比較單一的進度條衍生出不同的類型，給用戶帶去不同的心理感受，不管是提高用戶期待還是障眼法，都能讓用戶在等待的過程中產生無限可能。

2. 進度條定義及使用場景

進度是指用戶正在完成某個任務的速度，通過圖形、圖片或文字將任務的速度、完成度、剩余未完成任務量的大小進行視覺化即是大家所說的進度條。

進度條的使用非常廣泛，例如下載進度、注冊流程、調查問卷、安裝進度、多媒體播放進度、物流軌跡、出票等過程……等，這些都是比較常見的進度條。

另外，我們不能將進度條局限在條形或圓形里面，比如游戲中的人物血量/耗藍程度/升級經驗、地圖迷霧、吃雞跑毒，還有一些物品的消耗度、定時/定量的健身運動、商品限時大促都可以歸類于進度條。

3. 進度條給用戶的心理感受

用戶完成任何一件事情都需要付出對應的時間成本、精力成本或金錢成本，如果付出一定成本后并沒有達到預期會不知所措，這時無論出于何種原因，用戶很可能轉身就走，即便在不得已、必須使用的情況下，也僅只是完成本次任務后便會永久離開。

在特定的場景中，產品無法解決程序響應或處理任務的速度，用戶需要等待，必須付出很多、甚至超額的時間成本，這時，進度條的作用就顯而易見。

首先，它能給用戶一個明確的預期，知道自己當前正在做什么、做了多少、還剩多少，并且以此推斷出大概的剩余時間；其次，一個優秀的進度條還能通過轉移用戶視線，將其帶入對其他信息的了解或樂趣中，讓用戶短暫的忽略進度過程，以減少心理抵觸；最后，進度條能緩解用戶等待的焦慮感，不至于讓用戶自以為卡死、或任務無法完成而產生消極的想法。

4. 需要一個信息明確、清晰可見的進度條

用戶需要的是對信息的掌控、對未來的預知，如果進度條過于虛假或精確度較低，在進度完成之后并未滿足自己的需求，焦慮感瞬間飆升并對產品失去信任。

這就好比我們通過線上點了外賣，催了好幾次，可商家每次都說馬上送到卻遲遲未見，一旦超出我們對時間成本的預期，寧愿花費更多的時間重新點外賣，也要退貨的原因 。

產品需要考慮的是給用戶一個信息明確、清晰可見的進度條。不難看出，常見的進度條基本都有百分比、已完成/未完成可視圖形、色彩明暗對比等綜合信息，用戶可多角度的對進度進行模糊或精準了解。例如：下載進度中，有已完成、未完成、下載速度、預計剩余時間等信息，讓用戶對下載進程有一定的把控。

另外，如果因技術原因，無法提供精準進程，盡量想辦法盡量將精準度與真實情況靠近，也可提供其他信息轉移用戶視線或進行心理補償。

二、常見的進度條類型

1. 動態型

動態型進度條一般用于系統自動處理某個任務而提供的實時進程提醒，在此期間，用戶無需其他操作，安心等待結果即可。像大家平時看到的系統殺毒、下載、loading等均屬動態型進度條。

動態進度條的目的是讓用戶明確知道系統正在做什么、當前是否處于正常狀態，讓用戶在等待過程中有心理預期。需要注意的是，這種進度條絕大部分都需要用戶花費一定的時間成本，用戶有權知道任務進程，只有進程達到100%才能進行下一步操作（暫停/取消中斷屬中斷操作）。

在處理任務時，需要呈現當前狀態、進度百分幾（數字或色彩明暗對比）、大概剩余時間、暫停/取消中斷操作等信息。當然，并不是所有動態進度條都具備上述信息，在實際工作中，要呈現的信息元素會受到多種因素的影響，要結合任務目標、場景、特征來設計，例如用戶等待時長、信息的重要程度、開發成本等。

2. 靜態型

靜態進度條弱化了進度的概念，需要在用戶做出一定操作后才會有進度變化。其主要目的是告知用戶當前狀態，可為其他任務決策提供一定的參考條件，無需用戶等待。

常見的如磁盤存儲空間、學習進度、表單完成進度等，最重要的是需要突出進度節點、數據，以便用戶做出其他方面的決策。

3. 動/靜結合型

綜合了動態型、靜態型進度條的特點，大多使用于視頻/音頻播放場景中，既有明顯的進程動態、同時又明確了當前狀態，可系統自動或人為手動控制進程，這種進度條有非常密切的時間關系，卻無需緩解用戶等待的焦慮。

在正常情況下，“動態+靜態”兩者之間需要維持著平衡關系，如果存在優先級的高低，還需結合實際使用場景的變化來確定設計目標。

例如抖音視頻的進度條就相對弱化，因為短視頻耗時原本就比較少，幾秒到幾分鐘不等；而看電視劇/電影因為耗時較多就完全不同了，用戶的操作需求較高，視覺優先級自然更高。

三、進度條設計流程

1. 明確設計目標

首先，需清楚了解產品需求及用戶需求，設計進度條的目的是為了更好的幫助用戶明確當前狀態、還是為了緩解用戶在等待過程中的焦慮感，以此確立設計目標。

2. 合適的進度條類型

根據設計目標合理的選擇進度條類型，如上述提到的動態型、靜態型或綜合型。但進度條類型并不僅限于此，快遞軌跡地圖、外面送餐進度就與眾不同，只不過這種類型只適合特殊性質的進度存在，并不會遍地使用。

3. 信息元素及優先級

結合進度條使用場景及類型綜合分析，確定好需展示的信息元素并羅列優先級，以便重要的信息能優先被用戶看到，次要信息緊隨其后。

4. 視覺表現方式

表現方式雖然多種多樣，但要想設計出實用性、易用性較高的進度條需以上述的分析結果為前提，并經過多方面思考，確保各圖形、文字元素清晰可見，信息層級劃分明確，盡量減少用戶思考時間及認知成本。

另外，如果動態型的進度條需用戶等待的時間較長，可通過增加其他有價值的信息或趣味化的內容轉移用戶注意力，讓用戶在不知不覺中輕松消耗掉等待時間。例如，進入全民K歌房間、加載歌詞的過程中，系統會提供部分操作技巧及常見問題的處理方式；進入七雄爭霸網游加載時，會通過打地鼠游戲給用戶帶來其他的樂趣。

四、進度條設計原則

1. 不主動干擾用戶

對于內容型產品，雖然用戶對動態進度條有一定操作需求，但為了讓其更專注于內容本身、盡量不要讓進度條對用戶產生過多的干擾，尤其是視頻類應用，避免影響用戶沉浸式體驗。

類似抖音/快手這種短視頻應用，對進度條的操作需求并不高，從界面中不難看出，進度條視覺效果相對較弱，并不會過多地吸引用戶注意力。

而騰訊視頻的進度條在視覺上就強化了很多、相當搶眼，很明顯對于電影/電視劇這種時間較長的視頻，操作需求也是直線上升，但也沒有就此過多干擾用戶，顯示3秒左右、在無任何操作的情況下即會自動隱藏。當然，這并非降低進度條的實用性，一方面得歸功于通過其他操作依然可控制進視頻進度，例如屏幕左右長按、或左右滑動。

合理的進度條設計不會在用戶專注于內容時來分散其注意力，一旦受到干擾，用戶體驗就會大打折扣并由此產生一些不可控的想法，降低繼續看下去的欲望或因為誤操作而跳出頁面，對產品來說都將是得不償失。

2. 合理的即時反饋

不管是動態還是靜態進度條，一定要做到及時反饋，這并不僅限于我們前面所說的基本信息提示，在條件允許的情況下，需結合實際使用場景，盡可能的給予用戶更明確的提示。

滑動騰訊視頻的進度條，在畫面正中心會重復出現進度條以及超大的數據變化提示，這無疑讓用戶對進度條的變化感知更清晰、信息的接收效率和質量也會更高。

另外，大家在運動過程中跟手機屏幕存在一定距離、且因動作幅度變化的問題，對信息的感知能力較低，而Keep將進度條設計的非常大，視覺效果相當突出，在很大程度上提升了用戶對信息的接收能力。

作為設計師一定要分清楚下面的三種情況：

1. 靜態進度條，要通過其他信息的處理才會發生變化，無需刻意關注；
2. 動態進度條，用戶的焦點完全聚焦在進度條及信息變化上，拋開系統的硬性問題，做好視覺反饋也很容易滿足用戶需求；
3. 而面對綜合型進度條，雖然用戶在操作，但其主要精力還依然停留在內容本身，所以除視覺反饋之外，還可以從聽覺、觸覺上下功夫，力求給予用戶更好的即時反饋。

3. 極致的用戶體驗

整天喊著提升用戶體驗，口頭上的假、大、空還是別來了，我們來點實際的。

1）觸控熱區

不要將可操作區域限制在這根細細的進度條可視區域，在空間區域允許的條件下，高度不要低于40px（2倍圖參考值，非絕對），即便到不到此條件，也要把進度條周邊的區域使用到極致，將可觸控區域開發到最大化。

2）操作方式

避免將操作方式限制在僅進度條上，多一種操作方式就能多匹配一個使用場景、也多給了用戶一個方便。例如騰訊視頻長按左、右側區域可實現快進、快退，左右滑動操作跟直接拖動精度條無差別。另外，優酷視頻更是來了一個黑科技，通過手勢就能隔空調整進度。

3）引導用戶

主要針對動態型進度條，為了緩解用戶在等待過程中的焦慮，用其他內容吸引用戶，可以是一個動效、幫助信息、一個笑話，甚至是跟產品毫無相關的內容，其主要目的是協助用戶度過等待期即可。

五、常見問題及避坑指南

1. 為什么會卡在最后的1%

相信很多人都有過這種感覺，進度條跑到99%就會猝不及防的卡頓一下，除了一部分是系統在為反饋成功信息做準備（消耗的時間很短），還有一部分則是程序刻意而為之。

進度條的目的更多是為滿足用戶心理、緩解焦慮而設計，其中有很多場景是無法衡量真實進度的、就是一障眼法例如loading頁，程序一般會設定一個完成時間，當達到設定時間、但進程未完成，這時就只能卡在99%等待完成，只要用戶等待的時間不長就很容易接受，或有一種“即將完成”的激動心理。

卡頓在99%只為應付意外情況而使用的備用方案，切勿直接一開始讓進程飆的很快，隨之將大部分時間都壓在最后的1%上，這種自以為聰明的手段只會與用戶的心理預期相差甚大，導致用戶反感。

（PS：在購票應用中，如果平均出票時間為10s，可以將99%的進程時間設定在8~10s，如果設定在兩三秒，就有可能造成上述不良的后果）

2. 避免讓用戶不知所措的進度指示

在一些需要等待的任務進程中，用戶只看到一些類似“加載中、請稍等”或一個無法預估結果的動態loading頁，這讓筆者不由的想起了幾年前去一家餐廳吃飯的場景，當時問服務員上菜還需要多久，服務員回答“馬上就好”，過來10分鐘再問，還是同樣的回答，就這樣等了40多分鐘，還是回答“馬上就好”，仔細一問，本以為快結束了、原來還沒開始，此時只想說“@!#$%^&*(!@#$%^^&*…”。

毫無價值的反饋信息就如上述筆者當時的心態。有時候，加載中只是一個狀態，如果不適合使用進度條，也要給用戶一個大概的預期，只需一個輔助說明就能降低用戶的逆反心理，如狀態“出票中”加輔助信息“整個過程大概需要30s”，就會產生不一樣的效果。

3. 提供必要的步驟/節點

在部分進度條場景中，除了應有的基本進程信息外，還可適當進行分類、增加必要的步驟，用戶不僅能清楚知道當前所處位置、還能根據任務量預測出每個步驟大概的時間成本，對完成整個任務心理預期的精準度更高。例如填寫在線簡歷、申請信用卡就是最好的例子。

4. 不要威脅你的用戶

筆者之前寫過一篇《文案篇 | 優秀的文案是產品最好的助力》的文章，由此可見文案的力量。在部分場景中，應用需要用戶付出少量的時間去等待，并未設計進度條，可系統依然在默默進程。在此期間，為避免出現意外并不允許用戶重復操作，由此衍生諸如“重復操作會造成資金損失、再次點擊可能創建新的訂單…”等文案提示，言語之中似乎透漏著警告、威脅用戶的味道，極為不友好。

在這種情況下，既然沒有給予明確的進度條提醒，就更不應該威脅你用戶，應該通過限制用戶再次發送請求、并說明原因以撫慰其心情，避免用戶不知所措而降低對產品的滿意度。

5. 進度條什么時候需要拖動

如果在長視頻/音頻使用場景下，毫無疑問絕大多數是可以拖動的，這也不是我們今天討論的重點。

進度條是否提供拖動操作主要取決于產品定位，最大的一個因素就是視頻的長短，因為人們從大腦發出指令到尋找進度條滑塊位置、再到手動觸發都需要好幾秒的時間，所以，過短的視頻根本無需設置拖動操作。例如，抖音低于30s的視頻是沒有進度條提醒以及拖動操作的，大于30s的視頻可隨意拖動。當然，不同的的產品設定的時間界限不同。

另外，各直播平臺在直播過程中也是無法進行拖動操作的，但小鵝通平臺基于直播同步緩存的條件，用戶一旦點擊暫停后再點擊播放，系統會自動從直播切換到錄播，可前后拖動播放進度，當拖動到直播位置又會自動切換到直播狀態，非常人性化。

六、結語

一個優秀的進度條能讓用戶的等待過程變的清晰流暢，在一定程度上提升了用戶耐心，使其愿意花一些時間來等待程序運行，這也將促成一個積極有效的系統響應時間差的過渡，引導著用戶在可能花費更多時間成本的情況下依然保持著對產品的信任，并順利完成任務。

在市場接近飽和的大環境下，還是有一些產品脫穎而出，雖說離不開優秀的產品和運營團隊，可作為設計師的我們，也要通過不斷地學習和思考為產品賦能。

做好進度條設計或許對產品價值的提升并不明顯，但依然要保持對設計的熱愛，把它當做提升用戶體驗方向中1％、1‰的存在，持續不斷的從多個角度發揮出設計價值，用戶體驗必定能得到很大的提升。