Android Wearのデザイン原則

前提と概要

まず大前提ですが、Android Wearアプリ単体では動作させることはできません。¹。ウェアラブルアプリと組になるハンドヘルドデバイス用のアプリを、かならず制作しなければなりません。

また、必ずしもAndroid Wear対応をするために専用アプリを制作する必要はありません。通知や簡単なインタラクションのみであれば、ハンドヘルドアプリを拡張するだけで対応できます。

Android Wearには、 提案(Suggest) と 要求(Demand) という、2つの軸になる機能があります。 提案は、 コンテキストストリーム によって表現されます。

コンテキストストリームとは、上図アニメーションのように縦に連なるカードの流れのことです。 個々のカードは、対応するアプリケーションからの通知を表しています。 それぞれのアプリケーションが、適切なタイミングを判断して、カードを通じてユーザーに情報を提供します。 カードには、追加情報を表す ページ や アクション を付加することができ、それらはそのカードの右側に配置され、右から左へのスワイプで表示できます。 ウェアラブル、ハンドヘルドどちらのタイプのアプリケーションからもカードを流し込むことができます。

(ユーザーからの)要求は、 キューカード によって実現されます。

ユーザーが画面背景をタップするか、時計に向かって"OK Google"と発音すると、上図のキューカードがあらわれます。キューカードには、ボイスアクションと呼ばれる一連のコマンドが表示されており、タッチ操作か音声操作によってコマンドを実行できます。 ボイスアクションの種類自体を拡張することはできませんが、それらに、自分の制作したアプリを関連付けることが可能です。 タクシーを呼ぶ、メモを取る、アラームをセットする などのアクションがあります。

また、独自のウェアラブルアプリを一時的に全画面に表示することもできます。ハンドヘルドデバイスのようにマルチタスクという概念はありません。一定時間経過してデバイスがスリープすると、アプリは自動的に終了します。

クリエイティブビジョン

• 自動で起動し: ウェアラブルアプリは、時間、場所、運動中かどうかなど、ユーザーのコンテキストを認識して、コンテキストストリームにカードを流し込みます。
• 視認性を高く: ふつうの腕時計が、あなたがいましていることを数秒程度しか阻害しないように、パッと見ただけでアプリからの情報を把握できるようにデザインすべきです。
• 提案と要求のすべてを: Android Wearは、あなたや、あなたの好みを知っており、ほんとうに必要なとき以外にはユーザーの邪魔をせず、いつでもユーザーからの要求に答えられる準備をしています。
• 0または非常に少ないインタラクションで: ほんとうに必要なとき以外はユーザーからの入力を必要とせず、基本的に、スワイプと音声入力だけで操作できるようにすべきです。複雑なジェスチャは使いません。

デザイン原則

おおざっぱなジェスチャで使えるようにする

• Android Wearデバイスの画面は小さいので、個々の要素を大きくして、操作し易くします。
• 操作に集中するために、歩行や会話が阻害されるようではいけません。

アプリの構造とUIパターン

カード

カードには、テキスト情報を載せる他、ボタンをつけたり、スタックしたりできます。

アプリアイコン

カードの右上にはアプリアイコンを表示することができます。

ページ

カードの右側には、補足情報を示すページ(詳細カード)を加えることができます。 たとえば、一番左のカードには本日の天気を表示し、その右側に、数日分の天気を表示するといった使いかたができます。

カードの消去

カード上で左から右にスワイプするとカードを消去できます。 ウェアラブル上で消去されたカードは、ペアリングされたハンドヘルド上でも消去されます。

アクションボタン

詳細カードの右側には、アクションボタンを置くことができます。 アクションボタンは、青い円に白いアイコンという見た目で表示されます。 アクションボタンを押すと、なにかを実行したり、ハンドヘルドに操作を引き継いだり、 アプリ画面をフルスクリーンで表示したりできます。

アクションカウントダウンと確認

アクションボタンを押した後は、次の4つのうちどれかが起きます。

1. ただちにアクションが完了し、確認アニメーション(confirmation animation)が表示される。
2. 時間がかかるアクションの場合はカウントダウンが表示され、完了すると確認アニメーションが表示される。
3. ユーザー確認が必要な場合は、ユーザーの意思を確認してから、アクションを実行する。その後、確認アニメーションが表示される。
4. キューカードに遷移する。キューカードに表示されるアクションは、アプリから指定できる。

ハンドヘルドでアクティビティを継続

アプリ開発に際しては、できる限りウェアラブルのみでアクションが完結するようにすべきですが、それが無理な場合は、ハンドヘルド側で操作を継続することもできる。その場合には専用のアニメーションが用意されているます。

カード上でのアクション

カード上に直接ボタンを配置することもできます(On-cardボタン)。 On-cardボタンには、テキストラベルを使うことはできないので、見ただけで押すとなにが起きるのか明白な場面でだけ使うべきです。 ひとつのカードに置くボタンはひとつまでにし、原則としてアクションはウェアラブル上で起きるようにしましょう(ただしウェブリンクは例外)。

カードスタック

カードは複数枚をまとめてスタックさせることができます。

2Dピッカー

複数のアイテムから、ひとつのものを選択させたいときには1Dピッカーが使用できます。 アイテムをカテゴリ分けしたい場合には、2Dピッカーを使用します。ピッカーで使用できるカテゴリは最大5つ程度までです。

選択リスト

選択リストを使って、複数アイテムを選択させることが可能です。

スタイル

Android Wear特有のデザイン上の注意点がいくつかあります。

• 画面サイズや形状の異なるデバイスがあることに注意しましょう。丸型のデバイスも存在します。
• カードのデザインには、アプリアイコン、背景画像、アクションアイコン、確認アニメーションなどの要素が必要になります。
• 背景画像は、ページなしなら400px x 400px、ページありなら600px x 400pxで作成します。
• カードの頭だけが覗いている場合でも、内容がわかるようにしましょう。

• カードの意味を伝えるのに役立つような背景画像を使いましょう。背景画像はカードの視認性を向上させます。
• ひとつのカードに情報を詰め込みすぎず、ページを使って分割するなどしましょう。
• バイブや音を伴う通知は、必要最低限にしましょう。
• 大きなテキストを使って見易くしましょう。
• アプリアイコンを使って、アプリを区別するのに役立てましょう。
• アプリアイコンの表示位置はカードの右上です。背景画像にアプリアイコンを表示してはいけません。
• テキストは完結に。文ではなく、語や句を使いましょう。
• センシティブ情報や恥ずかしい情報は、トップのカードに表示しないようにしましょう(詳細カードなど、意図せず表示されることのない場所に表示しましょう)。
• アクションが完了したときには1秒以下程度の確認アニメーションを表示しましょう。

Android Wear Materials

Android Wear Materials から、デザイン要素のサイズ仕様や、ユーザーフローパターン、デザインモックといったデザイン用のアセットを入手できます。