驾校一点通首页设计改版(驾校一点通页面）

作为一款移动教学辅助工具，驾校的“一键”一直深受广大用户的喜爱。随着功能的丰富和强大，产品的结构越来越复杂，现有的信息架构已经不能承受产品未来的发展，修改设计势在必行。

此次5.0改版主要以结构化的方式整合各项功能，根据驾校调性重新定义产品视觉风格，使信息架构和视觉展示更加合理，打造流畅生动的用户体验。改版不仅是为了让视觉体验更具设计感，也是为了让用户有更好的体验，形成品牌忠诚度。

2016年9月底，驾校团队启动了5.0版本的设计改版。到目前的5.4版本，所有修改的内容都已经上线。在推出改版之前，设计团队在路测中调研了同类型产品，发现页面结构和视觉设计一致，产品页面多年来很少进行视觉更新迭代。所以这次5.0版本的改版，使命不仅仅是整体提升驾校一体机App的用户体验，更要形成与行业内其他产品的差异。改版期间，驾校从App、PC、Wap到品牌logo做了一系列的体验升级。本文旨在对本次App改版流程做一个完整的设计回顾。

围绕问题设定设计目标。

基于之前的产品分析，用户体验设计团队发现了以下问题：

信息结构不合理，条目多，主次信息不清。

视觉风格陈旧，风格比较单一，品牌意识薄弱。

操作页面信息杂乱，与整体页面的整合度不高。

同类产品，页面差异不大，产品差异弱。

用户体验设计团队之友多次迭代，从用户角度出发，针对问题和竞品的分析结果，不断发散和收敛，得到了本次改版的设计方向：合理规划信息架构，确定驾校一体机产品的设计调性，形成差异化的视觉语言，重新包装，提升品牌知名度，整体提升线上用户体验。

1.合理的信息结构引导用户行为。

老首页条目太多，主次信息不清，信息结构不够合理。在分析产品用户数据、用户行为和产品功能需求的基础上，互动学生重新调整了主页的信息结构。

新改版后的主要功能模块有：考试、福利、社区、发现、购车。在首页改版中，将与考试练习、模拟考试、解题相关的功能提取出来，整合到首页题头卡的内容中，使得考试解题的核心功能更加突出。同时，在测试练习和模拟测试上展示用户已经完成的试题百分比和最高分等数据，不仅可以对测试练习和模拟测试进行说明，还可以提醒用户进行下一步操作，增加产品与用户的联系。

在首页的情感设计上，我们也加入了“老司机”的形象，让老司机给用户一种陪伴感，同时也能有效的引导用户更快速直接的操作。

驾校V5.0主页改版对比图

2.确定驾校一体机产品的视觉语言，制定设计规范。

通过设计团队的多次讨论和分析，在APP5.0的设计改版中，产品需要回归用户的刚性需求：加强考试做标题页。优化科目一和科目四的在线体验，重组科目二和科目三的内容。增加福利页面，优化社区和购车页面，适当弱化和规范其他功能。

在驾校App的视觉改版中，我们得到了调研反馈，主要集中在缺乏设计感、风格保守、土气、粗糙不精等方面。根据梳理的品牌视觉体验，整体扁平化的风格让体验更轻。通过对内容布局、颜色、图标、字体等细节的重新设计，页面更加简洁、方便

新版中，所有冗余元素被去除，相似信息被系统汇总，整理成卡片作为独立单元展示，使页面干净、清晰、排版美观。整合功能模块，降低用户的理解成本，增加产品的可用性。

当前在线考试主页界面截图

2)颜色

重新定义的产品品牌颜色为——绿色，使整个页面看起来更干净、更年轻、更专业。打着“学车更轻松”的口号，对于驾校来说，轻松了一点点。让用户容易产生信任感，加深对品牌的认知，给用户一种绿色通道的感觉。选择驾校意味着一路绿灯。

修改后的引导页面截图

(3)图标

图标的图形和颜色也坚持轻量化设计，遵循品牌特色，化繁为简。采用鲜艳的颜色，使图标充满生机和活力，增加了愉悦感和辨识度。同时，我们也解决了旧版本中页面图标风格不一致的问题。

修改前后的图标对比

(4)字体

在改版中，我们还严格规范了字体颜色值和字体大小的使用，使页面具有清晰的视觉层次。标题加粗，方便用户直接快速获取信息。模块之间的距离也比以前更大，以区分层次关系，形成视觉节奏感。

作为一款成熟的产品，驾校的App从主功能页面到二级、三级页面都有上百个页面。在我们早期视觉风格形成之后，设计规范的制定对于团队设计的快速协作和团结也是必不可少的。有了规范，就可以在后续的迭代中保持原有的设计意图，遵循定制化的设计规范，维护品牌形象，从而在不断的更新迭代中保持产品的品牌形象不变，保持产品特色。同时，产品的统一规范可以增加用户的认知，有效提升用户体验。

驾校设计规范部分截图