AndroidWear デザインの話

2014/6/7 7509hit

AndroidWearアプリをデザインする上での話がAndroid Developers Blogに上がっていたので和訳してみました。
実機を使う重要さについてはスマートフォン登場初期にも散々言われていましたね。
原文

Roman NurikとTimothy Jordan AndroidWearのデザインと開発アドボケイト

数週間前、Timothy Jordanと私はウェアラブル向けアプリのデザインについてGoogle I/Oのために考えている幾つかを確認するために話しました。
私達は、開発者のためにこれらのデバイスで特殊で新しい画面を表示している時にユーザーの注意を引き続ける事ために、どんな必要な調査があるかについてたくさん話しました。ユーザーの環境に応じてそれらが適時有効に働き、環境の中で便利に振る舞う方法についても議論しました。
ウェアラブルデバイスにおいては従来のようにアイコンを並べるのではなくOS上で最前面に表示することが重要になります。

しかし、以前に私がAndroidのタッチUIを幾つかデザインした時にも、TimothyがGlassで得た沢山の経験の中にも
AndroidWearに対するデザインは行っていませんでした。

そこで私達は自分のアイデアを実際に試してみて、新しいプラットフォームがどのように動くか、どのようにデザインするかを調べてみました。

まずはじめに、私達はアイディアを必要としました。昨年、私はニューヨークで行われたNadya Direkovaの非公式なGlassデザインスプリントに参加し、私のスプリントチームは徒歩ツアーアプリを作りました。このアイディアは、はじめに近くにある徒歩ツアーの中から1つを選びチェックポイント間を歩いて、チェックポイントでそこの詳細を学ぶことが出来るというものでした。


Glassデザインスプリントでの、徒歩ツアーアプリのモック

モックのデザインを作っている間、考えが行き詰まってしまいました。そしてこの活動中に別の考えが浮かんできました。
それは、状況に応じたアプリの素晴らしい例で、Android Wearアプリのエクスペリエンスを向上させることが出来るでしょう。

AndoridWearのための徒歩ツアーアプリをデザインする

私達は、アプリのエントリーポイントについて考えこのアイディアを肉付けし始めました。どうやってユーザーはこのアプリを「起動」するのか?
音声コマンドを使って「ほにゃほにゃ徒歩ツアーアプリを起動する」で実行することはとても一般的です。
また、ユーザーの行動に応じて、Notificationを表示して近くのツアーを紹介するのも面白いでしょう。そのNotificationは優先度が低くあるべきで友人からのメッセージを受信した場合などより優先順位が高い通知の後に表示されるでしょう。
加えて現在geofencing and location functionality in Google Play servicesによって、バッテリーにやさしくこのような状況を認識することが出来ます。

この時点で私達は非常に興奮して、UIのモックアップデザインの詳細を始めました。
ゼロからスクラッチで作るのではなく、Taylor Lingの素晴らしいAndroid Wear 0.1 design templateをベースに使用しました。それにはsquare(長方形)とround(円形)両方のデバイステンプレートを含みます。私達はよく知られているsquareなデザインから開始しました。

アイデア:近くに使用可能な徒歩ツアーがあるとき、context streamでnotificationを受信。

そのような抑圧された環境でデザインを行うというのはかなり興奮したことを認めます。
140x140dp(280x280のXHDPI)は大きいとはいえません。そのため、どのような情報をどうやって表示するか厳しい選択が必要です。しかし、このような問題は、デザインをする上で本当に本当に楽しいものです。

我々はとても素早く残りのsquareデバイス向けデザインを肉付けしました。
それらには
次のチェックポイントまでの距離を示す動的なnotificationや、チェックポイントに到着した時に表示する暫く時間を掛けて読むことが出来る4ページの付近についての情報を表示する詳細画面など更にいくつかのスクリーンを加えました。

チェックポイントまでガイドするnotificationとチェックポイント到着時にチェックポイントについて知ることが出来る複数ページを持った詳細画面。

デザインを実際に見る

