车载HMI - Carplay 设计规范

传统的汽车中控系统，大多是相对固定的硬件组合到一起，共同构成中心的控制台，控制着包括导航、收音机、播放器、空调等在内的各种功能。一直到 2000 年前后，汽车的中控台都一直以这样相对固定的物理按钮和旋钮来搭建，用户也可以通过官方或者第三方服务，来升级功能，比如将磁带播放器升级为CD播放器乃至于内嵌电视功能等等。

随着移动端技术的发展，iOS 和 Android 等智能软件系统的完善和提升，汽车的中控系统也不再受限于固化的硬件功能。平台化的软件体系让中控系统有了更多的可能性，影音娱乐开始更加丰富，而已然完善的移动端触摸式交互生态，则为汽车中控以屏幕替代物理按钮打下基础，各类原本存在于手机电脑的新型的 APP 、功能、服务也逐渐出现在汽车中控系统上，而特斯拉更是一步到位，以一块巨大的触摸屏彻底革新了中控的交互体验，OTA 升级，有机多样的UI交互，彻底释放开了汽车中控交互体验上的想象力。新的问题出现了，新的方法在迭代，新的趋势也得到了印证。

宝马奔驰保时捷等顶级的汽车厂商大都在中控台的设计上，探索了各自的可能性，国内厂商也毫不示弱，不过其中绝大多数的系统都基于我们熟悉的 Android 或者是 Android Auto 作为基础来进行定制和优化，而苹果则基于自家 iOS 生态，在 2013 年推出了 iOS in the Car 服务，目前正式名称为 Carplay。而目前各大厂商所青睐的 Android Auto 也上在 Carplay 发布之后所跟进并发布的。
目前，Carplay 和 Android Auto 都已经上行业标准级别的存在，今天这篇文章， 我们先聊聊 Carplay。

🚗 关于 Carplay

CarPlay 车载系统旨在令用户通过汽车制造商之原生车载系统来使用、操控iOS设备并发挥其功能。该产品的首个版本计划于2014年发布，最早出现在一些制造商的汽车展览上。

Carplay 本身并非完全独立的存在，它本身会和 iPhone 一起联动，让iPhone 成为你的车钥匙和辅助管理系统。

CarPlay 车载让你能够在驾驶车辆时智能、安全地使用各项 iPhone 功能。你可以开导航、打电话、收发信息、听喜欢的歌。所有这一切，都整合在车内的中控显示屏上。在 iOS 14 中，CarPlay 车载还引入了全新的 app 类别和适用于 CarPlay 车载仪表盘的自定墙纸。

Carplay 以 苹果自身在移动端交互和用户体验上的深厚积淀，总结和梳理出了一套可供学习和值得参考借鉴的规范。
这些规范对于需要考虑车载使用场景的厂商以及正在布局车载移动端软件或者系统的厂商的设计师而言，都有着相当的参考和学习价值。

📑 Carplay 核心原则和功能

作为车内辅助、操作、娱乐的中心，Carplay 可以直接连接到汽车中控的触摸屏上，提供基于 iOS 的相关的服务和应用。Carplay 的整体设计围绕着车内驾驶这一使用场景，而它的设计原则也围绕着这一场景来规划：

• 成熟。基于最熟悉的 iOS 应用，来设计界面元素，并提供熟悉、直观的体验。
• 简短。采用尽可能简短的交互，不过度引人瞩目
• 相关。屏幕显示信息高度相关，提供尽可能少选项，不需要复杂决策
• 语音。基于Siri，以语音交互为核心，司机无需视线离开前方，手也不用离开方向盘即可完成交互。

1.1、音频应用

Carplay 当中会有提供音频内容的 APP，诸如 Podcasts，网络电台，新闻，音乐，体育节目等等，这些服务和 APP 将会通过内置的屏幕显示，并且借助最常见的「标签栏+列表」来呈现基本的框架，并且必须包含「播放」界面。尽管这类服务和应用是借由内置的界面框架来呈现，但是依然有值得注意的要点：

