了解新一代 CarPlay 车载架构

嗨！我是 Tanya 今天 我将代表汽车体验团队 与大家一起探索 我们非常高兴 终于可以和大家分享 新一代 CarPlay 车载的 幕后技术 希望你们已经看过由我的同事 Ben Crick 主讲的精彩视频 了解了设计系统 并已经准备好 深入了解它的工作原理！ 但在详细探讨之前 我们先来大致了解一下 自从 CarPlay 车载首次推出以来 汽车发生了很大变化 屏幕越来越大 数量越来越多

功能越来越丰富 人们喜欢通过 CarPlay 车载 将自己喜欢的功能 从 iPhone 投放到车上 iPhone 用户可以选择 使用旧版 CarPlay 车载 也可以选择使用这款 新一代 CarPlay 车载 它可以为车内所有的 驾驶员屏幕提供内容 全面整合的界面 带来极为丝滑顺畅、高度统一 且功能丰富的体验 这种体验还非常契合 特定的 车辆配置 让你的爱车 与卓越的功能 以及熟悉的 iPhone 交互模式融为一体

接下来 我们将介绍 今天的重点内容 包括架构 新一代 CarPlay 车载 UI 最后还有 如何启用自定功能 准备好了吗？ 下面我们来了解一下新增了哪些功能 来实现这一全新体验 首先是基于现有的 CarPlay 车载架构构建 高级 CarPlay 车载功能 比如增强型 Siri 缓冲媒体播放 以及支持 HEVC 流媒体视频播放 至关重要 新一代 CarPlay 车载 是一种纯无线体验 如果你在上次驾车期间使用过它 它将会重新连接并且恢复如初 无线连接的稳定性和性能 对于在行驶过程中获得顺畅体验 至关重要 先回顾一下 这基本上就是 CarPlay 车载目前的工作原理图 你以前可能看过这张图 通信插件充当 系统和 iPhone 之间的 主接口 它提供视频和音频内容 也接受来自车辆的用户输入 在典型的 CarPlay 车载配置中 这意味着 iPhone 提供单个视频流 然后交给系统进行解码 和合成 最后显示在屏幕上 就这么简单！现在 如果来看一下 新一代 CarPlay 车载 UI 以及它显示的所有内容 我们可能需要再介绍一些东西 我们将了解整个架构 但会重点了解仪表盘显示屏 因为它涉及一些 非常具体的注意事项 当然 同样的概念 适用于车内的所有显示屏

那么 它的结构究竟如何？ 我们来对 UI 进行分层 我们将最前面的层 称为叠层 UI 叠层 UI 包括 一些非常重要的 UI 元素 余下的一层则包括所有剩余元素 这两层都由 系统的合成器合成 并直接显示在屏幕上

叠层 UI 到底是什么？ 叠层 UI 包含特定于车辆的指示器 和基本指示符 它们可能经过重新设计 在某些情况下还可能重新调整了位置 以匹配新的 UI 体验 但关键在于 它们完全由系统渲染

