筆者結(jié)合眾多案例，對(duì)UI 界面中的“進(jìn)度”進(jìn)行具體的分析與思考。

進(jìn)度是幫助用戶消除恐懼心的結(jié)果表現(xiàn)，用戶的希望與恐懼是基于對(duì)結(jié)果的預(yù)期而產(chǎn)生的，希望是來自對(duì)積極結(jié)果的預(yù)期，會(huì)使用戶產(chǎn)生傾向性，恐懼來源于對(duì)行為消極結(jié)果的預(yù)期，會(huì)促使用戶在行為和意識(shí)上產(chǎn)生規(guī)避。對(duì)于我們的目標(biāo)用戶來說，希望也許是最具鼓舞人心能力的動(dòng)機(jī)。

關(guān)于進(jìn)度的概念其實(shí)有很多種，最主要的是流程是：找到任務(wù)-開始任務(wù)-任務(wù)進(jìn)行中-任務(wù)結(jié)束-反饋，這套流程是范圍最大，定義最廣的“進(jìn)度”闡述，用簡(jiǎn)單的話術(shù)表示則是“開始-進(jìn)行-結(jié)束”三步驟。根據(jù)任務(wù)的使用場(chǎng)景不同，展現(xiàn)方式也都就有所不同。

接下來，我開始用不同場(chǎng)景下的展現(xiàn)形式來具體說明，并分別敘述不同“進(jìn)度”場(chǎng)景的不同重點(diǎn)、難點(diǎn)以及當(dāng)前的主要狀態(tài)表現(xiàn)。

一、“進(jìn)度”的使用場(chǎng)景

1. 簽到/完成任務(wù)

這是我們最常見的進(jìn)度類型：

• 設(shè)計(jì)重點(diǎn)：每個(gè)任務(wù)節(jié)點(diǎn)上的獎(jiǎng)勵(lì)或成就的展示；
• 設(shè)計(jì)難點(diǎn)：用戶的堅(jiān)持度與完成度；
• 主要狀態(tài)：未完成-正在完成-已完成。

在一般的任務(wù)流程中，用戶都很難堅(jiān)持一直簽到或是不斷的完成任務(wù)，這是因?yàn)橛脩粼谕度霗C(jī)制后，很難得到即時(shí)反饋，所以上癮的程度也就較小。

在這里需要設(shè)計(jì)足夠多的“獎(jiǎng)勵(lì)機(jī)制”來不斷的刺激用戶堅(jiān)持完成任務(wù)的行為。例如KEEP中的跑步等級(jí)獎(jiǎng)勵(lì)徽章（從眾和虛榮心），虎克網(wǎng)中的任務(wù)賺虎克幣（獎(jiǎng)勵(lì)誘惑）等等。

2. 操作流程

一般常見的信息采集流程展示。

• 設(shè)計(jì)重點(diǎn)：清晰的步驟展示與引導(dǎo)流程；
• 設(shè)計(jì)難點(diǎn)：用戶的耐心與持久度；
• 主要狀態(tài)：開始填寫-填寫中-完成填寫-提交。

這種類型的進(jìn)度多數(shù)是為了讓用戶了解自己所處的位置，好讓用戶有掌控感和心理預(yù)期，多是用于填寫資料這種大量的信息收集界面使用。

需要注意的是，web端場(chǎng)景下用戶耐心一般比較平和，而手機(jī)端就算有步驟展示，太多信息也會(huì)讓用戶失去耐心，從而增加流失率，所以應(yīng)該盡量避免在手機(jī)端進(jìn)行大量的信息采集，必要時(shí)可以采用一些簡(jiǎn)短的選擇器來代替，也不為是一種良策。

當(dāng)前案例全部引導(dǎo)界面的一種，一般都是三個(gè)步驟可完成操作。用戶在選擇了目標(biāo)、體重等大致信息后則可進(jìn)入產(chǎn)品主界面。

3. 訂單/排隊(duì)/進(jìn)程跟蹤

一般多用于非即時(shí)反饋的內(nèi)容，緩解長時(shí)間等待的焦慮心情等使用。

• 設(shè)計(jì)重點(diǎn)：現(xiàn)在等待進(jìn)度的實(shí)時(shí)狀態(tài)；
• 設(shè)計(jì)難點(diǎn)：用戶對(duì)當(dāng)前狀態(tài)的了解程度以及可視化認(rèn)知；
• 主要狀態(tài)：未開始-等待中-進(jìn)行中-等待結(jié)束。

物流和等車都是讓人等待的過程，都屬于非即時(shí)反饋的形式，稍有差錯(cuò)或是進(jìn)度跟不上就會(huì)造成用戶的心態(tài)爆炸，從而會(huì)有投訴等負(fù)面情緒的爆發(fā)。

