Posted at

Apple Watchのコンプリケーションファミリー

More than 1 year has passed since last update.


コンプリケーションファミリーとは

Apple Watchのコンプリケーションについてざっくりと紹介で紹介したコンプリケーションには、ファミリーと呼ばれるグループがあります。

たとえば、下のユーティリティ文字盤をご覧ください。

コンプリケーション01.PNG

このユーティリティ文字盤の左上にある温度と、右上にあるハートマークは、 utilitarianSmall というグループです。

コンプリケーション02.png

また、画面下にあるパ・リーグウォークという文字列と画像は utilitarianLarge というグループです。

コンプリケーション03.png

XcodeのメニューのHelp > Developer Documentationを開いてClockKit > CLKComplication > CLKComplicationFamilyを開くと、コンプリケーションファミリーについての詳しい説明を参照できます。

used in the Utility, Mickey, Chronograph, and Simple clock faces のように、どの文字盤で使用されているのかも、ここで調べることができます。


コンプリケーションファミリーの種類

この記事を書いている2018年05月時点では、コンプリケーションファミリーは以下の7つがあります。


  • modularSmall

  • modularLarge

  • utilitarianSmall

  • utilitarianSmallFlat

  • utilitarianLarge

  • circularSmall

  • extraLarge

それぞれのコンプリケーションのサンプルと解説は、XcodeのメニューのHelp > Developer Documentationを開いてClockKit > Templatesで参照できます。

コンプリケーション04.png

コンプリケーション05.png


コンプリケーションの画像サイズ

コンプリケーションごとに、以下のように画像サイズが決まっています。

Family
Template
38mm
42mm

Circular small
Ring
40px × 40px (20pt × 20pt @2x)
44px × 44px (22pt × 22pt @2x)

Circular small
Simple
32px × 32px (16pt × 16pt @2x)
36px × 36px (18pt × 18pt @2x)

Circular small
Stack
32px max × 14px (16pt × 7pt @2x)
34px max × 16px (17pt × 8pt @2x)

Extra large
Ring
126px × 126px (63pt × 63pt @2x)
133px × 133px (66.5pt × 66.5pt @2x)

Extra large
Simple
182px × 182px (91pt × 91pt @2x)
203px × 203px (101.5pt × 101.5pt @2x)

Extra large
Stack
156px max × 84px (78pt × 42pt @2x)
174px max × 90px (87pt × 45pt @2x)

Modular large
Columns
22-64px × 22px (11-32pt × 11pt @2x)
24-74px × 24px (12-37pt × 12pt @2x)

Modular large
Standard body
22-64px × 22px (11-32pt × 11pt @2x)
24-74px × 24px (12-37pt × 12pt @2x)

Modular large
Table
22-64px × 22px (11-32pt × 11pt @2x)
24-74px × 24px (12-37pt × 12pt @2x)

Modular small
Ring
36px × 36px (18pt × 18pt @2x)
38px × 38px (19pt × 19pt @2x)

Modular small
Simple
52px × 52px (26pt × 26pt @2x)
58px × 58px (29pt × 29pt @2x)

Modular small
Stack
52px max × 28px (26pt × 14pt @2x)
58px max × 30px (29pt × 15pt @2x)

Utility large
Flat
18-42px × 18px (9-21pt × 9pt @2x)
20-44px × 20px (10-22pt × 10pt @2x)

Utility small
Flat
18-42px × 18px (9-21pt × 9pt @2x)
20-44px × 20px (10-22pt × 10pt @2x)

Utility small
Ring
28px × 28px (14pt × 14pt @2x)
28px × 28px (14pt × 14pt @2x)

Utility small
Square
40px × 40px (20pt × 20pt @2x)
44px × 44px (22pt × 22pt @2x)

Complication Images - Icons and Images - watchOS Human Interface Guidelines より引用)

コンプリケーションの画像は、アルファチャンネルだけを使用するので注意してください。

また、ヒューマンインターフェースガイドラインには、線の太さを4ピクセル以上にしてくださいと書かれています。コンプリケーションは小さいので、専用にデザインした画像をつくることがオススメです。