Jetpack Compose Glimmer UI フレームワークを使用して、AI グラス全体で動作する拡張エクスペリエンスを実現する AI グラスアプリを構築します。Jetpack Compose Glimmer は、透明なディスプレイと AI グラスのフォーム ファクタ向けに最適化された最初の UI フレームワークの 1 つです。
1. ユーザー ジャーニーを決定する
AI グラスのフォーム ファクタのひと目でわかる原則と互換性のあるクリティカル ユーザー ジャーニー（CUJ）に焦点を当てます。最小限の UI または音声のみで表現し、ユーザーが周囲の状況を把握できるようにします。機会を見つけるには、現在のアプリで、Google Glass のメリットを活かせるエントリ ポイントから検討してください。
たとえば、目的地までのハンズフリーのターンバイターン方式の歩行ルート案内は、ユーザーにとって便利な機能です。
選択したユーザー ジャーニーは、安全性、快適性、パフォーマンスの原則も考慮する必要があります。たとえば、ユーザーのカメラを不必要に長時間使用したり、ユーザーのプライバシーを侵害したりするタスクは選択しないでください。
基本原則について学習する。
すべきこと
すべきでないこと
2. 最小化と翻訳
ディスプレイ モードの UI の場合は、コアアプリの CUJ から始めます。
フォーカスを最適化する: レイアウトで重要な情報を優先し、アクションと視覚要素の数を減らして、ユーザーの集中力を維持します。
階層に奥行きを使用: 奥行きは要素の優先度を伝えるために使用されます。
ボトムアップで設計する: モックを作成するときは、下から始めて、コンポーネントを上にレイアウトします。
視覚コンポーネントを変換する: ディスプレイ AI グラスでは、Jetpack Compose Glimmer コンポーネントとレイアウト パターンを使用します。
最適化されたコンポーネント
B. [Outline & Highlight]: 枠線の色はコントラストが最適になるように調整されています。ハイライトを使用すると、視覚的な表現が可能になり、特定の種類の入力を示すために使用されることがあります。
C. シェイプ: 角の鋭さを軽減し、快適性を向上させることで、一目でわかるようにするために、よりソフトなシェイプ システムが使用されています。On Surface 色: コンテンツの On Surface 色は白で、世界とのコントラストを最大化します。
D. タイポグラフィ: Glimmer のタイポグラフィ スケールでは、カーニング、サイズ、太さを最適化して読みやすさを高めた、洗練された Body スタイルと Title スタイルの小さなセットを使用します。
E. アイコン: 丸みを帯びたマテリアル シンボルを使用することで、丸みを帯びたタイポグラフィ スケールとの一貫性が保たれています。
3. 音声フローとキュー
音声で会話を始めましょう。音声は AI グラスアプリの大部分を占めるべきですが、ユーザーに負担をかけないようにする必要があります。また、特定のデバイスでは音声のみのエクスペリエンスも考慮する必要があります。このエクスペリエンスを説明するには、音声のみのフローマップを作成します。音声キューとダイアログを使用して、インタラクションとフィードバックを書き留めます。
4. 地図の入力コントロール
デバイス コントロールとジェスチャーの入力をマッピングしてください。まず、タップなどの基本的なアプリ操作をトラックパッドのタップに変換することから始めます。
5. SysUI を検討する
他のシステム インターフェースを考慮します。
アプリは、使用されている場合、ホームや通知などの他のシステム機能に表示されます。これらはシステムバーに表示できます。
6. その他の状態
AI グラスでは、接続や権限に関する問題など、さまざまなシナリオが発生します。コアアプリとメガネアプリの両方で、これらのさまざまな状態を考慮してください。
デバイス機能の権限をリクエストするようにしてください。
これらは、視覚的な UI と音声で考慮する必要があることを覚えておいてください。たとえば、モバイル デバイスで権限フローを完了する必要があることを伝える音声フィードバックや、エラーを読み上げる音声フィードバックを提供します。
