实战技巧|B端产品「逆向进度」的交互设计思考

三分设

共 1394字,需浏览 3分钟

 · 2021-05-09





点击"三分设"关注,回复"社群"加入我们

欢迎来到专业设计师学习交流社区
三分设|连接知识,帮助全球 1 亿设计师成长
转自:京东设计中心 JDC
编辑:小小虫
共 1043 字,预计阅读 7 分钟


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


但是,扣分这个场景与常规进度有着比较明显的差异,它其实是需要越少越好的。仅仅放置一个进度条,乍一看的感觉好像是督促和鼓励用户把分快快扣满……
进度条作为页面常见控件,在 B 端的文件上传下载、页面加载或指示某项任务的完成度时都会使用到。比较常见的形式主要包括以百分比显示的进度条或进度环。但是在某些 B 端场景中,进度并不是正向的,不是「越多越好」,除了刚才描述的需求,还比如:

A. 云空间存储剩余


B. 营销活动倒计时


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

A.公司财报中的支出项(越少越好)


B.汽车油量(关注剩余)

C.饮用水杂质(越少越好)

提取这几个生活中的实际应用,我们可以大致总结,逆向进度主要在传达【越少越好】【关注余量】两个方面,并且有如下的一些特点:
关注余量的逆向进度中:
a. 整体量一般是有明确上限的,比如5G流量总共5GB或油箱总共50L
b. 用户关注剩余量、使用量
c. 当剩余量较少的时候,可提醒用户关注并进行「充量」操作以恢复到一个良好区间
越少越好的逆向进度中:
a. 数值没有绝对上限,比如支出金额,虽然可以设置目标,但常常会超出……
b.用户需付出一定努力或成本才能实现逆向进度
c. 可能会有固定计算周期,超出后会清零重新计算

对正向进度条进行「逆向」的设计优化
1、可在进度条中反转并标示使用量与剩余量
2、可使用仪表盘等其他形式代替进度条
3、可使用倒计时、文字提醒明确告知进度周期
4、可对进度进行分段,在每个阶段设置可优化的操作并告知用户
最终优化示意:




超值课程推荐
华为用户体验设计的体系搭建方法
超 10 亿用户的产品,到底是怎么做用户体验的?
揭秘滴滴、蔚来等大厂的用户体验设计策略

原创好文推荐
一款为你带来难忘体验的美食 APP
Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标
2021 年用户体验设计趋势分析
想要引导用户行为转化,设计师必须深刻理解这 4 个认知心理学理论
让设计圈一片哗然的 Google 新 logo 到底出了什么问题?国外的设计专家这么说
如何系统的增强用户粘性,提升产品转化率?你要懂得“行为设计学”
设计新趋势「玻璃拟态」到底是什么?这里有一份实现效果的详细教程
如何将设计系统快速的从 Sketch 切换到 Figma?这里有 6 个需要注意的关键点



欢迎大家关注三分设,每天分享优质设计、创意灵感、新知新识,定期大咖老师直播分享,零距离连麦,答疑解惑。
浏览 13
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报