其实早在去年的年底，已经对司机端b面的个人中心和更多页面进行了改版设计，但是改版的目的就是纯视觉改版，改版的目的并没有考虑到司机群体的操作习惯和使用场景，所以并没有解决到相关的体验。问题依旧存在。。。

什么是司机端B面

What？

滴滴代驾司机端是一款针对平台代驾司机的app，主要用于帮助他们完成接单、抢单、接送乘客的日常工作流程。而司机端的b面，查看司机所有跟“个人”相关的信息，及钱包、订单、等级等。

写在前面

Who？Where？

他们是一群穿绿背心的代驾司机，在此之前，他们可能是企业的司机，可能是快递员，可能是一个普通的公司职工，也可能是快车司机......他们穿梭在夜间的城市道路中，服务于我们的代驾的乘客们。

但他们也是一群需要被关怀的群体，他们除了“上班”正常的接单外，他们在：“下班”状态下，更关心的是什么？当前页面的设计结构否满足用户的使用需求？

可用性测试

DIY Test

什么是DIY 可用性测试？

DIY 可用性测试绝对是定性的，通常DIY test 只需要3-5位真实用户即可。它不是要证明什么？而是要让我们倾听用户的真实感受，确定要修复的问题及如何修复他们。

调研目的 — 视觉设计

针对司机端B面“更多”和“个人中心”的板块,从视觉设计的角度出发, 找到用户在体验中遇到的问题,并为此研究视觉上可优化的方向。

用户选择

通过APP叫单的方式，找到5名代驾司机

提问环节

界面浏览 —  更多页面／个人中心

目的：让用户判断我们的框架时候合理？视觉入口是否明显？用户能不能快速查找他们所需的相关内容。

更多页面界面浏览

目的：用户在测试环境下浏览界面，从上至下浏览，逐个内容进行点击，查看关注相关内容，或直接点击头像进入“个人中心”页面。页面结构比较散，用户浏览不到重点内容，用户只能地毯式搜索或者凭页面的熟悉程度进行查找。

个人中心面界面浏览

目的：用户首先点击头像查看等级和经验值，未看到相关信息后在进行查找，相关的文字和icon。新手司机和老司机对个人中心页面关注查找的侧重点有所不同，新手司机更关注客人评价。

情绪板

moodboard

什么是情绪板？

情绪板是一种启发式和探索性的方法，可以对如下问题进行研究：图像风格（photography style），色彩（color palettes），文字排版（typography）图案（pattern）以及整体外观以及感觉。视觉设计和人的情绪紧密相连，不同的设计总是会引发不同的情感。情绪板也可以作为可视化的沟通工具，快速地向他人传达设计师想要表达的整体。

关键词

结合上文的分析，司机端B面一般是在司机“下班”的状态下使用，在产品的设计上要传递给用户关键词定义为

情绪板建立

基于体验关键词创建情绪板

情绪板关键词的提取

总结：moodboard引申出的设计元素会运用到整体页面的视觉优化上，提升品牌感。

情绪板设计元素的提炼

视觉优化方向

Vision Design

根据上述可用性问题调研，总结以下视觉可优化方向

框架结构：优化布局 主次分明

a.调研更多页和个人中心页面的结构布局，增加页面的主次感觉，提炼用户常用模块，

让新老用户都能快速找到对应入口。

b.优化个人中心卡片设计，不改变操作流程，提前露出埋藏较深的入口。

视觉体系化：规范图标 统一设计样式

a.根据moodboard设计元素的提炼，整合优化icon设计

b.优化个人中心卡片设计，不改变操作流程，提前露出埋藏较深的入口。视觉优化统一子页面设计样式。

线上品牌理念： 品牌辅助体验

a.引入线上品牌理念，建立端内品牌DNA，品牌辅助体验，提要用户对平台的归属感。

UI体系优化

Redesign

根据调研报告，对司机端B面的主页面“更多页面”“个人中心”“等级体系”进行UI视觉优化。

页面整合 — 高效浏览 卡片重组

1.重新整理 “更多页面”和“个人中心”页面，梳理框架结构。“等级”、“钱包”、“订单”

是司机常用且较关心的业务入口，露出且放大常用入口。重组卡片信息，让内容的层

次分明，引导用户快速找到对应的入口。

2.突出“我”页面的等级氛围。在“我”页面，整和了“更多页面”和“个人心”的重要点击入口，在院线的版本中，青铜、白银、黄金、铂金、钻石 5个司机等级除文案，没有其它的设计区分，并且司机需要二次点击查看“距离下一等级”相关信息，加强等级入口，重要信息提前露出。

3.等级进度可视化。司机等级通俗来说是区分“好司机”和“普通司机”的重要手段，但在之前实际的运行过程中，发现有一定差异。重构等级体系，让它变得更加合理，为了适配新的等级规则，将等级模块进行可视化视觉设计，在满足功能的基础上，更加强化了司机更关心的功能细节和等级的氛围区分。

视觉体系化 — 规范升级 体验优化

好的设计是高效的，让开发能够高保真还原视觉效果，减少沟通成本，完成快速上线在改版后，升级视觉规范，建立段内的品牌DNA，品牌辅助体验。

1.icon的重新定义。在情绪板提炼出了线和面的元素，可落地在icon的优化设计上，图标作为产品的服务以及品牌传播的视觉表达应具备的一致性。所以在icon的设计上简单、易懂。能让司机准确理解icon的表意。

2.规范的重新定义。重新定义了B面的设计规范：颜色、字号、icon、列表样式等。

总结

Conclusion

这次版本的更新对自己来说最大的收获是能站在全局、站在用户的角度思考问题，从问题的调研到将发现的问题总结落地到UI上，从整个框架的调整到结构信息的整理。给用户丰富但结构简明的视觉认知。

项目完成并最终落地时，我们看到了代驾司机端使用体验满意度明显上升。但是目前仅是进程的开始，我们的工作并没有结束。比如后续设计需满足更多不同群体司机师傅们的需求，我们将更继续努力基于数据、反馈来定义更好的用户体验。