如何讓進度條幫助你達到產品目標？

作者：木路

全文共 2065 字，閱讀需要 5 分鐘

—— BEGIN ——

我實習已經一年了，最近剛畢業成為一個產品，現主要負責活動方面的web頁面原型設計。最近設計的一個活動，讓我對進度條了解比較多，想記錄下來，分享給大家。

進度條的定義及其使用場景

進度，在百度百科上面定義的是工作進展快慢的計劃或是某件事情進展的速度。那麼進度條就是用於表達某件事情進展速度的圖片形式。

現在的互聯網產品中有很多地方都會使用到進度條，如註冊流程、軟體安裝進度、經驗等級、任務完成度、倒計時、視頻或音頻播放進度等等。

圖1 註冊流程對進度條的應用

圖2 倒計時對進度條的應用

圖3 經驗等級系統對進度條的應用

很多人會認為：長條或圓形圖裡，一個表示進度的顏色條在裡面的才能叫做進度條。

其實不然，有很多用於表示進度的東西，我覺得都可以歸類於進度條；例如遊戲內的地圖迷霧、物品消耗度，表示任務完成度的數字、活動拼圖的完成度等等。

圖4 遊戲內地圖迷霧（表示地圖探索度）

圖5 遊戲內物品消耗度（圖為DNF疲勞值條）

圖6 某遊戲的拼圖活動

圖7 某直播軟體的每日任務進度

進度條給人的心理感受

產品中不可避免的會出現某個產品流程很長，且完成這整個流程的耗時較長或花費成本很高。而進度條一般會舒緩用戶在完成這個流程中等待的焦慮感。

最初進度條只有一條橫條，後來為了讓用戶更直觀地了解到這個事情（或流程）進行的程度，會在進度條上面加上百分比數字。

圖8 無百分比標識的進度條

圖9 有百分比標識的進度條

經過我的觀察，一般的進度條的主要作用有如下幾點：

給予用戶完成任務的明確預期

讓用戶明白自己正在做什麼

緩解用戶等待的焦慮感

用戶完成一件事情是需要付出一定的成本的，如何讓用戶在巨額的成本面前，不轉身離開，這是需要我們思考的——而進度條很好的給出了答案。

首先，它給了用戶一個明確的預期。

用戶在看到進度條在一點一點地前進，明白這件事情是可以被完成的。

即使這件事情需要的時間很長，但它仍然是可被完成的，用戶可以選擇先去做別的事情打發時間，而不是永無止盡地等待。

其次，用戶明白自己在做些什麼。

想像一下，如果用戶在跳轉某個頁面時，沒有進度條表示正在跳轉，整個屏幕沒有任何提示，也因正在跳轉而無法操作，用戶常常會誤以為卡了，或者死機了，會選擇重啟應用或重啟設備，之前的流程就會因此被打斷了。

用戶的焦慮感會因為上面兩個信息而得到一定的緩解，會有較大可能選擇繼續等待下去。

在產品設計中，進度條的妙用

進度在一般產品中會選擇簡單設置，即一條長條，加上進度百分比，加上各個階段的提示。有的流程較短或花費時間少的會省略百分比，直接使用色塊來表示。

如soul上的親密度，主要的親密度進度條為Soulmate字體，次要的進度條為愛心，每滿3個愛心則點亮一個字母。

由於字母比較難判別進度的進展程度，特地做了愛心這種進展明顯的進度條，以緩解用戶的焦慮。

圖10 soul上聊天界面的進度條（用於表示親密度）

但在一些遊戲產品中，由於遊戲內元素非常多，頁面切換載入需要一定的時間，常常會使用一整個頁面來做載入的進度條展示。

一些遊戲會選擇在載入頁面中展示遊戲的後續內容，引起用戶的興趣，吸引他們繼續等待和玩下去，如王者榮耀的登錄頁面使用3D體感來展示新英雄或新地圖。

另外一些遊戲或者產品會選擇展示一些小動畫或著音效，來展示產品的品牌，加強用戶對其的印象。例如酷狗音樂的「Hello，kugou」，TX旗下一些遊戲的一聲「TIMI」和其頁面。

圖11 騰訊旗下天美工作室的載入等候頁面

使用進度條最多的莫過於網頁活動了。

活動一般要求拉新、提高留存、迴流等，需要用戶保持對活動的高度關注，在活動期間最好每天都來玩一下。

要完成這個目標，一是活動獎勵要相對好一些，不然用戶不關心自然也不會買單；二是要讓用戶明白這個任務是可完成的，甚至是容易完成的。

一般的活動使用進度條的設計時，會在常規的進度條上設定中期獎勵，將一個大任務分成幾個簡單小任務來完成，每個小任務都是有獎勵的。

比起一次性完成大任務獲取大獎勵，用戶會更容易分階段完成任務獲取階段獎勵。

用戶在這個任務流程中是始終有獎勵，獎勵會一直吸引他留下來。

王者榮耀的每日活躍度獎勵就是採用了這個方法。

圖12 王者榮耀遊戲內活躍度獎勵頁面

活動持續時間較長時，可以選擇在進度條上標註上日期，讓用戶了解到這個幾個日期會發生什麼事情，展示對用戶有利的信息。

例如前陣子的王者榮耀集英雄卡的活動，在每周來領獎的文字信息上，加上日期進度條的暗示，告訴了用戶他還有5次領獎機會，可以選擇多抽卡。

圖13 王者榮耀集卡活動

還有一種類型活動是將整個活動基於一個進度條上的，這就是拼圖活動，或者是點亮圖片活動。

這類型有一種變種的活動類型，是將進度條用數字表示，活動規則足夠簡單，用戶理解成本低。

這是一般的商家的朋友圈集贊活動，和有名的支付寶集五福活動。

圖14 陰陽師拼圖活動

圖15 支付寶集五福活動

這種類型的活動是將整一個圖作為進度條，用戶只要按照某種特定的方式獲取拼圖，並湊齊拼圖，即可獲得豐富的獎勵。這個圖片直觀明了，且會激發某些用戶的強迫症心理，會想盡辦法完成拼圖（此類型用戶心理與某些強迫性開拓全地圖的迷霧的心理是一致的）。

總的來說，進度條若是使用得當，對產品的流程或是活動的效果是有非常大的幫助的。

—— END ——

本文由 @木路 原創發佈於人人都是產品經理。未經許可，禁止轉載

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！