在上一篇文章当中，我介绍了一些关于 Carplay 的基本原则和前一半设计规范。Carplay 总体上是在 iOS 的交互设计和视觉设计的原则上，针对汽车驾驶这一场景进行了深入的优化和约束。下半部分的I M & P ) c m & @将会涉及到视觉设计b $ n ~ 3 / h %和具体 UI 控件的设计规范。
用户可以通过内置的触摸屏来与 Carplay 直接进行交互。高保真屏幕可能会比低保真屏幕，在交互效率上更高，更低延迟，支持更多手势。Carplay 的交互基本采用的都是单指交互，具体可以参考下方列表：
想做好车载设计？先掌握这份 Carplay 设计规范（下）
在设计交互的时候，尽可能少地使用触摸交互，避免用户在驾驶过程中分心。
Siri= 4 j 是 Carplay 的基本功能，无干扰的语音让用户和程序之间的交互更加自然和安全
即使看不到 Carplay 的屏幕，w l , y S依然可9 b g D以使用方向盘上的语音命令按钮来激活 Siri。激活后，Siri 会针对语言进行处理和分析，并且转X 3 ` E L换为可用的指令。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
- 快速响应，最大程度地$ 5 k 4 y U i减少交互。
- 使用自定义词汇表，提升 Siri 的识别准确度。用户可以通过特定的术语来提升语音识别o I i = $ v Y 5 L准确度。
具体可以参o m C G I [ l / O与 Si! % g # A OriKit 编程指南。
动画可以让屏幕上的元素，拥有一层附加的视觉效果。如果方法得当，动[ ] ? 3 s画还能呈现状态，提供反馈，增加用L N ! g q [ B $户直接操控时候的感觉，并且告知用户可视化操作的结果。
- 不要为了使用动画而使用动画。过多不必要的动画会分散用E A } x 9 b , T户注意力。
- 保持真实感和可靠。当动画没有意义且无视物理规律的时候，会让用户感到迷惑。
- 使用一致的动画效果。自定义动画应该和内置的动画保持一致。
- 将动画设为可选项。
- 更多动画的演示实例参考这里的案例：https://developer.apple.com/design/human-interface-M % ( D q ) 4guidelines/carplay/visual-design/animation/
成功的品牌设计并不只是把 LOGO 塞到 A4 d 5PP 当中，出色的 APP 能够巧妙地使用字体、配色和图像来构建独特的品牌形象。
关于这方面的设计，可以详细参考 iOS 设计规范中的 配色、版式以及 图标和图像i J H N z { = q 这三个章节。
在品牌设计A 2 q | C v d上，CaX Z u o Q l r ,rplay 要求设计师：
- 尽可能将品牌设计以精致醒目的方式呈现出来。由于车内的使用场景，人们不会使R p U ~ y 3 O用 Carplay 来查看广告，最佳的用户体验则是他们最需要的东西。
- 着重呈现品牌的一致性和功能性。确保你的 Carplay 界面是直观且易于导航的，并且提供驾驶时真正有用的功能。
- 遵守 Apple 的品牌设计准则。具体可参考：Apple Trademark List和G/ x = U , 3 9uidelineG i D z e & 7s for Using Apple Trademarks
通常，配色可以提供交互性，提供视觉连贯性，并且对界面赋予生命力。
- 你需要选择和你的品牌LOGO可以搭配使用的配色方案。
- 避免让交互性元素和非交互性元素使用相同的配色。
- 在实际汽车环境下，对你的配色方案进行测试。
- 尽量使用深色背景。
- 注意不同文化对于色彩的理解，以及色盲用户的需求。
- UI中采用足够明显的色彩对比。
Carplay 支持不同像素密度不同纵横比的显示，但是这I Z x z e ` 也意味着在实际布局设计的时候，要格m 0 1 +外小心，尽量让你的设计在不同的屏幕分辨率和长宽比之下，都显得足够正常。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
- 以整洁的布局提供有用的信息，让驾驶者可以一目了然地扫视到信息。
- 在整个 APP 内部保持] Q 2 B一致的外观。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
- 确保主要内容足够清晰醒目，并且感觉1 G S K m m上是可用的。
- 使用对齐的方式来保持清晰的层次结构，一目了然。
- 为交互元素留出足够的间距和交互空间d o V。
- 基于驾驶员的位置来排布元素，尽可能顺手。
- 考虑物理控件对于界面的影响。
Carplay 采用的字体是苹果的 SF 字体。你可以在这里下载到字体：
想做好车载设计？先掌握这份 Carplay 设计规范（下）
- 最小程度使用文本& K e h M C + _ Q，使用图像信息传递速度更快。
- 强调重要信息。通过色彩和字体粗细，来凸显最重要的信息。
- 避免使用自定义字体。
- 尽可能使用内置的文本样式。
- 使用正文文本样式r : d B X $ u W作为– J 9 P i 6 ,主要内容的字体。
- 使用 SF 字体的时候，Carplay 会根据最佳的文本大小自动适配间距U E { T f B $。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
和 iOS 类似，在 Carplay 当中，屏幕分辨率也分为 1x 2x 和 3x。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
想做好车载设计？先掌握这份 Carplay 设计规范（下）
每个 Carplay APP 都应该有一个显著突出的图标，确保在驾驶的时候可以轻松点击到。
- 可p ) A以直接使用 iPhone 的 应用图标。
- 不要使用黑色作为图标的底色。
- 设计图标的时候，图标应该有视觉焦点。
- 采用简单且易于理解的图标设计。
- 确保图标本身是不透明的，并且让图标背景足够简单。
- 不要在图标当中使用照片、截图或者其他界面元素。
- 不要在APP的具体界面当F / , ~ o中使用 APP 图标，避免混淆。
- 设计完成的图标应该是方形的，系统会使用蒙版将边缘处理为圆角矩形。
- Carplay. w m 7 I z p k 的图标尺寸分别为 @1x 60x60px ；@* ? i R – @ w &2x 120x120px ；@3x 180x180px
如果你设计的 APP 当中，需要的图标并不存在于系统图标当中，或者系统图标与你的 APP 并不匹配，可以自定义图标设计。
- 创建简单的，可识别的图标设计。不要加入过多的细节，确保可读性。
- 设计图标的时候，使用透明背景、抗锯齿且无阴影的纯色图标。J $ k g h
- 保持B ~ Y W _ f q图R o n {标在风格、尺M d ] C S h N 6 )寸以及各个规格v S ( ) ; _ d上的高度一致。
- 在设计选项卡图标7 j ~ 6 Z的时候I L . L 3 & a 9 l，选择两种不同{ G c F g j [版本的图标，分别是选中状态和未选中状态的。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
想做好车载设计？先掌握这份 Carplay 设计规范（下）
- 不要在标签栏图标当中使用文本，如果需要，则在标签栏下方的标题中o ; ! _说明。] D B
- 自定义图标尺寸要求如下：
想做好车载设计？先掌握这份 Carplay 设计规范（下）
系统本身内置了许多小图标，服务于日常各种不同的任务，通常这些小图标会使用在导航栏和标签栏当中，尽可能使用这些内置的图标。
- 按照用户习惯和预期来使用这些系统图标。
- 如果找不到满足需求的图标，就4 i # D B l请使用自定义图标。
- 在导航栏中使用图标的时候，具体可参阅这份文档：UIBarButtonItem
想做好车载设计？先掌握这份 Carplay 设计规范（下）
- 在标签栏中6 ) S T使用图标，请参考这份文档：UITabBarItem
想做好车载设计？先掌握这份 Carplay 设计规范（下）
上拉菜单是一种特定的弹出菜单，通常从屏幕底部弹出，并且包含2个以上的选项。不过在 Carplay 当中应该尽量避免使用上拉菜单，在 iPhone 上倒是可以使用它，但是不要在 Carplay 中显示= v _ 4。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
在内容加载的过程当中，请勿让屏幕保持静止，或者空白，使用活动指示器确保它看起来没有静止。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
如果可以的话，可以在加载过程中提) K w (供对用户有帮助的信息。具体可以参考 UIActivityIndicaG E P ) H HtorView
警告会用来通知用户一些关键性的信息，警告通常由标题、可选信息以及一个或者多个按钮组成。除此之外，警报的视觉系统是静态的，无法自定义4 : Y。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
警告最小化呈现。由于警告本身会破坏用户体验，所以请在重要的情况下使用警报。
相关开发人员可以参考这份文档：UIAlertController
- 尽可能编写足够简单的、描述性的文本标题。
- 请尽量使用简短完整的句子。
- 避免让文本听起来上指责、评判或者侮辱。
- 不要对警报按钮进7 t $ v f – V i u行解释。
- 单键警告仅仅具备通知的作用，通常采用有2个选项的两键警告。
- 给警告按钮以足够简明的逻辑和标题。
- 在右侧放置常用的选项，在左侧放置取消按钮。
- 对取消按钮采用# E { [ ]正确的文本标签。
- 对于涉及删除的破坏性操作，应该采用特别的样式标识出 k G s % S c来，具体可以参考
- UIAlertActionStyleDestructive 和 UIAlertAction 这两份文档。
- 允许通过点击「Home」按钮来消除警告。
按钮通常可以用来触发一些特定的操作，具有可自定义的背景，并且可以包含标题和图标。和 iOS 不同，Carplay支持的按钮样式非常有限。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
- 在按钮H q F O . / j _标签中使用动词。
- 保持标题足s { o够简短
- 仅在必p I ` d要的时候，添加边框和背景
- 更具体的开发参考 UIButtonTypeSystem 和 UIButton
标签是推送到屏幕上的一条短消息，这个标签可以显示任意数量的静态文本。在D & s设计标签的时候，尽量保持标签清晰易读。具体开发可参考UILabel。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
导航一般在屏幕的顶部，通常导航栏右侧会有返回按钮，中央是标题。有时右侧会有其他的可交互的控件。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
- 在导航栏中间显示当前视图的标题。] k 7 3 –
- 避免在导航栏上放过多的控件。
- 不要包含多段式面包屑导航。
- 导航栏标题应该给按钮留下足够的U # v 1 3 j C |空间。
- 使用标准的返回按钮。
- 开发请参考 UINavigationBar 这份文档
滚动视图让用户可以浏览到更多的内容，用户可以用滑动或者轻拂来进行浏览信息。
- 不要将一个滚动视图嵌套到另d F $ r F外3 X 9 c w t一个滚动视图当中。
- 通常，一次只显示一个滚动视图。
- 开发可以参考文档：UIScrollView
标签栏通常出现在屏幕顶端，并且用户可以借此快速切换。逻辑上标签栏可以包含无限多的 Tab，但是可见的标签数量，会根据实际显示尺寸而有所不同。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
- 通常标签栏展现的是平铺的信息层次结构。
- 选项卡功能不可用的时# t L t @ N候，不要删除或者禁用该选项卡。
- 严格使用标签栏] P 1 – 5 H来进行导航。
- 通常使用 3 个到 5 个选项卡。N V F _ R 3 # 1 u
- 使用图标来r n ] E { d k B v标示标签栏，会更加通俗易懂。
- 具体开发可参考文档：UITabBar
表单通常会以单列的样式存在，干净有效地呈现大量信息。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
- 考虑表单的宽: m / D b ~ n度，避免难以读取。
- 尽可能快速地显示表单的内容。
- 在加载的时候，结合活动指示器呈现进度。
- 具体参考开发文档：UITableView
在具体的表单条目的设计上，也有详细的规格要求。
想做好车载设计？先掌握这份 Carplay 设计规范（下）
默认样式，左侧可放置图片，并且标题也是靠左对齐的。具体参考文档：UITableViewCellStyleDefault 以及 UITable( ! k L 3 ]ViewCell
想做好车载设计？先掌握这份 Carplay 设计规范（下）
副标题样式。这是包含标题和副标题的一种样式，两者靠左对齐，上下排布。具体参考文档：UITableViewCellStylej F K P T W P 3 MSubtitle 和 UITableViewCell
想做好车载设计？先掌握这份 Carplay 设计规范（下）
Value1 样式。标题靠左对齐，副标题靠右对齐。具体参考文档：UITableViewx T E w r zCellStyleValue1 和 UITableViewCell
想做好车载设计？先掌握这份 Carplay 设计规范（下）
Value2 样式。标题和副标题文本都靠右对齐，具体参考文档r A / l x j ( + I：UITableView8 : b ? % i Y gCellStyleValue2 和 UITableViewCellL ` _ l
- 保m b : `持文本足够简介，避] d ~ # G t =免无法完整显示。
- 点击选择之后，记得显示反馈。
- 为非标准表格设置自定义样式。
- 更多开发细节参考文档：UITableViewCell
参考来源：
https://www.apple.com.cn/ios/carplay/
https://developer.apple.com/design/human-interface-guidelines/carplay/overview/introduction/
