android wear design guideline

Android Wear Design Guideline

“OK Google”

http://developer.android.com/design/wear/index.html

ここに書いてある内容のピックアップ(読めばわかります )

Soyeon LEE2014.07.15

一言で言うと、“今までとは違うよ”

Android Wearが提供するWearable deviceのアプリをデザインすることは、スマホやタブレットのデザインとは大いに違うことです。異なるメリットやデメリット、異なるユースケース、異なる人間工学のことを考えないといけません。

“Designing apps for wearable devices powered by Android Wear is substantially different than designing for phones or tablets: different strength and weaknesses, different use cases, different ergonomics.”

Suggest: The Context Stream

アプリからの通知や、ユーザーの TPOを考えた適切な提案はカードの形で画面に表示する。ユーザーが通知をたくさんチェックしなくても、Wearをパッと見ただけで重要な情報をチェックできる。

上下にスワイプして Pagesや Buttonsを表示可能、右にスワイプしてカードを終了させられる。

Demand: The Cue Card

Wearの提案が物足りないときは、 Cue Cardを操作することもできる。” OK Google”と呼ぶか、 Cue Cardをタップ。 Cue Cardを上にスワイプするとタップできる Voice Commandのリストを表示することもできる。

主なUI Feature二つ

Home ScreenWatch facesAmbient modeDate and Battery displaySettings screenFull screen apps

Other UI Features

だいたい見ればわかる感じ

Android Wear Notification and Application Patternshttp://commondatastorage.googleapis.com/androiddevelopers/design/Android_Wear_Patterns_20140626.pdf

Launched automatically

Creative Vision

アイコンタップしたりするんじゃなくて、Wearがユーザーのコンテキストを把握して、必要な情報をタイムリーに出す

Glanceableパッと見わかるように。情報を詰め込みすぎない

All about suggest and demand

“Wearはあなたの個人秘書みたいなものです。あなたの嗜好を知ってて、必要なときだけ邪魔するし、居合わせていて常に良い答えを用意してます”提案もするし命令も受ける、丁寧で役に立つもの（出しゃばらないということを強調している印象）

Zero or low interaction簡単で早いタッチ、スワイプ、音声でほとんど操作可能デリケートな指の操作はできるだけ使わなくしたい

Focus on not stopping the user and all else will follow

Design Principles

時計というのは「ながら操作」するもの。操作のために他にやってることを止めないようにする

操作に 5秒以上かかるならもっとフォーカスさせてみること

Design for big gesturesあまり細かい操作しなくても良いようにする

他にも色々あるけど読めばわかります（たぶん）

強制じゃないけど、こういう考え方とやり方でデザインしてください、な感じ

・ Bridged Notifications

App Structure

めっちゃ簡単単純通知Android Appで対応してれば簡単に使える

下記は簡単 (シンプル )な順で並べたアプリ構造の例、これをそのまま使うか組み合わせて使うと良いアプリの立ち上げ・終了についてユーザーに色々考えさせないでほしい

・ Contextual Notificationsイベントドリブンで通知を飛ばす方法例えば、ユーザーが走り出したら運動アプリを起動させたりリビングに入ったら、リビング照明コントロール UIを出したり

しかし何をトリガーとして通知を飛ばすかは良く考えてほしいあまり飛ばしすぎるとユーザーはウザがってあなたのアプリの通知を全部ブロックしちゃうかもよ

Contextual card in the stream

・ 2D Picker複数のオプションをリストで見せるときに訳に立つデザインパターンe.g.) Google検索

カードの数を最小限にすること、最も重要なカードを最初に表示すること、それぞれのカードをシンプルにすること、操作速度の最適化を行うこと

ナビゲーションは、下スワイプ→右スワイプの順で行うようにする最初のカードを下スワイプ、最も左側に配置されているカードの右スワイプでアプリを終了させるようにする

・ Breaking out of the card (with custom layouts)一時的にフルスクリーン表示をすることも良い方法

カードで実現できないときだけフルスクリーンを使うこと、カードっぽいデザインでユーザーを混乱させないこと、フルスクリーンでやることが終わったら自動で終了させること、仕方なく手動終了させるときは長押し

Full screen UI app

UI PatternsCardsApp iconsPagesDismissing cardsAction buttonsContinuing activities on phoneActions on cards (such as media controls)Card stacks2D PickerVoice commandsSelection List

Action countdown and confirmation

だいたい見ればわかる感じ

Wearでできることに限界があって、 Androidデバイスに飛ばして続きをやりたいときの UIパターン

→続きはスマホで

Style

Screen Size

様々なサイズがあり得るので固定でデザインしない。特に四角い画面と丸い画面、両方考えてデザインすること（言うのは簡単だけどさ）Emulatorでチェックすること

Specific Assets Required

マテリアルデザインとも関係ありそうな内容平面だけど立体構造が想像できるように、決まった Assetsを正しく並べること

Peek Card Readability

カードの情報がパッと見読みとれるか、正しくクロップされていて、スワイプすれば追加の情報が見られることがわかるようになっているか確認すること

Low Information Density

情報を詰め込まない一瞬でパッと見で情報が読み取れるようにすること関連性のある背景イメージを使うことで情報が伝わりやすくすること

Separate Information into Chunks

どうしても追加の情報を出さないといけないとき、カードレイアウトをごちゃごちゃにせず、追加のページを設けることあるいは Continuing activities on phone(スマホで続く )パターンを使う

Keep Notifications to a Minimum

何度も強調している内容。ウザがられないように、通知はほどほどに

Use Clear, Bold Typography

システムフォントは Roboto文字のサイズ・色の指定があるので従うことできるだけ文字は大きくする究極の目標は、さりげなく最大の情報を伝達すること（言うのは簡単だけどさ）

Use Consistent Branding and Color

アイコンの使用はオプショナル、使うなら指定の場所 (カードの右上 )に配置すること背景イメージにアイコンを配置したりブランディングに使わないこと背景イメージはカードの情報と関係のあるイメージにすべき

Copywrite Sparingly

要らないテキストは入れない「読む」ためのデザインではなく、「パッと見」のためのデザインにすること

Be Discreet if Necessary

通知の際 Peek Cardにセンシティブな情報は表示しない出すならスワイプしないと見えない位置に置くなどの配慮をすること

Confirmation Animation

「〜〜が完了しました」の表示は Androidが提供するもの→を使ってもよし、カスタマイズしてもよしアニメを入れるなら、 1000ms以下のシンプルなものにする

まとめると、“ごちゃごちゃさせないで”

- Wearは読むものではない、パッと見するもの- ユーザー操作は最低限にする：タップ、スワイプ、音声程度- アクションに 5秒以上かかるならもっかい考えて- 情報を詰め込まない、最低限の情報だけを表示する- 通知飛ばしまくってユーザーにウザい思いさせないで- どうしても色々情報を出さないといけないときはスマホに飛ばす