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