车载HMI设计干货！理想汽车座舱界面再设计

肩负着 2022 年理想汽车 L 系旗舰使命的 L9 已经交付半年有余。23 年，理想也迎来 L 系 7/8/9 车型全面开花的局面，以五屏多维交互为卖点和噱头的新一代智能座舱系统也正在经历着市场和用户的验证。

理想的车机一直就带有着易用/美观/流畅的标签，从 ONE 上面的仪表/中控/副驾三联屏+空调控制屏，到 L9 上的中控/副驾双联屏+后排娱乐屏，车机的信息结构和界面布局都发生了极大变化，随之带来的是交互操作和视觉感官上也有了新的体验。这种新，是延续了理想 ONE 的易用性？还是随着屏幕增大带来了一定的设计困扰？让我们来跟你细细聊一聊。

更多HMI设计干货：

首先抛出我们的观点，理想 L9 的座舱车机体验在 2022 年发布的车型里，无论是信息罗列交互逻辑还是视觉 UI 动画效果以及流畅度，依然是处于第一梯队。但由于屏幕的可视面积增大，信息和功能如何在这块大屏幕中更高效率的呈现和使用，有一定的提升空间，UI 的精致和美观度，也还可以再精细化的打磨。

在理想 L 系的车机系统里，我们使用频率最高的应该是主界面的卡片，导航及音乐，还有空调系统的控制。在主界面上，我认为现有的 L 型功能分布是合理的，但在 UI 的视觉呈现上，稍微显得有一些复杂，或许设计师的初衷是让这部分的功能分区更明显，按钮的可点击感和视觉指引更突出，但我觉得还可以做一些层级的简化和归类，减少模块之间因为分区的间距带来的割裂感。

因此在全局的操作框架上，在保留现有的功能分区和操作逻辑的前提下，我重新做了视觉层级的梳理和归类，让功能区的 UI 视觉尽可能的简洁，同时保证原有的视觉指向清晰。

这里我是这么设计的，首先弱化视觉上的区块感；用图标高亮来显示当前状态；收窄左侧面栏宽度，提升右侧内容区显示面积。除了导航/音乐/摄像头之外，还可以扩展一个常用功能至左侧菜单。这里留了一个可以讨论的地方，那就是下面三个全局入口保持固定不变外，上面的一级入口是否可以让用户自定义？这样的话可以把一些用户自己常用的功能提到这个入口来，相当于新增了一个应用快捷方式入口。

底部的操作栏，我把功能分区用间距和竖线来区隔，减少底部信息由于“模块化”带来的割裂感，同时新增一个秘密模式入口，驾驶模式切换在方向盘屏幕操作的便利性比在这里要便捷很多，因此从这里拿掉了。

这就是关于常驻操作区域我的优化方案，是不是“看起来”干净整齐多啦？

接下来我们聊聊右侧的卡片。记得在春节期间 @贺磊 提到过：“ 导航不需要霸屏，可以留一个区域显示音乐，并且下半部分显示歌词，副驾也可以跟着哼几句，导航+HUD 也可以兼顾开车不走错，如果卡片可以自定义拖拉宽度就更妙了。 ”作为每天显示频率最高的主界面，我也确实觉得目前卡片的信息利用率太低了。走访了几位车友，大家的一致感受有几个点：

1. 天气界面可以不需要那么大，有一个区域显示当前时间和天气状况就可以了；
2. 车辆的状态和行驶信息默认在第二屏，即便是拖动到第一屏来展示后，由于尺寸的原因要么看不了EID界面要么音乐控制和天气卡片就会被挤到第二屏去，操作和显示都不太方便。

于是我重构了右侧的卡片栅格，在现有的卡片尺寸基础上拓展出一个 mini 卡片，在有限的空间内效率更高的展示更多用户想要的内容。

这里的 mini 卡片，也可以有更多的想象空间。行驶里程 / 小计里程统计 / 胎压 / 水温 / 海拔高度 / 当前车内温度，其实都可以在这个小空间内轮播展示。毕竟中控屏幕就那么一块，在 13 寸的屏幕上如何合理的寸土寸金利用好，我相信理想的设计师们也在考虑。

除了 mini 卡片，首页还可以设置导航或者 EID 界面变成大卡片模式，这样在不需要进入导航或 EID 界面，就能在首页进行一些基础的功能操作，实现真正的 0 层级交互。

好了，如上就是我优化后的主页界面。当然如果不需要大的导航界面，也可以切换回现有的展示方式，不冲突。全局对比看下来，我个人觉得界面里模块之间的间距变少了，信息整合度更高了。这个优化在浅色界面可能更容易出效果，可我只有深色界面 JPG，所以就先这样吧。

before

除了主界面之外，现在的 L 系车主在全屏幕使用导航的时候不知道有没有这样的一个痛点。想看当前播放的音乐，或者车辆里程行驶信息，或者 EID 界面的时候，都需要从当前导航界面跳转出去，在另一个界面完成信息的获取和操作。那有没有可能有一个小比例的副窗口，多任务处理信息呢？用过折叠屏手机和 Pad 的同学都知道，分屏功能很实用，在一部分的横屏车机上也有这样的交互功能，我也给咱们 L 车主做了一个，一起来看看。

我来做一下设计说明哈。当进入全屏应用后，点击右下角的“分屏”按钮，即可进入分屏模式。默认可能是音乐或者 EID 界面，拖动可以进行左右界面顺序的切换（按照咱们 8155 的算力，如果能进行双卡片的任意拖动和尺寸自定义就更牛了）。副窗口可以显示音乐/EID/车辆信息等等，由于尺寸与主界面卡片一致，因此信息可以完全复用，不会增加研发和 UI 成本；右滑或者左滑卡片，就将副窗口划出界面就可以返回到全屏模式，这个交互操作跟 iPad 和折叠屏手机可以定义成一模一样，减少用户的学习成本。

以上，即是我对现有车机界面自己理解后做出的一些小小优化，仅作为我自己的解题思路，也算抛转引玉，希望车机越来越顺手，越来越好用。当然，这份方案里也还有很多交互和视觉层面的细节还没有考虑周全，也希望和大家一起切磋讨论。2023 年，关于车机我还有更多可以聊，一起期待一下吧！