Apple Watch Human Interface Guidelinesを読んだメモ

この投稿は Apple Watch Advent Calendar 2014 の 12日目の記事です。

Apple Watch Human Interface Guidelines （一般に公開されているもの）を読んで自分が気になったポイントをメモしておきます。

※画像はすべてApple Watch Human Interface Guidelinesのものを引用しております

UI Design Basics

App Anatomy

Apple Watchは必ずユーザのiPhoneとペアで動きます。

Interface Styles

Watch appsは2つのナビゲーション方法をサポートします。

• Hierarchical - 階層的なナビゲーション。iPhoneのメールアプリのようにどんどん潜っていくイメージ。
• Page-based - ページ間を横にスワイプして遷移できる。画面の下には現在位置を表すドットが表示される。

これら2つを混合させて使うことはできません。

User Interactions

• Action-based events - シングルタップが最も主要な動作。この動作がWatchKit extensionにアクションを伝える。
• Gestures - ジェスチャーには次のようものがあるが、開発者はアクセス出来ない
  • 縦スクロール（画面に表示しきれない情報を読み進める）
  • 横にスワイプ（先述のPage-basedインターフェースで使用）
  • Watchの左端を右にスワイプすることで「戻る」の動作（iPhoneにもありますね）

Apple Watchはマルチタップをサポートしていませんし、ピンチイン・ピンチアウトもできません。

• Force Touch - 長押しのようなもの？これと組み合わせることでメニュー（2x2のボタンが並ぶ）を表示することもできる。
• The Digital Crown - Watchの右側についてる竜頭。これを回すことで画面をスクロールさせることができるが、やはり開発者はアクセス出来ないらしい。

Glances

Glance（グランス）はWatch Appからの情報を素早く表示するための機能です。

 

• Template-based - グランスの画面は upper と lower の部分から構成される。テンプレートがpsd形式で公開されているので、それに従ってデザインしていくことになりそう。

• Not scrollable - すべてのコンテンツは一画面に収めないといけない。スクロールはできない。

• Read-only - グランスのどこをタップしてもWatchアプリが開く。

 

• Optional - グランスを必ず実装する必要はない。

グランスの下部領域はページインジケータのドットを表示するために予約されています。

Configure the Glance based on the user’s current context. 古く不適切な情報はグランスを有益でないものにしてしまう。時と場所にマッチした有益な情報を表示してあげるべき。

Glances can deep link into their corresponding app. iOS 8の Handoff 機能と組み合わせることにより、Watch上で見ていた情報を他のデバイスに表示することもできるらしい。

Glances must provide useful content to the user. グランスを単なるアプリを起動しやすくするもの、として提供してはいけない。

Notifications

通知にはShort Look、Long Lookの2種類が用意されています。

Short LookはLocal/Remote Notificationがユーザに情報を伝える必要がある際に表示されます。Short Lookは最小限の情報をユーザに提供します。もしユーザが腕を低い位置に下げた場合、Short Lookは閉じられます。

Long Lookはユーザが腕を高い位置に上げたままの場合、もしくはShort Lookをタップした場合に表示されます。Long Lookはより詳細で機能的な情報を提供し、ユーザによって能動的に閉じられます。

Be sensitive to the frequency with which you send notifications to users. あまりにも頻繁な通知はユーザを苛立たせ、通知をオフにする原因となってしまいます。通知する情報は常にユーザにとって必要なものであるべきです。

Short Look Notifications

Short Lookはどのアプリが通知を受け取ったかをユーザに知らせるために、少しの間表示されます。Short Lookのインターフェースはテンプレートベースで、アプリ名、アイコン、そして通知に含まれるタイトル文字列から構成されます。アプリ名はそれぞれのアプリのキーカラーで表示されます。

Keep title strings short and focused. タイトル文字列を表示するスペースは限られていますので、簡潔に内容を表示するべきです。詳細な内容までを表示するべきではなりません。何についての通知なのか？を簡潔に伝えるべきです。

Custom Long Look Notifications

Long Lookはより詳細な情報をユーザに提供します。システムは標準の外観を提供しますが、アプリは独自の画像等を取り込んで外観をカスタマイズすることも可能です。Long Lookの構造はどのアプリも共通のものが使われます。上部にはアプリアイコンとアプリ名を載せた帯が表示されます。下部には「dismiss」ボタンと予め定義された複数のボタンが表示されます。その間にはカスタマイズされたコンテンツを表示できます。

