Listen

Listen sind eine visuelle Darstellung eines oder mehrerer verwandter Elemente. Sie werden häufig verwendet, um eine Reihe von Optionen anzuzeigen.

Weitere Informationen

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äre und ergänzende Aktionen enthalten, die durch Symbole und Text dargestellt werden.

Varianten

Es gibt drei Arten von Listen: eine einzeilige Liste, eine zweizeilige Liste und eine dreizeilige Liste.

1. Einzeilige Liste: Eine Zeile für jeden Eintrag. Dieses einfache Design sorgt dafür, dass sich die einzelnen Elemente deutlich voneinander unterscheiden.
2. 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 Überlastung.
3. Dreizeilige Liste: Jedes Element wird mit drei parallelen Linien dargestellt. Dieses dekorative Design verleiht ihm eine starke visuelle Auffälligkeit.

Anatomie

1. Symbol: Eine kleine Grafik, die ein bestimmtes Objekt oder eine bestimmte Aktion darstellt und oft verwendet wird, um eine Idee oder ein Konzept visuell zu vermitteln.
2. Überstrich: Eine kurze Textzeile, die über dem Titel oder Untertitel erscheint und häufig verwendet wird, um zusätzlichen Kontext oder Betonung bereitzustellen.
3. Titel: Eine große, fett formatierte Textzeile, die als Hauptüberschrift eines Designelements oder einer Seite dient.
4. Untertitel: Eine kleinere Textzeile mit zusätzlichen Informationen oder Kontext unter einem Haupttitel.
5. 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 Liste, die für das Leseverständnis optimiert ist, besteht aus einer einzelnen fortlaufenden Spalte mit Elementen. Listenelemente können primäre und ergänzende Aktionen enthalten, die durch Symbole und Text dargestellt werden.

check_circle

Dos

Listenelemente sind keine Schaltflächen. Die Elemente haben keine Container. Listenelemente sind standardmäßig nicht ausgewählt und nicht hervorgehoben.

warning

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 am Anfang oder Ende des Listenelements ausgerichtet werden.

1. Kästchen: Wählen Sie ein oder mehrere Listenelemente aus.
2. Optionsfelder: Wählen Sie genau ein Element in der Liste aus.
3. Schalter: Hier können Sie Steuerelemente ein- oder ausschalten.

check_circle

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.

cancel

Don'ts

Verlassen Sie sich nicht ausschließlich auf die Hintergrundfarbe, um die Auswahl in einer Liste zu kennzeichnen.

cancel

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

check_circle

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.

cancel

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 Entität darstellen.