那么 包含大部分 UI 元素的 剩下这一层中有些什么呢？ 同样 我们可以进行拆分 每一层都有 非常具体的用途 我们将底部这个称为远程 UI 远程 UI 为车辆带来 丰富且熟悉的 iPhone 体验 “地图”和音频 App 在这里生动呈现 此外 还提供了 胎压或行程信息等功能 如预期的一样 远程 UI 可以扩展到任何其他 显示屏 带来更多 iPhone 内容 比如媒体、环境等等 要实现所有这一切 现在我们需要为车内的每个显示屏 都提供一个 iPhone 视频流 那么 这对于 架构意味着什么呢？ 原本只是单个显示屏 而现在我们需要 在更多显示屏上显示内容 这里并不涉及太多新内容 大体上 CarPlay 车载目前已经 支持这项功能了！接下来是什么？ 接下来是本地 UI 本地 UI 会更有趣一些 它实际上显示 与驾驶相关的仪表和指示符！ 本地 UI 为我们提供了什么？ 它为我们提供了 能够实现低延迟渲染的 UI 从而可以响应 高频汽车信号 它非常稳健 不会因为 Wi-Fi 干扰或断开连接而受到影响 因为数据存储在车辆本地 最后 它可以快速启动 请注意 如果你在上次驾驶期间 使用过新一代 CarPlay 车载 它就会立即启动 显示屏一亮起 或者当车门打开或 当驾驶员走近汽车时 内容就准备好可以显示了 当你上车 并迅速驾车离开时 这甚至可能在检测到 或重新连接 iPhone 之前就发生了 所有这些均通过本地 UI 实现 很明显 它可以在系统上 直接渲染或在本地渲染 本地 UI 是如何运作的呢？ 首先是基于 OpenGL 的渲染器 它支持在车辆本身 进行渲染 我们使用素材包对它进行了增强 素材包中包含图像 以及行为脚本 这些脚本实现逻辑 来帮助生成 UI 每辆车的素材包 都是特定的 在配对期间 从 iPhone 传输到车辆 在使用任何新素材包之前 车辆会验证它的真实性 这种机制提供了 本地渲染的所有优势 同时还带来了 UI 随着时间推移 进行刷新的可能性 很酷 对吧？ 让我们将这些组件 添加到架构中 首先添加本地渲染器 然后添加适用于具体车辆的 素材和脚本 当然 如你所见 我们针对每个显示屏都执行这一操作 目前这样就可以了 下面我们继续 最后一层 我们称之为 Punch-through UI Punch-through UI 让你可以将 特定于车辆的 UI 融入到体验中 任何显示屏上的驾驶辅助、 外部摄像头等功能或任何 其他视觉效果丰富的功能 都可以表示为 Punch-through UI 毫无疑问 这些像素 全部由车辆渲染！ 但关键在于 UI 仍然给人一体化的感觉！ Punch-through UI 在显示时 会通过美观的方式呈现 并且能够无缝参与 过渡和动画 恰到好处地融入整体体验 这是如何实现的呢？ 在了解这一点之前 我们先来 回顾一下到目前为止所讲的内容

首先 我们了解了叠层 UI 以及 它如何由车辆直接合成 然后 我们了解了远程 UI

本地 UI 和 Punch-through UI 这三个层由专用的合成器处理 合成器使用 OpenGL 为系统的合成器 提供单个统一的输出帧 用于在每个屏幕上显示 回到架构 添加这个合成器 这个合成器接收 来自 iPhone 的视频流 以及本地渲染的 UI 现在 它还可以直接接收 Punch-through UI

正如你目前所了解的那样 新一代 CarPlay 车载 整合了在车辆上 本地渲染的内容 以及 iPhone 远程渲染的内容 而且 这种体验还包括顺畅的 布局过渡和动画 就像我们在 iPhone 中 常见的那样 为此 我们使用了 帧级同步

与 CarPlay 车载一样 每个远程渲染的 iPhone 视频帧都 带有显示时间戳 指定何时应该 向驾驶员显示 新一代 CarPlay 车载 增加了从 iPhone 到每个显示屏的 专用低延迟通道 这称为 UI 同步 借助这个通道 iPhone 会精心编排 UI 元素在显示屏上 移动时的过渡 而不考虑渲染来源 行为脚本 负责解读这些信息 并匹配来自本地 UI、 Punch-through UI 和远程 UI 的帧 一次一帧 每秒 60 帧 甚至可以更快 如果你的显示屏支持更快的速率 很神奇 是不是？ 而你在其中发挥着至关重要的作用 汽车系统确保 在整个系统中及时交付视频帧 和 UI 同步数据包 并保留相关的时间戳

最后 添加 叠层 UI 这就是一个完整的图形架构 正如我们所了解的那样 叠层 UI 直接进入车辆的合成器 这样就可以了！ 现在 我们已经全面了解了 如何创建 新一代 CarPlay 车载的 UI 接下来 我们来了解一下幕后技术 这个 UI 的驱动因素是什么？ 是车辆的状态 新一代 CarPlay 车载 依赖于汽车系统 来始终提供 最新的状态信息 随后再反映在 UI 中 根据在哪里 渲染特定信息 或者特定信息在系统内的 什么地方可用 有多个可用的接口 当然 Apple 非常重视 保护用户的隐私 而通过这种方法提供车辆状态 我们可以确保只在 需要的地方使用数据 而且在很多情况下 数据永远不会离开车辆

