Android WearのUIパターン

2014/8/7 5166hit

Android Wearのためのデザイン 目次
原文
Android Wearは最小限な対話性で使われるために、ユーザーが既に慣れているデザインパターンに合わせることが大切です。

Cards

ストリーム内のCardは他とは少し異なった形式を持ちます。
  
・Notificationの情報を表示する基本的なCards。
・再生/停止の切り替えなど 1つのアクションコントロール。
・関連したNotificationをまとめてセットにする拡張可能なカードのスタック。

アプリアイコン

コンテキストストリーム中の全Notificationは標準でアプリのアイコンがカードの右上の決まった位置に表示されます。これによりCardの発行元がどこであるかを識別できます。写真の背景は情報を伝達するためにあり、ブランドを付けてはいけません。アプリアイコンは一番左側のCardだけに必要でページにアイコンを追加する必要はありません。

Pages

補助情報はメインのContext Stream cardの右側に追加のCardとして表示されなくてはいけません。多くの場合追加Cardは1枚で十分なはずです。例えば現在いる場所の今日の天気を表す天気予報カードは右に追加で明日以降の天気予報のリストを表示することができます。可能な限り詳細カードの数を減らしてください。アクション(後述)はページのあとに表示されなくてはいけません。表示順を変えたり途中に追加してはいけません。

開発者向け資料:Notificationにページを追加する

Cardを取り除く


Card上で左から右にスワイプすると、ストリームからCardを取り除きます。取り除かれたCardは次回に適切する情報が表示されると戻ってきます。Android WearのContextストリームとAndroid携帯端末のNotificationの状態は同期しています。そのため、片方で取り除くと自動的にもう片方でも取り除かれます。

アクションボタン

ユーザーがNotification内で表示された情報についてアクションしたいときのために、アクションボタンを提供できます。システムが表示するボタンは詳細カードの右側に表示されます。システムは青い円の中に白いアイコンをセットして、動作の短いタイトルを表示します。アクションは今のところ1枚のカードにつき3つまでに制限されています。

アクションボタンをタップすることでアクションを実行できます。あるいは、アクションを親機の携帯端末で続けることが出来ます。フルスクリーンActivityでさらなる入力も可能です。(下記2D Pickerを見てください)

スペースの詳細やアクションアイコンについて参照できるUI ToolkitがDownloadsページで提供されています。

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

アクションボタンがタップされ、アクションの実行が開始されると、以下の何れかが発生します。
1.アクションが瞬時に完了し、(関連したカードの内容が瞬時に更新されるか確認アニメーションによって)アクションの結果が表示される。
2.アクションを開始する前にユーザーがキャンセルできるの短いカウントダウンアニメーションが表示される。タイマーのカウントダウンが終わると、確認アニメーションが表示される。このアニメーションは開発者によってカスタマイズできます。
3.確認が必要。これは意図せず実行されると問題が発生しそうなときに有効です。一般的な確認テンプレートがシステムにより提供されています。ユーザーが確認したら標準的な確認アニメーションが開始されます。
4.Cue cardは特別なアクションを続けることが出来ます。例えば、メッセージアプリケーションで「返信」アクションボタンをタップするとCue Cardが実行され音声入力が表示されます。この時ラベル(メッセージをお話ください 等)が表示され、開発者が提案する音声の例を設定できます。

携帯端末で開く

開発者は可能な限りウェアラブルデバイス上でアクションを表示するように試みるべきです。携帯端末を使うことが必要な場合、アクションボタンがタップされ、関連するAndroidアプリが携帯端末上で開いたら、一般的なアニメーションを再生されないといけません。

Card上でのアクション(メディアコントロールなど)

いくつかのCardではCard上で直接アクションをタップできたほうが便利かもしれません。このガイドラインを使うかアクションボタンを使うかについていてのガイドラインは以下のとおりです。
・特定のアクションだけが実行されると予測がつく場合はこのパターンを使うべきです。例えば住所が車のアイコンと到着予定時刻とともに表示されるときは、これをタップすると明らかにナビが開始されるべきでしょう。逆に、もし連絡先写真と名前しか表示されていなければ、これをタップしても何が起きるかわかりません(電話をかける?メールを送る?)この場合はこのパターンを使ってはいけません。
・Card上のアクションには理解するためのテキストラベルが不要でなくてはいけません。
・Card上のアクションはウェアラブル上で結果が表示されなくてはいけません(電話上で開くためのWeb linkを除く)
・Cardに付き1アクションのみです。Cardにはメニューがありません。
音楽の再生/停止を切り替えたり、照明のスイッチをオン・オフしたり、特定の住所にナビゲーションしたり、電話番号に電話をかける時などがCard上のアクションを使うべきいい例です。

Cardをスタックする

関連したCardをまとめてStackにして、ストリーム内で垂直方向に順番に拡張できます。
スタックをタップすると、Cardが重なって表示されます。内容を見ることが出来るように各Cardの上端が表示されます。続けて重なったCardをタップするとCardの全体が表示されます。Cardのスタックからスワイプによってユーザーが離れると、全てのCardが折りたたまれた状態に戻ります。

開発者向け資料:Notificationを積み重ねる

2D Picker

あなたのアプリ内の2D PickerコンポーネントはCue Cardあるいはアクションボタンによって表示されます。これによってユーザーにアイテムリストから選ばせたり、オプションで各アイテムの属性を選ばせることが出来ます。例えばソーシャルチェックインアプリではチェックインする場所のリストを垂直に表示するために2D Pickerを表示できます。

より多くの情報を必要とする場合があるかもしれません。ユーザーがこの場合アクションを完了するために選択肢を選ばなくてもいいように、最も選ばれそうな値を初期値とするべきです。このパターンはAndroid Wearの中心となるデザイン原則である必要な対話性を最小にするということに基づいています。

アプリ構造ガイドに2D Pickerパターンを使う方法の詳細があります。

音声コマンド

Intentを発行する音声コマンドによってアプリはアクションを起こすことが出来ます。例えば、アプリは「メモを取る」というIntentに登録して、以降の音声入力を処理できます。複数のアプリが同じIntentに登録されていた場合、最初にどのアプリを使うかの選択肢が1回表示され保存されます。ユーザーは携帯端末上のAndroid Wearアプリの中でIntentで使うアプリの設定を編集できます。
開発者向け資料:音声入力の機能を追加する

リストを選ぶ

リストからアイテムを選ぶのは一般的な操作です。リストを選ぶパターン(WearableListViewコンポーネントで使用可能です)は小さな画面上で使いやすいようにシンプルなリストに最適化されています。スナップしてアイテムを画面の中心に合わせて、タップして選びます。このウィジェットはアイテムを選ぶときの一般的なパターンとして推奨されています。Cue card上を含むシステム全体でこれが使われています。

もちろん、Android Wearアプリはこの慣れた方法をもとに、彼ら自身で拡張することが出来ます。利用可能な選択肢についてより詳細はアプリ構造を見てください。



Except as noted, this content is licensed under Creative Commons Attribution 2.5. For details and restrictions, see the Content License.

前:Android Wearのアプリ構造 次:Android Wearのためのスタイル

関連キーワード

[Android][モバイル][IT][翻訳][ウェアラブル]

コメントを投稿する

名前URI
コメント