Elenchi
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Gli elenchi sono una rappresentazione visiva di uno o più elementi correlati.
Sono comunemente utilizzati per visualizzare una raccolta di opzioni.
Risorse
In evidenza
- Gli elenchi sono una raccolta continua di testo o immagini.
- Gli elenchi devono essere naturali e facili da leggere.
- Gli elenchi sono costituiti da elementi contenenti azioni principali e supplementari rappresentate da icone e testo.
Varianti
Esistono tre tipi di elenchi: elenco di una riga, elenco di due righe ed elenco di tre righe.
- Elenco di una riga: una singola riga per comunicare ogni elemento. Questo design semplice garantisce che ogni articolo sia chiaramente distinto dall'altro.
- Elenco di due righe: utilizza due righe parallele per comunicare ogni elemento.
Questo design strutturato garantisce una leggibilità naturale ed evita il sovraccarico cognitivo.
- Elenco di tre righe: utilizza tre linee parallele per rappresentare ogni elemento.
Questo design decorativo crea un alto livello di evidenza visiva.
Anatomia
- Icona: una piccola immagine che rappresenta un oggetto o un'azione specifici, spesso utilizzata per comunicare visivamente un'idea o un concetto.
- Sovralinea: una breve riga di testo visualizzata sopra il titolo o il sottotitolo, spesso utilizzata per fornire un contesto aggiuntivo o per mettere in evidenza un elemento.
- Titolo: una riga di testo grande e in grassetto che funge da intestazione principale di un elemento di design o di una pagina.
- Sottotitolo: una riga di testo più piccola che fornisce informazioni aggiuntive o un contesto sotto un titolo principale.
- Controllo: un elemento interattivo che consente all'utente di inserire una decisione.
Stati
Specifiche
Utilizzo
Gli elenchi sono gruppi di testo e immagini organizzati in verticale.
Ottimizzato per la comprensione della lettura, un elenco è costituito da una singola colonna continua di elementi.
Gli elementi dell'elenco possono contenere azioni principali e supplementari rappresentate da icone e testo.
check_circle
Cosa fare
Gli elementi dell'elenco non sono pulsanti. Gli elementi non hanno contenitori. Per impostazione predefinita, gli elementi dell'elenco non sono selezionati e non sono attivi.
warning
Attenzione
Utilizza lo sfondo del contenitore per gli elementi dell'elenco solo se necessario.
Comandi di selezione
I controlli mostrano informazioni e azioni per gli elementi dell'elenco. Possono essere allineati al margine iniziale o finale dell'elemento dell'elenco.
- Caselle di controllo: seleziona uno o più elementi dell'elenco.
- Pulsanti di opzione: seleziona esattamente un
elemento nell'elenco.
- Interruttori: attiva o disattiva un controllo.
check_circle
Cosa fare
Utilizza un indicatore di selezione di icone per mostrare chiaramente l'elemento selezionato in un elenco. In questo modo, gli utenti potranno identificare facilmente l'elemento selezionato e migliorare l'esperienza utente complessiva.
cancel
Cosa non fare
Evita di fare affidamento solo sul colore di sfondo per indicare la selezione in un elenco.
cancel
Cosa non fare
Evita di inserire pulsanti all'interno di un elemento dell'elenco, perché potrebbero creare confusione su quale elemento è attualmente attivo.
Icone
check_circle
Cosa fare
Se nell'elenco mostri lo stesso tipo di contenuti, ometti le icone per ridurre il rumore visivo e migliorare l'esperienza utente. Evita di utilizzare icone in un elenco se non hanno uno scopo e non forniscono informazioni aggiuntive.
cancel
Cosa non fare
Evita di utilizzare la stessa icona per tutti gli elementi di un elenco. Questo può essere visivamente opprimente e creare confusione per gli utenti. Utilizza le icone solo quando aggiungono valore o forniscono informazioni aggiuntive.
Avatar e immagini
Gli elementi dell'elenco possono includere immagini ritagliate in un cerchio per rappresentare una persona o un'entità.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[null,null,["Ultimo aggiornamento 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."]]