有一个专门的 车辆状态接口 用于仪表盘显示屏上 显示的 UI 还有一个类似的接口 用于中心显示屏上显示的本地 UI 对于远程 UI 我们已经扩展了通信插件 来支持车辆状态 同样 车辆状态信息的 实际提供位置 在很大程度上 取决于车辆内部的整合情况 和信息的可用性 至此 我们已经简要了解了 为新一代 CarPlay 车载 提供支持的架构 接下来 我们来了解一下这种 全新用户体验是如何实现的 以及如何与之互动

当我们谈到与 新一代 CarPlay 车载 UI 互动时 需要考虑三项主要任务 第一 通过对 UI 进行配置 来提供舒适自在的体验 并与车辆的独特功能协调统一 第二 确保 UI 始终 了解车辆状态 第三 显示 UI 来响应 车辆状况或用户互动 要完成上述任一任务 你可以使用车辆状态协议 我们先来配置 UI 新一代 CarPlay 车载 高度灵活 可以适应车辆的功能集 可添加或移除 UI 元素 以匹配车辆内部的可用性 不同的车型、配置级别 或详细的配置选项 都可以通过车辆状态协议 轻松映射到具体功能 所有 UI 配置均在 车辆状态初始化时发生 并在会话期间 保持不变 我们来看一个 具体的例子 — 环境 新一代 CarPlay 车载包含一个 功能完善的环境控制 UI 旨在适应具有 不同特征和功能的 各种车辆型号 但现在 我们将这些全部清除 从空白状态开始 根据我们的需要进行配置 首先 添加一个自定图像 代表车辆的内部结构 假设你需要为 一辆有三个不同环境区域的 5 座轿车提供支持 使用“VehicleResources” 在这个例子中 指定标识符“5Seater” 与内部结构图像的 某一变体相匹配 你想为 这个图像的多少变体提供支持 这完全取决于你 例如 如果汽车可以 配备运动座椅 或者红色座椅 并且你想在这里表达出这些细节 完全没问题！ 添加新的标识符 和匹配的图像素材非常简单

现在 我们来配置环境功能 然后 为每个受支持的区域添加控件 先从驾驶员区域开始 这里我们假设驾驶员可以调节 温度、 风扇档位和通风口方向 我们分别为它们创建 一个实例 对于温度 我们把它 设置为宜人且舒适 然后是风扇 但我们怎么知道 这些都是为驾驶员设置的呢？ VehicleLayoutKey 会帮我们 在这辆车中 驾驶员坐在左侧 所以这就是驾驶员区域 我们还在创建这些控件时 对它们进行了初始化 同样 我们创建实例来代表 这个例子中的三个通风口控件 首先是上方通风口 然后是中间通风口 它恰好处于开启状态 最后是下方通风口 当然 如果你有座椅加热器或风扇 也可以通过相同的方式进行添加 乘客区域遵循相同的模式 因为它采用相同的控件 就不多作介绍了 只需以相同方式进行配置即可 注意 这位乘客 对于环境的设置稍有不同 让我们跳到后座区域

在这个例子中 后座的乘客 只能调节 温度和风扇档位 因此我们只需配置两个实例 然后使用“seat_2nd_row” 将它们分配给后排座位 并提供初始值 后排环境区域就准备好了！ 最后 我们来配置 应用于所有区域的控件 在这个例子中 我们添加了再循环控件 以便在 车内空气与车外空气之间进行切换 还添加了驾驶舱控件 用于打开或关闭空调 还有选择器 用于同步区域设置 在这个例子中 按下“SYNC”按钮后 只有乘客区域 会与驾驶员区域同步 我们可以再次使用 “VehicleLayoutKey”进行配置 这样就可以了！ 至此 我们已经为这辆 出色的汽车配置了环境控件！ 就像这样 除了我们刚刚所做的 驾驶员还可以 在程序坞中获取环境控件 即使未显示完整 环境 UI 时也是如此 轻点控件即可轻松访问 现在 我们已经了解了 如何配置 UI 那么 如何让它保持最新状态呢？ 要让 UI 响应灵敏且准确无误 需要随时更新 车辆信息 当驾驶员按下硬件按钮 或屏幕上的某个控件时 你将收到 请求更改状态的通知 快速行动 执行操作 并按请求调整状态