1. 即使数据不可用，也始终要提供内容。考虑到内容可能会受到网络状况的影响，在这种情况下，请依然使用占位符。
2. 请将内容层次结构控制在3个级别，或者更少。
3. 使用多个标签页来组织内容，并且尽量简化标签导航的数量和结构。
4. 优先显示相关度最高的内容，减少用户不必要的操作。
5. 在最顶层界面中，提供包括单点击触摸即可播放的功能，比如「播放」按钮和「随机播放」等选项。
6. 行驶过程中，对内容进行智能过滤。比如超速的时候，系统会进行语音提示，此时智能暂停播放的内容，并在界面中呈现正在播放的内容的相关信息。
7. 提供尽可能简洁的标题和说明。
8. 提供补充性的可视化内容，比如专辑封面等等，更加一目了然。
9. 不要在 Carplay 中内置登录和设置的选项和功能，确保 APP 开箱即用。如果需要，尽量让这类操作在 iPhone 上进行，并且尽早完成。

↑ 使用此图标代表明确的、本地的的内容。
↑ 使用此图标来标识在线的内容，确保用户知道内容来自网络，并且会耗费网络流量。
在进行音频内容播放的时候，Carplay 会显示「正在播放」的界面，并且会使用如下界面：

在设计这个相关的界面功能的时候，需要注意以下几点：

• 播放音频时，提供有用的、准确的信息，并且可以进行明确的控制。
• 不要重新定义播放控件的含义。

• 在中断播放一段时间之后，适时恢复并继续音频播放。

  1.2、汽车厂商应用

  Carplay 能够内嵌到不同厂商的车中，自然也可以控制车内的硬件。这一部分的硬件驱动支持通常是由厂商提供，并且借由 Carplay 内的界面，提供统一的交互体验。
  

• 将控件和内容限制在与汽车本身相关的范畴以内，不要加入无关的功能

• 首选标准UI控件，包括按钮、标签、导航、表单等控件，具体可参阅系统元素
• 不要重新设计标准控件，确保整体的视觉和体验的一致性

• 切勿模仿汽车本身的UI 界面设计，确保 Carplay 内的统一性

  1.3、信息传递和 VoIP应用

  VoIP 也就是基于 IP 的语音传输功能，而在 Carplay 中，VoIP 应用主要借助 Siri 服务，并且全由 Siri 操控，它并不为用户提供直接的交互界面，因此无需专门设计 UI 界面。
  
  它支持阅读信息和编写/回复消息，不过需要用户授予权限
  
  建议启用 Carplay 的通知功能。具体参阅：UNNotificationCategoryOptionAllowInCarPlay
  如果你的 APP 支持 VoIP，请启用 Siri 功能。具体参阅：INSearchCallHistoryIntentIdentifier 和 INStartAudioCallIntentIdentifier

  2.1、信息标识

  当你的 APP 有推送信息未读的时候，通常会在 APP 的右上角增加一个红色的小红点标识，并且其中会有一个白色数字用来标识未读信息的数量。
  

• 尽量让信息标识足够直观。让用户打开APP之后能够看到推送信息。

• 保持克制。不要让推送信息大量而频繁，在这个场景下会让用户感到迷惑。
• 注意重要信息的呈现。在标签栏和APP内的重点位置凸显重要信息，不要仅靠信息标识来凸显关键信息推送。
• 避免使用警报提示来作为信息标识的补充。即使有重要的信息，用户也不希望你在打开APP的时候出现警报弹出框来推送信息。这些信息应当是可见，显著，但是用户选择是否要打开和点击的。

• 始终保持信息标识是最新的。

  2.2、错误推送

  对于错误信息，应当妥善处理，并且绝对是要在必要的时候才推送报错信息。

• 通过 Carplay 推送错误信息，而不是推送到连接的 iPhone 上去。

