“進度”設計的使用場景與表現方式_KEEP:KEEP幣KEE價格

筆者結合眾多案例，對UI界面中的“進度”進行具體的分析與思考。

進度是幫助用戶消除恐懼心的結果表現，用戶的希望與恐懼是基于對結果的預期而產生的，希望是來自對積極結果的預期，會使用戶產生傾向性，恐懼來源于對行為消極結果的預期，會促使用戶在行為和意識上產生規避。對于我們的目標用戶來說，希望也許是最具鼓舞人心能力的動機。

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

接下來，我開始用不同場景下的展現形式來具體說明，并分別敘述不同“進度”場景的不同重點、難點以及當前的主要狀態表現。

一、“進度”的使用場景

1.簽到/完成任務

這是我們最常見的進度類型：

國際證券監督組織提出第一套加密貨幣的全球規則:5月23日消息，國際證券監督組織（IOSCO）公布了首個監管加密資產和數字市場的全球標準。擬議的標準涵蓋了處理利益沖突、市場操縱、跨境監管合作、加密資產的保管、運營風險和零售客戶的討論。計劃中的18項措施適用于主流市場建立長期的保障措施，以消除加密貨幣交易中不同部分之間的利益沖突。該監督機構表示，它的目標是在今年年底前完成這些標準，并希望其在全球的130個成員能夠利用這些標準迅速填補加密貨幣規則手冊中的空白。[2023/5/23 15:20:50]

設計重點：每個任務節點上的獎勵或成就的展示；設計難點：用戶的堅持度與完成度；主要狀態：未完成-正在完成-已完成。在一般的任務流程中，用戶都很難堅持一直簽到或是不斷的完成任務，這是因為用戶在投入機制后，很難得到即時反饋，所以上癮的程度也就較小。

在這里需要設計足夠多的“獎勵機制”來不斷的刺激用戶堅持完成任務的行為。例如KEEP中的跑步等級獎勵徽章，虎克網中的任務賺虎克幣等等。

2.操作流程

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

設計重點：清晰的步驟展示與引導流程；設計難點：用戶的耐心與持久度；主要狀態：開始填寫-填寫中-完成填寫-提交。這種類型的進度多數是為了讓用戶了解自己所處的位置，好讓用戶有掌控感和心理預期，多是用于填寫資料這種大量的信息收集界面使用。

隱私搜索引擎DuckDuckGo推出AI搜索查詢功能測試版DuckAssist:金色財經報道，隱私搜索引擎DuckDuckGo推出使用維基百科回答問題的AI輔助搜索功能測試版DuckAssist，可以直接回答用戶的搜索查詢。DuckDuckGo表示該功能利用ChatGPT開發商OpenAI和Anthropic（由前OpenAI員工創立的AI初創公司）的自然語言技術，以增強自然語言搜索功能，并結合其自身對維基百科和其他參考站點的主動索引，來獲取答案。[2023/3/8 12:50:07]

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

當前案例全部引導界面的一種，一般都是三個步驟可完成操作。用戶在選擇了目標、體重等大致信息后則可進入產品主界面。

3.訂單/排隊/進程跟蹤

一般多用于非即時反饋的內容，緩解長時間等待的焦慮心情等使用。

設計重點：現在等待進度的實時狀態；設計難點：用戶對當前狀態的了解程度以及可視化認知；主要狀態：未開始-等待中-進行中-等待結束。物流和等車都是讓人等待的過程，都屬于非即時反饋的形式，稍有差錯或是進度跟不上就會造成用戶的心態爆炸，從而會有投訴等負面情緒的爆發。

數字藏品周指數小幅下跌至40.1:金色財經報道，據同伴客數據顯示，上周（2022年12月19日-12月25日）數字藏品國際周指數下跌3.4至22.5點，國內周指數下跌22.1點至66.5點，數字藏品綜合價值周指數下跌10.9點至40.1點。

備注：

· 數字藏品綜合價值指數由同伴客數據與鏈境Labs聯合研發，是對國際及國內當月市場熱度最高的數字藝術品項目市場總銷售規模的綜合反映，以2021年11月份銷售額的30分之7為基數，指數基值為100。

·國內周指數成分之一的幻核于8月16日發布平臺終止運營公告，但銷量已于7月10日后歸零。為遵循去掉某一成分后指數計算結果無變化的原則，該指數使用幻核7/4-7/10的銷售數據進行銷售基數調整，并將新的銷售基數作為8/14后的指數計算基數。[2022/12/26 22:08:03]

所以除了清晰的展示用戶的等待狀態外，技術上的信息實時更新也是很重要的一環，能有預計到達時間是最好的，能給足用戶預期，類似菜鳥裹裹的猜包裹到達日期的活動等。

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

比特幣全網未確認交易數量為2038筆:11月1日消息，BTC.com數據顯示，目前比特幣全網未確認交易數量為2038筆，全網算力為264.84 EH/S，24小時交易速率為3.13交易/s，目前全網難度為36.84 T，預測下次難度下調0.36%至36.7T，距離調整還剩6天7小時。[2022/11/1 12:02:16]

4.搶購/庫存/剩余

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

