B端产品「逆向进度」的交互设计思考

最近接到了一个对商家各类违规经营进行扣分的需求，原始的产品设计中对扣分展示是这样的：

一个普通的进度条

但是，扣分这个场景与常规进度有着比较明显的差异，它其实是需要越少越好的。仅仅放置一个进度条，乍一看的感觉好像是督促和鼓励用户把分快快扣满……

进度条作为页面常见控件，在B端的文件上传下载、页面加载或指示某项任务的完成度时都会使用到。比较常见的形式主要包括以百分比显示的进度条或进度环。但是在某些B端场景中，进度并不是正向的，不是「越多越好」，除了刚才描述的需求，还比如：

a. 云空间存储剩余

b. 营销活动倒计时

当在以上场景中，页面的正向进度会给人有想填满、还没达标的错误心理暗示，造成功能或重要信息的模糊或错位认知。那么如何避免歧义，能够让用户在页面中快速关注并理解这些内容呢？我们不妨从实际生活中寻找这样类似的例子，看看在现实中是通过怎样的方式引导并告知用户的：

a.公司财报中的支出项（越少越好）

b.汽车油量（关注剩余）

c.饮用水杂质（越少越好）

提取这几个生活中的实际应用，我们可以大致总结，逆向进度主要在传达【越少越好】或【关注余量】两个方面，并且有如下的一些特点：

关注余量的逆向进度中：

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

b. 用户关注剩余量、使用量

c. 当剩余量较少的时候，可提醒用户关注并进行「充量」操作以恢复到一个良好区间

越少越好的逆向进度中：

a. 数值没有绝对上限，比如支出金额，虽然可以设置目标，但常常会超出……

b.用户需付出一定努力或成本才能实现逆向进度

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

基于以上发现的特点，我们可以对正向进度条进行「逆向」的设计优化

1、可在进度条中反转并标示使用量与剩余量

2、可使用仪表盘等其他形式代替进度条

3、可使用倒计时、文字提醒明确告知进度周期

4、可对进度进行分段，在每个阶段设置可优化的操作并告知用户

最终优化示意：

参考：

https://www.jianshu.com/p/5ee761a66f57

https://ux.stackexchange.com/questions/73163/how-do-you-visually-represent-progress-on-a-negative-lower-is-better-goal

----------------------------
本文由新墨整理并发布。转载来自互联网，若侵权则删除！
新墨5年开发经验，45名团队成员，上线已达100+产品，于北京和成都2个城市提供技术开发服务。致力于提供APP开发,小程序开发,微信开发,IOT物联网开发,电商系统开发,教育系统开发,H5开发,游戏开发,用户体验设计,课件设计