OpenXR、ネイティブ Android API、WebXR を使用して、没入型の Android XR アプリケーションを構築できます。このページで説明するビジュアル デザインの推奨事項は、選択するプラットフォームに関係なく適用されます。
Unity、OpenXR、WebXR アプリの場合: 任意のデザイン言語を自由に使用できます。マテリアル デザイン ライブラリは Android アプリでのみ使用できますが、そのデザインに関する推奨事項に沿って、色、スペーシング、スケール、ボタン、タイポグラフィを適用できます。
Android アプリの場合: 2D モバイルまたは大画面の Android アプリは、追加の開発作業をほとんど行わずにフルスペース機能を活用できます。XR の影響が大きい場合は、空間 UI の使用を検討してください。アプリに 3D モデルや環境を追加して、アプリ エクスペリエンスの没入感を高めることもできます。
Android XR では、既存の Android アプリのデザイン ランゲージを維持できます。新しいアプリや再設計では、UI サイズ、ユーザー補助機能、タイポグラフィ、カラーパターン、コンポーネントに関するマテリアル デザイン ガイドラインに沿うことを検討してください。これにより、Android の使い慣れた実績のあるデザインとユーザビリティのメリットをアプリで活用できます。
マテリアル デザイン 3 ライブラリを使用して Android アプリをビルドする場合、コンポーネントとアダプティブ レイアウトに空間 UI の動作を簡単に追加できます。
アプリのビジュアル デザインをテストする方法
アプリのビジュアル デザインをテストすることは、快適でアクセシビリティの高いユーザー エクスペリエンスを確保するうえで非常に重要です。さまざまな XR プラットフォームと環境でテストする方法は次のとおりです。
エミュレータ、シミュレータ、実際のデバイスを使用する
- Android アプリを開発している場合は、Android XR エミュレータでアプリをテストします。これにより、潜在的な問題を特定し、実機を使用せずに迅速に反復処理できます。
ビジュアル デザイン テストのチェックリスト
- 動きやアニメーションをテストして、乗り物酔いを引き起こさないことを確認します。スムーズなトランジション、安定したフレームレート、予測可能な動きを確認します。
- 現実世界の環境でパススルーを試して、仮想要素が現実世界の環境に溶け込むようにします。
- 明るい環境や暗い環境など、さまざまな照明条件でアプリをテストします。
- さまざまな距離や角度でテキストの読みやすさを確認します。
- アクセシビリティと快適さの観点からカラーパターンを評価します。
ユーザー フィードバックを収集する
ユーザー テストを実施して、改善すべき領域を特定します。包括的な視点を得るために、XR の経験や視覚能力が異なるユーザーを含めます。
Android XR のターゲット
XR アプリでは、ターゲットはユーザーが操作するタップ可能またはポイント可能な領域です。ターゲットが大きいほど、精度、快適さ、使いやすさが向上します。アプリのユーザー補助機能を強化するには、マテリアル デザインのターゲット ガイドラインに沿って設計します。Android、Unity、OpenXR、WebXR アプリで動作します。アプリがすでにマテリアル デザインの推奨事項に準拠している場合、ターゲット サイズは最小要件を満たしていますが、56 dp が最適です。
インタラクティブな UI 要素はすべて、次の点を考慮する必要があります。
- 推奨ターゲット: 56dp × 56dp 以上
- 視覚的なアフォーダンス（アイコン）: 48 dp x 48 dp 以上
- ターゲットと視覚的アフォーダンスのオフセット: 4dp
- 正確な操作のため、さまざまな UI 要素のポインタ ターゲットが重ならないようにする
- 必要に応じて、ターゲットとアイコンは親コンテナまたはラベルに合わせて拡大縮小されます。
マウスオーバーの状態を追加する
アクセシビリティを高めるため、インタラクティブ コンポーネントの基本的なインタラクティブ状態に加えて、ホバー状態とフォーカス状態も組み込んでください。ホバー状態はすべてのユーザーにとって有用ですが、ポインタ入力で UI 要素を選択するユーザーにとっては特に重要です。
ホバー状態は、システム内のアイトラッキング機能を有効にするうえで重要な役割を果たします。ただし、アイトラッキングが有効になっている場合、ユーザーのプライバシーを保護し、データの共有を防ぐため、ホバー状態はアプリからアクセスできません。システムは、ユーザーにのみ表示されるハイライト状態を描画して、どの UI コンポーネントが操作可能かを伝えます。
ターゲット間の距離
マテリアル デザインでは、ボタンなどのターゲット間に 8 dp 以上の間隔を空けることが推奨されています。この間隔により、ユーザーはインタラクティブ要素を簡単に区別でき、誤って選択することを防ぐことができます。
ボタン間の具体的な距離は、コンテキストとサイズによって異なります。考慮すべき要素は次のとおりです。
- ボタンのサイズ: ボタンが大きい場合は、視覚的な明瞭さを維持するために、ボタン間のスペースを大きくする必要がある場合があります。
- ボタンのグループ化: 機能的に関連性の高いボタンは近くにグループ化し、関連性のないボタンは離して配置します。
- レイアウト: 画面の全体的なレイアウトは、ボタン間の間隔に影響する可能性があります。たとえば、ツールバーのボタンは、ダイアログのボタンよりも間隔が狭くなることがあります。
パネルのサイズと倍率
Android XR は、アプリを快適で読みやすく、幅広いユーザーが利用できるように設計されています。最適なエクスペリエンスを実現するため、Android XR では 0.868 dp-to-dmm を使用します。
パネルを使用している場合、XR アプリは物理的な画面よりもユーザーから離れている可能性が高くなります。ユーザーがヘッドセットを装着していることを想定します。快適性を最大限に高めるため、メイン コンテンツを 41° の画角内に配置し、ユーザーが操作のために頭を動かす必要がないようにします。
推奨事項
- パネルの角は 32dp の丸みがあります。このデフォルトはオーバーライドできます。
パネルの奥行きの動作
- ホームスペース: アプリはユーザーから 1.75 メートルの距離で起動します。デベロッパーはこの距離をオーバーライドできません。
- フルスペース: デフォルトでは、アプリはホームスペースでの位置と同じ位置で起動します。空間ロジックを使用してユーザーの位置に基づいてパネルを配置できますが、起動距離は 1.75 メートルにすることをおすすめします。
アプリがユーザーから 1.75 メートルの距離にある場合:
- 1024dp は 1556.24 ミリメートルと認識されます
- 720dp は 1093.66 ミリメートルと認識されます
- 現実世界の 1 メートル = XR の 1 メートル
ボタンとアイコン
既存の Android アプリがある場合、Android XR 用の特別なコンポーネントを設計する必要はありません。ボタンとアイコンについて、マテリアル デザインのガイドラインに従う。Unity、OpenXR、WebXR アプリがある場合は、ボタンやアイコンをそのまま使用することも、マテリアル デザインを参考にすることもできます。
独自のボタンやアイコンを作成する場合は、シンプルな形状、すっきりとした線、基本的な形、限られたカラーパレットを選択します。詳細すぎるデザインは避けてください。さまざまな解像度や視聴距離でスケーラブルかつ読みやすいものにします。ユーザー補助機能については、コンポーネントと背景のコントラストが十分であることを確認し、スクリーン リーダーやその他の支援技術を使用するユーザー向けにテキストの説明やツールチップを提供します。
色
Android XR は、マテリアル デザインのカラーシステムに準拠して、一貫性があり視覚的に魅力的なインターフェースを実現しています。XR に合わせた没入感のあるビジュアル スタイルを作成するには、十分なコントラストでデザインし、バランスの取れたパレットを選択し、色覚異常のあるユーザーにもアクセスしやすい色を使用し、目の疲れや方向感覚の喪失を引き起こす可能性のある不調和な組み合わせを避けます。
ディスプレイの違いに合わせて色を最適化する
有線 XR グラスのディスプレイは、XR ヘッドセットの画面とは動作が異なります。ビューを置き換える単色の画面ではなく、有線 XR グラスは透明なレンズに光を投影するプロジェクターと考えることができます。
- ヘッドセットが世界を置き換える: カメラを使用して部屋を撮影し、不透明な画面に表示します。アプリで黒を表示したい場合は、ピクセルをオフにして、背後の世界を遮る真の暗いスポットを作成します。
- 有線 XR グラスで世界をオーバーレイする: グラスを通して部屋を直接見ることができます。ディスプレイは、そのビューの上に光を追加します。ピクセルで「暗闇」を投影することはできませんが、ハードウェアの調光機能でレンズを暗くして現実世界を遮断することはできます。
透明性を考慮した設計
有線 XR グラスのディスプレイは加法混色であるため、選択した色はインターフェースの不透明度や透明度に直接影響します。
- 黒が透明としてレンダリングされる: 純粋な黒を表示できません。完全に黒いピクセルはオフになり、ユーザーはその部分のガラスを通して現実世界を直接見ることができます。
- 明るさで視認性を高める: 明るい色がより鮮やかに表示されます。色が濃いほど光の放射量が少なく、透明に見えます。白を追加すると視認性が向上しますが、目の疲れを防ぐために明るくなりすぎないようにしてください。
- 環境ブレンド: UI の色が現実世界と視覚的に混ざり合います。明るい高コントラストの色を使用すると、予測不可能な背景に対して UI を目立たせることができます。
- レンズを暗くすると、デジタル コンテンツの立体感が増す: レンズが暗くなるほど、デジタル コンテンツの透明度が下がり、立体感が増します。エレクトロクロミック調光を強くすると、背景の光がより遮断され、色が鮮やかに見え、暗い要素が際立ちます。
XR のダークモードとライトモード
Android モバイルアプリと同様に、ダークモードとライトモードを使用できます。Android XR では、ユーザーはダークモードとライトモードを切り替えて、個々の好みに最も適したビジュアル スタイルを選択できます。
詳しくは、マテリアル デザインのカラーパターンをご覧ください。
XR のタイポグラフィ
XR で快適なユーザー エクスペリエンスを実現するには、フォントの視認性が重要です。読みやすさを向上させるため、フォントサイズが 14dp 以上、フォントの太さが normal 以上のタイプスケール オプションを使用することをおすすめします。
直感的に使用できるアプリを作成するには、マテリアル デザインのタイポグラフィ ガイダンスに沿って作成することを検討してください。
XR のタイポグラフィ
- さまざまな距離に対応したサイズ: ユーザーは移動しながらさまざまな場所からテキストを見ることを念頭に置いてください。フォントサイズが、遠くからでも読めるほど十分に大きいことを確認します。
- ユーザーの自然な画角にテキストを配置する: 頭の過度な動きや首の負担を軽減します。
- 奥行きとスケールを考慮する: 奥行きの手がかりとスケールを使用して、3D 空間に階層を作成します。
- ユーザーの背景に対してテキストが読みやすいことを確認する: ウェイトが重いほどコントラストが高くなります。環境の色、照明、複雑さに応じて調整します。明るいテキスト値を使用すると、有線 XR グラスでの視認性を維持できます。
- 適応可能なタイポグラフィを使用する: パネルが近すぎたり、遠すぎたり、ユーザーにとって見にくい角度になっている可能性があります。
- 動くオブジェクトにテキストを添付するのを制限する: VR 酔いを引き起こす可能性があります。
XR のアクセシビリティ対応のタイポグラフィ
- 読みやすいフォントを選択する: 小さいサイズや遠くからでも文字の形がはっきり見えるフォントを優先します。
- 文頭を大文字にする（アルファベットの場合）: 文頭を大文字にする（アルファベットの場合）と、すべて大文字のテキストよりも読みやすくなります。
- 行の長さを制限する: 読みやすさを向上させるため、行の長さを短くします。
- アクセシブルな色を選択する: 色覚に障がいのあるユーザーにも読みやすい色の組み合わせを使用します。
- 詰め込みすぎない: テキストに十分な余白を設けます。
- テキストの拡大縮小を許可する: ユーザーが個々のニーズに合わせてテキストサイズを調整できるようにします。
OpenXR™ および OpenXR のロゴは、Khronos Group Inc. が所有する商標であり、中国、欧州連合、日本、英国で商標として登録されています。