从0到1，我们的团队为丰田设计了一款HMI操作系统，适用于23MM对应的车型。
我主要负责多个功能模块的交互设计：车辆设置、媒体、隐私协议等。
能够与丰田这样的全球品牌合作，我感到十分幸运。这一段工作提升了我在系统性设计、设计管理、跨部门合作方面的经验与认知。
工作时间
2021.7 - 2023.3
我的角色
UX设计师，UI设计师
使用技能
竞品分析，用户体验地图，交互设计，UI设计
TOYOTA
23MM
MID & HIGH
点击此处查看已量产车辆宣传片
Chapter. 01
工作方式
💡
作为UX设计师
功能式樣書.xlsx
需求
分析
基准
报告
趋势
调研
提案
可行性
功能性
用户体验
评审
A/B测试
...
交付
UI
3D
开发
UX - 主要功能模块
主要功能模块：车辆设置（外部设定、内部设定、能量管理、预约充电、驾驶辅助）、在线媒体（腾讯爱趣听）、本地媒体（蓝牙音乐、USB音乐）、全民K歌、日历等
💡
作为UI设计师
...
交互文档
组件库搭建页面
主题适配
特殊视觉元素
逻辑
优先级
统一性
UX评审
符合规范
调性统一
视觉效果优秀
UI总监评审
开发
UI - 主要功能模块
主要功能模块：车辆设置（外部设定、内部设定）、在线媒体（腾讯爱趣听）、全民k歌等
Chapter. 02
项目概况
项目概况
项目时长横跨3年，我们的设计团队（10+成员）为丰田中国打造Mid、High双平台的本土化车机系统设计，也提供了雷克萨斯新车型的车机概念提案。
在项目中，我的主要角色是UX设计师，负责车辆设置与媒体两大板块的交互设计。车辆设置作为车机核心功能，与安全性与用户体验紧紧挂钩，与此同时与车端信号联系紧密。在设计过程中，加深了我对整车系统架构和人车交互的理解。
我的另一个角色是UI设计师，主要负责部分车辆设置模块以及媒体模块的UI设计与视觉设计。在视觉设计方面，媒体模块的挑战比车辆设置更大，例如：大量不可控UGC内容的加入，要求我们全面考虑设计在不同视觉内容上的适应性；如何针对榜单、会员体系进行差异化设计等等。
Chapter. 03
实践：车辆设置用户体验升级
10:32 18/7/2022
与Mid平台相比，我们规划在High平台升级为8155芯片。
此外，车辆设置将有更多功能。
基于以上这些，也许我们可以重新考虑这个功能会是什么样子。
明白了。我会提出几个设计提案。
?
怎么让它变得更好呢？
Mid
High
?
💡
让我们分析一下我们的现状！
车辆设置是一项与驾驶密切相关的功能。
为了尽量减少驾驶干扰，车辆界面应该设计得尽可能减少操作时间和认知负荷。
但是在Mid，（车辆设置复杂多样的设置选项所带来的）信息架构设计不可避免地使得用户路径变长。尽管我们尝试通过将“常用设置”放在Tab的第一个选项来解决这个问题，但仍然有太多功能无法被用户快速访问。
同时，主要以文本形式呈现的功能也增加了用户的认知负担和学习成本。
1. 痛点
较长的用户路径 & 较高的学习成本
2. 机会点
芯片升级后，我们有机会引入可交互的3D模型
在Mid中，因为硬件性能的限制，车辆模型是不可交互的。确实有相应车辆设置功能的动画，更直观地描述了每个车辆设置的选项，但它们由渲染的PNG组成。
在High中，芯片的升级使得可交互的3D模型成为可能，它能更符合直觉地让用户控制和理解功能。
也许这是我们利用它为车辆设置创造更好用户体验的机会。
?
现有的解决方案有哪些？
3. 竞品分析
选取同级别车辆进行竞品分析
问界M7 | AITO M7
#新势力
#中国
¥250,000+
可交互的 3D 车辆模型，用于所有车辆控制功能，并反映车辆的真实状态。
理想L6 | Li Auto L6
#新势力
#中国
¥250,000+
不可交互的2D车辆动画，将动画作为某些复杂的车辆设置的解释信息。
比亚迪唐 | BYD TANG
#传统主机厂
#中国
¥170,000+
不可交互的2D车辆动画，将动画作为某些复杂的车辆设置的解释信息。
吉利博越 | Geely BoYue
#传统主机厂
#中国
¥83,000+
不可交互的2D车辆动画，仅在驾驶模式中存在动画。
本田 HR-V | HONDA HR-V
#传统主机厂
#日本
¥115,900+
不可交互的2D车辆图片，作为车辆设置子功能的入口。
大众ID.3 | VW ID.3
#传统主机厂
#德国
¥112,900+
可交互的3D车辆模型，包括内饰和外饰，车模仅作为入口存在；下一级页面布局为纯文字列表。
结论
车辆设置的整体趋势是使用3D汽车模型为用户创造更直观的体验。
但到目前为止（2022年），大多数OEM在车辆设置中仅使用非交互式2D动画。
?
太多的信息和设计方向...
但用户真正需要的是什么?
4. 同理心地图
了解主要用户在实际使用场景中的真实需求
我是主驾司机
我需要时刻关注道路情况。
我可以快速瞥几眼中控屏幕。
也许我会向语音助手或我的副驾驶乘客寻求帮助。
我专注于驾驶，把手放在方向盘上。
汽车中的警报声
语音助手的声音
导航提示
正在播放的媒体
外面的噪音
乘客的对话
在驾驶的同时，调整我的后视镜角度和与驾驶相关其他功能。
1
Who?
2
What do I NEED to DO?
3
See?
4
Say?
5
What do I do?
6
Hear?
7
What do I THINK and FEEL?
PAINS: 如果我不能及时调整后视镜角度，我担心将出现的驾驶风险。
GAINS: 我需要快速识别和定位相应的车辆设置，并在确保安全驾驶的同时准确调整它们。
用户需求
“我需要在开车时快速找到功能。”
“我需要知道每个功能的用途。”
“我需要它们易于使用和控制。”
?
让我们收敛一下……How might we？
5. 洞察
将用户需求转化为设计要求。
使用场景
驾驶中
驾驶中 & 未驾驶时
驾驶中
用户需求
“我需要在开车时快速找到这个功能。”
“我需要知道每个功能的用途。”
“我需要一些易于使用和控制的东西。”
We might be...
缩短用户路径
提高频繁在驾驶时使用的功能的优先级
针对复杂的车设功能，添加信息或动画作为提示，以解释此设置的用途。
避免复杂和繁琐的操作
将常用功能放置在易于访问的位置。
💡
那么，试着设计吧！
Before
After
🧠✍️🙇🏻♀
...
💡
耶，我做了2个提案!
6. 设计提案
从不同角度，提出不同方向的设计概念。
Mid
High - 提案一
车外
车内
常用设置
外部设定
内部设定
充电管理
能耗动力
其他设置
下次预约充电：开始 周一 21:00
立即充电
智能钥匙按两下解锁
能量消耗
前大灯自动关闭时间
关闭
30秒
60秒
90秒
High - 提案二
更清晰的层级
较少的设计与开发成本
?
哪个提案对我们而言是更好的？
7. 分析和比较
选择一个更好的方案，以进行深入设计。
任务：调整“外部灯光”
页面
Mid
High - 提案一
High - 提案二
车辆设置
-
主页
车辆设置
-
外部设定
车辆设置
-
外部设定
-
灯光
车外
车内
常用设置
外部设定
内部设定
充电管理
能耗动力
其他设置
下次预约充电：开始 周一 21:00
立即充电
智能钥匙按两下解锁
能量消耗
前大灯自动关闭时间
关闭
30秒
60秒
90秒
常用设置
外部设定
内部设定
充电管理
能耗动力
其他设置
灯光
门锁
侧门
背门
钥匙
高度控制
高度控制
前照灯自动开启灵敏度
最低
低
中
高
最高
前照灯自动关闭计时器
关闭
30秒
60秒
90秒
灯光
门锁
侧门
背门
钥匙
高度控制
高度控制
前照灯自动开启灵敏度
最低
低
中
高
最高
前照灯自动关闭计时器
关闭
30秒
60秒
90秒
外部灯自动关闭计时器
关闭
30秒
60秒
90秒
评价
/
✅优点:
1. 保持相同布局，所需的设计和开发成本较少。
2. 用户路径更短。
❌缺点:
冗余的入口和信息。
✅优点:
1. 移除水平Tab后，为3D汽车模型提供了更多的空间。
2. 用户路径更短。
3. 结构和层次更清晰。
❌缺点:
无法通过水平Tab轻松切换每个子设置。
为什么选择提案二？
提案二更专注于3D车辆模型。用户操作更直观明了。
在 High 中将添加更多功能，因此我们需要更多空间。最好去掉水平Tab。
重新设计布局的工作量从项目全局角度而言，经评估后，是可以接受的。
📢
它如何改善用户体验？
1
更短的
用户路径
砍掉一步用户路径。
快速控制常用功能。
灯光
门锁
侧门
背门
钥匙
高度控制
高度控制
前照灯自动开启灵敏度
最低
低
中
高
最高
前照灯自动关闭计时器
关闭
30秒
60秒
90秒
外部灯自动关闭计时器
关闭
30秒
60秒
90秒
Before
After
2
3D车模连接了物理世界和虚拟屏幕，让体验更加直观
3D模型使用户操作更符合直觉。
3
重新选择在驾驶时更频繁使用的快捷方式，并只使用“点按”来触发操作，避免复杂交互方式。
选择易于使用的快捷操作
💡
量产车机中的最终效果
18:16 3/31/2023
干得好！
我们很高兴能够为High的用户提供更好的体验。
我从本次的用户体验升级中也学到了很多。
车辆设置是与驾驶体验和安全性相关的重要功能。
在车辆设置中，我们需要尽量减少对用户的干扰，以及尽量缩短用户的操作时间。
在车辆设置中还有一个特殊的情况：针对不同的车型，车辆设置有不同的选配功能。因此，设计师必须考虑到如果大多数功能可能不在车辆设置中展示的这种情况，以及对应的适配方案。在这种情况下，布局会是什么样的呢？
不管怎样，对我来说这是一段难忘的经历☺️
联系我
Chloe / 陈龙平
UIUX 设计师