• 优先以非侵入性的状态推送来推送报错信息，而不是直接弹出警报。

  2.3、加载状态

  在加载内容的时候，使用黑屏或者静态的界面，可能会让它整体上看起来像是死机了一样，者可能会导致用户离开。
  

• 进行加载的时候，尽量明确显示加载状态

• 加载时，尽快显示主要内容，使用文本和图片占位符来呈现内容布局，并且在完成之后替换，如果可能，尽量预加载已有内容，再更新。

  2.4、导航模式

  在 Carplay 当中，有2种常见的导航模式：
  横向导航。通常使用标签栏来进行导航，不同内容横向排布，用户可以快速点击不同标签切换。
  
  分层导航。用户在屏幕上点选不同选项，通往不同的子界面。其中地图应用采用的是这种结构。
  
  音乐类应用可以使用横向导航，也可以使用分层导航，在设计导航的过程中，应当注意：

• 尽可能让用户快速而轻松地获取内容。结构化信息，让用户以最少点击、滑动来找到他们想要的东西。

• 用户在进行返回操作的时候，请保留之前的界面，防止用户迷失。避免音频自动播放，除非它是主要功能。
• 为每一个界面分配一个固定清晰的路径。
• 尽可能使用标准的导航组件，比如使用选项卡菜单栏和列表视图。
• 使用导航栏应该能够遍历所有的层次结构。

• 使用标签页选项卡的时候，显示同一级的内容或者分类。

  2.5、测试

  全面的测试，是确保应用可用性的重要前提。

• 请在实际与 Carplay 兼容的显示器上进行测试，最好是在真实的车上进行测试。

• 在恶劣的网络条件下测试，比如穿越隧道或者网络覆盖状况较差的区域。

• 测试安装和设置的流程中有没有问题，并且密切注意涉及到登录和隐私相关的问题。

  3.1、音频内容

  无论音频是否是你的 APP 的主要内容呈现形式，你都需要了解用户对于音频有哪些期待，并且尽量去贴合这些需求。

• 只有当准备好播放之后，才会切换到「正在播放」的屏幕页面。

• 音频加载完毕之后就可以开始播放，即使描述性的信息依然在加载。
• 尽量避免自动播放。
• 如果被别的程序和提示打断，在暂停之后再继续恢复音频播放。
• 在必要的时候，自动调整当前内容的音量，而不是整体的音量。

• 在系统发出短提示音的时候，使用系统音量。比如警报。

  3.2、汽车数据

  在管理汽车功能的页面当中，厂商提供的功能和数据将会无缝的接入到 Carplay 当中，比如气候、网络、GPS 等等。当数据不可用的时候，尽量提供合理的响应方式。
  比如当汽车通过隧道，没有 GPS 信息的时候，尽量以不打扰的方式来告知用户。具体的开发接口，请参阅：External Accessory Programming Topics 和 ExternalAccessory。

  3.3、iPhone

  Carplay 是和 iPhone 连接起来使用的，并且在程序数据上也相互兼容互通，只是Carplay 本身提供的是简化之后的 UI ，并且针对驾驶的场景进行了优化。

• 当 Carplay 处于活动状态时，隐去 iPhone 上的 APP 交互。

• 请不要将 iPhone 和相关用户置于 Carplay 范畴以外，因为正常使用的时候需要 iPhone 的数据接入。
• 确保当 iPhone 锁定或者在后备箱中的时候，你的程序可以正常使用。

  3.4、旋钮和控件

  支持 Carplay 的车辆通常会有物理按钮和旋钮，它们可以作为 Carplay 交互的辅助。当物理按键作为用户的主要交互介质的时候，通常至少会存在一个 Siri 按钮，导航控件，选择控件，以及后退控件。
  这些控件和 Carplay 应当高度对应，无论是播放、暂停、上一首/下一首 都应该做出准确的相应。具体可以参阅：MPRemoteCommandCenter
  
  当 Carplay 投射的屏幕不支持触摸的时候，还有基于旋钮的焦点式交互方式，当用户拧动旋钮的时候，能够让光标从一个元素切换到另一个元素，激活并交互。具体可以参阅这份文档：UIFocusEnvironment
  下半部分规范看这里：