設計重點：在已有內容在整體范圍占比，或剩余內容的占比展示；設計難點：需使用戶區分清楚重點是已有內容還是剩余內容；主要狀態：已有內容、剩余內容、整體內容。該類進度多是有整體范圍的，也就是最大值是有限制的。在搶購、完成任務數量等類似的設計上用的較多，區分好“已有”、“未有”的區別，就能滿足大多數情況。有時候會遇到需要提高用戶警惕性或焦慮感的設計，例如儲存空間已滿需要清理、搶購庫存僅剩幾件等等，用警惕色系的設計，可以幫助提升產品目的，或是幫助用戶解決優先級較高的內容。

5.下載/安裝/loading

一般多用于了解當前進行的任務進度狀態。

Cardano 開發者發布支持Vasil硬分叉的Node 1.35.3版本:8月12日消息，Github文檔顯示，Cardano開發人員已決定為Vasil硬分叉開發最終節點的1.35.3版。Cardano Node 1.35.3修復節點早期版本的一些重要問題，并提供一些CLI增強功能。該節點版本提供完整的Vasil Era功能。（The Crypto Basic）[2022/8/12 12:21:06]

設計重點：可緩解用戶“等待中焦慮情緒”的進度條設計；設計難點：緩解等待焦慮的方式，不能讓用戶有進度條不再前進的感覺；主要狀態：未開始、進行中、進行完畢。loading的進度條很容易找到參考，設計方式也是所有進度中最能體現創意的一種，常規方式的進度條多是”靜止“狀態的，有些進度條會設計很多其他的動態效果來轉移用戶的注意力，在不知不覺中將任務進行完畢。

6.播放/收看進度

一般多用于播放器的播放進度展示。

設計重點：界面播放進度的拖拽交互性；設計難點：設計需符合手指的點擊區域，拖動時的交互反饋；主要狀態：播放中，暫停中，拖拽調整。播放界面進度條主要設計點是在拖拽過程給人的體驗，很多音樂播放器做了創新式時間與拖拽點結合的設計，不僅增大了點擊區域，也使信息更加集中，減少了占用空間。但會有當前錨點位置所在具體時間的疑惑，但結論上是個進步的交互方式。

以上都是“進度”設計的使用場景與案例展示，接下來，則說明一下“進度”在設計中的表現方式，同樣手法，以“優”“裂”的方式展示重要節點。

“進度”的表現方式

1.數字

優勢：不需要控制進度的總長度；劣勢：數字越大，用戶的預估時間越不穩定，越容易引起焦慮情緒。現如今界面設計中數字用的情況還是相對比較少的，我展示了兩種情況，一個是重點在”所處進度后面”的任務完成情況，一個是重點在“所處進度前面”的排隊列表。前者也可以用進度條的方式來表現，但后者因為無法預估完整長度，只能選擇數字的方式展現。

例如：

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

2.進度條

優勢：進度展現清晰，用戶把控情況穩定，創意方式最多；劣勢：不適用于未知長度的情況。市場上最常見的進度方式，既能提升用戶對當前情況的了解使之做出對應的行為，又能在部分情況下促使用戶做出更多的消費行為，。在花瓣上搜索進度條，有大批量各種創意的設計，也是最保底的一種展現方式。

當前左邊案例通過進度展示，直觀清晰的告訴用戶你已經健身幾個，完成幾個，不光提升了用戶的認知度，同時還促使用戶急切完成任務的心理動態。第二個案例京東秒殺，在已搶購的圓角矩形下方展示了進度條，清晰的告訴用戶已經售賣了多少，同時直觀的展示了還有多少沒有賣出。

3.步驟顯示器

優勢：進度展現清晰，分布操作能減少用戶輸入信息的疲憊感，快速保存用戶已輸入的信息；劣勢：步驟過多的情況下會造成用戶流失。這是市場上最常見的采集信息的方式。一般的步驟多為3步，多余3步的時候，在用戶進入頁面時就能預估到要花費的時間，雖有把控性，但也會造成用戶嫌麻煩然后流失的情況。所以在設計步驟器時，但也不要展示過多的步驟，也最好把每個步驟的關鍵行為寫出來，提升用戶的把控感，降低用戶的“嫌麻煩”情緒。這里其實提到的就是希克定律。

4.泳道圖

優勢：一般用于團隊協作使用，任務狀態流程清晰明了；劣勢：不適用于輕量級進度的展示。泳道圖是一種比較重的進度展示方式，多針對大型任務的進程情況使用，輔助團隊進行任務核對等。在輕量的進度上，在多數操作上“小題大做”。

5.地圖跟蹤

優勢：用戶對自己的物流所在位置有絕對的把控感，可以做出對應的行為調整；劣勢：只適用于物流和需要地圖的情況。地圖也是一種比較特殊的進度方式，多適用于物流的場景。用戶可以對地圖上的位置來決定自己要干的事情，減少失控的焦慮情緒。該情況也可以適用于虛擬地圖在游戲中的應用。

總結

“進度”的設計方式多種多樣，不同種類的運用需要根據具體場景來規劃具體的進度方式，一般都要在清楚了解了每個方式的設計優勢時，根據自身的產品定位，再去設計體驗方式，這才是正確的設計方式與流程，然后再通過這些細節來提升產品的轉化率，增加產品的趣味度方為良策。

本文由@西瓜原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議。

Tags：KEEPKEEKEEP價格KEEP幣KEE價格KEE幣

酷幣下載