Google glass ui guidelines

1,443 views

Published on

Google glass ui guidelines

Published in: Technology

Google glass ui guidelines

  1. 1. 禁断のGoogle Glass安藤幸央 Yukio Andoh@yukio_andohphoto by seanmcgrath
  2. 2. Building New Experiences with Glasshttp://www.youtube.com/watch?v=JpWmGX55a40
  3. 3. Glass How-to: Getting Startedhttp://www.youtube.com/watch?v=4EvNxWhskf8
  4. 4. Best PracticesGeneralユーザーの行動に干渉せずに情報を届けられるユーザーの感覚にとても近い体験、今までに無い新しい体験刺激的であるとともに、挑戦的な課題を内包しているガイドラインを用意 → 全フェーズで活用してください!https://developers.google.com/glass/guidelines
  5. 5. Best PracticesGuidelinesGlass のためのデザインスマートフォンとは根本的に違う。実機テスト重視要らない時には隠れる頻繁さや不意に通知はダメ。必要時には対話、不要時は無視タイムリーさを維持するこの瞬間の情報を更新する。常に最新かつ関係のあるものを予想外のことをしない意図を正確に伝え、あらゆることに明確な許可を得る 
  6. 6. User Interface Guidelines「グラス」 は斬新なインターフェースを用意していますが、新しいものはなんでもそうであるように、ユーザーにとっては新しい可能性を開くと同時にチャレンジにもなります。私達が「グラス」を開発する途上で皆さんと共有したい幾つかの点がありました。どうぞこれらのガイドラインに留意してください。
  7. 7. Creating well-formattedtimeline cardsタイムラインカードはユーザーと「グラス」の相互関係の中でその中心となるものです。タイムラインカードはそこにあなたの作成した内容を表示するだけではなく、ユーザーがいかにしてその内容を「グラス」と相互作用させるかをも表示します。ですから、タイムラインカードはそのフォーマットとスタイルが明確で理解しやすく、読みやすいものであることが重要となります。
  8. 8. Creating well-formattedtimeline cardsMirror APIにはこのカードの作成に3通りの方法があります。テキストによる方法HTML のテンプレートを使用する方法そしてユーザー自身が作成した HTML のテンプレートを使用する方法
  9. 9. Using textテキストの使用は、「グラス」にきれいで見やすいカードを作成するのには一番簡単な方法です。あなたが表示したいものを単にテキストと、オプションとしての画像の形でAPI に載せてやるだけで、あとは「グラス」がそれをすばらしいものにしてくれます。グラスウェアが timelineitems 上に text フィールドを設定して、テキストカードを明記します。
  10. 10. Using textこんな場合にテキストを使いましょう。表示したい内容の大部分がテキストである場合。ユーザーにもっとも効果的な表示方法を「グラス」に決定してほしい場合。これは、インターフェースの変化にともなって、あなたの表示内容も変化します。「グラス」の使用において、あなたの表示内容を常に最新で一律に保ちたい場合。
  11. 11. Using Glass HTML templatesすべての表示内容が数行のテキストで書かれるものばかりとは限りません。 時には構成された表示内容をユーザーのタイムラインに送る必要や、フォーマットをコントロールする必要があります。こんな時に、Mirror API は timeline items 上のフィールドに HTML を表示します。
  12. 12. Using Glass HTML templatesあなたのユーザーが進展の時間を節約していつも安定した結果が得られるように、「グラス」で通常表示される幾つかの HTML テンプレートを用意しました。これらのテンプレートは、あなたが自分自身の HTML テンプレートを作成する時のガイドとなるものです。既存のテンプレートのすべてを Mirror API Playground で見ることができます。
  13. 13. Using Glass HTML templatesこんな場合に HTML テンプレートを使いましょう。リストやテーブルなど、構造的な内容を表示したい場合。内容の表示にもっといろいろな可能性を追求したい場合。
  14. 14. Displaying your own customHTML時によって、既成のテンプレートでは作成できない内容表示を「グラス」に送る必要がある場合。こんな場合には、自分自身のテンプレートを作成して、それを timeline items の htmlフィールドに追加することができます。
  15. 15. Displaying your own customHTML自分自身のテンプレートを創作することで、あなたの表示内容をコントロールできるパワーを獲得することができますが、そのためには幾つかの条件があります。 「グラス」上での表示内容を一定に保持して、予想しないことが発生しないようにすることが大切です。あなた自身のカスタム HTML を創作して内容表示しても良いですが、できれば既存の HTML テンプレートを使うことをお薦めします。なぜなら、これらの既存のテンプレートには当社の苦心が込められているからです。もし、どうしても新しいテンプレートを創作したいなら、次のガイドラインに従ってください。
  16. 16. Displaying your own customHTMLbase_style.css に紹介されているスタイルを使用すること。このファイルは「グラス」で表示されるすべてのタイムラインカードに含まれています。既存のテンプレートで使用されているガーター(溝)やスペース(余白)と同じ規定に従ってください。
  17. 17. Delivering photosand videoタイムラインカードには写真や動画の添付が可能です。写真はタイムラインカードの上でフルスクリーンで見ることができます。動画も同じですが、動画の上映中にはテキストが消えます。
  18. 18. Delivering photosand videoフルスクリーンで見られるように、画面対比率を16x9 にして送ってください。解像度は 640x360 をターゲットにしてください。常に画像の幅と高さを指定してください。そうすることでカードの表示時に画像の位置のリフローを防げます。また、画像が見えない場合の「グラス」のエラーメッセージが表示される場合にも役立ちます。動画の再生時間は10∼20秒にしてください。「グラス」は素早いデータの消費のためのデバイスですから、長時間の動画はユーザーにとって適当ではありません。
  19. 19. Bundling timeline cardsバンドルすることで表示内容をページ割りすることができて、より多くの内容が表示され、ユーザーのタイムラインのスペース節約にもなります。バンドルされたページはタイムラインカードの右上端にページがめくれて見えるので、ユーザーは次のページにさらに情報があることがわかります。
  20. 20. Bundling timeline cardsバンドリングはコンセプト自体は簡単なものですが、不適当に使われることがあります。どのような場合にバンドルすべきか、あるいはすべきではないか、を一連のルールで示す代わりに次の項を参考にしてください。バンドルに適する場合。
  21. 21. Bundling timeline cardsバンドリングはコンセプト自体は簡単なものですが、不適当に使われることがあります。どのような場合にバンドルすべきか、あるいはすべきではないか、を一連のルールで示す代わりに次の項を参考にしてください。
  22. 22. Bundling timeline cardsバンドルに適する場合。脈絡の続いた一連のメールや短いメッセージ数ページにわたる長い記事幾つかの関連記事が一箇所に集められたもの一連のスポーツゲームなどの重要なイベントやスコアの更新
  23. 23. Bundling timeline cardsバンドルに適さない場合。すべての表示があなた自身から送られたものである場合多数のヘッドラインが数日間にわたって「グラス」へ送られてもの
  24. 24. Bundling timeline cards注意 バンドリングをするのには2つの方法があります。ページ表示とスレッド表示です。詳しくはバンドリングのガイドを参照してください。
  25. 25. Creating menu itemsメニューは、あなたがユーザーのタイムラインに挿入したタイムラインカードに、ユーザーが直接反応できるためのものです。 API には強力なメニュー機能が内蔵されているので、あなた自身のカスタムメニューの作成が可能です。
  26. 26. Creating menu itemsメニューの作成には次のガイドラインに従ってください。もしアイコンを指定する場合は、その画像を50x50 ピクセルにしてください。表示する文言はできるだけ短く、数語にしてください。メニューを本来の目的以外に使用するのでなければ、既成のメニューにはデフォルトのアイコンと表示メニューを使用してください。
  27. 27. Creating menu items追加として、既成のメニューに関するガイドラインです。REPLY, REPLY_ALL ‐ ボイスリプライ機能は音声により、自由な状況から返信ができるように作成されています。ゲーム中の移動のような限られた利用にはボイスリプライを使用しないでください。
  28. 28. Offering menu items toremove content from a usersユーザーがタイムラインの内容を削除するのには、2つの方法があります。「Dismiss消去/却下」 と 「Delete削除」 です。「Dismiss」はタイムラインからタイムラインカードを取り除きます。タイムラインカードは新しいカードが加わると古いカードは自動的に押し出されていく仕組みになっているので、通常はこの機能をユーザーに提供すべきではありません。ユーザーはできるだけ簡単に操作できるべきなので、「Dismiss」の機能のようにアプリの操作をユーザーに強制する機能は好ましいものではありません。「Delete」はタイムラインカードを閉鎖してそのカードに関するすべての内容を削除します。(ローカルからもサーバーのストレージからも)。もし「Dismiss」の機能をユーザーに提供する場合は、それをメニュー上で「Delete」と表示してユーザーを混乱させないようにしてください。
  29. 29. Sharing content to contactsコンタクトとは、一人の人である場合もあれば、ユーザーが内容をシェアできる抽象的な存在である場合もあります。ユーザーに最良の経験をしてもらうために、次のルールに従ってください。コンタクトはフルスクリーンで表示されるので、アイコンは640x360 ピクセルのものを使ってください。ユーザーがシェアする内容に対して、選択に役立つような操作ができるように、acceptTypesで指示してください。
  30. 30. Delivering timeline cardsappropriatelyせっかく美しいカードを作成しても、それがタイミングよくしかも適当な量で届かなければ役に立ちません。
  31. 31. Delivering timeline cardsappropriatelyユーザーがあなたのグラスウェアを承認したあと、「ようこそ」 のカードを「グラス」のデバイスに送りましょう。そうすることで、ユーザーは設定が正当になされたことを知るからです。表示内容は元の形のままで送りましょう。とくに音声の入力を受けた場合はそうしてください。時には内容を要約した形で送るほうが良い場合もありますが、その時は音声を付けないで送るのが良いです。
  32. 32. Quick Reference• Screen aspect ratio◦ 16x9• Screen resolution◦ 640 x 360 pixels• Share contact icon size◦ 640 x 360 pixels• Menu option icon size◦ 50 x 50 pixels• Supported media format◦ Container: MP4◦ Video: H.264 baseline and H.263 baseline◦ Audio: AAC and MP3
  33. 33. Glass How-to: Getting Startedhttp://www.youtube.com/watch?v=4EvNxWhskf8
  34. 34. 8 Principles for DesigningGesture-Based Applications1 精確さは良いことです……でもそれは、ある程度まで!2 既存のユーザーインターフェースをモデルにしないようにしましょう。3 ユーザーが肩より高く手を上げなくてはいけないような動作は避けましょう!4 アクティビティを、小さく短い動作に分割しましょう!5 すべてのユーザーが右利きというわけではありません!6 ジェスチャーには文化的な意味を内包している!7 ユーザーを「効果的なインタラクション領域」に留めておくようにインターフェースを設計しよう!8 あらゆるサイズの人や手を使って、テストをしよう!
  35. 35. CURIOUS RITUALShttp://curiousrituals.wordpress.com
  36. 36. ?

×