当车内发生状态变化时 立即通知 UI 避免延迟响应 最后 你提供的任何值 都应该准确代表 你希望驾驶员看到的内容 任何平滑处理或调整 均由车辆执行 然后再转发到 UI 新一代 CarPlay 车载 仅准确显示你发送的内容 那么 它在实践中是如何运作的呢？ 这里有两个需要高频率更新的 本地渲染仪表 左侧是车速表 车速表需要始终接收 以三种不同单位表示的速度 最高精度值是 米每小时 也就是顶部的值 用于制作流畅的仪表动画 另外两个用于 以数值形式显示速度 始终需要显示所有单位 我们不需要 UI 帮我们做数学运算 UI 仅显示你提供的内容 开始行驶后 速度增加 仪表开始呈现动画效果 很简单！ 右侧是转速表 转速表更新单个值 和一个相关联的状态 状态大部分时间 都设为“Normal” 但如果驾驶员尝试 超过发动机最高转速 则完全由你自己决定 要更新什么值和状态来显示在 UI 上 想必你已经知道 这就是它的实际效果

到目前为止 我们已经看了几个例子 但我们学到的所有知识 都适用于所有功能 配置你想看到的内容 并随时更新 接下来 如何请求 显示一些内容呢？ 当驾驶员 与汽车互动时 你可能需要显示某些内容作为响应 也许是当驾驶员按下按钮时 或者是对 特定车辆信号进行响应 可供显示的内容有哪些呢？ 在仪表盘中 你可以显示 不同类型的通知和警告 自定驾驶辅助视图或自定挑选器 以供用户进行选择 在中央显示屏上 你可以根据需要灵活多样地 使用远程通知

我们来看一个 显示胎压警告的例子 这里 我们已经用四个 TirePressure 实例和一个 RequestContent 实例 配置了轮胎特征 以便在仪表盘中显示 在行驶的同时 会不断更新 “Pressure”和“PressureState” 但当状态变成低压时 就需要提醒驾驶员了 此时应触发显示胎压 UI 注意 这里允许 驾驶员手动关闭警告 现在 轮胎正在变瘪 状态变成放气 UI 反映了这一点 同样 当你想显示 其他警告或通知时 相同的基本原则也适用 中央显示屏也一样 如果没有倒车摄像头 现在会是什么情况？！ 车上显示的所有摄像头 是一项有趣的挑战！ 解决方案很有意思 因为它结合了 Punch-through UI (用于实际的摄像头流) 和远程 UI (用于你的自定用户控件) 这里就是一个倒车摄像头 它可能会在驾驶员 换成倒挡或者 按下 UI 中的 硬键或硬按钮时触发 在所有情况下 你都将使用两个不同的接口： AutomakerInputStreams (用于显示 Punch-through UI) 和 AutomakerExteriorCamera (用于显示你想要查看的用户控件) 当然 也可以重复使用这些 API 以显示鸟瞰摄像头视图 停车辅助系统功能 等等 请注意 摄像头 Punch-through UI 将会在驾驶员 上车后快速显示出来 即使尚未连接 iPhone 也是如此 请记住：Punch-through UI 是在本地渲染的 这就是它实际的运作方式 同时调用这两个 API 准备就绪 倒车进入停车位 好了现在 我们已经了解了 如何使用新一代 CarPlay 车载中 所包含的各种功能 下面我们来看一看 如何进行进一步自定 针对每辆车 打造一些特殊体验 对于自定 有许多选项可供你选择 你可能想要通过显示 高度可视化和专业化的 UI 来添加一些新的体验 你可能想要提供 特定设置和设置菜单 或者你可能想要显示自定提醒 或通知 以便与驾驶员互动 所有这些都可以实现 下面我们就来 深入了解如何实现所有这些体验

