「Apple Watch 应用开发系列」复杂功能(Complication)基础

语言: CN / TW / HK
![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d58f3f7179364b278bc0ef0cc9528c6b~tplv-k3u1fbpfcp-watermark.image?)

复杂功能(Complication)会在表盘上及时的显示 App 的相关信息,用户每次抬起手腕时都可以查看该信息。在设计 watchOS App 时,我们可能会发现用户与 App 的互动时间只有几秒钟。与 iOS App 不同, iOS App 期望用户会在更长的一段时间内与 App 互动。因此,我们应该始终努力为我们的 App 添加复杂功能。

从 watchOS 9 开始,系统将复杂功能组织到几个系列中(例如圆形内联),并定义了一些可用于显示复杂功能数据的推荐布局。表盘可以在每个复杂功能槽中指定它支持的系列。在早期版本的 watchOS 中工作的复杂功能,可以使用旧版模板。这也是 Xcode14.0 和之前版本的差异。

开发者以时间线(Timeline)的形式提供复杂功能的数据,系统使用该时间线来确定在不同时间显示的数据。我们每天可以更新时间线的次数有限,系统会为每个应用程序存储有限数量的 Timeline Entries。有关开发人员指南,可以参阅使您的复杂功能保持最新

为什么会出现复杂功能?

如前所述,与 watchOS App 的交互通常需要几秒。例如,用户在使用地图应用程序时,可能只想知道下一个转弯有多远以及期望的方向。

即使我们不认为我们的 App 拥有任何可以显示在表盘上的数据,提供复杂功能也可以让用户通过简单的触摸屏幕来启动我们的 App。除此之外,用户在其表盘上包含我们的 App 的复杂功能时,watchOS 提供了一些好处:

  • watchOS 将我们的 App 保存在内存中,并为其提供额外的更新时间,使应用程序几乎可以立即启动。

  • 我们的 App 的复杂功能每天最多可以收到 50 次推送,其中包含更新的信息。

  • 我们的 App 可以执行额外的后台刷新任务。

  • 我们的 App 的复杂功能可以在手机上的 Apple Watch Face Gallery 中显示。

iOS14.0 通过 Widget 提供了类似的概念。但与 Apple Watch 不同的是,要查看小部件上的数据,用户需要将手机从口袋或钱包中取出,解锁屏幕,可能还需要滑动到另一个屏幕,然后才能查看你的数据。 类似 iOS16.0 的锁屏小组件。

最佳实践

  • 一目了然地确定用户想要查看的基本动态内容。尽管用户可以使用复杂功能来快速启动 App,但他们更欣赏的复杂功能始终是最新信息的显示。不显示有意义数据的静态复杂功能可能不太可能或合适保留在表盘的显眼位置。

  • 尽可能支持所有复杂功能系列(Complication Families)。支持更多系列意味着 App 的复杂功能可以在更多的表盘上使用。如果 App 无法显示特定复杂功能系列的有用信息,可以提供代表 App 的图像,该图像仍可让用户从表盘启动 App。

  • 考虑为每个系列制造多种复杂功能。支持多种复杂功能可帮助我们利用可共享的表盘,并让用户配置他们喜爱的表盘。例如,一款帮助人们进行铁人三项训练的 App 可以提供三种复杂功能——用于比赛的每个部分——每个都链接到 App 中的特定部分区域。该 App 还可以提供一个可共享的表盘,该表盘经过预先配置,包括游泳、骑自行车和跑步的复杂功能,并使用其自定义图像和颜色。当用户选择这个表盘时,他们不需要做任何配置就可以开始使用它。有关相关指导,请参阅表盘;有关开发人员指南,请参阅为您的应用声明复杂功能

  • 为 App 支持的每个复杂功能定义不同的DeepLink。每个复杂功能将 App 打开到最相关的内容时,它会很好地工作。如果我们的 App 支持的所有复杂功能都在我们的 App 中打开相同的内容,那么它们似乎就没那么有用了。

  • 牢记隐私。借助 Always-On Retina 显示屏,表盘上的信息可能对佩戴者以外的人可见。确保您帮助人们防止他人看到潜在的敏感信息。有关相关内容的指导,请参阅 Always-On

  • 仔细考虑何时更新数据。每个时间线 entry 都有一个时间值,指定在表盘上显示数据的时间;不同的数据集可能需要不同的时间值。例如,会议 App 可能会在会议开始前一小时显示有关即将举行的会议的信息,但天气 App 会在这特定时间显示天气预报信息。请选择可以提高 App 提供的数据有用性的时间。

旧版复杂功能模版(支持早于 watchOS 9 版本)

在每个系列中,Apple 提供了多个模板来描述复杂功能的布局。大多数模板由简单的文本和图像组成。

Circular small

