项目改版记录-个人碎碎念

项目简介

本次改版项目是一个考试类PC端，主要用户是6-18岁学生，主要用途是支持考生参加考试，模拟练习，以及相应的设备检测、查询成绩等。

改版目标

1、提升转化率：提升用户报名更多考试转化率；提升用户购买更多模拟练习题的转化率
2、提高活跃度：提高用户每天的使用频率
3、视觉优化：优化用户体验，助力业务增长

解决方案

1、首先由于使用者多为6-18岁学生，所以我们整体风格定为扁平风，轻松活泼，简约干净。
2、颜色摒弃了原有的天蓝色，是因为市面上大部分教育软件都会采用这个颜色，缺乏品牌差异化，改版后采用代表沉静、理智、端庄的深蓝，不仅有了差异性，也符合整个产品的基调，青色为辅助色，通常用于选中状态，以蓝色的对比色橙黄色为强调色，通常用于强调重要信息，例如报名按钮等。
3、采用大圆角卡片式布局，有利于我们对不同信息内容进行有序的整理，使界面保持一致性，并且使整个界面看起来更加的有序，不同大小的卡片还可以区分层级的重要性，提升用户可操作性，也会使整个界面设计更加美观。
4、更多的留白布局，使页面更有呼吸感，视觉感受更为舒适。

一、首页分析

改版前

1、内容太过松散，没有重心，信息层级不清晰，浏览效率低。
2、画布利用率不高，例如中间的日历部分，因为实际考试安排是一季度一次，所以实际场景中空置率相当高，排版不合理，就导致整个页面很长，有些用户甚至不会往下滑，这样就无法使用户尽可能的得到完整信息。并且日历中展示的信息及其省略，会增加新用户的理解成本，从而影响使用率。
3、板块分布逻辑混乱，没有突出核心功能，例如常用的工具入口和非常重要的设备检测，都无法在第一屏中展示出来。
4、视觉表现不够精致，banner风格陈旧太过随意

改版后

1、调整页面布局，将用户常用的工具入口放在头像下方，便于使用。并且在工具与日历部分增加主色色块，增加视觉中心，将重要的功能放在这里，便于使用。
2、将原本占幅较大的考试日历改版，改为常见的日历形式，有考试时会有小红点提示，点击到当天的日期，会展示具体的考试安排，相比旧版只展示考试类目，改版后的考试新增了具体的考试信息、考试时间和是否已报考的标签，使信息更加完整，页面利用率提升的同时还降低了用户的理解成本。
3、将原先的banner更换为更符合主题，更有质感的banner，提升页面视觉体验
4、将功能性模块分布排列在页面中心，并用彩色图标和文字增加整个页面的趣味性，相比旧版的单一呆板，使整体调性更加活泼。比较重要的设备检测部分，放在视觉中心，除了用文字提醒用户进行设备检测，还增加的小红点，进行二次提醒。
5、将旧版中的考试等级分为2个模块，将考生现在所处的等级单独拎出来设计，视觉上更加明了，并且可以增加用户的成就感从而刺激用户继续报名下一级考试。
6、在线客服的按钮重新设计，增加背景以符合整体设计风格，并且新增分享的二维码，点击后可以分享考生参加的考试，既可以满足考生的成就感，又可以达到宣传效果，刺激更多用户参与报考，得知考试-参加考试-分享考试-得知考试，形成一个消费闭环。
补充：旧版中的考试倒计时，我们整合在考试模块，信息更加统一，冗余的不重要信息做适当取舍，例如考试小tips。

二、考试中心分析

改版前

1、内容没有重点，整体缺乏设计感
2、考试列表太过窄长，视觉动线太长，且考试名称与等级实际上区别不大，可做取舍
3、标签类型不一样，且标识不够明显

改版后

1、将考试倒计时做趣味化处理，增强视觉重心的同时，提升模拟卷点击率
2、考试信息新增质感丰富的图标，增强识别性
3、考虑到现实场景中一个季度才会安排几场考试，页面空置率较高，所以可以将我的考试与考试报名整合在一个页面中。将卡片长度缩短，从而缩短用户的视觉动线，增强用户做决策的效率。将不同类别的标签分类展示，增强识别性。将选中状态做的更加清楚明显。同时将我的考试与考试报名放在一起的好处是，当用户此时没有报考时，看到右边满满的考试安排，也会刺激用户做出报考决策。

三、报名详情分析

改版前

1、重点信息没有突出且篇幅过长，操作指示不够明确。
2、流程说明放在下面明显不符合操作顺序，通常应该是看了操作说明再进行操作，而这里刚好相反。

改版后

1、将左侧倒计时做保留，同时新增实时报考播报，从而刺激用户报考相关考试
2、将原本的考试信息精细化，期次、时长、费用、日期、条件等信息都单独做了设计，使考试信息更加清晰明了，也为整个页面增加了视觉美感。
3、将报名流程的重要步骤整合成一个卡片信息，右侧放置具体的报考场次。在报考场次中以图表形式表示当前报考比率，更加直观，也再次刺激用户消费。

后期有时间我还会继续做更多这个系列，锻炼一下自己的阐述能力。闲下来的时候，将自己的项目拆分重构真的很锻炼人，在这个过程中你会有更多的思考，通过思考做出来的东西，每一步都有理有据。今天先这样啦～