我實(shí)習(xí)已經(jīng)一年了，最近剛畢業(yè)成為一個(gè)產(chǎn)品，現(xiàn)主要負(fù)責(zé)活動(dòng)方面的web頁(yè)面原型設(shè)計(jì)。最近設(shè)計(jì)的一個(gè)活動(dòng)，讓我對(duì)進(jìn)度條了解比較多，想記錄下來(lái)，分享給大家。

進(jìn)度條的定義及其使用場(chǎng)景

進(jìn)度，在百度百科上面定義的是工作進(jìn)展快慢的計(jì)劃或是某件事情進(jìn)展的速度。那么進(jìn)度條就是用于表達(dá)某件事情進(jìn)展速度的圖片形式?，F(xiàn)在的互聯(lián)網(wǎng)產(chǎn)品中有很多地方都會(huì)使用到進(jìn)度條，如注冊(cè)流程、軟件安裝進(jìn)度、經(jīng)驗(yàn)等級(jí)、任務(wù)完成度、倒計(jì)時(shí)、視頻或音頻播放進(jìn)度等等。

圖1 注冊(cè)流程對(duì)進(jìn)度條的應(yīng)用

圖2 倒計(jì)時(shí)對(duì)進(jìn)度條的應(yīng)用

圖3 經(jīng)驗(yàn)等級(jí)系統(tǒng)對(duì)進(jìn)度條的應(yīng)用

很多人會(huì)認(rèn)為，長(zhǎng)條或圓形圖里，一個(gè)表示進(jìn)度的顏色條在里面的才能叫做進(jìn)度條。其實(shí)不然，有很多用于表示進(jìn)度的東西，我覺(jué)得都可以歸類于進(jìn)度條，例如游戲內(nèi)的地圖迷霧、物品消耗度，表示任務(wù)完成度的數(shù)字、活動(dòng)拼圖的完成度等等。

圖4 游戲內(nèi)地圖迷霧（表示地圖探索度）

圖5 游戲內(nèi)物品消耗度（圖為DNF疲勞值條）

圖6 某游戲的拼圖活動(dòng)

圖7 某直播軟件的每日任務(wù)進(jìn)度

進(jìn)度條給人的心理感受

產(chǎn)品中不可避免的會(huì)出現(xiàn)某個(gè)產(chǎn)品流程很長(zhǎng)，且完成這整個(gè)流程的耗時(shí)較長(zhǎng)或花費(fèi)成本很高。而進(jìn)度條一般會(huì)舒緩用戶在完成這個(gè)流程中等待的焦慮感。最初進(jìn)度條只有一條橫條，后來(lái)為了讓用戶更直觀地了解到這個(gè)事情（或流程）進(jìn)行的程度，會(huì)在進(jìn)度條上面加上百分比數(shù)字。

圖8 無(wú)百分比標(biāo)識(shí)的進(jìn)度條

圖9 有百分比標(biāo)識(shí)的進(jìn)度條

經(jīng)過(guò)我的觀察，一般的進(jìn)度條的主要作用有如下幾點(diǎn)：

• 給予用戶完成任務(wù)的明確預(yù)期
• 讓用戶明白自己正在做什么
• 緩解用戶等待的焦慮感

用戶完成一件事情是需要付出一定的成本的，如何讓用戶在巨額的成本面前，不轉(zhuǎn)身離開(kāi)，這是需要我們思考的。而進(jìn)度條很好的給出了答案。首先，它給了用戶一個(gè)明確的預(yù)期，用戶在看到進(jìn)度條在一點(diǎn)一點(diǎn)地前進(jìn)，明白這件事情是可以被完成的。即使這件事情需要的時(shí)間很長(zhǎng)，但它仍然是可被完成的，用戶可以選擇先去做別的事情打發(fā)時(shí)間，而不是永無(wú)止盡地等待。

其次，用戶明白自己在做些什么。想象一下，如果用戶在跳轉(zhuǎn)某個(gè)頁(yè)面時(shí)，沒(méi)有進(jìn)度條表示正在跳轉(zhuǎn)，整個(gè)屏幕沒(méi)有任何提示，也因正在跳轉(zhuǎn)而無(wú)法操作，用戶常常會(huì)誤以為卡了，或者死機(jī)了，會(huì)選擇重啟應(yīng)用或重啟設(shè)備，之前的流程就會(huì)因此被打斷了。用戶的焦慮感會(huì)因?yàn)樯厦鎯蓚€(gè)信息而得到一定的緩解，會(huì)有較大可能選擇繼續(xù)等待下去。

在產(chǎn)品設(shè)計(jì)中，進(jìn)度條的妙用

進(jìn)度在一般產(chǎn)品中會(huì)選擇簡(jiǎn)單設(shè)置，即一條長(zhǎng)條，加上進(jìn)度百分比，加上各個(gè)階段的提示。有的流程較短或花費(fèi)時(shí)間少的會(huì)省略百分比，直接使用色塊來(lái)表示。如soul上的親密度，主要的親密度進(jìn)度條為Soulmate字體，次要的進(jìn)度條為愛(ài)心，每滿3個(gè)愛(ài)心則點(diǎn)亮一個(gè)字母。由于字母比較難判別進(jìn)度的進(jìn)展程度，特地做了愛(ài)心這種進(jìn)展明顯的進(jìn)度條，以緩解用戶的焦慮。

