02 / VOLVO DIGITAL EXPERIENCE

Volvo Digital
Experience.

参与 Volvo App 的社区、商城、Service Tab 和设计规范,并负责 13 个企业微信应用的设计。本页重点介绍 Service Tab。

Volvo App Service Tab 首屏
Volvo 福利服务应用首页
RoleApp UX/UI · WeCom Design Lead
ScopeVolvo App 多模块 · 13 个企业微信应用
Time2022.11—2025.06
PROJECT SCOPE & ROLE / 01

参与 Volvo App 多个模块的设计,并负责企业微信应用的设计规范和组件库。

Volvo App 的工作包括社区、商城、Service Tab 和设计规范;企业微信项目中担任 Design Lead,负责信息架构、关键页面、规范和组件库。下面重点介绍 Service Tab。

A / VOLVO APP

App UX/UI

参与多个 App 项目,工作包括需求分析、界面设计和上线协作。

  • 社区 · 内容与互动体验
  • 商城 · 商品与交易体验
  • Service Tab · 本页重点展示
  • App 设计规范 · 跨模块一致性
信息架构 · Concept · UI · Guideline · 上线协作
B / WECOM

企业微信
应用设计

负责从需求确认到 UI 交付,并建立设计规范和 Figma 组件库,供 13 个应用后续更新使用。

  • 职责 · Design Lead
  • 问题 · 多个应用缺少共同设计语言
  • 结果 · 13 个应用均已上线
Guideline · Component Library
VOLVO APP / SERVICE TAB / 02

Service Tab:从固定入口改为按用户状态排序的服务首页。

先梳理潜客、等待交付与不同动力类型车主的任务差异,再调整首页优先级。

旧版把购车、用车、车控、充电和养修放在相近层级,没有区分用户当前最需要的服务。同时,方案还要适应中国版与 Global 的代码拆分、地图和充电场景差异,并保证可以开发。

BEFORE / CURRENT STRUCTURE + UI旧版入口完整,但没有按用户阶段和当前任务安排优先级。
CHINA APP CURRENT STATUSIA for Purchase & Car Tab

Purchase

PURCHASE

全车型概览 · 车辆展厅 · 为您甄选 · 购车政策 · 车型解读 · 购车门店 · 常用工具 · 购车攻略

VEHICLE INTERPRETATION

产品亮点 · 用户口碑 · 大咖评测

COMMON TOOLS

置换增购 · 官方二手车 · 金融计算器

SHOPPING TIPS

十二大服务承诺 · 推荐享好礼 · 充电专区

Car Tab Car control not included

MAINTENANCE

养修预约 · 上门取送车 · 一键代驾 · 道路救援 · 尊享代步车 · 溯源查询 · 养修日志

OWNER SERVICE

官方直售 · 官方二手车 · 置换增购 · 大客户购车 · 归国留学人员购车 · 一键报案 · 我要卖车 · 用车指南 · 用车百科 · 金融计算器 · 提车作业贴 · 车主活动 · ETC · 车辆保险 · 个人保险

CHARGING

扫码充电 · 品牌充电站 · 一键加电 · 充电地图 · 家充桩 · 购买权益 · 充电活动 · 充电指南 · 话题专区 · 最新动态

BENEFIT

专属权益 · 首任车主 · MPV 限定权益包 · 基础权益包

旧版信息架构 · Purchase & Car Tab
OLD UI / REFERENCE

两张旧版页面显示了这些业务入口在界面中的实际位置。

Volvo 旧版 Purchase 页面首屏
Purchase固定的购车入口
Volvo 旧版 Car Tab 页面首屏
Car Tab养修、车主与充电服务
SERVICE TAB / KEY DECISION / 03

保留一套服务结构,只按用户状态调整内容顺序。

方案需要同时覆盖潜客、等待交付和不同动力类型的车主。

用五类用户页面检查结构,并对比早期模块、未采用方案和最终 UI。

AFTER / STATE-BASED SERVICE TAB五类用户页面对照

从潜客、等待交付到不同动力类型的车主,页面分别显示当前需要的服务。

先判断用户当前要做什么,再排列服务入口。

