Edited at

Android Wear 文字盤の設計指針

More than 3 years have passed since last update.

この記事は “Watch Faces for Android Wear | Android Developers” を翻訳し要約し、追記したものです。“Watch Faces for Android Wear | Android Developers” は Creative Commons BY 2.5 で公開されています。このドキュメントは Creative Commons BY 4.0 を採用します。

このドキュメントでは12月10日に公開された Android Wear 5.0 で新しく作成できるようになった Watch Face の設計指針を書いていきます。(非公開の API で作ることはできたようです。)

“Watch Face” が公式で「時計面」と略されててくそダサいんですが、と思って今見たら時計面じゃなくて「ウォッチフェイス」になってますね!個人的には「文字盤」を推したいです。



制作構想

Android Wear の文字盤は単に時刻を表示するだけでなく、各個人や状況に応じて統合された情報を提示することができます。

表示が複雑になりすぎることに注意してください。単一の優雅な情報の表示に先進的な機能を利用することが成功の秘訣です。

ぱっと見て簡単に理解できる設計にすることが最も大切な原則です。


四角形と円形の端末

Android Wear には異なる解像度と形の端末があるのでそれを考慮して設計しましょう。


柔軟な構想

ScreenShapes_Invert.png

四角形でも円形でもうまく表示されるのが理想です。この例では出し分けすることなくどちらの端末にもきちんと表示されています。


共通した設計要素

ScreenShapes_Pyramids.png

四角形と円形に共通した色の組合せ・線の太さ・形・その他の設計要素を使うようにしましょう。


アナログな構想に合わせて調節

ScreenShapes_Rift.png

アナログな時計を構想にする場合、四角形の画面の角のことを考えてください。


全ての画面状態を考慮

Android Wear の画面には省電力状態 (ambient mode)と対話状態 (interactive mode) があります。両方の設計をする必要があります。一般的に省電力状態の設計がよいと対話状態の設計もよくなります。

省電力状態では画面の更新は分単位になるため秒を表示してはいけません。


対話状態 (interactive mode)

使用者が腕を胸の前に上げて Wear を見ると、勝手に対話状態になります。この状態では、フルカラーとなめらかなアニメーションを利用できます。


省電力状態 (ambient mode)

Wear は省電力状態で電力を節約します。この状態では、画面は白黒と灰色でになります。Wear が省電力状態になると、あなたの文字盤に通知が送られるのでそれを考慮して設計してください。


特別な画面への適応

省電力状態で考慮しなければいけないことは、電池の持ちと画面の焼き付けです。

画面の種類によって省電力設計の出し分けができます。全ての画面に対して最適な設計を考慮してください。


白と黒の画面

有機 EL や半透過 LED を含むいくつかの画面の省電力状態では白と黒の2色しか使用できません。灰色は使用できずアンチエイリアスが効きません。必ずこのような端末で省電力状態のテストをしてください。


焼き付け防止

Render_1Bit.png

有機 EL 画面では電力効率と焼き付け防止を考えましょう。有機 EL 画面では省電力状態になると、画素の焼き付けを防止するためにシステムは定期的に数ピクセル、表示内容を移動させます。大きなまとまった範囲を白く塗り潰すことは避け、画面の98%は黒くしておいてください。通常の省電力状態で中身が塗り潰された場所は、輪郭のみを表示するようにしてください。


システム UI 要素との調和

文字盤には Android Wear UI 要素を表示する必要があります。重要な UI 要素を目立たなくならないようにしましょう。


カード

カードは、Wear と携帯端末との間の情報をつなぐ通知システムです。ほとんどのアプリケーションはカードを通じて使用者と対話します。文字盤は大きいカードと小さいカードの両方に対応する必要があります。カードが表示されていない場合もあります。

一番上のカードは文字盤の下部に一部表示されます。一番上のカードの高さは可変で、アナログの文字盤の場合は小さくしたり、通知情報を多く表示したい場合は大きくしたりできます。

システムは一番上のカードを入れ替えることがあるので、その場合は文字盤の再配置をできるようにしてください。


状態表示 (Indicator)

Indicators_Cropped.png

Android Wear には Wear が充電中であるとか航空機モードであるなどを表示する状態表示があります。文字盤設計者は、どこに表示するかを考慮する必要があります。

大きいカードを表示する場合はかぶらないように上の方に表示したり、アナログの文字盤の場合は周囲の意匠とかぶらないように中央に表示したりしてください。


“OK Google”

声で Wear に指示を出せることを示すために “OK Google” を表示します。使用者が腕をかざすと数秒で表示されます。

5度使用者が “OK Google“ を発声すると、これは2度と表示されなくなります。ですので、この要素はとても重要というはけではありませんが、それでも文字盤の意匠にかぶらないようにした方がよいです。最悪、“OK Google” や状態表示に合わせた設計にしない場合、それらの背景は例えば黒の単色になるなどの機能が働きます。

UI 要素の配置と大きさに関してもっと知りたい方は Specifications and Assets を呼んでください。


情報重視の文字盤の設計

使用者の状況に合わせた情報を表示したり、それに合わせて色や意匠を買えることができます。


使用者に何を知ってほしいのか

情報重視文字盤を設計する第1歩は、使用可能な情報をもとに使用者に何をもたらしたいかの構想を決定することです。その次は必要な情報をどうやって取得するのかを決定します。


文字盤は時間によって変化するものを表示する

Render_Episode.png

あなたの設計する文字盤には、天気やカレンダー・フィットネスデータなど時間によって変わっていく情報を表示するかもしれません。その場合、単に情報を重ねるのではなく、時間の観点からその情報を表示させられないか考えてください。例えば、天気を表示する場合、現在の気温を表示するのではなく、その日、どう気温が変わっていくのかを表示した方がよいかもしれません。


伝えたいことは1つにしぼる

方向性が決まったら、可視化を始める必要があります。ぱっと見て分かる意匠と単一の表現が大切になります。なので最も大切な点が何なのか見極めてください。カレンダーを表示することを例にとると、1ヶ月の予定を表示するのではなく次に来る予定を表示すべきかもしれません。


洞察に始まり試験で進む

完成への道のりは使用者の需要と期待への洞察に始まります。設計に何か思い込みはないか、使用者に試験してもらってください。紙に荒い絵を描いてそれが何を表しているのか友人に尋ねましょう。さまざまな情報や状況であなたの構想を試してください。コーディングを開始する前に実際の時計で設計を試してみてください。


“Android Wear” アプリケーションをサポートする

CompanionApp_Build.png

DeviceSettings_Build.png

Android Wear アプリケーションを使って、全てのインストールされた文字盤とその設定を操作することができます。


起動アイコンを使ってはいけません

全ての文字盤は Android Wear アプリケーションもしくは、文字盤と付属のアプリケーションから操作できるので、文字盤に単独の起動アイコンは要りません。


設定

それぞれの設定のある文字盤には設定パネルがあり、Wear もしくは Android Wear アプリケーションから操作することができます。

Wear での設定は有効無効もしくは選択式のもののみにした方がよいです。電話でより複雑な追加の設定ができるようにすることもできます。


仕様と資産

文字盤の例やシステム UI の寸法を知るためには Design Downloads for Android Wear を見てください。


有機 LED の Samsung Gear Live 使ってたけど省電力状態のとき絵がずれてるとか全然気付かんかったで。


参考