走势图的设计在“余额类“产品设计中会必不可少,本文以讲故事的方式,讲述了商户管家设计过程中,如何一步步达到最终的设计方案,以及背后的一些思考,和大家分享。

故事背景

近期,在做壹钱包商户管家的产品设计,目标用户是中小线下商户,他们通过微信公众号,访问壹钱包商户管家,查看交易信息,交易的数据报表,管理结算资金,等等。壹钱包向中小线下商户提供支付服务,普通的线下消费用户可以通过壹钱包提供的支付服务,完成支付,最终帮助线下商户完成交易。

在接下来的2期需求中增加了新功能——余额增值服务,本质上和壹钱包APP的活期服务是一样的,商家的营收资金可享受该服务,产生收益。余额增值服务同样需要显示一条走势图,即“七日年化收益率走势图”,它就如此美妙地和我不期而遇了。

什么是七日年化收益率?

想必大家都相当清楚,就是各种余额类、宝宝类产品的七日年化收益率,很多APP里都会出现七日年化收益率走势图。

大家不禁会很快下结论,我当时也是这么下结论的:这不就是很简单的么,大家都有的,又不需要重新创造,最简单的做法就是直接COPY客户端的现有逻辑。

没错,的确很好搞定,请君慢慢往下看↓

一天,和前端妹纸对稿子

前端妹纸:你写的这段逻辑,和你们给的图,对不起来呀,不要到时候还原度有问题,和稿子对不上的,是我们的问题哟,你们上次验收的细节抠得太厉害了

“UX童鞋每次验收的时候,恨不得每次截屏上面蒙着设计稿,一键对比,不一样的地方一目了然……有这种工具就好了”

我:逻辑上正确,样式上正确,自然就是对的了,时间太紧张,我们忙着把样式调对,曲线毕竟是人画的,不是程序写的,我们把这个曲线调成和逻辑一样,这个简单;我们先保证逻辑是互相是理解,能够实现的,好么?

“前端妹纸木有说话,还是非常理解的”

我:那么,我们就把逻辑梳理一遍,没有问题的话,就这样继续下去吧,为了保证逻辑的正确性,我再和APP端的设计师和产品核对一下,尽量别两边不一样的

做验证

小伙伴:这块的逻辑说明XX给我的时候就没有,要问开发

我:好的,谢谢

迅速看了下稿子,这段逻辑哪来的呢?看一下线上产品,逻辑很类似,但又有些许差别

该用哪套呢?一些纠结……,一些咨询……略过

此时,前端妹纸已经同步看前端组件库里的代码……

这时,产品经理发话了,“其实我们管家和客户端没有关系的,只要我们的逻辑一致就行了,你稿子上的逻辑蛮好的呀……”

其实,大家也都是稍有疑虑的,一起看起各家的客户端来↓

各家宝宝们的走势图

场景:用户已经开通宝宝类服务,入口通常在“我的”

 结论:
  • Y轴起点值都不是0
  • Y轴分段数量不一样
  • 走势图曲折程度不一样,即:七日最高点和七日最低点定位不一样
  • 走势图曲折程度取决于Y轴的七日最高点和七日最低点定位,它倆的定位决定了步长算法,步长=相邻两根线的间距

各家产品详情的走势图

场景:未开通前,一般在“理财”看到活期类或者货币基金类产品

结论:

  • X轴跨度不一样,时间跨度不一样
  • Y轴起点值不一样
  • 有3家的走势图采取了不那么曲折的线,也就是说,Y轴起点值较低

小结

  • 场景分析:“活期”和“产品详情”的场景不一样,时间的跨度信息传递的侧重点也是略有差别,业务需要有所区别
  • 用户分析:对于购买宝宝类产品的目标用户,他们是希望购买收益稳定、低风险的理财产品,提供一条相对稳定的曲线,非常符合用户心理预期
  • 在本次设计中,重点就是解决Y轴的算法,提供一条相对稳定的曲线既符合业务场景也符合用户心理预期;为了验证此结论,现场找几个小伙伴当场测试了一下,大家一致选择“相对稳定的曲线”