![image](http://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4894da88dc774cbab20e546d2244bd00~tplv-k3u1fbpfcp-watermark.image?)

Circular Small 模板在表盘的角落提供了一个小圆圈,可以显示几个字符的文本、图像或圆形进度环。它包括以下模板:

图像模版

![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/137c0909448740d2b5d7947f262d07c7~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateCircularSmallRingImage:带有进度环的单个图像。
![image](http://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/744b9dc0c8a74e30baec0c5ef974419c~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateCircularSmallSimpleImage:没有文字的单个图像。
![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fee21a30c12b4a279598ffa56037fae2~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateCircularSmallStackImage:图片下方有一行文字。

文本模版

![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ac478f6179b46f7b132e8b2331b54b4~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateCircularSmallRingText:进度环内的短文本字符串。
![image](http://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c623e6c6b3045bd9505ecc9fb9b5e71~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateCircularSmallSimpleText:没有图像的短文本字符串。
![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8d6d06ceb7245a3a917a2e2e6d33c16~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateCircularSmallStackText:两个短文本字符串。
## Modular small

我们可以通过Modular small 模板向较小的空间提供内容。例如模块化表盘上,最下面一行的复杂功能。

![image](http://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b3d16bb184249679400070d31c52c0d~tplv-k3u1fbpfcp-watermark.image?)

图像模板

![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e77bdf5c35d34830a4770e74fd536073~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateModularSmallRingImage:带有进度环的单个图像。
![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c3aaec886ef4c52b2f3f572f6aff1ea~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateModularSmallSimpleImage:单个图像。
![image](http://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8ade1c353ab41f6b41a59a771fce73b~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateModularSmallStackImage:图片下方有一行文字。

文本模板

![image](http://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d644e1fd1cd4b73871a8b8f168463b0~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateModularSmallRingText :进度环内的短文本字符串。
![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57667de923fa46579cbd73a0bd1bce0b~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateModularSmallSimpleText:没有图像的短文本字符串。
![image](http://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c54d4f581ba94e7aa594dff31d292547~tplv-k3u1fbpfcp-watermark.image?)

Modular large

![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce4c48ed4f3a483fa46185cc26740b2d~tplv-k3u1fbpfcp-watermark.image?)

Modular large 显示更大的文本和图像,最多提供三行内容。

Body 模版

![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/401e350f8f3f4b759d9061e24d5290d7~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateModularLargeStandardBody:显示一个标题行和两行文本。
![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5cc8940c8c24fafbd70b33e75bbf64c~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateModularLargeStandardBody:显示一个标题行和两行文本。

Columns 和 Table 模板

![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/603ad6b5f7d64ae1a2b84cfb1ce356fa~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateModularLargeColumns:显示 3x2 文本网格,或 3x3 网格(其中第一列是小图像)。
![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c489449fcc84e88a544e4272ea7ed7c~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateModularLargeTable:显示带有可选小图像的标题行,然后是 2x2 网格的文本。
## Extra large
![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56a83e1c9396483bbd2fa5c4bdb77589~tplv-k3u1fbpfcp-watermark.image?)

Extra large 模板显示更大的文本和图像。

图像模板

![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb0881e383e1461789a3bf25c507c84c~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateExtraLargeRingImage:带有进度环的单个图像。
![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da5b4487d5e04c6fb61af66fb42554ca~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateExtraLargeSimpleImage:没有文本的单个图像。
![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e3598eee9704a6b917db2fbac9b8a94~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateExtraLargeStackImage:图片下方有一行文字。

文本模板

![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/102cd0b91f60435b90d239b813e73577~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateExtraLargeColumnsText:一个 2x2 网格的文本。
![image](http://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2f1843b03fa42a4914c7b165622fea9~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateExtraLargeRingText:进度环内的短文本字符串。
![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a891fffcac946e297b8092f7e437ec0~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateExtraLargeSimpleText:没有图像的短文本字符串。
![image](http://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cae71545a9144c8b4c0d8a4e1f24b88~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateExtraLargeStackText:两个短文本字符串。

Utilitarian

实用(Utilitarian)模板提供了多种方式在众多表盘上显示内容。

Utilitarian small

![image](http://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2cb564fe78b44fcca07a1bc17520f231~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateUtilitarianSmallFlat:在单行上显示图像,后跟短文本。
![image](http://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a84002be57d84edba2b4f1afb0cc0598~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateUtilitarianSmallRingImage:在圆形进度环内显示一个小图像。
![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27c4c90b468d44058cb847cfd883e6f3~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationTemplateUtilitarianSmallRingText:在圆形进度环内显示一个短文本字符串。
![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa89fa99e0334e6aa499799c168888ff~tplv-k3u1fbpfcp-watermark.image?)

CLKComplicationTemplateUtilitarianSmallSquare:显示一个小方形图像。

Utilitarian large

![image](http://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb515ebcdf264842aa801c26bf2c1ecc~tplv-k3u1fbpfcp-watermark.image?)

CLKComplicationTemplateUtilitarianLargeFlat:在单行上显示一个图像,后跟一个长文本字符串。

Graphic

Graphic 模板在几个不同的表盘上显示视觉丰富的内容。与其他模板不同, Graphic 模板允许我们使用 SwiftUI 视图来代替刚性布局。图形系列中有近 30 种不同的模板,这里就不一一列举了。

图形模板分为五个系列:

![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f1f8619e7f546479c06d98a25d68685~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationFamily.graphicCorner:填充 Infograph 表盘角落的弯曲区域。
![image](http://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43be305d4a364de2a53839fe13ba8ca8~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationFamily.graphicCircular:Infograph 和 Infograph Modular 表盘上的圆形区域。
![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/834cbf933e294ec0b21c0acc53c936e6~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationFamily.graphicBezel:Infograph 表盘边框上带有可选曲线文本的圆形区域。
![image](http://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f9662d5eafc45719b9d0c29cce1f7e1~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationFamily.graphicRectangular:Infograph Modular 表盘中心的大矩形区域。
![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9045234176bb4ffb97ee3f2a23e35ca1~tplv-k3u1fbpfcp-watermark.image?)
  • CLKComplicationFamily.graphicExtraLarge:X-Large 表盘上的一个大方形区域。

复杂功能模版( watchOS 9 及后续版本)

watchOS 9 及后续版本对 复杂功能模版 进行了重新划分。

## Circular

圆形布局可以在 Infograph 和 Infograph Modular 表盘的圆形区域中包含文本、仪表和全彩图像。圆形系列还定义了用于在 X-Large 表盘上显示内容的超大布局。

![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6d019e057eb49c9853aa062fe4062b6~tplv-k3u1fbpfcp-watermark.image?)

我们还可以添加文本以伴随常规尺寸的圆形图像,使用沿着某些表盘的边框弯曲文本的设计,例如 Infograph。在截断之前,文本可以填满近 180 度的边框。

![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e56cd6b1fe64d838d55877e074a5ab1~tplv-k3u1fbpfcp-watermark.image?)

系统将圆形遮罩应用于每个图像。

如果我们想设计一个超大尺寸的重要信息处理,可以出现在 X-Large 表盘上——例如,联系人复杂功能,其中有一张联系人照片——使用圆形系列布局的超大版本。以下布局可让我们在占满 X-Large 表盘大部分区域的大圆形区域中显示全彩色图像、文本和仪表。一些文本字段可以支持多色文本。

![image](http://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39799d2c7ab4483b9165df3ecb4814d5~tplv-k3u1fbpfcp-watermark.image?)
## Corner

角落布局让我们可以在表盘的角落显示全彩色图像、文本和仪表,如信息图。一些模板还支持多色文本。

![image](http://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ef3f8d0701640018e1f3a2be42d8a34~tplv-k3u1fbpfcp-watermark.image?)

系统将圆形遮罩应用于每个图像。

## Inline

内联布局包括实用的小型和大型布局。实用的小布局旨在占据表盘角落的矩形区域,例如计时码表和简单表盘。内容可以包括图像、界面图标或圆形图。

![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/114ba5c5db6448759914e1fac8dc93e0~tplv-k3u1fbpfcp-watermark.image?)

实用的大布局主要是基于文本的,但也支持放置在文本前导侧的界面图标。此布局横跨表盘底部,如实用程序或运动表盘。

![image](http://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/323434bdb5ea472e96722cc749180af7~tplv-k3u1fbpfcp-watermark.image?)
## Rectangular

矩形布局可以在大矩形区域中显示全彩色图像、文本、仪表和可选标题。一些文本字段可以支持多色文本。

大矩形区域非常适合显示随时间变化的值或过程的详细信息,因为它为信息丰富的图表、图形和图表提供了空间。例如,心率复杂功能显示 24 小时内的心率值图表。图表主要内容使用高对比度的白色和红色,图形线条和标签使用对比度较低的灰色,使数据一目了然。

![image](http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4feccd32ed04a30a775efe7abc33665~tplv-k3u1fbpfcp-watermark.image?)

复杂功能对颜色问题

虽然我们可以在许多复杂功能模板中包含全彩图像,但我们需要注意不要让我们的复杂功能依赖于这些可见的颜色。

原因之一是有些用户是色盲,我们需要照顾这些用户的使用体验。其次从纯粹的技术角度来看,用户可以禁用颜色!支持图形复杂功能的表盘可以着色,显示复杂功能的低色版本。如果表盘已着色,则以下更改适用于模板:

  • 以前使用颜色渐变的仪表现在根据选定的色调显示纯色。

  • 文本颜色基于用户的表盘颜色,而多色文本提供程序显示单一颜色。

  • 尽管我们可以为图像提供自定义着色版本,但默认情况下图像是去饱和的。

相关链接

设计文档

开发人员文档

视频

后续,我们将以 watchOS 9 前后为界限,了解 ClockKit 和 WidgetKit 下的复杂功能的差异。