3★ - 滴滴5.0全新设计背后的故事

转自CDX创意设计中心 由原文删减

0.写在前面

作为滴滴的用户体验设计师，我们一直在不断的探索，滴滴这款“工具类”产品，应该以怎样的形态去面对用户。5.0的设计主题不会偏离“简”的基本原则，希望不造作，不虚张，能轻浅的透出滴滴设计这几年沉淀出的味道、与用户分享交流。

1.设计准备

4.0到5.0

4.0后公司业务快速发展，乘客端几乎同时新增了包含顺风车、巴士、代驾、试驾等在内的多条业务线，随之，产品架构和页面布局在4.0有了重大的调整，统一是基本原则。产品服务于业务，不得不说的是，4.0的实现是有遗憾的，“统一”的有些牵强。

从设计服务于产品和业务的角度，5.0改版，我们要解决一些显而易见的已知问题：如各业务线功能、操作各异，体验不统一，平台运营页和业务运营页不能和平共处、频频冲突；

我们通过结合线上数据及用户反馈，将问题归类分析，而产出用户体验研究报告，在乘客体验出行的每一个节点发现潜在问题，并给予设计优化建议及方案。

下图就是通过收集信息数据绘制出的用户体验地图，让我们可视化的观察到在用户出行的过程中，在哪些节点存在体验断层，可以从哪些方面去优化体验问题。例如：乘客接受怎样的价格梯度，他们是否能理解动态调价背后的原理，如何减少司乘双方的等待时间xxxx

设计主导

基于5.0前的积累与准备，我们的团队试图从设计的角度去推动5.0的全新改版，我们为5.0定了三个关键词：轻量化、体验统一、高效。

1.轻量化。目标是从App Store和安卓应用市场的最大包排行榜上走下来，节能减排、轻量化设计是5.0重中之重；

2.体验统一。各个业务功能与操作各异、体验不统一，思考如何为不同的业务形态提供一套统一的设计规则；

3.高效。再次分析用户在乘车服务中的信息获取和行为操作，重新梳理的信息层级，优化用户与产品的信息连结点。

交互框架层

如何让设计框架可以同时接纳包容这么多业务类型，保证体验统一，又尽量不去磨平业务的特点，给予业务一定的发挥空间，助力产品的快速更新与迭代；面对用户，什么样的设计语言可以既高效的传递信息，又能给予用户在使用过程中的良好体验，让操作流程更轻量化。

横：抽离与布局－页面元素组件化

用户的整个乘车流程，都基本上可以被视为一个线性行为：

1. 服务筛选

2.确认发单前的表单

3.等待匹配，等待服务

4.服务中的订单操作，如取消订单、一键报警、分享行程；以及全流程的地图操作及信息获取，运营消息及系统消息获取；

5.行程结束的支付行为和评价行为

下图是线性的操作流程中，用户与产品发生连结（信息传递与行为操作）的概念图：

梳理用户与产品的连结点，从中抽离出四大组件

我们尝试着把复杂问题简单化，把流程中用户与产品交互的行为，用四大组件承载：

筛选组件

筛选组件主要承载了一级业务导航和二级场景导航。我们在一直思考如何减少用户理解业务、选择业务的成本。

5.0版本的一级导航还是沿用了4.0的设计思路，置顶于首页。而二级场景导航贴近表单卡片。考虑到用户对单一业务的忠诚度较高，将筛选放至顶部位置。而用户对某一业务下的二级分类呈波动，于是将业务导航与二级分类分开放置，二级分类更靠近下一流程的卡片表达形式。

卡片组件

卡片化可以让用户不脱离行程地图获取信息的同时，又能进行各种行程操作。

地图组件

整个服务过程需通过地图传达很多路线位置的相关信息，使用地图本身是最直观立体的表达方式，使得用户有沉浸感。

地图组件中的控件

消息组件

将即时信息卡片作为承载与用户进行临时对话的功能，可被随时调用在任何一个流程之内，增强灵活性。

四大组件布局

纵：拆分服务流程－精细化体验提升

通过将用户行为拆分为几个阶段，并归类出可被细化设计及开发的相应组件后，不同设计师可以分工合作，在框架范围内对不同组件的具体需求进行细化设计。

依据用户模型、用户行程中评价内容、产品需求等，对某个阶段的信息和功能需求进行优先级排序。例如对“服务中”的信息层级优先级梳理：