解题思路非常清晰了

  1. 货币基金类,收益平稳,涨跌幅度七日内是很小的,显示相对稳定的曲线即可,将曲线尽量落在整个图的上方,给用户传达一种稳定收益的感觉,当然,现状也是如此
  2. 如果用套用之前的逻辑(直接看的代码哟),步长=(MAX-MIN)/3,意味着,MAX永远在第5跟线,MIN永远在第2跟线,他俩相距3个步长,是一根很曲折的线,且跨度整张图
  3. 显示一条“相对稳定的曲线”,整个曲线在图的上方,意味着步长会大些
  4. 重新设定步长,步长=(MAX-MIN)/2,按此算法,MAX永远在第5跟线,MIN永远在第3跟线,他俩相距2个步长,是一根不那么曲折的线,且在图上方的曲线
  5. 再对比了2套方案,小伙伴们也是一致倾向后一种方案,和前文的测试是一致的
  6. 以此类推,遵从MECE原则,把特殊情况逻辑补齐

MAX=七日最高值,MIN=七日最低值

一波三折

是不是就到此完结了呢?临睡前,脑子里把之前思考过了一遍,总觉得这根曲线有点僵硬,为什么MAX和MIN就是那么的固定在某跟线上呢?应该要有一种上升的趋势,或者突破感,才给人一点点小期待,曲线直接往上平移一些些不就可以了么?BINGO~~

第二天

用了很短的时间,微调了下

情况一:多数情况,波动不会很大,相对平稳

原则:

  • 最高点:落在第5跟线和第6线之间,往上按照步长往上偏移步长的0.2倍
  • 最低点:希望低点不是那么低的感觉,落在第3跟线和第4线之间
  • 步长D=(MAX-MIN)/2

情况二:特殊情况,7天的值一样怎么办呢?

处理原则还是一样的

原则:

  • 仍然希望用户看到的线处于图的上方
  • 定位第5跟线,相对高且平稳,也没有那么高的感觉,有上升空间,详见下图
  • 固定步长=0.2

为什么是0.2?

  • 观察了下“多数情况”的步长,区间在0.1~0.2
  • 定值成0.2,MAX下方5格之和就是1,也就是说MAX≥1
  • 如果哪天宝宝们低于1,估计要到世界末日了

情况三:极端情况,波动很大

事实上也是不会发生这种情况的,只是为了以防万一而已,你懂的,请继续往下看↓

按照“情况一”的逻辑,如果第1跟线<0怎么办呢?

原则:

  • 仍然希望MAX和“多数情况”一样,落在第5跟线和第6线之前
  • 定位出第6跟线的值
  • 修正步长=第6跟线/6,详见下图

所有情况,捋清楚以后,也就无后顾之忧了,故事也就基本结束了。

故事总结

  1. 严审设计稿,设计稿尽量和逻辑说明保持一致,提高沟通效率
  2. 面对已经存在的设计,心存敬畏,多咨询内部小伙伴们,也多看看其他公司或团队的设计,三人行,必有我师
  3. 勤于思考,在时间和人力允许的情况,是否可以做进一步的优化,在这次的设计过程中,就是做了一次小小的尝试
  4. 如果是在现有产品中进行设计,有了疑问或者好的想法,应该组织小伙伴们讨论,达成一致的方案,最终排期上线,保证线上产品的一致性是非常重要的
  5. 如何思考呢?可以从以下几点出发:
  • 在什么场景中使用,它的业务逻辑是怎么样的,带给用户的认知是什么样的?让产品业务逻辑和展示逻辑尽量一致
  • 什么样的用户会使用,他们的心理预期如何?尽量做到符合用户的心理预期,以保证一个长期的使用体验
  • 是不是会发生违背用户预期的情况?如果真的会违背,应该思考如何设计,需要进行全盘的思考
  • 遵循MECE法则,穷举所有情况,产品设计不遗漏,实现不遗漏,测试不遗漏,不给将来留坑
 本文由 壹钱包 原创,转载请注明出处。