为什么要改版
旧版充值页面设计以及体验比较老旧，随着业务扩大升级，现有的架构以及功能体验不足的问题也日趋明显。
主要存在以下问题
a.样式老旧
原界面UI老旧
信息阅读成本大，主次不明
b.支付过程繁琐
支付路径过长，页面跳转过多
用户体验不佳
c.体验不统一
活动展示以及入口多种多样
页面操作不统一，存在不需要操作交互
d.业务需求
减少充值路径跳出率
提升订单转户率
产品目标
做设计一般是以目标导向设计法进行设计的，本次改版从架构层，交互层与视觉层出发进行改版。
架构层：改动部分产品结构，提高主需求的层级，同时弱化了非主要需求的层级，并基于不同使用场景优化了产品结构。
交互层：体验上更人性化，突出重点并简化部分交互流程。
视觉层：更轻量化，极简化，理念上遵顼内容为主的设计。
改版过程
对于充值功能是一个冲动消费的过程，对用户来说最简单的操作就是【选中充值金额】-【支付】。在这个过程中任何一步多出来的操作都会减少用户充值的欲望。
1. 高效——用户
作为一个用户打开一个页面，最迫切的想法是立刻看到自己最需要的信息。
改版前
空间浪费。左侧tab区只有3个选项，最多情况下也只有5个，并且其中部分充值选项的操作并不会在该页面完成；
信息冗杂，主次不明。每个信息模块几乎是均等的；
点击【充值】会跳转到新的窗口，脱离场景。
改版后（原型图）
突出整个充值项目模块。在直播平台，用户关心的是需要多少虚拟币，需与支付金额一起提高层级关系；
tab整体移到顶部，提高空间利用率，使用户焦点更聚焦功能；
点击【充值】在该页面出现支付二维码，降低用户脱离场景的不良体验。
2. 适配——方式对应场景
降低对用户沉浸式体验的打扰，提升用户体验是每个产品都需要考虑的。
场景举例：用户正在观看直播，在送礼物的时候金额数量不足，点击充值，跳转到新打开的页面。直接脱离用户当前观看的场景。所以对用户来将显得并不是那么友好。
改版前的充值页面，从使用场景上讲是打扰用户观看体验。
经过一系列思考后，从体验上讲不应该让用户脱离当前的观看场景。决定在直播间的充值以弹框的形式展示。同时保留现有的以网页展示的充值页面。
直播间弹框展示（原型图）
在直播间充值方式以弹框展示，减少对用户的干扰，提升转化率；
直播间将支付二维码直接展示出来，即时刷新，同时将高频支付方式展露出来。
3. 兼顾——视觉
弹框属于新的功能呈现，视觉配色上依旧选用品牌色。网页支付页面为了更好的区分主次于功能，调整了页面整体的字体颜色。
4. 最终方案呈现
直播间弹框展示
网页支付页面
总结
做设计的工作就是在有限的时间和格局里进行突破。在弹框的实现过程会遇到不同的问题，譬如活动banner，在网页中是以横幅展示，在弹框由于要考虑直播间最小尺寸涉及到的高度问题，需要用竖屏的banner。
这个项目的导向就是要提升用户的付费率。项目上线后，从结果数据来看有较大的提升。并且后期会根据具体的数据情况考虑是否将网页支付方式去掉，只保留直播间内弹框支付。
