アイコン マーカー

アイコン マーカーは空間アノテーション システムの一部です。アイコン マーカーを使用して、現実世界のオブジェクトにアノテーションを付けることができます。

UI 要素がある場合とない場合のアイコン マーカーの概要

原則

コンテキスト: アイコン マーカーは、現実世界のオブジェクトまたはポイントにロックされます。

簡潔: アイコン マーカーは、空間アンカーを簡潔に表す視覚的なインジケーターです。

使い方と配置

アイコン マーカーは、ユーザーの環境で関心のあるオブジェクトをマークする、アイコンボタンのような UI 要素です。アイコン マーカーは、空間アンカーに使用される空間マーカーの一種です。

すべきこと

アイコン マーカーを使用して、現実世界のオブジェクトに注釈を付けます。

すべきでないこと

アイコンボタンが適している場合は、装飾要素や現実世界のオブジェクト以外のアノテーションにアイコン マーカーを使用します。

他の Jetpack Compose Glimmer コンポーネントをマーカーと組み合わせることで、ユーザーの周囲の状況をより明確に把握したり、分析情報を得たりできます。

すべきこと

段階的な情報開示を使用して、ユーザーがさらに詳しい情報にアクセスできるようにします。

すべきでないこと

マーカーに UI を追加して過負荷にすると、ユーザーの環境に大きな干渉が生じます。

コンテンツとラベルは、さまざまな向きで配置できます。マーカーと、それに付随する UI は、空間 UI として動作する必要があります。つまり、マークされたオブジェクトの実際の距離が、一定の角度の DP サイズを使用して、UI のサイズに反映される必要があります。

2 枚のグリマーカードと、関連商品に付けられたマーカー 視覚的な煩雑さを避けるために、マーカーを明確に定義し、ビュー内のマーカーの数を制限します。複数のマーカーが必要な場合は、それらを 1 つのより目立つマーカーとしてクラスタ化し、段階的に表示できるようにします。

州

アイコン マーカーはアイコンボタンとよく似ています。主な違いは、無効状態ではなく、非インタラクティブ状態があることです。

アイコン マーカーには、非インタラクティブなバリアントとインタラクティブなバリアントがあります。 スポットのマークなど、非インタラクティブな状態で物理世界にアノテーションを付けます。

利用可能な情報が他にもある場合は、ボタン アフォーダンスを持つインタラクティブな状態を使用できます。ユーザーがアイコン マーカーをタップすると、詳細情報を含む Glimmer カードが表示されます。

解剖学

アイコン マーカー自体は、固定の UI 配置と向きを可能にするパディングを備えた小さなアイコンボタン UI 要素です。アイコン マーカーでは、アイコンの代わりに大きなドットまたは小さなドットを使用することもできます。インタラクティブな状態には、ボタンの状態を示す視覚的なアフォーダンスが含まれます。

アイコン マーカーには、インタラクティブな状態と非インタラクティブな状態があり、フォーカス、押下、有効化の状態もあります。

パディング

水平方向と垂直方向に配置された UI には中程度のパディングがあり、斜めにペア設定された要素にはデフォルトで 0 dp のパディングがあります。

水平方向と垂直方向の要素のデフォルトのパディングは 12 dp

配置

UI 要素は、水平、垂直、または斜めの位置に配置できます。

上部中央と右上に配置された Glimmer UI 要素

向き

コンテンツは、ユーザーに向かってビルボード表示されるようにし、重力を考慮して、コンテンツが整理されているように感じられるようにする必要があります。

カスタマイズ

視覚的なアフォーダンスを統一するため、アイコン マーカーはカスタマイズしないでください。ただし、アタッチされた UI 要素の向きと配置はカスタマイズできます。

プロパティ カスタマイズ デフォルト
アイコン はい 大きいドット、小さいドット、アイコン
パディング いいえ 上部中央、右中央、下部中央、左中央 = 中 左上、右上、右下、左下 = 0 dp
配置 はい TopLeft、TopCenter、TopRight、CenterLeft、CenterRight、BottomLeft、BottomCenter、BottomRight
向き はい RotateToLookAtUser: 回転角度に関係なく、ドットがユーザーに向かってビルボードされます。