「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 下的複雜功能的差異。