车载导航媒体 HUD 移动端组件库

车载 HUD 不是把手机界面缩小搬上车，它要为司机的余光而设计。开车时人没法盯着屏幕看，所以 HUD 的第一原则是大字、强对比、分区清楚，一眼能读、不用思考。设计语言这块，可以借鉴成熟的极简原生界面起步，再改造成 HUD 组件，比凭空画稳得多。

为什么 HUD 要为余光设计

夜间和弱光驾驶占了很大比例，暗色界面几乎是刚需：调查显示约 82% 的智能手机用户 偏好深色，放到车上对比和护眼的要求只会更高。苹果的 CarPlay 设计指南 反复强调一个词：可一瞥性，意思是司机扫一眼就能拿到信息。HUD 组件的所有取舍都要围绕这一点来。可一瞥意味着每个元素都要回答同一个问题：司机用半秒钟扫一眼，能不能拿到此刻最需要的信息，拿不到就说明它要么该放大、要么该挪走、要么干脆删掉。

HUD 的分区要点

车机信息要按驾驶视线分区，各看各的、不互相干扰。

区域	要点
导航	占主区，转向提示超大醒目
媒体	常用控制，顺手可达
车速	超大字，余光可读
状态	电量、信号简明，不抢戏

实战示例

做一套 HUD 组件：在 VP0 挑一个高对比的极简数据设计借鉴它的字阶和留白，复制链接喂给 Cursor 改成 HUD 组件，把导航和车速放进主视线区，媒体和状态收到两侧。按苹果的排版指南 把关键数字做到足够大，再加夜间自动压暗。需要整块中控参考时，小米 SU7 车机中控 是个好对照；想要更克制的单屏仪表，理想极简车机 把信息压到极少，正是 HUD 该有的方向。

常见误区

最常见的错误是照搬手机的密集排版，把一堆信息塞满一屏，司机开车时根本看不过来。HUD 要狠下心做减法，主区域只留导航和车速，其余全部让位，宁可少显示也要保证一眼能读。还有人喜欢给车机堆炫酷动效，殊不知动得越多越分散注意力，车机的动效只该用来确认操作，绝不为了好看。安全永远排在信息量前面。

关键要点

• 车载 HUD 为余光设计：大字、强对比、分区清楚，一眼能读。
• 约 82% 的用户偏好深色，车机夜间模式是刚需。
• 主视线区只留导航和车速，其余信息让位，安全第一。
• VP0 不产出车机系统，但其高对比极简设计语言是很好的参考起点。

延伸阅读：想用 SwiftUI 原生做 SU7 式车机中控，参考 小米 SU7 车机中控 SwiftUI 原生做法。

常见问题

关于车载 HUD，问得最多的是怎么分区、和手机界面差在哪、要不要夜间模式。一句话收尾：车机设计的难点不是加东西，而是有勇气把不该出现在司机视线里的一切都拿掉。记住，司机的注意力是有限的，HUD 抢走多少，就得在安全上如数还回去。