Apple Watch Human Interface Guidelines まとめ
Apple Watch Human Interface Guidelines: Designing for Apple Watch
2015-03-09 初出バージョンのドキュメントのまとめ（網羅ではなく適宜省略）
UI Design Basics
Designing for Apple Watch
App Anatomy
Interface Navigation Styles
- iOS の
UINavigationControllerUIPageViewControllerのような階層ベースとページベースの2タイプがあり、この2つを組み合わせて使用する事はできない。IBでデザインする際にどちらかアプリに適した方を選ぶ - コンテンツはモーダルでも表示できる
（モーダルを挟めばNavi->Modal->Pageと組み合わせる事は可能。Page->Modal->Naviは不可）
User Interactions
- 操作はタップとジェスチャー
- 左端スワイプでのナビゲーションバック有り
- ピンチ等の複数指のジェスチャーは非対応
- Force Touch でメニューを表示する
- デジタルクラウンは 3rd party のアプリではスクロールのみ可能
Glance
- テンプレートベースのUI
- スクロール不可
- シングルタップでのアクション
- Glance はオプショナルですべてのアプリに Glance が必要ではない
Notification
- ローカル通知とリモート通知の2種類
- ショートルックとロングルックのUI
- ショートルックがタップされるとロングルックが表示される
- ショートルックはテンプレートベースの通知UIで、アプリ名、アイコン、通知のタイトル文字列を含む
- アプリ名のテキスト色はアプリのキーカラーが使用される
- システムはロングルックのデフォルトのアピアランスを提供する
- ロングルックのUIはカスタマイズ可能
- ロングルックは上部にシステム提供の帯、下部にdismissボタンが付いて、その上にアプリで定義したボタンが表示される
- アプリ定義のボタンは通知のカテゴリによって自動的に表示される
- 上部の帯の色と opacity は変更可能
Modal Sheets
- 単一の画面かページベースの複数画面を表示
- モーダル表示の画面左上は固定で「閉じるボタン」になっていて、文言は変更可能だがテキスト色は白色から変更不可
- 「閉じるボタン」はあらかじめ用意されているのでコンテンツに「閉じるボタン」を追加しない事
- accept が必要なタスク内容であれば acceptボタンを設置する事
- モーダル画面からさらにモーダル表示したりせずシンプルな設計にする事
Layout
- 横並びに3つ以上のボタンを置かない
- スクリーン端に padding を入れない
- 左寄せにする
- テキストボタンは横幅いっぱいにする
- Force Touch によってメニューを表示する事ができるが、あまり使用頻度の高くないようにする
- 見た目に問題が無ければ 38mm 42mm 共に同じサイズの画像リソースを使う
Color and Typography
Color
- 背景色は黒
- アプリの Key Color を使用する
- テキストにはコントラストの強い色を使う
- ボタンやその他のコントロールが操作可能な事を明示する目的で色を設定しない
- 色弱者を考慮し、色の組み合わせや明るさに気をつける（色のアクセシビリティに気をつける）
- 文化の違いによる色の持つ意味合いに気をつける
Typography
- 常に Dynamic Type を使う
- カスタムフォントを使う場合は Dynamic Type に相当する機能は自分で実装する
- 可能ならシステムのテキストスタイルを使う
- アプリ内で複数のフォントを使わない
- フォントをサイズ指定で使う場合 point size によってフォントを選択する。例えば19point以下なら San Francisco Text を、20point以上なら San Francisco Display を使う
Animations
- レンダリング済みのイメージシーケンスを使う
- 動的に作成したアニメーションは WatchKit Extension から転送されるので再生可能になるまでに遅れが生じる
- アニメーションの再生をコントロール（再生開始、停止）する場合は画像かグループオブジェクトを使用する
UI Elements
Labels
- 短い文章を表示
- 読みやすくする事
- 可能ならシステム提供のテキストスタイルを使う
Images
- アピアランス無し
- コードから再生開始と停止が可能
- @2xでリソースを作成する、@1xは不要
Groups
- デフォルトではアピアランスは無いが、背景色と画像でカスタマイズできる
- position, size, margins とその他のレイアウトに関連するプロパティがある
- 縦か横にアイテムをレイアウトできる
- 複数の elements を内包できる
- 角丸のサイズを指定できる
- レイアウトの主要なツールだが、色と画像を設定できるので視覚的な element としても使える
- グループ内にグループを入れる事で洗練されたレイアウトを作れる
Tables
- 複数の row types に対応
- 背景色と画像の設定が可能
- row のレイアウトはデザイン時に設定、runtime ではどの type を使用するかだけを選ぶ
- type の異なる row をセクションの区切りに使ったりしない
- 一度に20以上の row を出さずに「さらに読みこむ」オプションを提供する
- グループ内にテーブルを入れない
Buttons
- 背景あり、カスタマイズ可能
- 角丸あり
- ラベルかグループを内包できる
- 横幅いっぱいのボタンが推奨、最大2つまで
- 複数のボタンを配置するなら同じ高さにする
- デフォルトの角丸 6point を使う
Switches
- ラベル付きスイッチ
Sliders
- スライダーの端の画像をタップして値を変更する
- スライダーの数値はユーザに表示しない
- 画像を設定しない場合はプラスとマイナスの画像が使われる
Maps
- static でインタラクティブではない（操作不可）
- タップするとMapアプリに飛ぶ
- なるべく狭いエリアを表示する事
- アノテーションは5つまで
- アノテーションは緑、赤、紫のピンが用意されている
- アノテーションに画像を使った場合 coordinate の上部に表示される
Dates and Times
Date Labels
- 日時、時間もしくはその組み合わせを表示する
- フォーマット指定可能
- WatchKit Extension から更新の必要はない
- 日時、時間を表示したい時はこれを使う事
Time Labels
- 指定時間のカウントダウン、カウントアップ
- フォマーット指定可能
- WatchKit Extension から更新の必要はない
- 正確なカウントダウンとカウントアップを実装したい場合はこれを使う事
Menus
- Force Touch によりメニューを表示する
- 画面階層とスクロールは無し
- デザイン時に設定、または programmatically に設定が可能
- ラベルは2行まででメニュー表示のための画像と文字列が必要
Icon and Image Design
Icon and Image Sizes
Icon Sizes
Home Screen Icon
- アイコン画像にテキストを入れない
- デバイスのサイズごとにアイコンが映えるようにする