在上一篇文章当中，我介绍了一些关于 Carplay 的基本原则和前一半设计规范。Carplay 总体上是在 iOS 的交互设计和视觉设计的原则上，针对汽车驾驶这一场景进行了深入的优化和约束。下半部分的将会涉及到视觉设计和具体 UI 控件的设计规范。


3.5、触摸屏交互
用户可以通过内置的触摸屏来与 Carplay 直接进行交互。高保真屏幕可能会比低保真屏幕，在交互效率上更高，更低延迟，支持更多手势。Carplay 的交互基本采用的都是单指交互，具体可以参考下方列表：

在设计交互的时候，尽可能少地使用触摸交互，避免用户在驾驶过程中分心。

3.6、Siri

Siri 是 Carplay 的基本功能，无干扰的语音让用户和程序之间的交互更加自然和安全
即使看不到 Carplay 的屏幕，依然可以使用方向盘上的语音命令按钮来激活 Siri。激活后，Siri 会针对语言进行处理和分析，并且转换为可用的指令。

• 快速响应，最大程度地减少交互。
• 使用自定义词汇表，提升 Siri 的识别准确度。用户可以通过特定的术语来提升语音识别准确度。

具体可以参与 SiriKit 编程指南。

4.1、动画

动画可以让屏幕上的元素，拥有一层附加的视觉效果。如果方法得当，动画还能呈现状态，提供反馈，增加用户直接操控时候的感觉，并且告知用户可视化操作的结果。

• 不要为了使用动画而使用动画。过多不必要的动画会分散用户注意力。
• 保持真实感和可靠。当动画没有意义且无视物理规律的时候，会让用户感到迷惑。
• 使用一致的动画效果。自定义动画应该和内置的动画保持一致。
• 将动画设为可选项。

• 更多动画的演示实例参考这里的案例：https://developer.apple.com/design/human-interface-guidelines/carplay/visual-design/animation/

  4.2、品牌设计

  成功的品牌设计并不只是把 LOGO 塞到 APP 当中，出色的 APP 能够巧妙地使用字体、配色和图像来构建独特的品牌形象。
  关于这方面的设计，可以详细参考 iOS 设计规范中的 配色、版式以及 图标和图像 这三个章节。
  在品牌设计上，Carplay 要求设计师：

• 尽可能将品牌设计以精致醒目的方式呈现出来。由于车内的使用场景，人们不会使用 Carplay 来查看广告，最佳的用户体验则是他们最需要的东西。

• 着重呈现品牌的一致性和功能性。确保你的 Carplay 界面是直观且易于导航的，并且提供驾驶时真正有用的功能。

• 遵守 Apple 的品牌设计准则。具体可参考：Apple Trademark List 和 Guidelines for Using Apple Trademarks

  4.3、配色

  通常，配色可以提供交互性，提供视觉连贯性，并且对界面赋予生命力。

• 你需要选择和你的品牌LOGO可以搭配使用的配色方案。

• 避免让交互性元素和非交互性元素使用相同的配色。
• 在实际汽车环境下，对你的配色方案进行测试。
• 尽量使用深色背景。
• 注意不同文化对于色彩的理解，以及色盲用户的需求。

• UI中采用足够明显的色彩对比。

  4.4、布局

  Carplay 支持不同像素密度不同纵横比的显示，但是这也意味着在实际布局设计的时候，要格外小心，尽量让你的设计在不同的屏幕分辨率和长宽比之下，都显得足够正常。
  

• 以整洁的布局提供有用的信息，让驾驶者可以一目了然地扫视到信息。

• 在整个 APP 内部保持一致的外观。

