牛客APP3.0.18体验升级

摘要：

描述：

1、改版背景

• 产品背景

• 牛客主要是为在校生和毕业三年以内的互联网群体提供求职学习的平台以程序员为主；

• 用户数据

• 在改版之前产品是没有详细的用户画像数据，改版前期通过与产品侧沟通配合整体出比较明确的用户群体和详细的用户数据

• 为什么改
  

• 通过前期的问卷调查和用户的nps数据反馈，旧版的数据并不怎么好，对于用户而言已经无法满足他们的日常使用体验，大多的声音表明用户对于牛客的认知与实际产品传达的信息差异比较大；

• 我们对接受到的用户信息进行归纳整理，提取出产品关键词

2、明确设计目标

• 通过一部分的nps数据反馈和调研，整理之后我们的设计目标就浮出水面，我们此次从三个方面强化品牌调性（旧版不具备品牌辨识度），升级视觉风格（规范统一，更具有专业性），优化交互体验（提升用户使用流畅度和操作效率）

3、设计过程

• 风格定义

• 牛客的用户大多数为在校生少部分为工作三年内的人群，这两类群体共性：程序员、年轻群体、认知高；

• 总结我们自身问题再结合用户属性，我们聚焦于：

• 简约（信息降噪+认知减负，用户使用时长较短，通过极简风格提升信息传达效率）

• 年轻化（用户年龄阶段主要为25岁左右和在校生为主，对于牛客而言希望打造一个更年轻化的产品）

• 品质（整体学历水平较高，对生活上目标追求相对更高，以统一产品品牌调性来强化出产品的品质）

• 竞品分析

• 对直接竞品和间接竞品进行分析提取出共有的特性；

• 通过定量问卷的形式我们得到了牛客用户访问频率较高app他们的共性点都是使用卡片风格进行模块层级划分，

• 包括调研了一些泛娱乐的产品更多的趋势是使用卡片布局

最终我们决定使用卡片模式为整体风格，卡片能够体现出产品年轻化同时对于牛客这种业务板块复杂内容繁多的产品能够友好的区分信息层级

• 我们对不同大小卡片依据不同的边长制定圆角规范，保持视觉统一性

• 色彩定义

• 产品主色在不脱离用户对产品认知的情况下延续旧版绿色进行优化；

• 前期也在定量调查时得到用户大多数使用场景属于室内，所以为了避免用户长时间使用产品时收到视觉上的刺激，在旧版色彩的基础上进行了饱和度和明度的调整

• 图标规范

• 图标设计时也在探索适合产品调性的样式，最终使用了线形圆角图标，线形的特点具备一定的专业性，圆角能够衬托出图标的年轻风格，并对图标进行了统一的规范设计保持视觉上的统一

• 板式规范

• 重定义页面栅格系统，使模块与模块之间更具有呼吸感，有效提高信息浏览效率

• 组件规范

• 由于牛客产品社区板块多样化、业务场景复杂，这次改版把社区模块进行规范整理以组件原子系统进行梳理不同元素，对其进行组合适配到各个业务板块中

• 成长体系

• 优化用户成长体系，旧版成长体系没有明确的标识图形，应用在产品过于混乱同时对于其他业务场景无法满足，新版成长体系以标签化形式展示能够激励用户的攀比心理提升用户粘度，同时具有业务侧的拓展性

• 强化品牌

• ip形象你产品最容易强调用户认知的视觉元素，我们在页面中进行情感化设计的过程中融入ip形象加强用户对牛客的认知感

4、设计对比

• 首页

• 牛客首页是由功能入口和社区两个模块组成我们看了旧版的一些数据情况和用户反馈信息，对首页从2个维度进行了分析；

• 交互层：

• 1、入口：功能无法聚焦，业务入口繁多并且视觉上无法进行区分，新版我们对此进行优化从数据的角度去除一些重合度较高的入口；

• 2、社区：旧版社区用户状态杂乱，没有对其进行统一维度进行归类，用户在阅读内容时无法聚焦内容本身，在这次改版中我们对社区进行信息+功能的归类整理

• 视觉层：

• 1、视觉上规范不够统一，包括字号、行号、栅格间距、颜色使用等，对此我们进行了一系列的规范保证视觉的统一性

• 2、视觉无法聚焦功能，新版我们根据数据和用户行为分析把核心入口通过视觉效果进行曝光突出提升首页的分发效率

• 题库
  

• 题库业务板块对于校招生用户群体使用频率是非常高的，但是在旧版上整体的交互体验非常差，相同的入口重合度较高，如公司试卷，在线编程等入口；

• 我们从交互和视觉的方向进行优化，去繁从简入口整合，对操作路径进行优化，在不脱离用户使用习惯的情况下减少用户操作路径更快达到用户目标，视觉侧进行了规范性的优化如布局间距、字号行高等

• 其他页面

• 其他部分页面整体按照新的设计规范和交互规范进行设计，在视觉上保持统一

5、最后

• 这次升级只是开始，会持续寻找不足提升体验，希望通过这次改版，让用户看到全新的牛客，产品能够得到真正的成长，每一位在校生能够通过牛客收获到自己的知识，收到自己心仪的offer