所以除了清晰的展示用戶的等待狀態(tài)外，技術(shù)上的信息實(shí)時(shí)更新也是很重要的一環(huán)，能有預(yù)計(jì)到達(dá)時(shí)間是最好的，能給足用戶預(yù)期，類似菜鳥裹裹的猜包裹到達(dá)日期的活動(dòng)等。

在現(xiàn)在的高德、百度地圖等軟件內(nèi)，會(huì)告訴用戶當(dāng)前等待的車輛距離自身還有幾站地、多久，這都是非常好的進(jìn)程跟蹤手段，撫平了用戶急躁的心情。

4. 搶購/庫存/剩余

一般多用于了解儲(chǔ)存情況的信息，有可控的整體范圍使用。

• 設(shè)計(jì)重點(diǎn)：在已有內(nèi)容在整體范圍占比，或剩余內(nèi)容的占比展示；
• 設(shè)計(jì)難點(diǎn)：需使用戶區(qū)分清楚重點(diǎn)是已有內(nèi)容還是剩余內(nèi)容；
• 主要狀態(tài)：已有內(nèi)容、剩余內(nèi)容、整體內(nèi)容。

該類進(jìn)度多是有整體范圍的，也就是最大值是有限制的。在搶購、完成任務(wù)數(shù)量等類似的設(shè)計(jì)上用的較多，區(qū)分好“已有” 、“未有” 的區(qū)別，就能滿足大多數(shù)情況。有時(shí)候會(huì)遇到需要提高用戶警惕性或焦慮感的設(shè)計(jì)，例如儲(chǔ)存空間已滿需要清理、搶購庫存僅剩幾件等等，用警惕色系的設(shè)計(jì)，可以幫助提升產(chǎn)品目的，或是幫助用戶解決優(yōu)先級(jí)較高的內(nèi)容。

5. 下載/安裝/loading

一般多用于了解當(dāng)前進(jìn)行的任務(wù)進(jìn)度狀態(tài)。

• 設(shè)計(jì)重點(diǎn)：可緩解用戶“等待中焦慮情緒”的進(jìn)度條設(shè)計(jì)；
• 設(shè)計(jì)難點(diǎn)：緩解等待焦慮的方式，不能讓用戶有進(jìn)度條不再前進(jìn)的感覺；
• 主要狀態(tài)：未開始、進(jìn)行中、進(jìn)行完畢。

loading的進(jìn)度條很容易找到參考，設(shè)計(jì)方式也是所有進(jìn)度中最能體現(xiàn)創(chuàng)意的一種，常規(guī)方式的進(jìn)度條多是”靜止“狀態(tài)的，有些進(jìn)度條會(huì)設(shè)計(jì)很多其他的動(dòng)態(tài)效果來轉(zhuǎn)移用戶的注意力，在不知不覺中將任務(wù)進(jìn)行完畢。

6. 播放/收看進(jìn)度

一般多用于播放器的播放進(jìn)度展示。

• 設(shè)計(jì)重點(diǎn)：界面播放進(jìn)度的拖拽交互性；
• 設(shè)計(jì)難點(diǎn)：設(shè)計(jì)需符合手指的點(diǎn)擊區(qū)域，拖動(dòng)時(shí)的交互反饋；
• 主要狀態(tài)：播放中，暫停中，拖拽調(diào)整。

播放界面進(jìn)度條主要設(shè)計(jì)點(diǎn)是在拖拽過程給人的體驗(yàn)，很多音樂播放器做了創(chuàng)新式時(shí)間與拖拽點(diǎn)結(jié)合的設(shè)計(jì)，不僅增大了點(diǎn)擊區(qū)域，也使信息更加集中，減少了占用空間。但會(huì)有當(dāng)前錨點(diǎn)位置所在具體時(shí)間的疑惑，但結(jié)論上是個(gè)進(jìn)步的交互方式。

以上都是“進(jìn)度”設(shè)計(jì)的使用場(chǎng)景與案例展示，接下來，則說明一下“進(jìn)度”在設(shè)計(jì)中的表現(xiàn)方式，同樣手法，以“優(yōu)”“裂”的方式展示重要節(jié)點(diǎn)。

“進(jìn)度”的表現(xiàn)方式

1. 數(shù)字

• 優(yōu)勢(shì)：不需要控制進(jìn)度的總長度；
• 劣勢(shì)：數(shù)字越大，用戶的預(yù)估時(shí)間越不穩(wěn)定，越容易引起焦慮情緒。

現(xiàn)如今界面設(shè)計(jì)中數(shù)字用的情況還是相對(duì)比較少的，我展示了兩種情況，一個(gè)是重點(diǎn)在”所處進(jìn)度后面”的任務(wù)完成情況，一個(gè)是重點(diǎn)在“所處進(jìn)度前面”的排隊(duì)列表。前者也可以用進(jìn)度條的方式來表現(xiàn)（但數(shù)字需要同時(shí)存在，否則無法預(yù)估整體），但后者因?yàn)闊o法預(yù)估完整長度，只能選擇數(shù)字的方式展現(xiàn)。