あなたがPhotoshop内で出来ることは多くありません。デザイナーとしてプラットフォームを本当に理解するためにはあなたは実際に本当のデバイスでそれを(理想的には実生活の中で)使ってアプリがデバイス上でどのように動くかを見る必要があります。それが唯一フローの複雑さ、タッチターゲットのサイズ、テキストの
読みやすさを完全に評価する方法です。

幸運なことにTimothyと私はどちらもテスト端末を持っていました。 -
私はLG G Watchの試作機を身につけ、TimothyはMoto 360の試作機を持っていました。
そして私達は繰り返しデザインが出来るように、素早くデバイスの画面に送る必要がありました。
数年前、私は接続されたAndroid端末に画面の一部をミラー表示できるAndroid Design Preview toolを公開していました。
嬉しい事にtoolはAndroid Wearで動作しました!
私達のモックがLG G Watchで表示されることを確認した後、私達はいくつかの微調整を行い腕の上に表示された画面を見てアイデアが正しいことを確信出来ました。

Android Design Previewはコンピュータースクリーンの一部をAndroid Deviceにミラー表示します。

丸いデバイスのためにデザインする

私達は今まで丸いUIをデザインしたことがなかったので、この新しい挑戦がどのようになるか予測がつきませんでした。
正直に言って、結局それは驚くほど簡単でした。8つ全てのモックは1時間以内に丸いデバイス向けに微調整出来ました。
同時に重要な情報の部品を2,3個画面上に表示するということは、丸型デバイスのために最適化する必要が有る情報の部品も2,3しか無いということです。全体的に見て私達はほんの僅かな種類のちょっとした微調整を行っただけです。

・背景を160x160dp(320x320px @XHDPI)にスケールアップしました。
・コンテンツのマージンをsquareの12dpからroundでは26dpに増やしました。これにより、116 x116dpのsquareに対してroundは108x 108dpとわずかに小さくなります。
・「ツアーを続ける」のようなアクションを腕時計のフレームから縦方向に中央になるように位置を下げました。
・テキストの短い抜粋ではsquareなデバイスでは左寄せとし、roundなデバイスでは中央寄せとしました。
・Context streamの左右のpaddingを減らしました。(Notificationについてはプラットフォームが自動的に行うため何もする必要はありません)

これらは完全に異なるレイアウトというよりは、同じレイアウトを微調整しただけです。

Android Design PreviewでTimothyの試作型Moto 360にモックが表示された時の興奮を口で表すのは難しいです。感無量でした。

丸いスクリーン上であなたのUIが動くとき、それはとても特別で恐ろしく興奮するでしょう。
RoundとSquareのモックが完成し、デバイス上にミラー表示され、私達は刺激的なデバイスのためのアプリをデザインする概略に触れることが出来ました。
以下は私達が完成させたツアー探検とエンゲージフローのモックです。視認できるgrid上のアプリアイコンはありません。この全てをPSDファイルでダウンロードできます


目の覚める経験

Android Wearのためにデザインすることはデスクトップやスマートフォン、タブレットとは完全に異なり、ちょうどGlassのようです。
ユーザーに表示する情報とアクションを慎重に考えることが本当に大事です。そして、それ以上に、あなたのアプリが表示される時の状況についてよく検討することが大事です。

デバイスサイズなどリソースの制約やユーザーの注意が限られているということは
アイディアを最初から何度も深く考えることが重要です。 これはデザイナーとしてとても楽しいことです。実際に、それをpixelにすることはとてもとても簡単です。

私達はほんの数年前までは夢の中の話だった実際の試作品デバイス上でアイディアを実行に移してみました。それは私の長いUIをデザインしてきた中で最も楽しいことでした。
あなたが最初にアプリを夢見て、モック、あるいはコーディングしてAndroid端末上で
実行した時の興奮を覚えていますか?これはその時以上の興奮です。なぜならあなたはあなたのアプリを身につけることが出来るのですから。私達はあなた達がこの興奮を経験するのが待ち遠しいです。

ウェアラブルコンピューターとデザインの沢山の素晴らしい内容をGoogle I/O2014で紹介する予定です。
6月25日と26日をお見逃しなく


前:Android WearハッカソンとI/O Extendedのお知らせ 次:ウェアラブル向けアプリを作る 目次

関連キーワード

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

コメントを投稿する