實(shí)戰(zhàn)技巧｜B端產(chǎn)品「逆向進(jìn)度」的交互設(shè)計思考

▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

轉(zhuǎn)自：京東設(shè)計中心 JDC

編輯：小小蟲

共 1043 字，預(yù)計閱讀 7 分鐘

最近接到了一個對商家各類違規(guī)經(jīng)營進(jìn)行扣分的需求，原始的產(chǎn)品設(shè)計中對扣分展示是這樣的：

一個普通的進(jìn)度條

但是，扣分這個場景與常規(guī)進(jìn)度有著比較明顯的差異，它其實(shí)是需要越少越好的。僅僅放置一個進(jìn)度條，乍一看的感覺好像是督促和鼓勵用戶把分快快扣滿……

進(jìn)度條作為頁面常見控件，在 B 端的文件上傳下載、頁面加載或指示某項(xiàng)任務(wù)的完成度時都會使用到。比較常見的形式主要包括以百分比顯示的進(jìn)度條或進(jìn)度環(huán)。但是在某些 B 端場景中，進(jìn)度并不是正向的，不是「越多越好」，除了剛才描述的需求，還比如：

A. 云空間存儲剩余

B. 營銷活動倒計時

當(dāng)在以上場景中，頁面的正向進(jìn)度會給人有想填滿、還沒達(dá)標(biāo)的錯誤心理暗示，造成功能或重要信息的模糊或錯位認(rèn)知。那么如何避免歧義，能夠讓用戶在頁面中快速關(guān)注并理解這些內(nèi)容呢？我們不妨從實(shí)際生活中尋找這樣類似的例子，看看在現(xiàn)實(shí)中是通過怎樣的方式引導(dǎo)并告知用戶的：

A.公司財報中的支出項(xiàng)（越少越好）

B.汽車油量（關(guān)注剩余）

C.飲用水雜質(zhì)（越少越好）

提取這幾個生活中的實(shí)際應(yīng)用，我們可以大致總結(jié)，逆向進(jìn)度主要在傳達(dá)【越少越好】或【關(guān)注余量】兩個方面，并且有如下的一些特點(diǎn)：

關(guān)注余量的逆向進(jìn)度中：

a. 整體量一般是有明確上限的，比如5G流量總共5GB或油箱總共50L

b. 用戶關(guān)注剩余量、使用量

c. 當(dāng)剩余量較少的時候，可提醒用戶關(guān)注并進(jìn)行「充量」操作以恢復(fù)到一個良好區(qū)間

越少越好的逆向進(jìn)度中：

a. 數(shù)值沒有絕對上限，比如支出金額，雖然可以設(shè)置目標(biāo)，但常常會超出……

b.用戶需付出一定努力或成本才能實(shí)現(xiàn)逆向進(jìn)度

c. 可能會有固定計算周期，超出后會清零重新計算

對正向進(jìn)度條進(jìn)行「逆向」的設(shè)計優(yōu)化

1、可在進(jìn)度條中反轉(zhuǎn)并標(biāo)示使用量與剩余量

2、可使用儀表盤等其他形式代替進(jìn)度條

3、可使用倒計時、文字提醒明確告知進(jìn)度周期

4、可對進(jìn)度進(jìn)行分段，在每個階段設(shè)置可優(yōu)化的操作并告知用戶

最終優(yōu)化示意：

---

超值課程推薦

華為用戶體驗(yàn)設(shè)計的體系搭建方法

超 10 億用戶的產(chǎn)品，到底是怎么做用戶體驗(yàn)的？

揭秘滴滴、蔚來等大廠的用戶體驗(yàn)設(shè)計策略

原創(chuàng)好文推薦

一款為你帶來難忘體驗(yàn)的美食 APP

Web Vitals —— 谷歌的新一代 Web 性能體驗(yàn)和質(zhì)量指標(biāo)

2021 年用戶體驗(yàn)設(shè)計趨勢分析

想要引導(dǎo)用戶行為轉(zhuǎn)化，設(shè)計師必須深刻理解這 4 個認(rèn)知心理學(xué)理論

讓設(shè)計圈一片嘩然的 Google 新 logo 到底出了什么問題？國外的設(shè)計專家這么說

如何系統(tǒng)的增強(qiáng)用戶粘性，提升產(chǎn)品轉(zhuǎn)化率？你要懂得“行為設(shè)計學(xué)”

設(shè)計新趨勢「玻璃擬態(tài)」到底是什么？這里有一份實(shí)現(xiàn)效果的詳細(xì)教程

如何將設(shè)計系統(tǒng)快速的從 Sketch 切換到 Figma？這里有 6 個需要注意的關(guān)鍵點(diǎn)

---

歡迎大家關(guān)注三分設(shè)，每天分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。