返回UIUX

01 / NIO DRIVE · SERVICE EXPERIENCE

蔚来驾享从 0 到 1 的服务体验,
到多场景产品的持续改版。

把专业服务的预约、沟通与履约,
组织成清晰、连贯且可扩展的订单体验。

主设计师0—1 产品体验交互与 UI 设计持续改版
2022.05 / 首次上线

从“预约一位专员”,
到“安排一段服务”。

围绕包时服务建立首版预约与订单框架,随后拓展亲友接送、接送机、接送火车、商务出行与上门洗车等场景,让服务能力增长时,用户仍能沿用熟悉的操作方式。

首版预约界面
专员已出发订单状态
个人角色
主设计师 · 交互与界面设计
项目阶段
首版 0—1 建设 → 迭代扩展 → 改版探索
核心任务
订单流程 · 通用范式 · 多场景服务

02 / FROM ZERO TO ONE

先建立完整订单,再为业务扩展留下空间。

首版需要快速理解服务订单的业务逻辑,在预约、派单、履约与结算之间建立完整体验。设计重点是识别哪些信息必须明确,哪些能力可以沉淀为通用框架。

理解已有订单

分析 NIO App 已有服务订单与竞品路径,梳理预约信息、订单状态及关键操作的共性。

组织完整流程

从下单到完单,明确每个阶段的信息重点、主要动作与页面结构,支持首版功能交付。

沉淀通用范式

归纳地址、时间、金额、详情与评价等组件,为后续服务场景复用建立一致的基础。

  1. 01预约地点、时间与需求
  2. 02确认服务内容与费用
  3. 03派单专员与预计到达
  4. 04履约进度与联系入口
  5. 05完单结算与评价

COMMON PATTERNS

把服务进度转化为
明确的下一步。

预约阶段优先说明地点与时间;等待阶段说明专员状态和预计到达;服务结束后收束费用、订单与评价。让页面随服务进程改变重点,而不是始终展示同一组信息。

  • 地址与时间:定义服务何时、何地开始
  • 状态与联系:连接线上订单与线下专员
  • 费用与详情:支持确认、查询和结算

03 / SERVICE FRAMEWORK

保持一致的下单骨架,容纳不同的服务任务。

将时间、地点、费用与需求备注作为共用能力,针对接送、商务和洗车等场景增加必要字段。复用交互逻辑,同时保留每类服务的业务特征。

PRODUCT ARCHITECTURE

以场景为入口,以共用能力支撑履约。

六类核心服务共享预约与订单骨架,将业务差异保留在场景字段中。

蔚来驾享 · 服务预约与订单体验

包时服务

时间 · 时长
取还车地址 · 需求备注
无接触交接 · 位置授权

亲友接送

亲友信息
时间/时长 · 取还车地址
文字/语音备注 · 交接授权

接送机

航班信息
时间/时长 · 取还车地址
文字/语音备注 · 交接授权

接送火车

车次信息
时间/时长 · 取还车地址
文字/语音备注 · 交接授权

商务出行

时间 · 时长
取还车地址 · 需求备注
无接触交接 · 位置授权

上门洗车

车辆 · 服务时间
地址 · 洗车套餐
服务介绍 · 精选搭配
共用预约能力

车辆与联系人 → 地址与时间 → 费用与优惠 → 协议与确认

订单生命周期

预约确认 → 专员分配 → 出发到达 → 服务履约 → 支付评价

场景 01

以时间为单位,承接开放式服务需求。

把时间、地点和服务时长作为稳定的下单骨架,备注与偏好补充个性化需求。

  • 服务时间与时长
  • 取还车地址
  • 文字/语音备注
服务界面 · 项目设计稿
包时服务预约页面设计
共用层

时间 · 地址 · 费用 · 订单状态

统一信息顺序与操作反馈,减少每新增一个服务场景就重新学习的成本。

+
场景层

联系人 · 航班/车次 · 车辆/套餐

把差异放在与任务直接相关的字段和说明中,保持服务识别度。

04 / ORDER LIFECYCLE

