Android XR 差別化アプリを構築する際は、空間 UI を使用して、ユーザーの物理環境または仮想環境にコンテンツを配置することをおすすめします。アプリを空間パネルやオービターに分割したり、空間エレベーションを追加したりできます（このページで詳しく説明します）。空間動画をデザインに組み込むこともできます。
空間パネル
空間パネルは、Android XR アプリの基本的な構成要素です。これらを使用すると、ユーザーの空間全体にコンテンツが広がる、無制限のディスプレイで XR 差別化されたエクスペリエンスを構築できます。空間パネルは、UI 要素、インタラクティブ コンポーネント、没入型コンテンツのコンテナとして機能します。
UI のスケーリングと移動の仕組みを理解する
空間パネルは、ユーザーからの距離に基づいてサイズを自動調整します。この動的なスケーリングにより、さまざまな距離から見ても UI 要素の視認性と操作性が維持されます。サイズは 0.75 メートルから 1.75 メートルの間で一定です。その後、スケーリング率は 1 メートルあたり 0.5 メートルで増加し、要素は小さく表示されます。
システム UI との競合を避けるため、デフォルトのパネル移動制限内に収めます。
- 最小深度: ユーザーから 0.75 m
- 最大深度: ユーザーから 5 メートル
ユーザーは、空間パネルを拡大または縮小して、ユーザーからの距離に関係なく、はっきりと見えるようにすることができます。ユーザーが空間パネルを移動すると、Android XR は自動的にそのサイズをスケーリングします。
空間パネルのサイズ
Android XR は、幅広いユーザーにとって快適で、読みやすく、使いやすいアプリを作成できるように設計されています。最適なエクスペリエンスを実現するため、システムは 0.868 dp-to-dmm を使用します。ヘッドセットで表示されるアプリは、スマートフォンやタブレットで表示されるアプリよりもユーザーから遠くに見えるため、使いやすくするには大きくする必要があります。
フルスペースでは、空間パネルの最小サイズはありません。最大サイズは、物理的な制限により 2, 560 dp × 1, 800 dp です。
空間パネルの配置場所
フルスペースでは、パススルー環境と仮想環境の両方でパネルの配置を決定できます。ユーザーがホームスペースからフルスペースに切り替えても、カスタム位置を割り当てない限り、要素は同じ予測可能な位置に留まります。
ユーザーの視線から 1.75 メートルの位置にパネルの中心を生成します。 ユーザーは下を向く傾向があるため、快適性を最大限に高めるには、パネルの垂直方向の中心をユーザーの目の高さより 5° 下に配置します。
快適性を最適化するには、ユーザーの画角の中心 41° にコンテンツを配置します。これにより、視認性が確保され、頭や体を過度に動かす必要がなくなります。
ユーザーが空間内を移動しても、空間パネルは元の位置に留まります。
Android XR には、ユーザーが要素をシームレスに操作できるようにし、開発プロセスを簡素化するための、すぐに使えるインタラクション パターンが用意されています。ユーザーは、要素を移動して個人用スペースに合わせることができます。移動とサイズ変更の動作を構成できます。
ユーザーが空間内の実世界のオブジェクトを基準にして UI 要素を配置できるように、ユーザーが床、椅子、壁、天井、テーブルなど、実世界の特定の場所に空間パネルをアンカーできるようにします。アンカーはパススルーでのみ使用できます。
ユーザーが安定感と方向感覚を保てるように、ユーザーが空間パネルを現実世界の特定の場所（床、椅子、壁、天井、テーブルなど）に固定できるようにします。アンカーはパススルーでのみ使用できます。
独自の空間レイアウトを作成する
アプリを複数の空間パネルに分解し、任意のレイアウトに配置できます。Spatial UI API では、パネルの数に制限はありません。これには、行と列、フラットな行とカーブした行を含むレイアウトを作成する機能が含まれます。空間パネルの位置は、特定の位置にすることも、任意の位置にすることもできます。空間 UI レイアウトを開発する方法を学習する。
フラットな行レイアウト
曲線行レイアウト
任意の位置のレイアウト
空間動画
空間動画を使用すると、コンテンツに立体的で臨場感あふれる雰囲気を加えることができます。これらの動画は、フラット、180° 半球、360° 球面のサーフェスに表示されるモノスコープ動画またはステレオスコープ動画としてデザインに組み込むことができます。
オービター
オービターは、通常、空間パネル内のコンテンツや、オービターが固定されている他のエンティティを操作するために使用されるフローティング UI 要素です。コンテンツのスペースをより広く確保でき、メインのコンテンツを表示したまま、ユーザーが機能にすばやくアクセスできるようになります。オービターを使用すると、既存の UI コンポーネントを統合したり、新しい UI コンポーネントを作成したりできます。
オービターは、ユーザーのニーズと意図を慎重に考慮したうえで、控えめに使用する必要があります。空間化された UI 要素が多すぎると、コンテンツ疲れを引き起こし、過剰な競合アクションでユーザーを圧倒する可能性があります。ナビゲーション レールやナビゲーション バーなど、いくつかの主要なナビゲーション コンポーネントを適応させることをおすすめします。
ホームスペースのマテリアル デザインの非空間化ナビゲーション レール
フルスペースでのマテリアル デザインの空間ナビゲーション レール
ホームスペースのマテリアル デザインの空間化されていないナビゲーション バー
フルスペースでのマテリアル デザインの空間ナビゲーション バー
ガイドライン
- パネルのパディングを調整して、フレックスまたはパーセンテージの位置を決定します。
- オービターのオフセットを決定します。推奨される視覚的な距離は 20 dp です。
- 必要に応じて、空間高度レベルを使用してオービターの高度レベルを調整します。デフォルトでは、Z 深度で 15 dp 上げられます。
- パネルのサイズ変更時に、サイズを固定またはフレキシブルにすることができます。
- オービターをコンテンツに合わせて動的に拡張するかどうかを決定します。
避けるべき設計パターン
- オービターのサイズの 50% を超える重複は避けてください。
- オービターを空間パネルから離しすぎないようにしてください。
- 絶対 X 座標または Y 座標は使用しないでください。
- オービターを過剰に使用しないでください。
空間標高
コンポーネントに空間標高を追加すると、空間パネルの上に Z 軸で表示されます。これにより、ユーザーの注意を引き、階層を改善し、読みやすさを向上させることができます。
| 空間の高さレベル | コンポーネント | DP |
|---|---|---|
| 0 | 未割り当て | .1dp |
| 1 | オービター | 16 dp |
| 2 | 未割り当て | 24 dp |
| 3 | SpatialPopup | 32 dp |
| 4 | 未割り当て | 40 dp |
| 5 | SpatialDialog | 56 dp |
大画面アプリのマテリアル デザイン ダイアログ
Android XR で空間エレベーションを使用するダイアログ
大画面アプリのマテリアル デザインのプルダウン メニュー
Android XR で標高を使用したプルダウン メニュー
避けるべき設計パターン
- ボトムシートやサイドシートなどの大きな領域や平面を空間化したり、高さを上げたりしないでください。
- スクロール可能なコンテンツを含む UI 要素をエレベートしないでください。
ターゲット サイズを大きくする
XR アプリでは、ターゲットはユーザーが操作するポインティング可能な領域です。Android XR はマテリアル デザインのターゲット ガイドラインに準拠しており、精度、快適性、ユーザビリティを向上させるために、より大きなターゲットを推奨しています。
タイポグラフィのアクセシビリティを高める
フォントの読みやすさは、XR で快適なユーザー エクスペリエンスを実現するために不可欠です。読みやすさを向上させるため、フォントサイズが 14 dp 以上、フォントの太さが標準以上のタイプスケール オプションを使用することをおすすめします。
既存のアプリがマテリアル デザインのガイドラインに準拠している場合、そのアプリはすでに Android XR 向けに最適化されています。マテリアル デザインに基づいて、新しいアプリのタイポグラフィを定義できます。
マテリアル デザインのコンポーネントとレイアウトを使用する
Android XR アプリを設計する際は、マテリアル デザインのコンポーネント ライブラリとアダプティブ レイアウトを活用してください。これらのインタラクティブなビルディング ブロックは、開発をスピードアップし、コア機能とイノベーションに集中できるようにします。
XR 向けマテリアル デザインは、空間 UI の動作により、マテリアル 3 コンポーネントとアダプティブ レイアウトを強化します。これにより、アプリのプラットフォームへのネイティブ感を高め、スペースを最適化できます。
このページで説明するように、既存の UI コンポーネントをオービターに配置して空間エレベーションを適用することで、空間化することもできます。
マテリアル 3 デザインキットをダウンロードして、すぐに始めましょう。