• 确保主要内容足够清晰醒目，并且感觉上是可用的。
• 使用对齐的方式来保持清晰的层次结构，一目了然。
• 为交互元素留出足够的间距和交互空间。
• 基于驾驶员的位置来排布元素，尽可能顺手。

• 考虑物理控件对于界面的影响。

  4.5、字体版式

  Carplay 采用的字体是苹果的 SF 字体。你可以在这里下载到字体：
  

• 最小程度使用文本，使用图像信息传递速度更快。

• 强调重要信息。通过色彩和字体粗细，来凸显最重要的信息。
• 避免使用自定义字体。
• 尽可能使用内置的文本样式。
• 使用正文文本样式作为主要内容的字体。
• 使用 SF 字体的时候，Carplay 会根据最佳的文本大小自动适配间距。

5.1、图片尺寸和分辨率

和 iOS 类似，在 Carplay 当中，屏幕分辨率也分为 1x 2x 和 3x。

5.2、APP 图标

每个 Carplay APP 都应该有一个显著突出的图标，确保在驾驶的时候可以轻松点击到。

• 可以直接使用 iPhone 的 应用图标。
• 不要使用黑色作为图标的底色。
• 设计图标的时候，图标应该有视觉焦点。
• 采用简单且易于理解的图标设计。
• 确保图标本身是不透明的，并且让图标背景足够简单。
• 不要在图标当中使用照片、截图或者其他界面元素。
• 不要在APP的具体界面当中使用 APP 图标，避免混淆。
• 设计完成的图标应该是方形的，系统会使用蒙版将边缘处理为圆角矩形。

• Carplay 的图标尺寸分别为 @1x 60x60px ；@2x 120x120px ；@3x 180x180px

  5.3、自定义图标

  如果你设计的 APP 当中，需要的图标并不存在于系统图标当中，或者系统图标与你的 APP 并不匹配，可以自定义图标设计。

• 创建简单的，可识别的图标设计。不要加入过多的细节，确保可读性。

• 设计图标的时候，使用透明背景、抗锯齿且无阴影的纯色图标。
• 保持图标在风格、尺寸以及各个规格上的高度一致。
• 在设计选项卡图标的时候，选择两种不同版本的图标，分别是选中状态和未选中状态的。

• 不要在标签栏图标当中使用文本，如果需要，则在标签栏下方的标题中说明。
• 自定义图标尺寸要求如下：

5.4、系统图标

系统本身内置了许多小图标，服务于日常各种不同的任务，通常这些小图标会使用在导航栏和标签栏当中，尽可能使用这些内置的图标。

• 按照用户习惯和预期来使用这些系统图标。
• 如果找不到满足需求的图标，就请使用自定义图标。
• 在导航栏中使用图标的时候，具体可参阅这份文档：UIBarButtonItem

• 在标签栏中使用图标，请参考这份文档：UITabBarItem

6.1、上拉菜单（Action Sheets）

上拉菜单是一种特定的弹出菜单，通常从屏幕底部弹出，并且包含2个以上的选项。不过在 Carplay 当中应该尽量避免使用上拉菜单，在 iPhone 上倒是可以使用它，但是不要在 Carplay 中显示。

6.2、活动指示器（Activity Indicators）

在内容加载的过程当中，请勿让屏幕保持静止，或者空白，使用活动指示器确保它看起来没有静止。

如果可以的话，可以在加载过程中提供对用户有帮助的信息。具体可以参考 UIActivityIndicatorView

6.3、警告（Alerts）

警告会用来通知用户一些关键性的信息，警告通常由标题、可选信息以及一个或者多个按钮组成。除此之外，警报的视觉系统是静态的，无法自定义。

警告最小化呈现。由于警告本身会破坏用户体验，所以请在重要的情况下使用警报。
相关开发人员可以参考这份文档：UIAlertController

