曹操出行是如何进行ui/ux设计改版？

从15年5⽉成⽴曹操专车至今，产品经历了多次的迭代优化，从单一的打车业务扩展至全方位多元化的出行产品和服务，产品布局上涵盖从出行、旅游到本地生活的多个领域。这次的 APP 4.0版本除了打造平台化体系建设之外，也是一次整体品牌升级。网约车市场竞争日趋激烈，面对用户固有习惯和同质化产品，如何去打破并发挥优势为产品提升卓有成效的用户体验，这是我们面临的挑战，也是曹操设计团队探索推进出行平台生态体验创新的一个过程。

设计思考

1. 业务诉求

随着业务的快速发展及用户体量的增长，现有的功能和框架已不能承载平台化业务发展，单一卡片式的展现形式限制了内容与运营配置的空间，面对越来越多的业务场景需要展示和营销推广资源的拓展，需要更合理的平台化服务体系和更高效的空间利用。

2. 用户诉求

通过问卷调研，用户访谈，各渠道反馈及数据方面的分析梳理，也通过用车体验地图来挖掘用户深度需求，以便我们重新定义设计需求和找到设计切入方向。

3. 体验升级

一切为了更好的开始，为乘客提供全链路的出行服务，让每一次出行变得更安全更省心，与用户建立可信赖的品牌信任度。在用户侧，通过用户体验地图梳理用户在服务流程中的行为和体验，从出行前、派单等待、行程中到行程结束的全流程物理接触点和情感接触点提升用车体验。

交互上精简专车核心流程的非必要操作，在框架上打造新业务场景独立性的同时统一体验，降低用户认知负荷和操作成本；视觉上采用轻量化的设计语言，对功能模块进行分类、展示信息分层，通过灵活可适配的组件打造视觉的一致性和延展性；品牌上延续绿色出行理念，通过更多情感化的设计，围绕产品、运营在线上线下场景中的构建与传达，建立愉悦的情感关系，与用户产生更多的共鸣。

4. 设计目标

方案的演进

1. 拓展业务的能力 – 搭建可持续的框架

拓展营销多样化配置

首页架构分为上中下布局，由头部 title bar 展示业务线，中间地图显示位置及车辆信息的信息区，和底部用车功能操作区组成。为了增加更多功能露出及运营资源，需要在固有及有序的结构中寻求差异化的表现方式，通过系列位置效应理论的应用，最大化匹配用户浏览路径，用活卡片并对其解耦，我们在原来的用车卡片上演进出了上滑展示更多的方式来提升浏览空间。承载内容多样性的同时运营内容可后台配置，不需要 app 推送更新，在灵活性及时效性上得到了保障，更好地提升模块坪效，也为后续拓展提供了更多的可能。

拓展更多功能入口

功能列表本身支持上下滑动，为了打破一屏可展示内容的局限，以及赋予各功能更多亲和力，采用了宫格的布局方式，向上推动可滑动功能区域，折叠头部头像区域的显示，展示更多的功能入口，方便用户选择和满足不同业务的更优展示。

适应更多用车场景

用车场景新增加了多终点用车功能，拓宽用户用车场景，不再依赖于线下和司机沟通指路，解决用户一接多送的需求的同时有效避免路线相关费用的投诉。

4.0版本的地址起终点使用了一行展示效果，在阅读性上，信息阅读更流畅，展示更简洁。但也带来了另一个挑战，气泡会超出屏幕外和气泡之间的重叠。为了保证长度不超过屏幕外，我们制定了一系列规则，气泡会根据屏幕判断显示在定位点到上下左右位置，以及定位点相近的气泡重叠也制定了相应的规则翻转，保证有效内容的完整显示。

底部卡片信息重组，调整了卡片信息的展示优先层级，使用 tab 切换的形式将多车型和价格优惠信息展示出来，增强用户打车意愿，另将活动营销信息与用车信息区别放置，信息分区更明确。

2. 提升用车效率 – 服务体验优化

服务提升，平衡需求与运力

排队等候：当早晚高峰及用车区域供需紧张时，用户等候时间较长。把当前排队信息展示给用户，让用户知晓当前派车状况，缓解等待焦虑感，提高成单率。

付费调度：排队无法满足运力的情况下提供服务升级远程调度，给用户更多用车方式的选择，满足用户时效性的同时提高平台的成单率，合理调度平台有效运力。

优化信息结构，提升支付效率

3. 品牌强化 – 塑造可靠性与亲和力

品牌延续，强化认知

结合曹操出行新能源、环保节能的产品特点，沿用了「品牌绿」，并通过情感化插图、动效等方式来强化用户认知。

字体/色彩/图标

色彩体系上延续绿色出行低碳环保调性，突出强化品牌色，减少配色提升专注度。降低字体类型数量，强化排版设计让信息更快触达。图标扁平易识别，侧重体现亲和力。

插图

定义插图设计原则：视觉识别性、全局统一性、体验趣味性。

目前插图采用主体元素（视觉识别性）+小人场景（趣味性）+辅助元素（全局统一性），来做统一的情感化插画，给用户传达当前页面的状态之后，引导用户的正向操作。

根据设计规则，设计延展出一系列缺省页插图。

引导页：通过插画形式、场景化搭建来表达设计意图，为品牌塑造个性、彰显独特性。加强氛围及新用户的代入感，拉近用户距离并提升用户愉悦度。

情感化动效

用户使用产品，可预期、可控制的感知往往带来正向的体验，并且促进用户进行完整的操作。正向的情感也会使用户更乐于使用产品，遇到使用过程的一些小问题也更加包容。主要从可控的感受、积极的反馈、贴心的提醒、情境的烘托4个维度进行设计落地。

曹操出行官方网站：除了客户端以外，在其它场景的设计，也遵循统一的视觉表现形式。

定义助力高效协同的设计原则

在设计过程中，对于很多固化的流程不会频繁变动，我们从交互层面整理了控件库，然后视觉将控件库标准化，最终帮助前端开发将标准的控件代码化。通过这样的体系搭建，模块控件化依据规范，迭代优化方案就可以快速的调用控件搭建起产品页面；视觉样式上对亲和力的表达，卡片的圆角、渐变明度饱和度的提升等核心元素进行统一规范，最大程度降低设计成本，有效释放人力资源并提高团队的整体设计效率。

1. 定义设计原则，助力高效协同

2. 组件化搭建

3. 组件化落地

结语

过去的2018年对网约车市场来说是极具挑战的一年，也是技术和服务实现飞越的一年，面对用户日益增长的个性化出行需求，我们积极响应，为用户的安全出行创造最佳的体验。在这个过程中我们的设计团队也从0到1，由陌生到默契，携手朝着同一个方向努力，感谢这个过程中参与的每一位伙伴及给予我们帮助的用户，使得我们的 APP 越来越好。

原文作者：曹操出行CDC  https://www.zcool.com.cn/article/ZOTA4ODUy.html