進度條篇 | 從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多分鐘，還是回答“馬上就好”，仔細一問，本以為快結束了、原來還沒開始，此時只想說“@!#$%^&*([email protected]#$%^^&*...”。

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

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

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

4.不要威脅你的使用者

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

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

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

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

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

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

六、結語

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

在市場接近飽和的大環境下，還是有一些產品脫穎而出，雖說離不開優秀的產品和運營團隊，可作為設計師的我們，也要通過不斷的學習和思考為產品賦能。做好進度條設計或許對產品價值的提升並不明顯，但依然要保持對設計的熱愛，把它當做提升使用者體驗方向中1％、1‰的存在，持續不斷的從多個角度發揮出設計價值，使用者體驗必定能得到很大的提升。

Powered by Froala Editor