滴滴代驾APP司机端UI设计总结

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

万事开头难，做设计也是如此。

今年3月，在大家的共同期待下，滴滴快的代驾业务正式启动。半年时间，产品经历了从0到1的跨越，从1到1.1的蜕变，并在不断打磨中前进，努力为代驾司机创造出更优质的体验。

在无数次的加班改稿后，终于有时间做一些沉淀和总结，希望这些分享可以帮助同样需要经历从0开始的设计师们。

一,   前期准备

1，项目介绍

滴滴代驾司机端是一款针对平台代驾司机的app，主要用于帮助他们完成接单、抢单、接送乘客的日常工作流程，并辅以订单记录，费用明细，乘客评价等其他功能。

2，竞品分析

在国内市场，代驾绝非新品。早在滴滴代驾之前，就已经出现了一批较为成熟的代驾产品，如e代驾，爱代驾，安师傅等。对他们的界面分析必不可少。

通过分析我们发现，国内大部分代驾产品将主要精力放在乘客端设计上，司机端界面设计较为粗放。而滴滴快的作为国内最大的出行平台，如果想在代驾市场中占据一席之地，不仅需要争取更多的乘客资源，同时也应该更好的体现对司机群体的关爱。

3， 了解用户

唐.诺曼说过，如果在用户界面设计和人机交互领域中有任何神圣的原则，那必然是"了解你的用户"。

设计前期，我们根据调研结果制作了一系列的用户画像，以便更好的根据用户实际需求找到适合他们的设计语言。

通过这些用户画像我们总结出代驾司机的几个特点：

a, 工作时间晚；

b, 接单地点环境嘈杂；

c, 追求高效，快速的工作效率；

基于以上特点，我们最终提炼出如下设计关键词：

二，定义色彩

色彩在视觉界面中扮演着非常重要的角色，通过定义色彩，可使界面主次分明，节奏感强烈；不仅如此，主色辅色的合理搭配，还能用来提升产品氛围，增强产品情感化。

1，主色

由于代驾为快的旗下产品，项目初期，我们决定以快的品牌色－绿色为基础进行延展。

考虑到代驾司机实际使用场景为夜间，而快的原有品牌色较鲜亮（左），容易在夜间对眼睛造成刺激，我们在原有品牌绿的基础上进行了明度的减法，得出了代驾司机端的主色（右）：

2，辅助色及点缀色

除主色，还需要一系列辅色来表示产品中需要强调、警示的部分，该部分内容需要与主色形成强烈对比，以便用户识别。基于该点考虑，我们在定义辅助色的时候，选取了与主色在色环角度相差较大的颜色（经常有人问我配色的方法，这里再次推荐下kuler）。

最后，在不影响品牌主色的基础上，又另外选取了一系列明度，饱和度相似的其他颜色作为点缀色，必要时用于图标，文字等。

三，定义结构

对界面信息的合理划分，是确保用户操作准确舒适的第一步。

1，整体结构

依据产品经理给出的原型图，我们将代驾司机端归纳为如下三种主要布局模式：

A,  顶部导航＋内容区＋底部操作按钮

B, 内容区＋底部操作按钮

C, 顶部导航＋内容区

其中A,B两种结构主要用于司机主任务流程，C结构主要用于其他辅助功能及相关信息展示。