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

3.5、触摸屏交互

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

3.6、Siri

Siri 是 Carplay 的基本功能,无干扰的语音让用户和程序之间的交互更加自然和安全

即使看不到 Carplay 的屏幕,依然可以使用方向盘上的语音命令按钮来激活 Siri。激活后,Siri 会针对语言进行处理和分析,并且转换为可用的指令。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

具体可以参与 SiriKit 编程指南

4.1、动画

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

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 以整洁的布局提供有用的信息,让驾驶者可以一目了然地扫视到信息。
  • 在整个 APP 内部保持一致的外观。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

4.5、字体版式

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

5.1、图片尺寸和分辨率

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

5.2、APP 图标

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

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

5.3、自定义图标

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

  • 创建简单的,可识别的图标设计。不要加入过多的细节,确保可读性。
  • 设计图标的时候,使用透明背景、抗锯齿且无阴影的纯色图标。
  • 保持图标在风格、尺寸以及各个规格上的高度一致。
  • 在设计选项卡图标的时候,选择两种不同版本的图标,分别是选中状态和未选中状态的。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

5.4、系统图标

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

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

6.1、上拉菜单(Action Sheets)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

6.2、活动指示器(Activity Indicators)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

6.3、警告(Alerts)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

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

6.4、按钮(Buttons)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 在按钮标签中使用动词。
  • 保持标题足够简短
  • 仅在必要的时候,添加边框和背景
  • 更具体的开发参考 UIButtonTypeSystemUIButton

6.5、标签(Labels)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

6.6、导航栏

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 在导航栏中间显示当前视图的标题。
  • 避免在导航栏上放过多的控件。
  • 不要包含多段式面包屑导航。
  • 导航栏标题应该给按钮留下足够的空间。
  • 使用标准的返回按钮。
  • 开发请参考 UINavigationBar 这份文档

6.7、滚动视图(Scroll Views)

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

  • 不要将一个滚动视图嵌套到另外一个滚动视图当中。
  • 通常,一次只显示一个滚动视图。
  • 开发可以参考文档:UIScrollView

6.8、标签栏(Tab Bars)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 通常标签栏展现的是平铺的信息层次结构。
  • 选项卡功能不可用的时候,不要删除或者禁用该选项卡。
  • 严格使用标签栏来进行导航。
  • 通常使用 3 个到 5 个选项卡。
  • 使用图标来标示标签栏,会更加通俗易懂。
  • 具体开发可参考文档:UITabBar

6.9、表格(Tables)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 考虑表单的宽度,避免难以读取。
  • 尽可能快速地显示表单的内容。
  • 在加载的时候,结合活动指示器呈现进度。
  • 具体参考开发文档:UITableView

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

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

想做好车载设计?先掌握这份 Carplay 设计规范(下)

Value1 样式。标题靠左对齐,副标题靠右对齐。具体参考文档:UITableViewCellStyleValue1UITableViewCell

想做好车载设计?先掌握这份 Carplay 设计规范(下)

Value2 样式。标题和副标题文本都靠右对齐,具体参考文档:UITableViewCellStyleValue2UITableViewCell

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

参考来源:

https://www.apple.com.cn/ios/carplay/

https://developer.apple.com/design/human-interface-guidelines/carplay/overview/introduction/

点赞 23
收藏 114
继续阅读相关文章

发表评论 已发布 5

还可以输入 800 个字
 
 
载入中....
5 收藏