帯の部分はコンテンツに重ねることも可能です。写真などのグラフィックを表示する場合は underlapping オプションを使ってください。文字がメインコンテンツの場合は Offset Notification Content オプションを使って、文字と重ならないようにするとよいでしょう。

Long look notifications can display up to four custom action buttons. Long lookには最大4つのカスタムボタンを表示することができます。iOSアプリ側で登録されたボタンが自動的に表示されます。

The Dismiss button is always present. Dismiss（閉じる）ボタンは4つのカスタムボタンとは別に表示されます。

Modal Sheets

下から上がってくるモーダル画面のことです。一つの画面からなる Single screen と、複数の画面からなる Page-based layout が存在します（両方とも正式な呼び方は無いっぽい）。両者の決定的な違いは、画面下部にページコントロールを持つかどうか？です。

The top-left corner of a modal interface is reserved for the close button. 画面左上の領域は「閉じる」ボタンのために確保されています。ユーザがこのボタンをタップ（もしくは画面左端をスワイプ）すると、システムはモーダルを閉じます。「閉じるボタン」を置くのは必須ですが、ボタンに表示される文字列を変更することは可能です。あなたはコンテンツ上に「閉じる」ボタンを表示する必要はありません。「閉じるボタン」の色は常に白が使われます。

If the task requires acceptance, provide the accept button in the body of the modal interface. Acceptanceなアクション（OKとか？）には標準のボタンを利用してください。ボタンがタップされたら、適切な処理を行った上でモーダルを閉じるようにしてください。

Keep modal tasks simple. モーダル画面からさらに新しいモーダル画面を開くのは避けましょう。

Layout

Layout Guidelines

Limit the number of side-by-side controls in your interface. ボタンを横一列に並べて表示する場合は、ボタンを認識させるためにテキストではなくアイコンを使いましょう。この場合、決して3つ以上のボタンを並べてはいけませんよ。これ以上置いてしまうと、ユーザーがタップするには小さすぎるボタンになってしまいます。

Use the space all the way up to the edges of the screen. コンテンツは画面いっぱいに表示しましょう。なぜならApple WatchのベゼルがPaddingの役割を果たすため、わざわざ余白を用意する必要が無いためです。なお、iOSシミュレータではこのPaddingの部分が表示されないことに注意してください。

Apps use relative positioning for items. アイテムを置く際は相対指定を使いましょう。なぜなら、異なる大きさのApple Watchで同じインターフェースが使われるからです。相対指定にしておけば、画面サイズに合わせて、コンテンツをうまい具合に表示してくれます。

Prefer the use of left alignment during layout. すべての要素は上から下へ、左から右へ流れるべきです。左寄せされた要素は、すべてのコンテンツを拡大して表示する余地があることを保証できます。（ここがうまく和訳できませんでした）

Make text buttons full width. ラベルを表示するボタンを作る際は、常にラベルが見えるように横幅いっぱいに作っておくべきです。

Use the context menu to present secondary actions. あまり頻繁でないアクションの場合は、ボタンを設置するよりむしろコンテキストメニューを用いるべきです。

Color and Typography

Color

色の重要性について書かれています。

Use black for your app’s background color. 黒い背景を使うようにしましょう。ベゼルが黒であるため、背景も黒に合わせることで浸透性が増すとのことです。明るい背景色は使うべきではありません。

Use your app’s key color for branding or status. すべてのアプリにはキーカラーを定義します。キーカラーは画面左上に表示されるタイトルの文字色として使われたり、通知画面のアプリ名やその他の上をハイライトするために使われます。キーカラーはアプリのブランディングと同様に使われるべきです。

Use high contrast colors for text. 文字を読みやすくするためにハイコントラストな色を使いましょう。

Avoid using color to show interactivity. ブランディングのために適切な色を使いましょう。ただ単純にボタンやその他の部品の相互作用を示すために色を使ってはいけません。（訳があやしい）

Be aware of color blindness. 色盲の方のほとんどが赤と緑を見分けるのが困難です。自分のアプリの中に、赤と緑の色だけで状態を見分ける個所がないかテストするべきです。

Color communicates, but not always in the way you intend. 色が表す意味は文化によって異なります。他の国や文化でそれぞれの色がどのように使われるのか、研究する時間を割くべきです。そして、可能な限り、あなたのアプリの中でそれぞれの色が適切なメッセージを伝えることを確認するべきです。

Typography

Watchアプリは Dynamic Type に対応しましょう。Dynamic Typeに対応することで、フォントサイズに合わせて自動的に字間や行間を調整してくれる等のメリットを得ることができます。