让每个服务阶段,都有明确的进度与操作。

以包时服务为例,将服务已创建、专员分配、出发、到达、履约与结算组织为连续的状态体系。页面随进程切换信息重点、联系对象与操作入口,把线上订单与线下服务衔接起来。

ORDER STATE / 01

订单提交后,谁会来安排服务?

在专员尚未分配时,用明确的等待提示说明下一步,并根据用户情况提供专属服务群或热线入口,避免提交成功后的信息空白。

信息重点
场景、地址、时间与需求汇总
操作边界
取消订单 · 修改预约
联系对象
专属服务群/热线
服务已创建订单详情设计稿
服务已创建 · 订单详情设计
预约可用性

时间可查看,约满不可提交。

通过“仅看可约”与约满标记帮助选择时间;切换到不可选时段时,确认按钮置灰,让可用性约束在提交之前显现。

优惠可解释

不可用的卡券,也说明原因。

将卡券分为可用与不可用,保留适用规则的展开入口;金额与抵扣同步呈现,让优惠选择与订单费用建立对应。

取消有预期

在确认前,说明取消的影响。

服务状态决定取消入口是否可用,涉及费用时以二次确认提示金额,并提供计价规则,避免用户在操作完成后才理解结果。

05 / PRODUCT EVOLUTION

从单一预约,演进为多场景服务入口。

驾享从 2022 年 5 月首版上线,持续扩展取还车、服务备注、定制服务及多场景入口。每一阶段都在补充业务能力的同时,重新组织页面中的信息权重。

  1. 首版上线

    建立包时预约、车辆交接与服务订单的基础体验。

    2022.05 · 首版上线
  2. 取还车与需求补充

    补充还车位置、同址送还及语音备注,完善预约信息。

    2022.09 · 取还车与需求补充
  3. 定制服务扩展

    加入途经点与定制服务,将服务偏好组织为可选内容。

    2024.02 · 定制服务扩展
  4. 多场景组织

    以包时、机场/火车站接送、亲友接送分组组织预约。

    2024.05 · 多场景组织
  5. 服务入口整合

    整合驾享、商务出行与上门洗车,强化车辆与服务场景的切换。

    2024.10 · 服务入口整合
  6. 任务与服务内容融合

    将预约卡片、服务入口、权益和使用场景组织在同一首页中。

    终极形态探索 · 任务与服务内容融合

06 / RESEARCH & REDESIGN

聚焦下单任务,重组首页信息优先级。

2024 年 10—12 月,驾享通过增加入口曝光、引入外部流量推动拉新与订单增长。随着日活提升,下单转化仍低于预期,订单增长承压;用户对服务能力与使用场景的认知不足,首页需要同时承担预约发起、服务理解与权益触达。

SCENARIO → MOTIVATION → DESIGN

先理解用户要安排什么,再决定界面先说什么。

围绕已有服务能力与团队用研,整理场景、动机和决策信息,连接业务功能与页面优先级。

使用场景与动机 · 设计归纳
使用场景行为动机决策信息界面回应
聚会/临时出行需要用车,但不便或不想自己驾驶明确服务时间、时长与预估费用包时预约:集中时间、地址与备注
亲友接送替他人安排出行,希望交接清楚区分下单人与乘车人,明确联系人补充亲友信息与代叫关系
机场/车站接送围绕航班或车次安排确定行程先确认行程,再核对接送时间与地点按场景提供航班、车次字段
商务安排希望行程可靠,服务符合商务要求了解服务标准、费用和需求沟通方式服务说明与预约信息协同呈现
车辆清洁节省洗车往返与等待时间核对车辆、服务地址、套餐与时间套餐选择与上门条件分层展示
首次了解服务有潜在需求,但不清楚驾享能做什么用具体场景判断是否适合自己首页补充服务入口、使用场景与说明

将诉求归纳为三类设计任务

看懂服务

  • 用具体场景解释服务能力
  • 明确服务范围与费用规则
  • 为首次使用提供决策信息

