Say hello to the next generation of CarPlay design system
CarPlay 进阶 20m

下一代 CarPlay 设计系统入门

Say hello to the next generation of CarPlay design system

2024年6月10日

在 Apple 官方观看视频

一句话判断

这不是给普通 App 开发者的 session——它是给汽车厂商设计师看的 CarPlay 仪表盘定制设计系统，展示了 Apple 如何用一套参数化的设计工具让每辆车都有独特的 CarPlay 视觉风格。

这场 Session 讲了什么

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

Session 聚焦在仪表盘的 gauge（仪表）设计上。从字体（SF 可变字体）开始讲起——SF 字体允许在 weight、width、corner softness 三个维度上做连续调整，不是传统的 light/regular/bold 离散选择。基于同样的参数化逻辑，gauge 的宽度、圆角弧度、弧线角度、起始和结束位置、颜色（纯色和渐变）都可以自由调节。系统还支持传统的指针样式和 tick mark（刻度线），刻度的数量、长度、样式、位置同样可定制。

最关键的一点是：这套设计系统产出的是”co-branded”体验——不是纯 Apple 风格，也不是纯车厂风格，而是两者融合的独有视觉语言。每辆车的 CarPlay 仪表盘看起来都会不一样。

值得深挖的点

参数化设计系统的技术逻辑

这套 gauge 设计系统不是”选模板 + 换颜色”这种浅层定制。它提供了一组正交的视觉参数，每个参数独立控制一个视觉维度。举个例子：一个圆形 gauge 的参数包括弧线角度（0-360度）、弧线粗细、圆角半径、颜色（支持线性渐变和径向渐变）、内部文字的位置和大小、刻度线的密度和样式、以及是否使用指针。这些参数的组合空间是巨大的。

Apple 选择 SF 可变字体作为基础，这个选择本身就说明了设计理念——可变字体的 weight 和 width 是连续值，不是离散选项。当你把 gauge 的弧线粗细从 2pt 调到 4pt，字体的 weight 也可以同步从 light 过渡到 medium，视觉上保持一致性。这种”所有维度都连续可调”的思路，让车厂设计师能找到自己品牌风格的精确表达点，而不是被迫从几个预设方案里选一个。

功能与风格的解耦

Session 中一个容易被忽略但非常重要的设计原则：gauge 的功能（显示速度、油量、巡航速度、导航方向等）和它的视觉风格是解耦的。同一种功能在不同风格的 gauge 上表现方式不同，但信息传达的准确性是一致的。

演示中对比了两种 gauge：左侧是极简线性风格的浅色模式，右侧是技术感十足的圆形深色模式。两种 gauge 都能显示巡航控制的目标速度、自适应巡航的前车距离、导航转弯方向。但视觉表现完全不同——线性风格用色条和文字标注，圆形风格用弧线上的标记点和指针。这种解耦意味着车厂可以随意定义视觉风格，而不用担心功能缺失。

代码片段

这个 session 纯设计导向，没有代码片段。底层的技术实现见 companion session “Meet the Next Generation of CarPlay Architecture”。但可以展示设计参数的思路：

设计参数的逻辑（概念性伪代码）

// 下一代 CarPlay gauge 的核心参数维度
GaugeStyle {
    typography: {
        family: "SF"              // 可变字体
        weight: 0...1             // 连续值，不是离散选项
        width: 0...1              // compressed 到 expanded
        cornerSoftness: 0...1     // 直角到圆角
    }
    
    geometry: {
        shape: circular | linear  // 圆形或线性
        arcAngle: 0...360         // 弧线角度
        strokeWidth: 1...10       // 弧线粗细
        cornerRadius: 0...20      // 圆角半径
    }
    
    color: {
        stroke: solid | gradient  // 纯色或渐变
        primary: Color            // 主色
        secondary: Color          // 辅助色
    }
    
    elements: {
        needle: boolean           // 是否使用指针
        tickMarks: {
            count: Int            // 刻度数量
            length: Float         // 刻度长度
            style: simple | technical
        }
    }
}

不同品牌风格的参数组合示例

// 风格 A：轻盈优雅
StyleA {
    weight: 0.2          // 偏细
    width: 0.4           // 略窄
    cornerSoftness: 0.8  // 柔和圆角
    arcAngle: 240        // 非完整圆
    strokeWidth: 2       // 细弧线
    needle: false        // 无指针
    color: 蓝色渐变
}

// 风格 B：硬朗运动
StyleB {
    weight: 0.9          // 粗体
    width: 0.8           // 宽
    cornerSoftness: 0.1  // 几乎直角
    arcAngle: 360        // 完整圆形
    strokeWidth: 8       // 粗弧线
    needle: true         // 带指针
    color: 红色纯色
}

坑点：参数组合的自由度极高，但并不是所有组合都合理。比如极细字体配上极粗弧线会显得不协调，Apple 建议在调整参数时保持各维度之间的视觉平衡。

最佳实践

这个 session 面向的是汽车厂商的设计团队，不是普通 App 开发者。如果你是车厂的设计师或与车厂合作的开发者，需要理解的核心原则是：这套系统的定制深度远超换主题色，你需要从品牌的视觉语言出发，系统性地调校每个参数。Apple 建议从 SF 字体的 weight 和 width 开始定义品牌调性，然后让 gauge 的弧线粗细和圆角与字体保持一致的视觉节奏。

对于普通 App 开发者，下一代 CarPlay 对你的直接影响在于：如果你的 App 支持 CarPlay，需要确保在深色/浅色两种模式下都有良好的表现，因为不同车厂可能选择不同的默认外观。另外，导航类 App 需要特别关注仪表盘上的导航指示如何与不同风格的 gauge 共存。

还有什么值得关注

  • companion session “Meet the Next Generation of CarPlay Architecture” 提供了技术实现的细节，包括车厂如何与 Apple 协作完成定制。
  • 系统不仅支持圆形 gauge，还有线性仪表和更多组件样式，并且还在持续增加新组件。
  • 这套设计系统最终产出的体验在用户选择 CarPlay 或原生车机系统时都能生效——用户有选择权。
WWDC 2024