在新一代 CarPlay 车载中 展示汽车功能的 最灵活的方式是 使用汽车制造商 App 汽车制造商 App 在 iPhone 上运行 这意味着你可以 充分利用 iOS 来自行创建丰富的自定 UI 当然 你还可以随着时间的推移 不断更新体验 如果想显示自定设置 驾驶员可以在 车辆设置 App 里找到它们 轻点它 你会看到一个非常典型的 设置选项列表

这里的关键在于 所有内容均由你来定义 包括你正在使用的设置类型、 标签、图标、 功能、结构、顺序等等 所有一切均由你决定 你只需使用完全可自定的 汽车制造商设置 API 即可做到 接下来 你可能想要突显 一些刚刚定义的设置或功能 并让它们可以轻松访问 你只需使用 ProminenceInfo API 按你的意愿 改变一下外观和风格 设置就会显示在 这个顶层 你的某些设置 实际上可能属于 新一代 CarPlay 车载的某种体验 也许就在环境、 音频或媒体设置里 这也很容易做到！ 轻点它 看看这里有什么

所有这些都是你 已定义的自定设置 可以看到 你也可以在这里突显 对于驾驶员来说真正重要的内容 那我们还能做些什么呢？ 你想为驾驶员添加一种 设置环境时间表的方法 请注意 你已经有这种方法了 就在你的 iOS App 中 我们能否直接重复使用它？ 答案是肯定的 你可以重复使用它 只需将这个设置 配置为深度链接设置 它会让驾驶员 直接进入你的 App 这里稍微暂停一下 利用这项功能 驾驶员现在可以从你在 新一代 CarPlay 车载 UI 中 定义和添加的自定入口点 来使用你的 iOS App 功能 这非常重要！对吧？ 现在继续 某些功能或设置 可能最适用于 车内的特定环境区域 同样 你可以使用 VehicleLayoutKey 为驾驶员提供方便的按摩设置

现在 当驾驶员轻点按钮时 可以选择是否要链接到 包含更多选项的子菜单 或者如果内置 UI 已经 具备高级座位可视化功能 你可以使用 Punch-through UI 进行链接 当然 这只是两个例子 无论你在 UI 内的哪个位置 添加自定设置 你始终都可以选择 在用户做出选择后显示哪些内容 与汽车制造商 App 一样 你现在基本上可以在 自定设置菜单中添加入口点 或者在新一代 CarPlay 车载 UI 中 添加内置 Punch-through UI 接下来 我们继续了解 如何显示自定通知 首先 我们来看一下 仪表盘显示屏 你可以全面自定这些通知 包括标签、图标、按钮 它们旨在让你能够轻松 使现有通知变得生动鲜活 由你决定显示哪个通知 何时显示通知 以及何时移除通知 你还可以选择 是在本地渲染这些通知 还是在远程 UI 内渲染 具体取决于你的用例 现在来看中央显示屏 可同样使用 高度可自定的功能 你可以完全根据需要 配置通知 同样也是使用 AutomakerNotifications 进行配置 你甚至可以利用 完全相同的 API 实现更多功能 举个例子 假设驾驶员 按下了车内的驾驶模式按钮 你可以显示当前设置 并且可以借助配置按钮 允许显示更多选项 现在再次假设驾驶员轻点按钮 你可以选择在轻点按钮后 显示什么内容 这里显示了一些 你已经很熟悉的选项！ 链接到 App、自定菜单 或内置 Punch-through UI 一切由你决定 同样 这些只是一些简单的例子 但它们开启了很多可能性 我们已经迫不及待 想看看你如何使用这些选项 将新一代 CarPlay 车载 融入你的爱车！

我们已经了解了 如何在现代 CarPlay 车载的基础上 构建新一代 CarPlay 车载的架构 并添加新功能 例如车内渲染、合成 以及对车辆状态的支持 你可以轻松 配置和构建 UI 以匹配 每辆汽车的功能 它为你提供了各种各样的选项 让你能够借助自定 UI 将特殊功能变为现实 如果你有兴趣进一步了解 可以查看链接的视频 要访问相关技术文档 请注册加入 Apple MFi Program 就是这些 感谢大家和我 一起了解架构 尽情尝试将这款新一代 CarPlay 车载融入你的车吧 我已经迫不及待想看到 你会擦出怎样的火花！