完成预约

  • 集中地址、时间与服务条件
  • 区分本人使用与帮人安排
  • 按场景展开必要字段

掌握进展

  • 明确谁在服务、何时到达
  • 让操作随状态变化
  • 保留费用、订单和评价路径

场景动机为基于业务功能的设计推导;入口难发现、时间确认易忽略、服务与费用认知不足等问题来自已有团队用研。

REDESIGN / VALUE & STRATEGY

连接“理解服务”与“发起预约”。

以清晰的服务认知和稳定的下单路径承接新增流量,为业务扩展与权益运营提供明确位置。

01

服务感知

让陌生用户知道何时需要驾享
设计策略

场景入口、服务说明与使用案例共同解释服务价值。

02

决策信息

帮助判断条件、费用与适用性
设计策略

围绕当前任务组织地址、时间、预估费用与差异字段。

03

预约效率

快速发起与详细确认分层
设计策略

首页集中关键预约信息,确认页承接补充需求与定制服务。

04

业务扩展

让新增服务与权益有稳定位置
设计策略

独立服务入口、权益卡片和可配置内容模块承接变化。

以上为改版目标及设计价值,不作为已验证的效率或转化提升结果。

改版目标:稳定框架,讲清服务,连接权益。

01 / 结构与路径

降低层级,支持持续扩展

原首页包含三个一级 Tab 与四个二级 Tab,新增服务不断改变页面架构。以稳定的预约卡片和场景入口替代层层叠加,让服务扩展时仍能沿用清晰的下单路径。

02 / 服务认知

让用户理解驾享可以做什么

将具体服务场景、服务优势与优质体验内容汇总到首页,补足只展示表单、缺少服务说明的问题,帮助新用户判断适用场景与服务价值。

03 / 权益与运营

让卡券和活动被发现、被理解

补充权益与活动的展示位置,连接服务需求与优惠信息;为不同运营内容预留可配置模块,减少对单一 Banner 和盲盒活动的依赖。

结合团队三周年用研中的访谈与原型试用反馈,将业务问题进一步转化为入口识别、预约确认和服务理解的设计任务。

12位受访者的原型反馈

团队用研中,9 位偏好核心业务更聚焦的“滴滴式”结构,11 位可接受选择送车地点后进入订单确认页。结论用于改版方向判断,清爽的视觉风格与清晰的确认环节同样重要。

01

入口不够显眼

爱车页中入口配图与文字颜色接近,部分用户难以发现驾享。

设计回应

突出入口识别,精简并区分高频业务入口。

02

地址与时间易误操作

地址表单紧凑;默认服务时间可能在跳转中被忽略。

设计回应

增强起终点关系与可点击区域,让服务时间经过主动确认。

03

服务与费用理解不足

部分新用户不清楚包时服务范围、附加费用及接送机服务细节。

设计回应

将服务说明与费用解释放入关键决策位置,减少预约前的不确定性。

04

营销内容偏离当前任务

用户对泛社区内容兴趣有限,更需要与服务相关的信息。

设计回应

优先场景入口、服务说明与常见问题,让运营内容围绕当前任务展开。

FRAMEWORK / BEFORE & AFTER

从“按分类展开表单”,到“按用户任务分层”。

导航与场景切换预约与主要操作服务、权益与内容

改版前 · 2024.10

两级 Tab 组织服务,预约与定制内容沿页面展开。

车辆与顶部操作车辆身份 / 订单入口
一级服务分类驾享 / 商务 / 洗车
二级场景分类包时 / 亲友 / 机场 / 火车
预约表单地址 / 时间 / 时长 / 途经点
定制服务附加服务的选择与说明
底部确认订单提示 / 预估费用 / 确认
  • 场景依赖两级分类,新增服务会继续影响导航结构。
  • 预约与附加服务位于同一页面,需要逐段理解。
  • 适合已明确服务类型的任务,服务认知与运营展示空间有限。

新版 · 任务与内容分层

关键预约前置,服务发现、权益与内容各有位置。