先确定每类用户当前最重要的任务,再调整首页中的服务顺序。

SHARED SERVICE LAYER

车型 · 交付 · 车控 · 充电 · 养修 · 权益

VARIABLE PRIORITY

用户阶段 · 车辆状态 · 动力类型

KEY DECISION / ONE SYSTEM, FIVE STATES

两种首页方案的取舍

REJECTED

按用户身份做五套首页

每类用户各做一套首页,短期更直接,但会重复建设相同服务,也会产生多套规则。

重复结构 · 多套规则 · 双代码线维护成本放大
SELECTED

共享服务结构 + 可变优先级

所有用户共用一套服务,系统根据用户阶段、车辆状态和动力类型调整顺序与重点。

共享服务 · 按状态调整 · 规则集中维护
Development共享模块与状态规则,减少重复实现。Maintenance中国版 / Global 拆分后,仍可集中维护核心结构。
CONCEPT → FINAL UI从早期模块到最终界面

左侧展示潜客、等待交付和车主页面的早期模块,右侧展示最终界面。

MODULE EXPLORATIONService Tab 不同用户身份下的模块化方案与取舍
拆分模块、比较组合,并记录未采用的方案。
FINAL UI

最终页面根据用户状态排列服务,只显示当前最需要处理的内容。

Service Tab 的车型与购车服务页面
车型与购车服务
Service Tab 的权益、充电与车主服务页面
权益、充电与车主服务
SERVICE TAB / STATE MODEL

先确定用户状态,再决定首页显示哪些服务。

01

按用户阶段排列入口

身份与车辆状态成为信息架构基础,不再让所有用户进入相同首页。

02

保留完整服务列表

低频但重要的服务保持可发现,进行中的任务优先出现。

03

把相关服务放进同一任务流程

车控、充电与售后服务被组织成连续任务,不再只是相互割裂的入口。

CONCEPT / LIBRARY + DESKTOP

Library 保存全部服务,Desktop 显示用户当前最需要的任务。

USER STATE → CONTENT PRIORITY

五类身份使用同一套服务基础,但首要内容随用户阶段变化。

Potential Buyer潜客

车型 · 政策 · 试驾 · 服务预览

Potential Wishlist心愿单潜客

心愿车辆 · 购车咨询 · 金融

Waiting Owner等待交付

生产进度 · 提车任务 · 顾问

Owner iCUP EV纯电车主

车辆状态 · 充电 · 地图 · 养修

Owner Oil & Hybrid油车 / 混动车主

养修 · 服务 · 权益 · 门店

WECOM / 13 APPS

一套设计规范和组件库,供 13 个企业微信应用共同使用。

UI/UX guideline · Figma component library

WECOM / DESIGN SYSTEM

统一多个应用的导航、信息层级、组件状态和操作反馈。

把不同业务中的主要页面和关键操作整理成一套 UI/UX 规范和 Figma 组件库。

各业务保留必要差异,新需求优先使用已经确认的导航、组件和反馈规则。

UI DELIVERY / 13 个应用同类业务的旧版与新版界面对比

这里对比同类业务的旧版和新版界面,说明任务顺序和组件规则如何应用到页面中。

企业微信旧版社区页面企业微信新版员工社区页面
企业微信旧版内容页面企业微信新版话题页面
企业微信旧版预约页面企业微信新版个人预约页面
企业微信旧版员工服务页面企业微信新版员工社区内容流页面
企业微信旧版内容入口企业微信新版实用扩散页面
企业微信旧版活动页面企业微信新版活动详情页面
企业微信旧版表单页面企业微信新版问卷调查页面
UI/UX GUIDELINE把基础组件和关键状态整理成跨应用规范。

规范包含按钮、图标、输入、搜索、业务卡片和弹窗;各应用保留必要差异。

Volvo 企业微信按钮组件规范
Buttons
Volvo 企业微信图标组件规范
Icons
Volvo 企业微信输入框组件规范
Inputs
Volvo 企业微信搜索组件规范
Search
Volvo 企业微信商城卡片组件规范
Business Cards
Volvo 企业微信弹窗组件规范
Dialogs