向左向右——“逆向”进度条设计的一点思考

我们经常见到有关进度条的设计,比如在页面加载、应用的安装、文件的上传下载、音视频播放等场景。但在有些场景下,用进度条作为表现形式却让人觉得有些“别扭”。

向左向右——“逆向”进度条设计的一点思考

1、倒计时场景

时间是向前的,不管从左到右的水平进度条,或是顺时针的环形进度条,进度条给人的感觉都是“向前”的。

常见的倒计时场景包括首页开屏广告倒计时、登录注册验证码重发倒计时、匹配聊天的时长倒计时等。如果在倒计时场景中用到进度条似乎应该是“逆向”的才更合理,更符合逻辑的。

之前并不觉得有些APP的开屏广告倒计时的顺时针有什么问题,直到我在友盟里看到一个“自动刷新”倒计时,它用了一个进度条的设计,而这个进度条的方向居然是“从右向左”的。

如下图所示,那个白色条带是“从右向左”逐渐缩短的,然后“满上”,开始一个新的循环。第一次看到既有惊喜又有疑惑,然后有点思考。

向左向右——“逆向”进度条设计的一点思考

与之类似的是手机电量消耗场景,如下图所示,电量是从右向左衰减的(至少看到iOS是这样)。当然针对手机电量还有一个问题,那就是正负极的方向应该怎么放呢?左or右?有条件的可以找几个不同品牌的手机对比一下。

向左向右——“逆向”进度条设计的一点思考

2、特殊语义场景

从时间场景扩展到一般资源。

今天做一个预约应用,里面涉及到资源“占用”与“空闲”信息的展示,因为无法准确预判用户对占用率还是空闲率哪个更敏感、更关注、更有感知,于是陷入了纠结之中。如果加入条形图(可理解为进度条)进行视觉化设计,那么体现量的加还是减更好呢?因为我们很想强化空闲率,进而让用户把空闲率和舒适度建立关联,可是条形图却在强调“占用”。

向左向右——“逆向”进度条设计的一点思考

进一步调研发现了移动和联通关于套餐内“余量”和“消耗量”的不同的处理方式。

联通展示的是消耗量,从左到右,消耗量逐渐增加,条形图变长,并在结尾用大字号标记了套餐余量。

移动则正好相反,从左到右,余量逐渐减少,条形图缩短,然后再展示余量。

可能核心还在于预判用户更关注“余量”还是“消耗量”。

向左向右——“逆向”进度条设计的一点思考

3、尝试一下垂直的柱状图

我们应该感谢地心引力,比如用垂直的柱状图去表示油、水等物质的剩余量,似乎认知起来就没有左还是右问题了。

向左向右——“逆向”进度条设计的一点思考

业界动态

七夕节一只蛤蟆,一天赚了10万?

2020-8-26 13:10:10

业界动态

淡定的娃哈哈和出位的农夫山泉

2020-8-26 13:58:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索