Listen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Listen sind eine visuelle Darstellung von einem oder mehreren ähnlichen Elementen.
Sie werden häufig verwendet, um eine Reihe von Optionen anzuzeigen.
Ressourcen
Highlights
- Listen sind eine fortlaufende Sammlung von Text oder Bildern.
- Listen sollten natürlich wirken und übersichtlich sein.
- Listen bestehen aus Elementen mit primären und sekundären Aktionen, die durch Symbole und Text dargestellt werden.
Varianten
Es gibt drei Arten von Listen: Listen mit einer, zwei oder drei Zeilen.
- Einzeilige Liste: Jedes Element wird in einer einzigen Zeile angegeben. Durch dieses einfache Design sind die einzelnen Elemente klar voneinander zu unterscheiden.
- Zweizeilige Liste: Für jedes Element werden zwei parallele Zeilen verwendet.
Dieses strukturierte Design sorgt für eine natürliche Lesbarkeit und verhindert eine kognitive Überlastung.
- Dreistrich-Liste: Hier werden drei parallele Linien verwendet, um jedes Element darzustellen.
Dieses dekorative Design sorgt für eine hohe visuelle Präsenz.
Anatomie
- Symbol: Eine kleine Grafik, die ein bestimmtes Objekt oder eine bestimmte Aktion darstellt. Sie wird oft verwendet, um eine Idee oder ein Konzept visuell zu vermitteln.
- Überschrift: Eine kurze Textzeile, die über dem Titel oder der Zwischenüberschrift erscheint. Sie wird oft verwendet, um zusätzlichen Kontext oder Betonung zu bieten.
- Titel: Eine große, fett formatierte Textzeile, die als Hauptüberschrift eines Designelements oder einer Seite dient.
- Untertitel: Eine kleinere Textzeile, die unter einem Haupttitel zusätzliche Informationen oder einen Kontext liefert.
- Steuerelement: Ein interaktives Element, mit dem Nutzer eine Entscheidung treffen können.
Bundesstaaten
Technische Daten
Nutzung
Listen sind vertikal angeordnete Text- und Bildgruppen.
Eine Liste besteht aus einer einzigen durchgehenden Spalte mit Elementen und ist für die Lesekompetenz optimiert.
Listenelemente können primäre und zusätzliche Aktionen enthalten, die durch Symbole und Text dargestellt werden.
check_circle
Dos
Listenelemente sind keine Schaltflächen. Die Artikel haben keine Container. Listenelemente sind standardmäßig nicht ausgewählt und nicht fokussiert.
warning
Achtung
Verwenden Sie den Containerhintergrund für Listenelemente nur, wenn es erforderlich ist.
Auswahlsteuerung
Steuerelemente enthalten Informationen und Aktionen für Listenelemente. Sie können am Anfang oder Ende des Listenelements ausgerichtet werden.
- Kontrollkästchen: Wählen Sie ein oder mehrere Listenelemente aus.
- Optionsfelder: Wählen Sie genau einen Eintrag in der Liste aus.
- Schalter: Mit einem Schalter können Sie ein Steuerelement aktivieren oder deaktivieren.
check_circle
Dos
Verwenden Sie ein Symbol, um das ausgewählte Element in einer Liste deutlich zu kennzeichnen. So können Nutzer leichter erkennen, welchen Artikel sie ausgewählt haben, und die Nutzerfreundlichkeit insgesamt verbessern.
cancel
Don'ts
Verwenden Sie nicht nur die Hintergrundfarbe, um die Auswahl in einer Liste anzuzeigen.
cancel
Don'ts
Platzieren Sie keine Schaltflächen in einem Listenelement, da dies zu Verwirrung darüber führen kann, welches Element gerade im Fokus ist.
Symbole
check_circle
Dos
Wenn Sie in der Liste denselben Inhaltstyp anzeigen, lassen Sie Symbole weg, um visuellen „Lärm“ zu reduzieren und die Nutzerfreundlichkeit zu verbessern. Verwenden Sie in einer Liste keine Symbole, wenn sie keinen Zweck erfüllen und keine zusätzlichen Informationen liefern.
cancel
Don'ts
Verwenden Sie nicht dasselbe Symbol für alle Elemente in einer Liste. Das kann für Nutzer visuell überfordernd und verwirrend sein. Verwenden Sie Symbole stattdessen nur, wenn sie einen Mehrwert bieten oder zusätzliche Informationen liefern.
Avatare und Bilder
Listenelemente können Bilder in einem kreisförmigen Zuschnitt enthalten, um eine Person oder Entität darzustellen.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-27 (UTC)."],[],[],null,["# Lists are a visual representation of one or more related items.\nThey are commonly used to display a collection of options.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.ListItemShape,androidx.tv.material3.ListItemColors,androidx.tv.material3.ListItemScale,androidx.tv.material3.ListItemBorder,androidx.tv.material3.ListItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource)) | Available |\n\nHighlights\n----------\n\n- Lists are a continuous collection of text or images.\n- Lists should feel natural and be scannable.\n- Lists are made up of items containing primary and supplemental actions represented by icons and text.\n\nVariants\n--------\n\nThere are three types of lists: one-line list, two-line list, and\nthree-line list.\n\n1. **One-line list**: A single line to communicate each item. This simple design ensures each item is clearly distinct from the other.\n2. **Two-line list**: Uses two parallel lines to communicate each item. This structured design ensures natural readability and avoids cognitive overload.\n3. **Three-line list**: Uses three parallel lines to represent each item. This decorative design creates a high level of visual prominence.\n\nAnatomy\n-------\n\n1. **Icon**: A small graphic that represents a specific object or action, often used to visually communicate an idea or concept.\n2. **Overline**: A short line of text that appears above title or subtitle, often used to provide additional context or emphasis.\n3. **Title**: A large, bold line of text that serves as the main heading of a design element or page.\n4. **Subtitle**: A smaller line of text that provides additional information or context below a main title.\n5. **Control**: An interactive element that allows the user to input a decision.\n\nStates\n------\n\nSpec\n----\n\nUsage\n-----\n\nLists are vertically organized groups of text and images.\nOptimized for reading comprehension, a list consists of a single\ncontinuous column of items.\nList items can contain primary and supplemental actions represented\nby icons and text. \ncheck_circle\n\n### Do\n\nList items are not buttons. The items don't have containers. List items are, by default, unselected and unfocused. \nwarning\n\n### Caution\n\nUse container background for list items only when necessary.\n\n### Selection controls\n\nControls display information and actions for list items. They can be aligned\nto the leading or trailing edge of the list item.\n\n\n\u003cbr /\u003e\n\n1. **Checkboxes**: Select one or more list items.\n2. **Radio buttons**: Select exactly one item in the list.\n3. **Switches**: Toggle a control on or off.\n\ncheck_circle\n\n### Do\n\nUse an icon selection indicator to clearly show the selected item in a list. This will help users easily identify which item they have selected and improve the overall user experience. \ncancel\n\n### Don't\n\nAvoid relying solely on the background color to indicate selection in a list. \ncancel\n\n### Don't\n\nAvoid placing buttons inside a list item as it can cause confusion about which element is currently in focus.\n\n### Icons\n\ncheck_circle\n\n### Do\n\nIf you're showing the same type of content in the list, omit icons to reduce visual noise and improve the user experience. Avoid using icons in a list when they serve no purpose and don't provide additional information. \ncancel\n\n### Don't\n\nAvoid using the same icon for all items in a list. This can be visually overwhelming and confusing for users. Instead, use icons only when they add value or provide additional information.\n\n### Avatars and images\n\nList items can include images in a circular crop to represent a\nperson or entity."]]
