Jetpack Compose Glimmer UI フレームワークを使用してアプリを構築し、光学シースルー ディスプレイで動作する拡張エクスペリエンスを実現します。Jetpack Compose Glimmer は、透明なディスプレイとグラスのフォーム ファクタ向けに最適化された最初の UI フレームワークの一つです。
1. ユーザー ジャーニーを決定する
メガネのフォーム ファクタの「一目でわかる」という原則に適合するクリティカル ユーザー ジャーニー(CUJ)に重点を置きます。これは、最小限の UI または音声のみで表現でき、ユーザーは周囲の状況を把握できます。機会を見つけるには、現在のアプリで、スマートグラスのメリットを享受できるエントリ ポイントを検討します。
たとえば、ハンズフリーのターンバイターン方式の徒歩経路案内を利用して、目的地に移動できます。
選択したユーザー ジャーニーでは、安全性、快適性、パフォーマンスの原則も考慮する必要があります。たとえば、ユーザーのカメラを不必要に長時間必要とするタスクや、ユーザーのプライバシーを侵害するタスクは選択しないでください。
基本原則について学習する。
すべきこと
すべきでないこと
2. 最小化と翻訳
ディスプレイ モードの UI の場合は、コアアプリの CUJ から始めます。
フォーカスに合わせてレイアウトを最適化する: レイアウトでは重要な情報が優先され、アクションと視覚要素の数が減るため、ユーザーはフォーカスを維持できます。
奥行きを使用して階層を表現する: 奥行きは、要素の優先度を伝えるために使用されます。
下から上に設計する: モックを作成するときは、下から始めて、コンポーネントを上に向かって配置します。
ビジュアル コンポーネントを変換する: ディスプレイ グラスの場合は、Jetpack Compose Glimmer コンポーネントとレイアウト パターンを使用します。
3. 音声フローと音声キュー
音声で会話を始めましょう。ディスプレイ グラスでも、アプリのエクスペリエンスの大部分は音声で構成する必要がありますが、音声グラスの音声のみのエクスペリエンスも考慮する必要があります。これを行うには、このエクスペリエンスを記述する音声のみのフローマップを作成します。音声キューとダイアログを使用して、インタラクションとフィードバックを記述します。オーディオ フローでユーザーを圧倒しないように、デザインを評価します。

4. 地図の入力コントロール
デバイスのコントロールとジェスチャーの入力を必ずマッピングしてください。まずは、タップなどの基本的なアプリ操作をトラックパッドのタップに変換することから始めましょう。
5. SysUI を考慮する
他のシステム インターフェースを考慮する。
アプリは、ホームや、通知などの他のシステム機能(使用されている場合)に表示されます。これらはシステムバーに表示されます。
6. その他の状態
アプリは、接続や権限の問題など、オーディオ グラスとディスプレイ グラスで異なるシナリオに遭遇します。これらのさまざまな状態を、コアアプリとグラスアプリの両方で考慮します。
デバイス機能の権限をリクエストしてください。
視覚的な UI と音声の両方で、これらの要素を考慮する必要があります。たとえば、モバイル デバイスで権限フローを完了する必要があることを伝える音声フィードバックを提供したり、エラーを読み上げたりします。
注: Figma の Jetpack Compose Glimmer UI キットを使ってみましょう。