Symbolmarkierungen

Die Symbolmarkierung ist Teil des räumlichen Annotationssystems. Verwenden Sie Symbolmarkierungen, um reale Objekte zu kennzeichnen.

Übersicht über Symbolmarkierungen mit und ohne UI-Element

Grundsätze

Kontextbezogen: Symbolmarkierungen sind an reale Objekte oder Punkte gebunden.

Prägnant: Symbolmarkierungen sind abgekürzte visuelle Indikatoren für einen räumlichen Anker.

Nutzung und Platzierung

Eine Symbolmarkierung ist ein UI-Element, das wie eine Symbolschaltfläche aussieht und interessante Objekte in der Umgebung des Nutzers markiert. Die Symbolmarkierung ist eine Art räumliche Markierung, die für die räumliche Verankerung verwendet wird.

Das sollten Sie tun

Verwenden Sie eine Symbolmarkierung, um reale Objekte zu kennzeichnen.

Das sollten Sie nicht tun

Verwenden Sie Symbolmarkierungen für dekorative Elemente oder Annotationen von nicht realen Objekten, wenn eine Symbolschaltfläche besser geeignet ist.

Jede andere Jetpack Compose Glimmer-Komponente kann mit einer Markierung kombiniert werden, um die Umgebung des Nutzers genauer zu beschreiben oder Einblicke zu geben.

Das sollten Sie tun

Verwenden Sie die progressive Offenlegung, damit Nutzer zu weiteren Informationen navigieren können.

Das sollten Sie nicht tun

Überladen Sie Markierungen nicht mit zusätzlichen UI-Elementen, da dies die Umgebung des Nutzers stärker beeinträchtigt.

Inhalte und Labels können in verschiedenen Ausrichtungen platziert werden. Markierungen und alle angehängten UI-Elemente sollten sich wie räumliche UI-Elemente verhalten. Das bedeutet, dass die tatsächliche Entfernung des markierten Objekts in der Größe des UI-Elements widergespiegelt werden sollte, wobei eine konstante Winkel-DP-Größe verwendet wird.

Zwei Glimmer-Karten und Markierungen, die an relevanten Produkten angebracht sind Definieren Sie Markierungen klar, um visuelle Unordnung zu vermeiden, und begrenzen Sie die Anzahl der Markierungen in der Ansicht. Wenn mehrere Markierungen erforderlich sind, fassen Sie sie zu einer einzigen, auffälligeren Markierung zusammen, die nach und nach angezeigt werden kann.

Bundesstaaten

Die Symbolmarkierung ist einer Symbolschaltfläche sehr ähnlich. Der Hauptunterschied besteht darin, dass es statt eines deaktivierten Zustands einen nicht interaktiven Zustand hat.

Symbolmarkierungen gibt es in einer nicht interaktiven und einer interaktiven Variante. Anmerkungen zur physischen Welt mit dem nicht interaktiven Status, z. B. Markieren eines POI.

Wenn weitere Informationen verfügbar sind, können Sie den interaktiven Status mit einer Schaltfläche verwenden. Wenn der Nutzer auf die Symbolmarkierung tippt, wird eine Glimmer-Karte mit weiteren Informationen angezeigt.

Anatomie

Die Symbolmarkierung selbst ist ein kleines Symbolschaltflächen-UI-Element mit Padding, das eine feste UI-Ausrichtung und -Orientierung ermöglicht. Anstelle eines Symbols kann die Symbolmarkierung auch einen großen oder kleinen Punkt verwenden. Der interaktive Status umfasst eine visuelle Affordanz, die den Status der Schaltfläche angibt.

Symbolmarkierungen haben einen interaktiven und einen nicht interaktiven Status sowie die Status „Fokussiert“, „Gedrückt“ und „Aktiviert“.

Abstand

Horizontal und vertikal positionierte UI-Elemente haben ein mittleres Padding, während diagonal angeordnete Elemente ein Standard-Padding von 0 dp haben.

Ein Standard-Padding von 12 dp für horizontale und vertikale Elemente

Ausrichtung

UI-Elemente können an horizontalen, vertikalen oder diagonalen Punkten positioniert werden.

Glimmer-UI-Elemente oben in der Mitte und oben rechts ausgerichtet

Ausrichtung

Inhalte sollten sich dem Nutzer zuwenden und gleichzeitig der Schwerkraft folgen, damit sie organisiert wirken.

Anpassung

Um eine einheitliche visuelle Affordanz zu gewährleisten, sollten Sie Symbolmarkierungen nicht anpassen. Sie können jedoch die Ausrichtung der angehängten UI-Elemente anpassen.

Attribute Anpassung Standardeinstellungen
Symbol Ja Großer Punkt, kleiner Punkt, Symbol
Abstand Nein Mitte oben, Mitte rechts, Mitte unten, Mitte links = mittel Oben links, oben rechts, unten rechts, unten links = 0 dp
Ausrichtung Ja TopLeft, TopCenter, TopRight, CenterLeft, CenterRight, BottomLeft, BottomCenter, BottomRight
Ausrichtung Ja RotateToLookAtUser: Der Punkt wird unabhängig vom Drehwinkel auf den Nutzer ausgerichtet.