车机的界面组件，该怎么用

就和人体内的器官各司其职能让不同的细胞更好地工作一样，车机界面的交互反馈组件也承担着类似的责任，以不同的承载形式确保内容更好地展现。

现在的车机用的比较多的交互组件形式主要有三种:抽屉、折叠面板和弹窗。其实每一种形式都大有门道。

抽屉的使用习惯？

像主界面下拉出来的通知中心，从屏幕边向右拉出的侧边栏，再加上跟手呼出的动效展示，它们的使用感受是不是和我们拉开抽屉的感觉很像？

按照我们平时在抽屉里收纳东西的习惯，放进去的东西一般都是比较琐碎、无关联、不紧急但有需要时又能以最快速度拿到的，这些负一屏的应用场景也是如此。主要作用是补充、可编辑便捷功能，提高生活用车场景效率。

功能界面由需要用户主动唤起，上面集成的功能可以没有关联性，功能属性也没有明确的约束，同时用户也可以自定义选择放哪些、放多少。

蔚来ET5

另外，这些浮层面板上的功能容许两个层级的存在，比如涉及到呈现内容相对较多的功能，对应的图标可以链接到更小层级的功能页面进行展示。

比如情景模式、音场调节、氛围灯等功能如果放在上面，需要点进二级菜单用户才可以更精确地进行使用。

使用抽屉的好处在于我们可以停留在任意应用界面或者主界面打开并使用上面的功能，需要使用时划拉一下就能快速找到。

并且收回顺序一般也是按照抽屉打开的顺序层层收回，操作流程不容易出现中断。

因此，评判浮层面板是否好用的标准也显而易见，比如唤起的动效展示、集成的功能是否支持自定义，功能图标的易识别性，界面以及图标尺寸的统一性等。

当然，“抽屉把手”——视觉引导也很重要，关于同事过了两个月才发现蔚来车机主界面的侧边栏这个例子都快被我用烂了。

总之，在进行相关的交互设计时，“视觉引导”和“操作引导”至少择其一才能保证它的可发现性。

极狐阿尔法S HI版

为了保证功能的直观性和易用性，目前车企们也都在不约而同地努力简化层级，所以像座椅调节、空调等使用频率特别高的功能一般都会被单独拎出来直接放在主界面上。

折叠面板多重要？

而为了保证主界面简洁的画面效果，这些被单独拎出来的功能就会被集成在现在车机几乎必备的卡片栏或是Dock栏上，它们其实是折叠面板的一种类型。

理想L9

折叠面板是让界面干净整洁的手段之一，只保留最重要的信息进行展示，隐藏的次要信息内容会整合成一个新的二级页面。

它的主要作用是给内容做归类划分，更好地展示详细信息，同时提高用户的屏幕操作效率。

比如音乐的卡片栏第一眼看上去一般只有当前歌曲以及操作按键，导航卡片栏保留搜索框和收藏地点的分类引导，用户可以直接使用，必要时点开就可以看到全部的功能界面。

也有一些车机玩出了更多花样，比如Flyme Auto的Smart Bar、鸿蒙OS的空调无级调节和高合Hiphi Z OS的MiniBar等等。

Smart Bar会在你打开应用回到主界面或是打开多个应用后，用上个应用的关键信息对当前正在使用的应用进行视觉提示。比如你打开音乐后又打开导航，Smart Bar会呈现音乐功能的相关信息。

Flyme Auto

鸿蒙OS主界面空调的无级调节大家也都很熟悉了，这也是现在很多车机效仿的对象，它的使用形式和高合Hiphi Z OS的MiniBar的功能是有些相似性的。

高合将Hiphi Bot解锁、空调、风量以及音量的调节都做成了视觉引导边边的形式，可以直接上手调节，所有场景可用，同时也几乎没有占屏面积。

另外一种常见的折叠面板形式主要应用于设置页面，它也容许存在更多层级，由设计师的层级分类来决定，会有在第一层级介绍的下方再嵌套一个折叠面板的情况。在一般情况下新的折叠面板会默认收起。