圖10 soul上聊天界面的進(jìn)度條（用于表示親密度）

但在一些游戲產(chǎn)品中，由于游戲內(nèi)元素非常多，頁(yè)面切換加載需要一定的時(shí)間，常常會(huì)使用一整個(gè)頁(yè)面來(lái)做加載的進(jìn)度條展示。一些游戲會(huì)選擇在加載頁(yè)面中展示游戲的后續(xù)內(nèi)容，引起用戶的興趣，吸引他們繼續(xù)等待和玩下去，如王者榮耀的登錄頁(yè)面使用3D體感來(lái)展示新英雄或新地圖。另外一些游戲或者產(chǎn)品會(huì)選擇展示一些小動(dòng)畫(huà)或著音效，來(lái)展示產(chǎn)品的品牌，加強(qiáng)用戶對(duì)其的印象。例如酷狗音樂(lè)的“Hello，kugou”，TX旗下一些游戲的一聲“TIMI”和其頁(yè)面。

圖11 騰訊旗下天美工作室的加載等候頁(yè)面

使用進(jìn)度條最多的莫過(guò)于網(wǎng)頁(yè)活動(dòng)了?；顒?dòng)一般要求拉新、提高留存、回流等，需要用戶保持對(duì)活動(dòng)的高度關(guān)注，在活動(dòng)期間最好每天都來(lái)玩一下。要完成這個(gè)目標(biāo)，一是活動(dòng)獎(jiǎng)勵(lì)要相對(duì)好一些，不然用戶不關(guān)心自然也不會(huì)買單；二是要讓用戶明白這個(gè)任務(wù)是可完成的，甚至是容易完成的。

一般的活動(dòng)使用進(jìn)度條的設(shè)計(jì)時(shí)，會(huì)在常規(guī)的進(jìn)度條上設(shè)定中期獎(jiǎng)勵(lì)，將一個(gè)大任務(wù)分成幾個(gè)簡(jiǎn)單小任務(wù)來(lái)完成，每個(gè)小任務(wù)都是有獎(jiǎng)勵(lì)的。比起一次性完成大任務(wù)獲取大獎(jiǎng)勵(lì)，用戶會(huì)更容易分階段完成任務(wù)獲取階段獎(jiǎng)勵(lì)。用戶在這個(gè)任務(wù)流程中是始終有獎(jiǎng)勵(lì)，獎(jiǎng)勵(lì)會(huì)一直吸引他留下來(lái)。

王者榮耀的每日活躍度獎(jiǎng)勵(lì)就是采用了這個(gè)方法。

圖12 王者榮耀游戲內(nèi)活躍度獎(jiǎng)勵(lì)頁(yè)面

活動(dòng)持續(xù)時(shí)間較長(zhǎng)時(shí)，可以選擇在進(jìn)度條上標(biāo)注上日期，讓用戶了解到這個(gè)幾個(gè)日期會(huì)發(fā)生什么事情，展示對(duì)用戶有利的信息。例如前陣子的王者榮耀集英雄卡的活動(dòng)，在每周來(lái)領(lǐng)獎(jiǎng)的文字信息上，加上日期進(jìn)度條的暗示，告訴了用戶他還有5次領(lǐng)獎(jiǎng)機(jī)會(huì)，可以選擇多抽卡。

圖13 王者榮耀集卡活動(dòng)

還有一種類型活動(dòng)是將整個(gè)活動(dòng)基于一個(gè)進(jìn)度條上的，這就是拼圖活動(dòng)，或者是點(diǎn)亮圖片活動(dòng)。這類型有一種變種的活動(dòng)類型，是將進(jìn)度條用數(shù)字表示，活動(dòng)規(guī)則足夠簡(jiǎn)單，用戶理解成本低。這是一般的商家的朋友圈集贊活動(dòng)，和有名的支付寶集五?；顒?dòng)。

圖14 陰陽(yáng)師拼圖活動(dòng)

圖15 支付寶集五?；顒?dòng)

這種類型的活動(dòng)是將整一個(gè)圖作為進(jìn)度條，用戶只要按照某種特定的方式獲取拼圖，并湊齊拼圖，即可獲得豐富的獎(jiǎng)勵(lì)。這個(gè)圖片直觀明了，且會(huì)激發(fā)某些用戶的強(qiáng)迫癥心理，會(huì)想盡辦法完成拼圖。（此類型用戶心理與某些強(qiáng)迫性開(kāi)拓全地圖的迷霧的心理是一致的）

總的來(lái)說(shuō)，進(jìn)度條若是使用得當(dāng)，對(duì)產(chǎn)品的流程或是活動(dòng)的效果是有非常大的幫助的。

本文由 @木路 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議