Use the built-in text styles whenever possible. 標準で組み込まれたスタイル（Headline等）は自動的にDynamic Typeをサポートしており、Apple Watch上で綺麗に表示されるようデザインされています。

Prefer the use of a single font throughout your app. Watchアプリは追加されたフォントをブランディング目的で使うこともできますが、控えめに使用するべきです。いろいろな種類のフォントを使うことで、あなたのアプリはまとまりのない杜撰なものになってしまいますよ。UIFont text stylesは文字領域の違いを定義する目的で使いましょう。

When specifying system font sizes manually, the point size determines the correct size to use. Apple Watchのシステムフォントには San Francisco というフォントが使われるようです。このフォントにはTextとDisplayの2種類が存在し、フォントサイズが19ポイント以下ならTextが表示され、20ポイント以上ならDisplayが表示されるようです。

Animations

アニメーションを適切に用いることで、より魅力的なユーザエクスペリエンスをユーザに提供することができます。

Create prerendered animations using a sequence of static images. 複数の静止画を組み合わせてひとつのアニメーションを作れるらしいです。

Playback controls are available only for image and group objects. ほとんどのアニメーションは無限にループします。これを止めたり、特定のフレームをプレイバックしたい場合は画像またはグループオブジェクトを使う必要があります。（訳があやしい）

Branding

ユーザに強い印象をあたえるための心得についていろいろ書かれてました。

UI Elements

各部品を使う上での心得が書かれています。数が多いので、一部のみメモ。

Labels

ラベルは短いメッセージをユーザに伝えるものです。あまり長くならないように注意しましょう。

• Make your labels legible - ハイコントラストな色を使う。また、Dynamic Typeも使うと良い。
• Use the built-in styles whenever possible - 可読性を上げるため、built-in styles（HeadlineとかBodyとか）を使う。
  

Images

画像を表示したり、アニメーションを表示したり。

• Size images appropriately for each Apple Watch display size - 画面サイズに合わせて画像を伸ばしたり縮めたりするのはやめよう。各画面サイズ毎（38mm/42mm）の画像をちゃんと用意しましょうってことらしい。
• Create all image assets as @2x resources - とりあえず @2x の画像を用意しておけばよい。非Retinaの画像は不要。

Buttons

アクションを起こすためのもの。背景色を変えることもできますし、画像を使うこともできます。

• Create buttons that span the width of the screen - ボタンは幅いっぱいに設置するべき。もし横に1つ以上のボタンを並べたい場合は2つに収めるべき。

• Try to match button heights whenever possible - もしひとつの画面に複数のボタンを表示する場合は、高さをそろえるべき。

• Buttons have a rounded corner to distinguish them from other elements - 他の要素と区別するために、ボタンの角は丸くするべき。標準的なRadius値は 6 ポイント。

Icon and Image Sizes

Icon Sized

ホームスクリーンアイコンは円形で表示されます。また他のアイコンについても、場面によって円形に切り取られます。次の表は各場面で使われる画像のサイズ（直径と考えて良い）をまとめたものです。画像は自動的に円形にマスクされて表示されます。

Asset	Apple Watch (38mm)	Apple Watch (42mm)
Notification center icon	29 pixels	36 pixels
Long look notification icon	80 pixels	88 pixels
Home screen icon Short Look icon	172 pixels	196 pixels

画像はすべて@2xサイズを用意してください。非Retina用の画像を用意する必要はありません。

画像フォーマットは PNG が推奨されます。インターレスPNGを使うのは避けてください。

Home Screen Icon

Apple Watchのホームスクリーンはとてもユニークで、それでいて親しみやすいものとなっています。ホームスクリーンに並ぶアイコンはiOSのそれらと似ていますが、アプリ名を表す文字列がありません。

Use universal imagery that people will easily recognize. 誰もが理解しやすいデザインにしましょう。例えばメールアプリなら封筒や、郵便箱のデザインを用いるなど。

Make your icon similar to the icon for your iOS app. WatchアプリのアイコンはiOSアプリと関連付けやすいように、同じようなデザインにするべきです。

Create different sizes of the home screen icon for both Apple Watch display sizes. アイコンを綺麗に見せるために、デバイスごとに別々のサイズのアイコンを作りましょう。

Menu Images

Force Touch menu（強めに画面をタップすることで表示されるコンテキストメニュー）に使われる画像の仕様について書かれています。iOSアプリのBarButtonItemにカスタム画像を使う場合と同じで、アルファチャンネルが使われるようです。もちろん色情報も無視されます。