Elenco immersivo
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
L'elenco immersivo è una combinazione di una riga di contenuti e un'anteprima del
l'elemento selezionato. I contenuti vengono mostrati in un'area visibile più grande.
Risorse
In evidenza
- Anteprima dei contenuti dinamici. Quando un utente scorre la riga di
contenuti, l'area di anteprima si aggiorna automaticamente per visualizzare
elemento attualmente selezionato.
- Il componente Elenco immersivo ha un'area visibile più grande per
mostrare contenuti, semplificando così la visualizzazione e l'apprezzamento da parte degli utenti
i dettagli visivi dell'elemento selezionato.
- Gli elenchi immersivi forniscono informazioni pertinenti e contestuali
sull'elemento selezionato, aiutando gli utenti a prendere decisioni consapevoli
abbandonando l'esperienza di navigazione.
- Il componente Elenco immersivo utilizza un'informativa progressiva per rivelare
maggiori dettagli sui contenuti man mano che gli utenti navigano,
caricare e mantenere
il coinvolgimento degli utenti.
- Il componente Elenco immersivo garantisce interazioni coerenti in tutta l'app,
offrendo agli utenti un'esperienza familiare e prevedibile.
Anatomia
- Sfondo immagine
- Blocco di contenuti
- Scheda su stato attivo
- Griglia di contenuti
- Tela cinematografica
- Poster
- Colore sfondo
Specifiche tecniche
Comportamento
Quando navighi tra le schede nell'elenco immersivo, i dettagli del
la scheda selezionata
appare progressivamente sullo sfondo.
Quando l'elenco immersivo è a fuoco, la sua altezza aumenta per rivelare
informazioni aggiuntive, come il titolo dello sfondo e
come mostrato nel seguente video.
Utilizzo
Usa caroselli immersivi per attirare l'attenzione su contenuti in primo piano
contenuti sponsorizzati, ad esempio nuove uscite, programmi popolari o contenuti esclusivi
titoli. L'area visibile più grande e l'anteprima dinamica offrono un'immagine
per mettere in evidenza questi elementi
ad alta priorità.
Visualizzazione dell'immagine
- Scheda dello stato attivo: mentre l'utente naviga nel carosello, viene visualizzata la
la scheda con lo stato attivo è enfatizzata visivamente, scalando la scheda di 1,1, utilizzando un bordo,
e altri segnali visivi come elevazione per indicare la sua selezione. Assicurati che i contenuti
i titoli nella miniatura della scheda con lo stato attivo siano chiaramente
visibili e più facili da leggere.
- Immagine di sfondo: quando una scheda è a fuoco, viene utilizzato uno sfondo corrispondente
l'immagine viene mostrata nell'area visibile più grande. Consigliamo questo sfondo
è di alta qualità e visivamente accattivante, in quanto fornisce un ambiente immersivo
uno sfondo accattivante per i contenuti.
Composizione
check_circle
Cosa fare
Scala e allinea il soggetto nell'angolo in alto a destra per creare un'esperienza cinematografica.
cancel
Cosa non fare
Evita di usare un ritaglio a schermo intero per ritagliare il soggetto sotto i contenuti.
Per assicurarti che le immagini utilizzate come sfondi nel componente Elenco immersivo
abbiano un bell'aspetto, assicurati di ridimensionarle in modo che non siano sfocate
o distorto.
Proporzioni
Se possibile, utilizza le proporzioni 16:9 per le immagini di sfondo per assicurarti
un layout coerente e accattivante.
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,["# Immersive list is a combination of a row of content \\& preview of the\nselected item. It features content in a larger viewport.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Sample](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:tv/samples/src/main/java/androidx/tv/samples/ImmersiveListSamples.kt;drc=5920fece16ad6723107098f24a492a25937cd51a) | N/A |\n\nHighlights\n----------\n\n- Dynamic content preview. When a user navigates through the row of content, the preview area automatically update to display the current focused item.\n- The Immersive list component features a larger viewport for displaying content, making it easier for users to view and appreciate the visual details of the focused item.\n- Immersive lists provide relevant and contextual information about the focused item, helping users make informed decisions without leaving the browsing experience.\n- The Immersive list component uses progressive disclosure to reveal more details about the content as users navigate, reducing cognitive load and maintaining user engagement.\n- The Immersive list component ensures consistent interactions across the app, providing users with a familiar and predictable experience.\n\nAnatomy\n-------\n\n1. Image background\n2. Content block\n3. Card on focus\n4. Content grid\n\n1. Cinematic scrim\n2. Poster\n3. Background color\n\nSpecs\n-----\n\nBehavior\n--------\n\nWhen navigating between cards in the Immersive list, the details of the\nselected card are progressively revealed in the background. \n\nWhen the immersive list is in focus, its height increases to reveal\nadditional information, such as the background title and\ndescription, as shown in the following video.\n\nUsage\n-----\n\nUse immersive carousels when you want to draw attention to featured or\npromoted content, such as new releases, popular shows, or exclusive\ntitles. The larger viewport and dynamic preview provide a compelling\nway to showcase these high-priority items.\n\n### Image display\n\n1. **Card focus**: As the user navigates through the carousel, the focused card is visually emphasized, scaling the card by 1.1, using a border, and other visual cues as elevation to indicate its selection. Ensure content titles inside the thumbnail of the focused card are clearly visible and easier to read.\n2. **Background image**: When a card is in focus, a corresponding background image is displayed in the larger viewport. We recommend this background image is high-quality and visually appealing, as it provides an immersive and engaging backdrop for the content.\n\n### Composition\n\ncheck_circle\n\n### Do\n\nScale and align the subject to the top right corner creating a cinematic experience. \ncancel\n\n### Don't\n\nAvoid using full screen crop that will make crop the subject under the content.\n\nTo ensure the images used as backgrounds in the Immersive list component\nlook good, make sure to scale them appropriately so they are not blurry\nor distorted.\n\n### Aspect ratio\n\nUse a 16:9 ratio for background images whenever possible to ensure\na visually appealing and consistent layout."]]