当然，折叠面板的功能也是需要用户主动唤起的。从用户实际操作的角度来看，在比较小的层级菜单里也不建议重复嵌套折叠面板，毕竟这在某种意义上增加了新的层级，也不太符合相关页面的排布属性。

令我印象比较深刻的就是极狐阿尔法S车机里的折叠面板了，它在“设置”页面的相关设计上犯了2个错误点。

极狐阿尔法S HI版

第一点是基于它本身高度比较窄的长屏，操作逻辑应该尽量以横向为主，事实上它也确实是这样设计的，但在设置界面的第一行层级下嵌套的折叠面板尺寸比较小，采用竖向浏览操作的形式是不够方便的。

第二点在于，由于子面板上的内容也比较多导致面板高度比屏幕还长，这时它选择采用直瀑式浏览的形式与整个大页面是分离出来的，这与我们的视觉习惯也是有点违和的。整个折叠面板跟手流动的的视觉体验会更舒适一些。

因此它也在操作上给了Plan B:点击屏幕最下面的功能名称，它会自动向上跳出一行。但在这样长窄的屏幕上重复如此操作也会容易使用户失去耐心。

不难看出特殊的屏幕尺寸对于操作逻辑的设计往往是更难的，折叠面板也是三种交互形式中与其关联度最高的一种，它也成为评价车机好用程度的关键标准之一。

弹窗的不可替代性？

当车机接收到OTA通知的时候，相关内容会直接在界面弹出提醒用户。没错，这种类似对话框的交互形式就是第三种常用交互组件:弹窗。它的主要作用也是给内容作补充说明，同时在警告之类的关键信息提示方面具有不可替代的作用。

弹窗的交互场景就比较广了，可以是系统触发，可以由用户主动唤起，也可以由用户间接触发。

由系统触发的功能界面往往是比较关键的任务类型，例如前面提到的OTA通知，或者车辆突发故障提醒，它希望用户优先处理紧急事务，但又不想中断原本的操作流程时，弹窗就成了最合适的方式。既能引起注意，又能避免页面的跳转。

理想L9

由用户主动唤起的弹窗界面也有很多，但多数为普通功能。比如阿维塔车机主页上的音量调节功能、理想L9上的模式切换功能、鸿蒙系统中更小的层级功能显示形式等。

问界M5

由用户使用功能间接触发唤起弹窗的场景目前是比较少的。发生频率比较高的是座椅调节后系统弹窗询问是否需要记忆坐姿的功能，多数车都有，但不同车机弹窗的位置会有一些差别 。

将弹窗作为普通功能的承载组件时，需要尽量选择内容篇幅少、体量小的功能，更注重可识别性。

写在最后

这三种交互组件在某些维度具有相似性，但在某些场景都有各自的不可替代性，两两之间也可以进行搭配组合使用，不同车机在使用逻辑上也会有自己对于某种交互组件的偏爱。

理想L9

比如理想、捷尼赛思、大众ID系列的车机就比较偏爱对于卡片栏的应用，保证了操作的直观性。

再比如鸿蒙OS的特点就很鲜明，信息展示够简洁，只有一层抽屉，没有引入侧边栏。

问界M5

它在层级的分类展示上明显偏爱折叠面板结合弹窗的形式，比如车辆设置和主页右下角的音量调节界面。拿音量调节来说，用户可以先在折叠面板调节当前音量，点击旁边的小标会在屏幕中央出现弹窗，可以进行所有的音量调节。

其实如果按照用户场景、信息内容篇幅和优先级、屏幕形式和尺寸等关键要素对这三种交互组件进行匹配，至少在车机的使用逻辑上是不会出错的。

不过需要注意的是，车机同类型功能界面的组件不可以混淆使用不同组件，要保持用户的惯性思维和交互反馈的一致性。

最近Flyme Auto的实车体验视频实实在在火了，但网友们也对这套车机系统褒贬不一，我想关键原因也是出在了这里吧。