進度條篇 | 從5方面入手，助你設計出優秀的進度條！

前言

用户在做任何一件事情時，最反感的事情就是沒有預期的等待，千萬不要高看其耐心。當用户在完成某個任務時等的太久而耗費過多的時間成本，可能會毫不猶豫的離開，轉身投入其他產品的懷抱，當然，如果你有足夠的信心能召回用户、或產品屬於壟斷性質用户不得不使用的除外。

有時候，通過技術手段可以在一定程度上加快程序響應速度，但遇到部分實時處理信息或需要系統精確的計算則沒辦法加快，用户別無選擇、只能等待。想減少用户在等待過程中的無聊、焦慮感，這時，在你的產品任務流程中可增加一個清晰可見的進度條來幫助用户追蹤信息，利用實時反饋當前進度讓用户具有掌控感，並且還能通過趣味化的視覺效果或提供有幫助的信息來消耗其等待的時間，甚至一度超出用户預期，驚喜之餘，用户的接受程度自然也就更高。

不管是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‰的存在，持續不斷的從多個角度發揮出設計價值，用户體驗必定能得到很大的提升。

Powered by Froala Editor