设计小结系列：微脉钱包“升职记”-我是如何改版产品的
背景：
微脉钱包是互联网金融类产品，承担微脉互联网+医疗的整个金融体系，连接线上和线下服务，为用户提供余额充值提现、账单查询、银行卡绑定、先看病后付费服务、分期付款、红包等完整的医疗金融服务。在医疗健康改革大背景下的互联网+尝试。
image.png
为什么要改版？
-
微脉钱包依托于微脉app存在，微脉经过两年多的迭代发展已经到了4.5版本，逐渐的成为用户贴心的健康官。由于随之匹配的金融业务及功能也逐渐增多，但钱包页面框架还停留在1.0时代，当然这由于各种历史原因就不说明了。因此老旧的框架已经不能优雅的支持现有的产品功能及运营需求。
-
用户体验是互联网老生常谈的话题，老版页面最开始功能业务简单，所以信息框架粗暴的把所有模块和功能都放在钱包首屏，这也造成了产品定位不明确，重点模糊。而且不同功能界面之间的导航设计规范不统一，按钮规范也不统一，容易造成用户操作懵逼，影响目标任务进行。
-
用户体验也包括表层的视觉表现，老旧的1.0视觉设计也已经和微脉app整体设计层次断代，也影响了微脉整体的产品形象，好的视觉设计可以拉近用户好感和信任感。
竞品分析
其他产品金融页面.png
可以总结出类似产品的共性：
- 框架结构根据产品特性有选择列表式的和宫格式的
- 主要功能功能突出显示，辅助功能操作隐藏
- 信息层级分类清晰，识别和获取容易。
- 设计扁平化，区域色块化，内容突出。
设计方向和思考？
-
金服钱包首页产品功能已经达到十个，如何合理的设计这些功能入口，如何打造简单高效的用户体验。我们先思考下信息架构设计的目标是让信息更加容易的被浏览和理解。而且要保证以后扩展性，能承载更多的信息和功能。
-
我们可以看到其他产品最常用的是列表导航及宫格导航。列表导航也常见与二三级页面，比如支付宝，云闪付，微信等，优点是扩展性强，层次清晰，分类容易 ，缺点也是层级多了后容易视觉疲劳。考虑到金服业务已经趋于稳定，而且各功能业务相对独立，不适合列表类主次排列分类组合，本着提炼用户最有价值的功能和最常用功能突出显示，其他单独互不影响的业务功能才用宫格显示，大面积的方片按钮也更容易点击。
钱包新版改版设计总结.png
-
健康钱包在微脉的二级里，主要服务对象是微脉用户，提供在线支付功能，因此账户余额是首要展示的内容，同时对余额的操作是充值和提现，把他们放到一起，能方便用户操作，一目了然。
-
上个版本中余额明细页面是通过点击余额数字跳转，但通过用户反馈和调研发现大部分用户并不知道可以点击数字查看余额，需要给个明确交互方式比如按钮来告知用户，因此把明细按钮放在右上角，然后降低一点透明度，这样即从格式塔原理是做到同类靠近，便于理解，又不至于喧宾夺主。
-
功能模块讨论后采用方块卡片设计，便于扩展和调整。而且页面整体结构饱满平衡，在这里给设计师点个赞，用户反馈页面直观清爽高大上。
收银台.png
-
收银台承载了微脉的支付场景功能，也是用户使用频率最高的功能之一。对收银台改造也是内部比较有争议的地方。
-
收银台的主要任务是什么？用户最关心的是什么？它需要传达给用户的首要信息是哪些？我们想引导用户做什么？如果不搞清楚这些问题，就没办法合理的设计信息框架。我们认为收银台不应该是让用户思考和停留的地方，需要第一时间让用户看到订单信息，价格，支付方式，然后操作。任何分心的操作和元素都不应该出现在收银台。
-
人眼从上到下，从左到右的扫描方式浏览信息。因此订单信息部分在上部显示。根据菲茨定律原则把订单内容从原来的靠左对齐移到右边，并且在字体颜色上突出，这样用户只要每次把视觉定位到右边扫描一下就可以看清楚内容，而不需要把整块信息都从左到右的完全浏览。
-
1.支付方式从原来的4种增加到了6种，新增了诊后付，分期付。从用户体验上讲，我不赞成所有支付方式全盘罗列出来，给用户造成选择负担，而且我们认为收银台应该一屏显示完毕，不应该存在滚动浏览等操作。因此我们建议显示3个用户最常用的支付方式显示在前三。
2.运营的需求是把诊后付和分期付都置顶，对于首次使用未开通的用户引导去开通。这个方案我们当然是不同意的，收银台是提高转化率很关键的一步，开通流程又是很多步骤，这样会造成订单流失率的增多，对用户体验也不好。
3.最终为了达到商业目的和用户体验的平衡点，诊后付和分期付同时首次出现在收银台首选项和次选项，保留半个月时间推广期，对于没开通诊后付业务的城市医院则隐藏，支付方式都有后台配置。同时app首页的banner广告区域投放诊后付和分期付，满足运营需要。 -
最后底部区域，我们把原来只有一个大按钮调整到右边，然后在左边放一个价格，这样目的是方便用户在经过上面一堆信息后，最后还能一眼就知道最终要支付价格，然后确认支付，能提供直观便利的尽量不让记忆去承担。
钱包新版改版设计总结.png
-
充值和提现流程改版较为清晰明确，原有的充值页面不支持微信等第三方支付方式，也不提供银行卡绑定入口，用户必须从钱包首页进行银行卡绑定。但经过用户调研发现，绝大部分用户是在某个场景中需要某个功能才会去操作，否则不会主动去尝试。因此当用户在钱包页面首次需要充值，或者提现时候，才会去绑定银行，所以我们在充值或者提现的第一步放了银行卡绑定的入口操作。
-
支付结果页信息层次重新设计优化，一目了然，读取轻松。账单明细和余额明细页，对信息重新做了组织，对不同账单类型和状态做了更加细化的显示。对H5键盘重新进行了优化设计，更加的美观好用，提升灵敏度。
- 这次改版重点解决以上这些问题，还有包括其他所有页面的视觉优化就不再赘述。这次大刀阔斧的改版，全面优化了交互框架和视觉设计，兼顾了商业述求和用户体验。解决用户需求和提升效率方面都进行了深刻的思考和实践，后期通过用户调研及数据分析都极大的肯定这次成果，钱包页面访问量及里面各大功能模块的点击率都提升30%以上。以后还有很多细节地方需要不断的打磨，我们也会继续的努力。
