4、布局与栅格：车载屏幕分辨率适配、栅格系统应用、安全区域与避让区

好，咱们进入第四章。这一章我特别想跟你聊聊，因为布局和栅格这东西，看着简单，但真到了车机上，坑特别多。

你想想看，手机屏幕就那么几种尺寸，但车载屏幕呢？从8寸到17寸，从横屏到竖屏，从方形到带鱼屏，五花八门。我刚开始做车机那会儿，就吃过这个亏——一套UI在10寸屏上看着挺好，换到12.3寸的屏上，按钮全跑偏了。

所以这一章，咱们就把分辨率适配、栅格系统、安全区域这几个硬骨头啃下来。

4.1 车载屏幕分辨率适配

先说说分辨率适配。车机屏幕的分辨率，说白了就是像素点的数量。常见的分辨率有：

• 1280×720（720p）—— 老款车机、低配车型常见
• 1920×1080（1080p）—— 目前主流，大部分中高端车型在用
• 1920×720 —— 带鱼屏，长条形的，很多新能源车喜欢用
• 3840×2160（4K）—— 高端车型，比如奔驰EQS、宝马i7

嗯，这里要注意：分辨率高不代表屏幕大。比如1920×720的带鱼屏，虽然宽度有1920像素，但高度只有720，实际显示面积并不大。

我个人习惯的做法是：先确定设计基准分辨率。我一般选1920×1080作为基准，因为这个分辨率覆盖了大部分主流车型。然后通过等比缩放来适配其他分辨率。

我在项目中遇到过一个问题：同样是1920×1080的屏幕，有的车机系统是Android，有的是Linux，它们的渲染机制不一样，导致同样的像素值在不同系统上显示效果有差异。怎么办？我的建议是：用dp（密度无关像素）或sp（缩放无关像素），而不是直接用px。

4.2 栅格系统应用

栅格系统，说白了就是把屏幕分成若干列，然后元素按列来排列。这样做的好处是：对齐、统一、好维护。

车机上的栅格系统和网页不太一样。网页栅格一般是12列或24列，但车机屏幕宽高比变化大，我建议用动态栅格。

什么叫动态栅格？就是列数不固定，根据屏幕宽度自动调整。比如：

• 屏幕宽度 < 800px：用4列栅格
• 屏幕宽度 800-1200px：用8列栅格
• 屏幕宽度 > 1200px：用12列栅格

这样做的好处是，不管屏幕多宽，内容都能自适应排列。

举个例子，一个音乐播放界面，左边是专辑封面，右边是歌曲列表。在窄屏上，封面和列表上下排列；在宽屏上，左右排列。这就是栅格系统的功劳。

我曾经犯过一个错误：在12列栅格上，把一个按钮设成了“占满整行”。结果在1920宽的屏上，按钮拉得特别长，丑得不行。后来我改成“占6列”，两边留白，视觉效果好了很多。

4.3 安全区域与避让区

安全区域，这是车机UI里最容易忽略、但最要命的部分。

你想想看，车机屏幕不是手机，它周围有边框、有物理按键、有出风口。而且，驾驶员在开车时，手可能会遮挡屏幕边缘。所以，重要内容必须放在安全区域内。

安全区域怎么定？我一般这样设置：

方向	安全区域边距	说明
顶部	40-60px	避开状态栏、摄像头、出风口
底部	60-80px	避开物理按键、手写区域
左侧	30-50px	避开边框、驾驶员视线遮挡
右侧	30-50px	避开边框、副驾视线遮挡

嗯，这里要注意：不同车型的安全区域不一样。比如特斯拉Model 3的屏幕是横屏，底部有物理按键，所以底部安全区域要更大。而理想L9的屏幕是竖屏，顶部有摄像头，顶部安全区域要留足。

避让区呢？就是屏幕上有一些“不能碰”的区域。比如：

• 摄像头区域：很多车机屏幕上方有摄像头，用于人脸识别或手势控制。这个区域不能放任何内容。
• 物理按键区域：屏幕边缘如果有物理按键（比如音量旋钮、Home键），附近区域要留白，避免误触。
• 驾驶员视线盲区：屏幕左下角或右下角，如果被方向盘遮挡，就不要放重要信息。

我曾经在做一个项目时，客户要求把导航的“确认”按钮放在屏幕右下角。我说不行，那个位置被方向盘挡住了。客户不信，结果实车测试时，驾驶员每次都要歪头才能看到按钮。最后改到了屏幕中央下方，问题解决。

4.4 实战：一个栅格布局示例

说了这么多，咱们来点实际的。假设我们要设计一个车机主界面，包含导航、音乐、空调三个模块。用栅格系统怎么布局？

我建议这样：

• 屏幕分成12列
• 导航模块占8列（左侧）
• 音乐模块占4列（右上）
• 空调模块占4列（右下）

代码示例（伪代码，用于理解布局逻辑）：

/* 栅格容器 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 40px 30px; /* 安全区域边距 */
}

/* 导航模块：占8列 */
.nav-module {
  grid-column: span 8;
}

/* 音乐模块：占4列 */
.music-module {
  grid-column: span 4;
}

/* 空调模块：占4列，放在音乐模块下方 */
.ac-module {
  grid-column: span 4;
}

你看，这样布局，不管屏幕多宽，导航模块始终占2/3，音乐和空调各占1/3。而且因为有安全区域边距，内容不会跑到屏幕边缘去。

4.5 总结一下

布局和栅格，说白了就是两件事：内容怎么放、内容放哪里。

• 分辨率适配：用相对单位，别用固定像素
• 栅格系统：动态列数，自适应排列
• 安全区域：重要内容别放边缘
• 避让区：摄像头、物理按键、视线盲区要避开

嗯，这一章就到这儿。下一章咱们聊聊交互手势和触控反馈，那个更有意思。你想想看，开车时手指在屏幕上滑动，和坐在沙发上玩手机，感觉能一样吗？