品牌与顶部操作服务形象 / 订单入口
核心预约卡片地址 / 时间 / 车辆 / 代叫 / 费用 / 去下单
多场景快捷入口按具体服务直接进入
权益与活动卡券 / 套餐 / 运营活动
场景与故事何时用 / 为什么用
分场景订单确认页差异字段 / 定制服务 / 补充需求
  • 关键条件集中,费用与下一步就近呈现。
  • 服务入口独立,降低导航层级对业务扩展的约束。
  • 使用场景补充服务理解,权益拥有固定展示位置。
结构取舍

新版承接更多服务和内容,也需要控制首页长度、模块顺序与首屏权重。以快速预约为主,内容提供场景补充,避免新的信息拥挤。

框架图依据已提供界面提炼,不代表完整页面比例;效率与转化表现需后续使用验证。

HOME / BEFORE & AFTER

从多层级服务表单,到围绕任务组织首页。

2024 年 10 月版本以两级服务分类组织预约与定制服务;后续改版将预约卡片、场景入口和服务内容分层组织,兼顾快速下单与服务理解。

改版前

改版前首页 · 2024 年 10 月
改版前首页 · 2024 年 10 月

改版后

改版后的驾享主首页
驾享首页 · 预约、服务入口与内容展示
包时服务服务首页
包时服务
机场接送服务首页
机场接送
接送火车服务首页
接送火车
一键送车服务首页
一键送车
上门洗车服务首页
上门洗车
商务司机服务首页
商务司机
上门喂宠服务首页
上门喂宠

信息层级:从逐项填写到集中确认

改版前通过两级 Tab 切换服务,预约、途经点与定制服务纵向展开。改版将高频预约字段集中在卡片中,车辆、代叫与途经点按任务关联组织,便于核对本次服务条件。

操作路径:让费用与下一步相邻

改版前以页面底部的费用与确认入口收束预约。改版在预约卡片底部并置预估费用与“去下单”,并以订单确认页承接定制服务和补充需求,将快速发起与详细确认分层组织。

业务扩展:稳定骨架,区分场景

包时、亲友接送、接送机与商务出行沿用地点、时间、费用和行动入口的共用结构;航班、联系人等差异字段随场景调整。下方内容承接服务推荐,避免与核心预约信息混排。

07 / PROJECT IMPACT

在持续使用中,积累服务体验。

146,257累计用户总数
3,600+每周用户量
7,000每周完单量
22,000每月完单量
4.96用户满意度

业务数据截至 2024 年 12 月,来源:项目汇报。上述数据反映整体业务表现。

用户反馈记录 · NIO App 与社区服务体验
用户反馈记录 · NIO App 与社区服务体验

08 / DESIGN CONTRIBUTION

从一条完整流程,到一套能够持续演进的服务框架。

从 0 到 1 建立体验

作为主设计师组织预约与服务订单的交互、页面框架及 UI 设计,连接线上操作与线下履约。

跨业务沉淀共性

归纳地址、时间、费用、状态与评价等通用范式,让多个服务场景共享一致的交互基础。

通过研究推动改版

结合团队用研与业务需求,重新审视入口发现、下单确认与服务认知,将改版方向落实为页面结构与交互方案。

SERVICE ORDER / DESIGN PATTERNS

从驾享项目,到服务订单的统一范式。

不同服务在下单、履约与完成阶段的页面结构各有差异,增加了用户理解与跨业务设计协作的成本。基于驾享项目的订单设计实践,结合一键维保、灵活升级等服务,进一步整理面向 C 端服务流程的共用规则。

页面框架一致

以服务下单、服务中、待支付、服务完成划分四个阶段,随进程调整信息优先级。

模块结构可复用

归纳状态、服务信息、费用、订单和操作模块,区分基础模块与业务可选内容。

为业务扩展留空间

用一致的体验结构承接服务差异,在专业感、可理解性与人文关怀之间保持连贯。

以一键维保、灵活升级、代驾、洗车和驾享等服务为参照,归纳页面框架、流程结构与可复用样式,让不同业务在服务专业感和操作认知上保持一致。

整体范式设计规范原稿
← 返回全部作品