老板说一个基础弹窗我都做不好，明天走人吧，我没理他！

这次的优化案例，是充值转化弹窗。

最核心的目的是让用户一眼看清“花多少钱、得多少币、额外送多少”，以及套餐之间区别。

来看看优化前：

再来优化后：

虽然都是很细微的优化，但是每一个步骤都是干货知识，一起来看看吧！

我们可以给顶部的赞币余额加上“赞币”图标，并对这组信息简单梳理排版，这样视觉上更丰富，细节感更强：

首先，我们需要分清楚层级结构。通过观察可以发现，以下信息按重要程度排序，有：交易金额>充值币数>额外送信息>有关套餐信息的标签。

“交易金额”可以看作是最需要强调的主标题，“充值币数”可以看作副标题，我们可以主副标题打组展示，不再加入其它信息干扰；

其次，“额外送信息”我们单独给它一个纯色底板，与主要信息区分开来，卡片的样式我们也跟着调整一下；

最后优化“有关套餐信息的标签”：

首先，由于“年度VIP卡片”性质特殊，并且我们希望它在所有充值选项中“跳出来”，吸引到用户关注。

因此，在颜色上我们使用黑金对比，从而有尊贵的感觉，形状上我们可以做成异形使其更加有设计感：

其次，我们也将这个卡片进行排版优化：

最后，背景加纹理丰富细节：

来看看这个充值弹窗的优化前后对比吧：

面对多个信息组列队展示，我们的目的是让用户快速区别信息，从而作出选择或判断，不仅要优化视觉，更要注重优化体验。