例如：

• 當(dāng)前左邊的案例已連續(xù)打卡，就是運(yùn)用了數(shù)字形式展示，雖然它下方同步展示了金幣icon的展示，但對(duì)于進(jìn)度條給用戶心理的展示，卻相差較多。
• 而右邊的案例在競(jìng)選奪寶板塊里，包含有時(shí)間截止展示和已有N人參加，雖然都有明確數(shù)字展示，但對(duì)于大額度的數(shù)字展示，用戶多少會(huì)產(chǎn)生未知的心理，并不會(huì)有多少急切參加心態(tài)。

2. 進(jìn)度條

• 優(yōu)勢(shì)：進(jìn)度展現(xiàn)清晰，用戶把控情況穩(wěn)定，創(chuàng)意方式最多；
• 劣勢(shì)：不適用于未知長度的情況。

市場(chǎng)上最常見的進(jìn)度方式，既能提升用戶對(duì)當(dāng)前情況的了解使之做出對(duì)應(yīng)的行為，又能在部分情況下促使用戶做出更多的消費(fèi)行為，（例如：進(jìn)度條在尾部，展示“你已經(jīng)達(dá)到100%的多少，或在做多少就可以達(dá)到什么結(jié)果等等）。在花瓣上搜索進(jìn)度條，有大批量各種創(chuàng)意的設(shè)計(jì)，也是最保底的一種展現(xiàn)方式。

• 當(dāng)前左邊案例通過進(jìn)度展示，直觀清晰的告訴用戶你已經(jīng)健身幾個(gè)，完成幾個(gè)，不光提升了用戶的認(rèn)知度，同時(shí)還促使用戶急切完成任務(wù)的心理動(dòng)態(tài)。
• 第二個(gè)案例京東秒殺，在已搶購的圓角矩形下方展示了進(jìn)度條，清晰的告訴用戶已經(jīng)售賣了多少，同時(shí)直觀的展示了還有多少?zèng)]有賣出。

3. 步驟顯示器

• 優(yōu)勢(shì)：進(jìn)度展現(xiàn)清晰，分布操作能減少用戶輸入信息的疲憊感，快速保存用戶已輸入的信息；
• 劣勢(shì)：步驟過多的情況下會(huì)造成用戶流失。

這是市場(chǎng)上最常見的采集信息的方式。一般的步驟多為3步，多余3步的時(shí)候，在用戶進(jìn)入頁面時(shí)就能預(yù)估到要花費(fèi)的時(shí)間，雖有把控性，但也會(huì)造成用戶嫌麻煩然后流失的情況。所以在設(shè)計(jì)步驟器時(shí)，但也不要展示過多的步驟，也最好把每個(gè)步驟的關(guān)鍵行為寫出來，提升用戶的把控感，降低用戶的“嫌麻煩”情緒。這里其實(shí)提到的就是?？硕?。

4. 泳道圖

• 優(yōu)勢(shì)：一般用于團(tuán)隊(duì)協(xié)作使用，任務(wù)狀態(tài)流程清晰明了；
• 劣勢(shì)：不適用于輕量級(jí)進(jìn)度的展示。

泳道圖是一種比較重的進(jìn)度展示方式，多針對(duì)大型任務(wù)的進(jìn)程情況使用，輔助團(tuán)隊(duì)進(jìn)行任務(wù)核對(duì)等。在輕量的進(jìn)度上，在多數(shù)操作上“小題大做”。

5. 地圖跟蹤

• 優(yōu)勢(shì)：用戶對(duì)自己的物流所在位置有絕對(duì)的把控感，可以做出對(duì)應(yīng)的行為調(diào)整；
• 劣勢(shì)：只適用于物流和需要地圖的情況。

地圖也是一種比較特殊的進(jìn)度方式，多適用于物流的場(chǎng)景。用戶可以對(duì)地圖上的位置來決定自己要干的事情，減少失控的焦慮情緒。該情況也可以適用于虛擬地圖在游戲中的應(yīng)用。

總結(jié)

“進(jìn)度”的設(shè)計(jì)方式多種多樣，不同種類的運(yùn)用需要根據(jù)具體場(chǎng)景來規(guī)劃具體的進(jìn)度方式，一般都要在清楚了解了每個(gè)方式的設(shè)計(jì)優(yōu)勢(shì)時(shí)，根據(jù)自身的產(chǎn)品定位，再去設(shè)計(jì)體驗(yàn)方式，這才是正確的設(shè)計(jì)方式與流程，然后再通過這些細(xì)節(jié)來提升產(chǎn)品的轉(zhuǎn)化率，增加產(chǎn)品的趣味度方為良策。

作者：西瓜，公眾號(hào)：西瓜的設(shè)計(jì)

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

題圖來自 Unsplash，基于CC0協(xié)議