• 尽可能编写足够简单的、描述性的文本标题。
• 请尽量使用简短完整的句子。
• 避免让文本听起来上指责、评判或者侮辱。
• 不要对警报按钮进行解释。
• 单键警告仅仅具备通知的作用，通常采用有2个选项的两键警告。
• 给警告按钮以足够简明的逻辑和标题。
• 在右侧放置常用的选项，在左侧放置取消按钮。
• 对取消按钮采用正确的文本标签。
• 对于涉及删除的破坏性操作，应该采用特别的样式标识出来，具体可以参考
• UIAlertActionStyleDestructive 和 UIAlertAction 这两份文档。

• 允许通过点击「Home」按钮来消除警告。

  6.4、按钮（Buttons）

  按钮通常可以用来触发一些特定的操作，具有可自定义的背景，并且可以包含标题和图标。和 iOS 不同，Carplay支持的按钮样式非常有限。
  

• 在按钮标签中使用动词。

• 保持标题足够简短
• 仅在必要的时候，添加边框和背景

• 更具体的开发参考 UIButtonTypeSystem 和 UIButton

  6.5、标签（Labels）

  标签是推送到屏幕上的一条短消息，这个标签可以显示任意数量的静态文本。在设计标签的时候，尽量保持标签清晰易读。具体开发可参考UILabel。
  

  6.6、导航栏

  导航一般在屏幕的顶部，通常导航栏右侧会有返回按钮，中央是标题。有时右侧会有其他的可交互的控件。
  

• 在导航栏中间显示当前视图的标题。

• 避免在导航栏上放过多的控件。
• 不要包含多段式面包屑导航。
• 导航栏标题应该给按钮留下足够的空间。
• 使用标准的返回按钮。

• 开发请参考 UINavigationBar 这份文档

  6.7、滚动视图（Scroll Views）

  滚动视图让用户可以浏览到更多的内容，用户可以用滑动或者轻拂来进行浏览信息。

• 不要将一个滚动视图嵌套到另外一个滚动视图当中。

• 通常，一次只显示一个滚动视图。

• 开发可以参考文档：UIScrollView

  6.8、标签栏（Tab Bars）

  标签栏通常出现在屏幕顶端，并且用户可以借此快速切换。逻辑上标签栏可以包含无限多的 Tab，但是可见的标签数量，会根据实际显示尺寸而有所不同。
  

• 通常标签栏展现的是平铺的信息层次结构。

• 选项卡功能不可用的时候，不要删除或者禁用该选项卡。
• 严格使用标签栏来进行导航。
• 通常使用 3 个到 5 个选项卡。
• 使用图标来标示标签栏，会更加通俗易懂。

• 具体开发可参考文档：UITabBar

  6.9、表格（Tables）

  表单通常会以单列的样式存在，干净有效地呈现大量信息。
  

• 考虑表单的宽度，避免难以读取。

• 尽可能快速地显示表单的内容。
• 在加载的时候，结合活动指示器呈现进度。
• 具体参考开发文档：UITableView

在具体的表单条目的设计上，也有详细的规格要求。

默认样式，左侧可放置图片，并且标题也是靠左对齐的。具体参考文档：UITableViewCellStyleDefault 以及 UITableViewCell

副标题样式。这是包含标题和副标题的一种样式，两者靠左对齐，上下排布。具体参考文档：UITableViewCellStyleSubtitle 和 UITableViewCell

Value1 样式。标题靠左对齐，副标题靠右对齐。具体参考文档：UITableViewCellStyleValue1 和 UITableViewCell

Value2 样式。标题和副标题文本都靠右对齐，具体参考文档：UITableViewCellStyleValue2 和 UITableViewCell

• 保持文本足够简介，避免无法完整显示。
• 点击选择之后，记得显示反馈。
• 为非标准表格设置自定义样式。
• 更多开发细节参考文档：UITableViewCell

  参考来源： https://www.apple.com.cn/ios/carplay/ https://developer.apple.com/design/human-interface-guidelines/carplay/overview/introduction/

[

](https://www.uisdc.com/carplay-design-2)