WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Say hello to the next generation of CarPlay design system

Say hello to the next generation of CarPlay design system

WWDC 2024
观看原视频

Highlight

下一代 CarPlay 的核心目标是覆盖车内所有屏幕——不仅是中控屏，还包括仪表盘（instrument cluster）。Apple 设计团队的 Ben Crick 介绍了这套全新的设计系统如何让汽车厂商在保持 CarPlay 功能一致性的同时，深度定制视觉风格。

核心内容

2022 年 WWDC，Apple 首次展示下一代 CarPlay 的概念。两年后，问题依旧：车内屏幕越来越多、越来越大，传统模拟仪表盘正在被数字屏幕取代，但每家车厂的功能组合、屏幕尺寸、品牌调性都不同——一套固定 UI 不可能适配所有车型。

Apple 的回答是一套从零构建的参数化设计系统。它不提供”选 A 主题还是 B 主题”的有限选项，而是把 gauge（仪表）的每一个视觉属性——弧线粗细、圆角弧度、弧线角度、起止位置、颜色（纯色与渐变）、刻度线数量与样式——都做成可连续调节的参数。配合 SF 可变字体在 weight、width、corner softness 三个轴上的连续变化，车厂可以从品牌视觉语言出发，系统性地调校出独有的仪表盘风格。

这套系统产出的结果 Apple 称之为”co-branded”体验：两种品牌在同一个界面里融合，产出一套独有的视觉语言。每辆车的下一代 CarPlay 仪表盘看起来都会不一样。

详细内容

Typography：SF 可变字体的三轴连续调节

SF 字体是整个设计系统的基础。传统字体提供 light / regular / bold 等离散选项，SF 可变字体允许在 weight（粗细）、width（宽窄，从 condensed 到 extended）、corner softness（角落圆润度）三个维度上做连续调整（03:41）。任何两点之间的值都可以选取，风格选择的范围远超传统字体。

其余的系统组件沿用了同样的参数化逻辑：gauge 的宽度、圆角、弧线、起止点、颜色都是连续可调的，不需要从预设配置里做有限选择。

Gauge 样式定制

Ben Crick 用一段从”轻量优雅”到”粗犷硬朗”的渐进演示展示了定制能力（04:30）：

  • 弧线与几何：圆形 gauge 可以调节弧线的角度和起止点，甚至扩展为完整圆环，同时调整附属 gauge（如油量表）的位置来适配（04:54）。
  • 颜色：支持纯色和多色搭配，也支持渐变来增加层次感和深度（05:25）。将描边宽度扩展到中心可以突出渐变效果，形成对经典指针的致敬（05:34）。
  • 指针与刻度线：系统支持传统模拟指针样式（05:56）。刻度线的数量、长度、样式、位置都可定制，还可以叠加多组刻度线来创建技术感强的视觉效果（06:02）。

Gauge 功能适配

无论选择什么视觉风格，gauge 都能适配全部功能（07:34）。Session 用并排对比展示了两种风格——左侧是极简线性 light mode，右侧是技术感圆形 dark mode——在功能上的表现：

  • 定速巡航：目标速度用圆点标记，设定速度以文字显示在旁边。自适应巡航激活时，当前速度与目标速度之间画一条线，表示系统会在条件允许时回到目标速度（08:13）。
  • 限速器：用一条线表示（与巡航的圆点做区分），颜色也不同（08:49）。
  • 道路标识与速度单位：在当前速度附近保留空间（08:58）。
  • 低油量/低电量警告：橙色表示偏低，红色表示危急，触发阈值由车厂定义（09:07）。

针对不同动力系统，gauge 功能也做了适配：

  • 燃油车：转速表 + 发动机冷却液温度表，支持当前挡位、红线转速、换挡推荐箭头（09:20）。
  • 电动车：功率表，支持驱动模式和变速箱状态，以及 boost 和动能回收显示（09:45）。
  • 混动车：混合 gauge 同时显示功率表和转速表，电动部分用更粗的弧线强调，燃油部分以更紧凑的格式并行显示（10:00）。圆形 gauge 中还可以用品牌图片替换变速箱状态显示（10:17）。

模块化布局系统

每个 gauge 是一个自包含的模块化组件，可调整大小，可自由组合（11:41）。当前速度和油量是强制项，其他 gauge（转速表、功率表等）完全可选。组件可以排列成从简洁到信息密集的各种配置（12:07）。布局也能适配不同屏幕形状——宽屏、异形屏、甚至非仪表聚焦的紧凑布局都有对应方案（13:14）。

车厂还可以跨所有屏幕添加自定义壁纸，壁纸与 gauge 风格搭配可以强化品牌氛围（12:41）。

动态内容区域

无论选择什么布局，系统都会保留一个”动态内容”区域（14:47）。部分布局可以把动态内容设为常驻——比如大面积地图或行程电脑。即使布局以仪表为主，动态内容也可以堆叠在非关键 gauge 后方，用户通过方向盘控制翻页切换（15:17）。

动态内容也是通知和弹窗的默认位置，支持文字 + 符号、可交互可关闭、以及包含车辆图片的多状态富通知。需要同时显示两条通知时也能支持（15:47）。

仪表盘上可显示的动态内容包括地图、正在播放、行程电脑、胎压、ADAS（高级驾驶辅助系统）。涉及车辆视觉的内容支持车厂自己的图片素材，可以反映颜色、配置等属性（16:14）。中心和乘客屏幕还有更多内容展示空间。

核心启发

  • 做什么：为你的车载 HMI 建立一套参数化的设计 token 系统。为什么值得做：下一代 CarPlay 证明了”连续参数”比”离散主题”更能适配多样化的硬件和品牌需求——从轻量优雅到粗犷硬朗，只需调参数而不需要重写组件。怎么开始：从字体的 weight 和 width 定义品牌调性，然后让 gauge 的弧线粗细、圆角与字体保持一致的视觉节奏，所有数值用 design token 管理。

  • 做什么：采用模块化组件 + 可组合布局的架构来应对多种屏幕形态。为什么值得做：车内屏幕尺寸和形状差异极大，从宽屏到异形屏再到紧凑显示区域，模块化布局让同一套组件可以灵活组合适配，而无需为每种屏幕开发独立 UI。怎么开始：将每个信息展示单元（速度、油量、导航、媒体）封装为自包含组件，定义大小可调和位置可放的接口，然后通过组合配置生成不同布局。

  • 做什么：在仪表盘 UI 中预留”动态内容”区域，让驾驶员可以通过方向盘控制切换不同信息视图。为什么值得做：不同驾驶场景下用户关注的信息不同——导航时看地图，通勤时看媒体，长途时看行程数据——一个固定信息区无法覆盖所有需求。怎么开始：在布局系统中定义一个可堆叠的内容插槽，将通知和弹窗也纳入这个插槽的管理范围，确保无论当前显示什么内容，紧急通知都能占据视觉优先级。

关联 Session

评论

GitHub Issues · utterances