LoginSignup
2
2

More than 5 years have passed since last update.

watch faceデザインのtips

Last updated at Posted at 2014-12-29

android developersの、Watch Faces for Android Wearを適当意訳 自分用メモ

Watch face作成時のtips

円形と正方形のデバイス

  • 円形と正方形それぞれのデバイスを勘案する必要がある(正方形の4隅のデザイン等に注意する)

ディスプレイモードについて

  • Watch faceには、interactive modeとambient modeがある。
  • Interactive modeはフルに機能を利用可能。
  • Ambient modeは電池節約モードみたいな感じで、表示は"時"と"分"のみとなり、色はグレースケールとなる。Interactive mode表示から時間経過で、ambient modeになる。

各スクリーンへの最適化について

  • ambient modeを作成するときには、バッテリー持ちと、ディスプレイの焼きつきを考慮する必要がある。
  • Low-bit制限があるディスプレイについては、グレースケールではなく、白黒のデザインを行ったり、アンチエイリアスを切るがある。
  • 有機ELディスプレイの焼きつき防止のテクニックとして、"広い範囲を白で塗りつぶすようなデザインを使用しない"、"画面の95%は黒にする"、"塗りつぶしではなく、縁取りのデザインとする"等がある。
  • アナログ時計のデザインをするときは、時計の中心を塗りつぶしにしない等

Android Wear UI elementsの取り込み

  • watch faceのデザインには、Android Wear UI elementsを含める必要がある。
  • Android Wear UI elementsは、wearable端末の状態や、handheldからのnotificationを受け取り、表示できるようにする機能
  • criticalな通知については、watch faceデザインに関わらず、わかりやすくしておく必要がある。

cards

  • cardsは、wearableとhandheld間で行われるnotificationのためのシステム
  • watch face作成にあたり、large cardとsmall cardの両方のデザインをする必要がある。
  • カードの大きさについては、developer側で設定できるが、userはその設定を無視するかもしれない
  • 通知のなかでも最上位のcard(最新のもの?)がpeek cardであり、画面の下部に表示される。
  • peekが可変であるカードは、"height"というステータスを持っており、通知のテキストの量により決定される。
  • small peek cardを使用することで、デザインの可能性が広がる。
  • variable peek cardの最大の高さが適用される場合でも時刻がはっきり見えるような場合は、variable peek cardが選択肢の1つとなる
  • variable peek cardのメリットは、より多くのnotificationを表示できること
  • notificationを画面の下半分に表示する場合、small peek cardが最大限活かせる
  • peek cardの領域?が変わった時、システムから通知がなされるので、そのような場合は、アプリを修正する

Indicators

  • Indicatorsは、wearableの状態をユーザーに通知する。(機内モードへの移行等)
  • Indicatorsが、どのようにwatch faceに表示されるのかを考慮する必要がある。
  • Indicatorsは、いくつかの決まった場所に配置される。
  • Large peek cardを使用しているなら、indicatorsは、画面上部か中央部に配置されるはず
  • status iconやhotwordをディスプレイの下部に配置している場合は、システムにより強制的にsmall peek cardsが適用される。
  • もしwatchfaceの端の方に重要なデザインがあれば(マークや数字等)、indicatorsは、画面の中央に置く

Hotword

  • Hotwordは"OK Google"という言葉の表示で、ユーザーにvoice commandが使用できることを伝えるものである。
  • ユーザーがwearableを点けたとき、ディスプレイに"OK Google"が数秒間表示される。
  • ユーザーが5回"OK Google"を言うと、ディスプレイにHotwordは表示されなくなるため、Hotwordの場所はそれほど重要というわけではない。
  • Hotwordが表示されなくなるとしても、watch faceの要素が隠されてしまうようなHotwordの配置は避けるべきである。
  • Hotwordやindicatorsについては、background protectionを表示するべきである。例えば、パターンなしの、暗く濃い色を使う等。(あなたのデザインが、Hotwordやindicatorsの上に表示するようにしているものでない限り。)

(background protection=文字の後ろの色のこと?)

system UI elementsのmeasurementsやpositioningに関する追加情報は、Specifications and Assetsを参照する。

Data-Integrated Watch Facesをデザインする

watch faceのスタイルや色を変えることで、ユーザーに対し、状況に応じた適切なデータや、データに対する反応を表示できる

ユーザーに何を知って欲しいのか

  • data-integrated watch faceのデザインにおける最初のステップは、利用可能なデータに基づく、想定されるユーザーの行動結果を明確にすることである。?
  • まず、あなたが信じられる強力なコンセプトや結果を、実際のユーザーのニーズに基づいて作成する。
  • あなたのデザインをユーザーが見た時、何を感じて欲しいのかを考える。
  • 一旦あなたの求める結果を明確にしたら、必要なデータをどうすれば得られるかを明確にする必要がある。

watch dial is a timeline; add data to it

  • あなたの作ろうとしているwatch faceでは、時間だけでなく、天気、カレンダー、フィットネスデータといったデータを表示したいと考えているかもしれない。
  • data integrationにおいて、creativityを発揮する。
  • 単に、時間表示のwatch faceに追加データを被せるような方法は避ける。
  • 例えば、時計に現在の気温を単に載せるような天気関連のwatch faceをデザインする代わりに、一日の内に気温がどのように変化するかがわかるようなwatch faceをデザインしましょう。

one messageを守る

  • watch faceの方向性や、やりたいことが決まったら、visual面の開発を始める。
  • 強力なwatch faceのデザインは、ひと目見るだけで印象に残り、各データの表現方法が素晴らしいものである。
  • あなたのメッセージを明確にするには、一番重要となるsupporting data pointを明確にする必要がある。
  • 例えば、1ヵ月分のカレンダー及びイベントを表示する代わりに、次回にイベントのみを表示するような選択もある。
  • 余計なものを削ぎ落とす過程で、データ表現における、よいデザインに辿り着くでしょう。

Support the Android Wear Companion App

Android Wear companion appを使うと、すべてのインストール済のwatch faceとそれらの設定にアクセスできる。

lancher iconは使わない

  • 使用できるwatch faceには、Android Wear Companion Appまたはthird party appからアクセスできる。
  • Android Wear watch faceのためのスタンドアロンのランチャーアイコンは不要である。

設定

  • 設定項目があるwatch faceにはSetting panelを付けることができ、watch自身から又はhandheld上のappを通じて設定できる
  • 殆どの場合、Standard UI componentsが適用できるが、その他の、あなたが過去に作成したような、creativeなUIの適用もできる。
  • watch上における設定方法は、実質的にbinary selectionsとscrollable listsを使用するやり方に限定されるだろう。
  • handheldにおける設定であれば、更に複雑な設定方法も可能であろう。

Specifications and Assets

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2