Repères d'icône

Le repère d'icône fait partie du système d'annotation spatiale. Utilisez des repères d'icônes pour annoter des objets du monde réel.

Présentation des icônes de repère avec et sans élément d'interface utilisateur

Principes

Contextuel : les icônes sont associées à des objets ou des points du monde réel.

Concis : les icônes sont des indicateurs visuels abrégés d'un ancrage spatial.

Utilisation et emplacement

Un repère d'icône est un élément d'interface utilisateur semblable à un bouton d'icône qui marque les objets d'intérêt dans l'environnement de l'utilisateur. Le repère d'icône est un type de repère spatial utilisé pour l'ancrage spatial.

À faire

Utilisez un repère d'icône pour annoter des objets du monde réel.

À éviter

Utilisez des repères d'icône pour les éléments décoratifs ou l'annotation d'objets non réels, lorsqu'un bouton d'icône est plus adapté.

Tout autre composant Glimmer de Jetpack Compose peut être associé à un repère pour fournir des informations plus claires ou plus détaillées sur l'environnement de l'utilisateur.

À faire

Utilisez la divulgation progressive pour permettre à l'utilisateur d'accéder à d'autres informations.

À éviter

Surcharger les repères avec des éléments d'interface utilisateur supplémentaires, car cela interférera davantage avec l'environnement de l'utilisateur.

Le contenu et les étiquettes peuvent être placés dans différentes orientations. Les repères et toute UI associée doivent se comporter comme une UI spatiale, ce qui signifie que la distance réelle de l'objet marqué doit être reflétée dans la taille de l'UI, à l'aide d'une taille DP angulaire constante.

Deux fiches Glimmer et des repères associés aux produits pertinents Définissez clairement les repères pour éviter l'encombrement visuel et limitez le nombre de repères visibles. Si plusieurs repères sont nécessaires, regroupez-les en un seul repère plus visible qui peut être affiché progressivement.

États

Le repère d'icône est très semblable à un bouton d'icône. La principale différence est qu'au lieu d'un état désactivé, il a un état non interactif.

Les repères d'icône ont une variante non interactive et une variante interactive Annotez le monde physique avec l'état non interactif, par exemple en marquant un point d'intérêt.

Si d'autres informations sont disponibles, vous pouvez utiliser l'état interactif qui comporte un bouton. Si l'utilisateur appuie sur le repère d'icône, une fiche Glimmer contenant plus d'informations s'affiche.

Anatomie

Le repère d'icône lui-même est un petit élément d'interface utilisateur de type bouton d'icône avec une marge intérieure permettant un alignement et une orientation fixes de l'interface utilisateur. Le repère d'icône peut également utiliser un grand ou un petit point au lieu d'une icône. L'état interactif inclut une affordance visuelle pour indiquer l'état du bouton.

Les repères d'icône ont un état interactif et non interactif, ainsi que des états "sélectionné", "appuyé" et "activé".

Marges intérieures

Les éléments d'interface utilisateur positionnés horizontalement et verticalement ont une marge intérieure moyenne, tandis que les éléments associés en diagonale ont une marge intérieure par défaut de 0 dp.

Une marge intérieure par défaut de 12 dp pour les éléments horizontaux et verticaux

Alignement

Les éléments d'interface utilisateur peuvent être positionnés horizontalement, verticalement ou en diagonale.

Éléments d'interface utilisateur Glimmer alignés en haut au centre et en haut à droite

Orientation

Le contenu doit être orienté vers l'utilisateur, tout en respectant la gravité pour donner une impression d'organisation.

Personnalisation

Pour conserver une affordance visuelle cohérente, évitez de personnaliser les repères d'icônes. Toutefois, vous pouvez personnaliser l'orientation et l'alignement des éléments d'interface utilisateur associés.

Propriétés Personnalisation Valeurs par défaut
Icône Oui Grand point, petit point, icône
Marges intérieures Non En haut au centre, au centre à droite, en bas au centre, au centre à gauche = moyen En haut à gauche, en haut à droite, en bas à droite, en bas à gauche = 0 dp
Alignement Oui TopLeft, TopCenter, TopRight, CenterLeft, CenterRight, BottomLeft, BottomCenter, BottomRight
Orientation Oui RotateToLookAtUser : le point s'oriente vers l'utilisateur, quel que soit l'angle de rotation.