Listen sind eine visuelle Darstellung eines oder mehrerer verwandter Elemente. Sie werden häufig verwendet, um eine Reihe von Optionen anzuzeigen.
Ressourcen
| Typ | Link | Status |
|---|---|---|
| Design | Designquelle (Figma) | Verfügbar |
| Implementierung | Jetpack Compose | Verfügbar |
Highlights
- Listen sind eine fortlaufende Sammlung von Text oder Bildern.
- Listen sollten sich natürlich anfühlen und überschaubar sein.
- Listen bestehen aus Elementen, die Primär- und ergänzende Aktionen, die durch Symbole und Text dargestellt werden.
Varianten
Es gibt drei Arten von Listen: einzeilige Liste, zweizeilige Liste und dreizeilige Liste.
- Einzeilige Liste: Eine Zeile für jeden Eintrag. Diese einfache stellt sicher, dass sich die einzelnen Elemente eindeutig voneinander unterscheiden.
- Zweizeilige Liste: Die Kommunikation der einzelnen Elemente erfolgt über zwei parallele Linien. Dieses strukturierte Design sorgt für eine natürliche Lesbarkeit und vermeidet kognitive Beeinträchtigungen. Überlastung.
- Dreizeilige Liste: Jedes Element wird mit drei parallelen Linien dargestellt. Dieses dekorative Design verleiht ihm eine starke visuelle Auffälligkeit.
Anatomie
- Symbol: Eine kleine Grafik, die ein bestimmtes Objekt oder eine bestimmte Aktion repräsentiert. um Ideen oder Konzepte visuell zu vermitteln.
- Dachzeile: kurze Textzeile, die über dem Titel oder Untertitel erscheint werden oft verwendet, um zusätzlichen Kontext oder Betonung zu schaffen.
- Titel: Eine große, fett formatierte Textzeile, die als Hauptüberschrift der ein Designelement oder eine Seite.
- Untertitel: Eine kleinere Textzeile mit zusätzlichen Informationen. oder Kontext unter einem Haupttitel.
- Steuerung: Ein interaktives Element, das dem Nutzer die Eingabe einer Entscheidung ermöglicht.
Bundesstaaten
Technische Daten
Nutzung
Listen sind vertikal organisierte Gruppen von Text und Bildern. Eine für das Leseverständnis optimierte Liste besteht aus einer fortlaufende Spalte von Elementen. Listenelemente können primäre und ergänzende Aktionen enthalten, durch Symbole und Text.
Dos
Listenelemente sind keine Schaltflächen. Die Elemente haben keine Container. Listenelemente sind standardmäßig nicht ausgewählt und nicht hervorgehoben.
Achtung
Verwenden Sie den Containerhintergrund nur bei Bedarf für Listenelemente.
Auswahlsteuerung
Mit Steuerelementen werden Informationen und Aktionen für Listenelemente angezeigt. Sie können aufeinander abgestimmt werden, zum Anfang oder Ende des Listenelements hinzu.
- Kästchen: Wählen Sie ein oder mehrere Listenelemente aus.
- Optionsfelder: Wählen Sie genau ein Optionsfeld aus. Element in der Liste.
- Schalter: Hier können Sie Steuerelemente ein- oder ausschalten.
Dos
Verwenden Sie eine Symbolauswahlanzeige, um das ausgewählte Element deutlich in einer Liste anzuzeigen. So können Nutzende das von ihnen ausgewählte Element leicht erkennen und die gesamte User Experience verbessern.
Don'ts
Verlassen Sie sich nicht ausschließlich auf die Hintergrundfarbe, um die Auswahl in einer Liste zu kennzeichnen.
Don'ts
Vermeiden Sie es, Schaltflächen innerhalb eines Listenelements zu platzieren, da dies zu Verwirrung darüber führen kann, welches Element gerade im Fokus ist.
Symbole
Dos
Wenn Sie Inhalte der gleichen Art in der Liste zeigen, lassen Sie Symbole weg, um visuelles Rauschen zu reduzieren und die Nutzererfahrung zu verbessern. Vermeiden Sie die Verwendung von Symbolen in einer Liste, wenn sie keinen Zweck erfüllen und keine zusätzlichen Informationen enthalten.
Don'ts
Verwenden Sie nicht für alle Elemente in einer Liste dasselbe Symbol. Das kann für Nutzende visuell überwältigend und verwirrend sein. Verwenden Sie Symbole nur dann, wenn sie einen Mehrwert bieten oder zusätzliche Informationen liefern.
Avatare und Bilder
Listenelemente können kreisförmig zugeschnittene Bilder enthalten, die eine Person oder Rechtssubjekt.
