想做好车载设计？先掌握这份 Carplay 设计规范（下）

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

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

想做好车载设计？先掌握这份 Carplay 设计规范（上）

传统的汽车中控系统，大多是相对固定的硬件组合到一起，共同构成中心的控制台，控制着包括导航、收音机、播放器、空调等在内的各种功能。

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）

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

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

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/