Skip to content
Gao Qianjun
返回案例

三端一体

优信养车 — 全平台 UX 系统设计

行业

汽车后市场 / C 端 + B 端 SaaS

角色

UI 负责人

周期

2019

Scope

C端App · 技师系统 · 接待看板

三端一体 — cover

项目概览

作为优信集团的 UI 负责人，我从零构建了优信养车的设计系统 —— 这是一个横跨三个截然不同平台的统一视觉与交互语言：服务数千万用户的 C 端消费者 App、供维修技师使用的 iPad/TV 车间管理系统，以及服务顾问使用的 B 端接待看板。

C端消费者 App

该消费者应用服务了上千万优信用户，业务涵盖保养、维修、洗车、钣金喷漆、道路救援及违章查询等。其中的钣金喷漆功能需要 3D 实时预览 —— 在 4 个模型视图中包含约 330 个纹理图层，在文件大小、加载速度与视觉质量之间取得了完美平衡。

Uxin Yangche consumer app — home screen
C-end consumer app — home
Uxin Yangche consumer app — service selection
C-end — service selection flow
Uxin Yangche consumer app — detail view
C-end — service detail

B端车间与接待系统

车间管理系统运行在维修工位的 iPad 和 TV 屏幕上 —— 专为在嘈杂、高对比度环境下工作的技师设计。接待看板则处理服务顾问的车辆登记流程。两者与消费者应用共享同一套设计语言，却服务于完全不同的使用场景。

Workshop management system — iPad interface
B-end — workshop management (iPad)
Workshop management system — TV display
B-end — workshop TV display

接待看板

面向服务顾问的接车看板承载了车辆进厂、登记、任务分派与车间状态的全流程。它与车间系统共享同一设计语言，但把信息密度与操作效率放在首位——让顾问在高峰期也能快速完成接车登记。

Reception dashboard — vehicle check-in
B-end — reception check-in dashboard
Reception dashboard — check-in view
B-end — reception check-in view
Reception dashboard — overview
B-end — reception overview
Reception dashboard — status view
B-end — reception status view

设计系统决策

  • ◆从零打造的三色系统：优信橙（品牌标识）、赛博坦蓝（车间标识）、车间灰（中性基色）
  • ◆以 AntDesign 为交互框架基础 —— 核心组件保持一致，周边组件融入品牌特色进行定制
  • ◆3D 钣金修复预览：约 330 个纹理图层跨 4 个模型视图，如期交付
  • ◆为 UI 团队建立设计工作流、规范文档和开发交接标准

下一个案例

设计师的 AI 代码桥→