光学シースルー ディスプレイ向けの、ひと目でわかるクリアなデザイン。
Jetpack Compose Glimmer は、有線 XR グラスなどの光学シースルー（OST）ディスプレイ用の Google デザイン システムと UI ツールキットです。デザイン システムは、色、タイプ、シェイプのプリミティブからコンポーネントやガイダンスまで、再利用可能な決定を提供します。
原則
Jetpack Compose Glimmer は、透明なディスプレイとメガネ型フォーム ファクタ向けに最適化された最初の UI フレームワークの 1 つです。OST は、不透明な画面ディスプレイを使用するのではなく、現実世界に直接プロジェクト ライトを表示します。Glimmer を使用すると、現実世界の存在感を維持しながら、コントラストが高く一目でわかる UI を構築できます。
透明ディスプレイを最初に表示
透明なディスプレイとグラスのフォーム ファクタ向けに最適化され、研究とカラー サイエンスに裏打ちされた、思慮深く美しい光学的なシースルー体験を実現します。
ハードウェア入力
インタラクション入力は、有線 XR グラスの機能を中心に設計されています。
目的に特化
スタイルとコンポーネントは、メガネですぐに使用できるように設計されています。Jetpack Compose Glimmer は、シースルー ディスプレイとユーザーの快適性を重視して最適化されています。専用に構築されていますが、柔軟性があります。これにより、タイプや色に加えて、フォーカス ハイライトをカスタマイズできます。
スタイル
Jetpack Compose Glimmer のデザイン ランゲージには、グラスでの視認性を最適化するためのシンプルなテーマが用意されています。色とタイプは、セマンティック表現とアプリのまとまりをカスタマイズできます。ビジュアル デザインの原則では、明瞭さ、読みやすさ、最小限の注意散漫さが重視されます。有線グラスは画角が広く、現実世界の干渉が少ない可能性がありますが、UI を邪魔にならないようにすることを検討する必要があります。
Glimmer には、OST メガネ用に最適化されたベースライン テーマが付属しています。色とタイプは、セマンティック表現とアプリのまとまりのためにカスタマイズできます。光学シースルー ディスプレイでは、黒は透明になります。暗い色はくすんで見えたり、透明に見えたりしますが、奥行きを出すために使用することもできます。デザインする際は、この点に注意してください。
カラーパターン
メガネのカラーパターン（アプリの色をテーマ設定するためのカラートークンまたは役割のコレクション）は、3 つのアクセントの役割、6 つのサーフェス（またはニュートラル）の役割、およびそれらのオンカラーの対応物で構成されています。
色をカスタマイズする
プライマリ カラーは、ブランドカラーまたはプライマリ インタラクション カラーを使用するようにカスタマイズできます。選択した色のコントラスト、彩度、電力使用量を考慮します。
詳しくは、Glimmer のカラーシステムとベスト プラクティスをご覧ください。
タイポグラフィ
Jetpack Compose Glimmer には、最適化されたデフォルトのタイプスケールがあります。それぞれ 3 つのスタイルを持つ 2 つのロールで構成されるタイプロールは、その目的と階層に基づいています。詳しくは、Glimmer のタイポグラフィをご覧ください。
表面と深さ
サーフェスにはコンテンツが含まれます。ユーザーの画角内に明確なフォーカス ポイントを提供し、コンテンツやアクションを含めることができます。Glimmer では、サーフェスと深度に関する詳細情報が使用されます。
コンポーネント
コンポーネントは、UI を構築するための専用のビルディング ブロックです。アプリでは、OST グラス独自のユースケース向けに最適化されたコンポーネントを備えた Jetpack Compose Glimmer を活用しましょう。詳細については、Glimmer コンポーネントをご覧ください。
コンポーネントを実装する準備はできましたか？Jetpack Compose Glimmer のドキュメントをご覧ください。
Glimmer コンポーネントは複数の UX 目的で使用されます。一部のコンポーネントには、アクション用のボタン、通信用の進行状況インジケーター、コンテナ用のスタック、ナビゲーション、入力用の音声インジケーターが含まれています。