使ってみる

Jetpack Compose Glimmer UI フレームワークを使用してアプリを構築し、光学シースルー ディスプレイで動作する拡張エクスペリエンスを実現します。Jetpack Compose Glimmer は、透明なディスプレイとグラスのフォーム ファクタ向けに最適化された最初の UI フレームワークの一つです。

1. ユーザー ジャーニーを決定する

メガネのフォーム ファクタの「一目でわかる」という原則に適合するクリティカル ユーザー ジャーニー(CUJ)に重点を置きます。これは、最小限の UI または音声のみで表現でき、ユーザーは周囲の状況を把握できます。機会を見つけるには、現在のアプリで、スマートグラスのメリットを享受できるエントリ ポイントを検討します。

たとえば、ハンズフリーのターンバイターン方式の徒歩経路案内を利用して、目的地に移動できます。

選択したユーザー ジャーニーでは、安全性、快適性、パフォーマンスの原則も考慮する必要があります。たとえば、ユーザーのカメラを不必要に長時間必要とするタスクや、ユーザーのプライバシーを侵害するタスクは選択しないでください。

基本原則について学習する。

モバイルアプリから、グラスのフォーム ファクタを活用できる機能を抽出します。たとえば、一目でわかるエクスペリエンスです。
スマートフォン アプリ全体をグラスに移植する。グラスのフォーム ファクタにスケーリングされないため。

2. 最小化と翻訳

ディスプレイ モードの UI の場合は、コアアプリの CUJ から始めます。

  • フォーカスに合わせてレイアウトを最適化する: レイアウトでは重要な情報が優先され、アクションと視覚要素の数が減るため、ユーザーはフォーカスを維持できます。

  • 奥行きを使用して階層を表現する: 奥行きは、要素の優先度を伝えるために使用されます。

  • 下から上に設計する: モックを作成するときは、下から始めて、コンポーネントを上に向かって配置します。

  • ビジュアル コンポーネントを変換する: ディスプレイ グラスの場合は、Jetpack Compose Glimmer コンポーネントとレイアウト パターンを使用します。

詳しくは、コンポーネントとアプリビューをご覧ください。

ショッピング リスト アプリは、リスト表示を最小限のリスト エクスペリエンスに縮小し、フィードバック UI のみを必要とします。
図 1.: ディスプレイ グラス用の要素に変換されたショッピング リストアプリ。ディスプレイ グラスの UI は通常は空であるため、システムバーは視覚的に区別されます。この場合、アプリバーはタイトルチップに変換され、マテリアル リスト要素は Jetpack Compose Glimmer リストに変換されます。

3. 音声フローと音声キュー

音声で会話を始めましょう。ディスプレイ グラスでも、アプリのエクスペリエンスの大部分は音声で構成する必要がありますが、音声グラスの音声のみのエクスペリエンスも考慮する必要があります。これを行うには、このエクスペリエンスを記述する音声のみのフローマップを作成します。音声キューとダイアログを使用して、インタラクションとフィードバックを記述します。オーディオ フローでユーザーを圧倒しないように、デザインを評価します。

音声のみのフローマップを作成して、ユーザーに負担をかけない会話機能の計画に役立てます。

4. 地図の入力コントロール

デバイスのコントロールとジェスチャーの入力を必ずマッピングしてください。まずは、タップなどの基本的なアプリ操作をトラックパッドのタップに変換することから始めましょう。

入力に進みます。

XR 差別化アプリは、XR 向けに明示的に設計されたユーザー エクスペリエンスを備え、XR でのみ提供される機能を実装しています。

5. SysUI を考慮する

他のシステム インターフェースを考慮する。

アプリは、ホームや、通知などの他のシステム機能(使用されている場合)に表示されます。これらはシステムバーに表示されます。

システム UI の詳細

音声のみのフローマップを作成して、ユーザーに負担をかけない会話機能の計画に役立てます。

6. その他の状態

アプリは、接続や権限の問題など、オーディオ グラスとディスプレイ グラスで異なるシナリオに遭遇します。これらのさまざまな状態を、コアアプリとグラスアプリの両方で考慮します。

デバイス機能の権限をリクエストしてください。

視覚的な UI と音声の両方で、これらの要素を考慮する必要があります。たとえば、モバイル デバイスで権限フローを完了する必要があることを伝える音声フィードバックを提供したり、エラーを読み上げたりします。

コアアプリとグラスアプリの両方で、さまざまなアプリの状態を考慮します。 注: Figma の Jetpack Compose Glimmer UI キットを使ってみましょう。