4、车载UI设计原则：驾驶安全与交互设计、Material Design for Automotive、主题与样式、自适应布局

各位同学，今天我们来聊聊车载UI设计。说实话，这部分内容在Android Automotive OS开发中，是最容易被忽视却又最关键的环节。我见过太多团队，功能做得很牛，但UI一塌糊涂，最后用户反馈全是差评。为什么？因为车载环境太特殊了，你没法像做手机App那样随心所欲。

4.1 驾驶安全与交互设计：这是底线

先讲安全。这不是空话，是实实在在的代码约束。

我个人习惯，在开始任何车载UI设计之前，先问自己三个问题：

• 这个操作需要驾驶员看屏幕超过2秒吗？
• 这个交互需要手指精确点击吗？
• 这个动画会不会分散注意力？

如果任何一个答案是“是”，那就得重新设计。

我在项目中遇到过一件事。有个音乐App的播放列表，需要滑动才能看到全部歌曲。测试时发现，驾驶员为了切歌，视线离开路面平均3.8秒。这太危险了。后来我们改成了语音控制+大按钮模式，问题才解决。

交互设计的几个要点

• 大目标区域：触控按钮至少76dp，最好96dp以上。手指在颠簸的车里可没那么准。
• 减少层级：能一步完成的操作，绝不要两步。你想想看，开车时谁有心思去翻菜单？
• 语音优先：能用语音控制的，尽量别让用户动手。Android Automotive的语音API其实很成熟。
• 反馈要即时：点击后必须有视觉或触觉反馈。我曾经因为反馈延迟被测试团队骂惨了。

4.2 Material Design for Automotive：Google的官方指南

Google为车载场景专门定制了一套设计规范，叫Material Design for Automotive。说白了，就是把Material Design那套东西，针对驾驶场景做了大量裁剪和优化。

我记得第一次看这个规范时，最大的感受是：它把“安全”写进了每一个组件里。

核心组件

组件	说明	我的建议
App Bar	顶部导航栏，显示当前应用名称和关键操作	不要放超过3个图标，否则驾驶员会看花眼
Card	信息卡片，用于展示音乐、导航等摘要	卡片之间留足间距，避免误触
Button	按钮，必须有大面积触控区域	文字按钮在车上不好用，尽量用图标+文字
Slider	滑块，用于音量、亮度调节	慎用！驾驶员很难精确滑动。建议用加减按钮替代

4.3 主题与样式：让UI统一且安全

主题和样式，说白了就是给车机定个“调性”。但这个调性不能太花哨，得考虑驾驶环境。

我建议从三个方面入手：

颜色

• 高对比度：文字和背景的对比度至少4.5:1。阳光下开车时，低对比度根本看不清。
• 避免纯红/纯绿：色盲用户怎么办？而且红色在车上通常表示警告，别乱用。
• 暗色模式是标配：夜间驾驶时，亮白色背景会晃眼。Android Automotive的暗色模式支持得很好。

字体

• 字号要大：最小字号建议24sp。别笑，我见过用12sp字体的车载App，那简直是灾难。
• 字体要清晰：无衬线字体是首选。Google的Roboto系列就很好。
• 行距要宽：1.5倍行距以上，方便快速扫读。

图标

• 语义明确：图标要一看就懂。别搞抽象艺术，驾驶员没空猜谜。
• 尺寸统一：所有图标保持相同视觉重量。我习惯用48dp作为基准。

4.4 自适应布局：适配各种屏幕

车载屏幕的尺寸和形状五花八门。有横屏的、竖屏的、方形的，甚至还有带鱼屏。自适应布局不是可选项，是必选项。

Android Automotive OS提供了几个关键工具：

ConstraintLayout

这是我最常用的布局方式。它用约束关系来定位控件，而不是绝对坐标。好处是，屏幕尺寸变了，布局会自动调整。

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_play"
        android:layout_width="0dp"
        android:layout_height="48dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="播放" />

</androidx.constraintlayout.widget.ConstraintLayout>

SlidingPaneLayout

适合大屏场景。左边是导航列表，右边是内容详情。在手机上自动折叠成单列。

窗口模式

Android Automotive支持多窗口。你的App要能适应不同大小的窗口。我建议用最小宽度限定符（sw600dp、sw800dp）来区分布局。

知识体系总览

下面这张图，是我梳理的本章节核心逻辑。你可以把它当作设计时的检查清单。

嗯，这张图基本概括了本章的核心。你设计时，可以把它贴在墙上，每做完一个功能就对照检查一遍。