Caroselli in primo piano
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
I caroselli in primo piano mostrano una selezione di contenuti pertinenti per l'utente.
Risorse
In evidenza
- Usa caroselli in primo piano per mettere in evidenza contenuti specifici.
- I caroselli in primo piano possono includere elementi dell'interfaccia utente come immagini, titoli, dettagli dei contenuti, video, azioni e controlli di impaginazione.
- In genere i caroselli si trovano nella home page o nella pagina di destinazione dell'app, il che
li rende facilmente accessibili.
- I caroselli in primo piano sono visivamente accattivanti per aiutare a coinvolgere l'utente e
creare un'esperienza immersiva.
- I contenuti visualizzati possono essere personalizzati in base alla cronologia delle visualizzazioni, alle preferenze o alle tendenze attuali dell'utente.
Varianti
Esistono due diversi modi per integrare i caroselli in primo piano:
- Immersivi
- Scheda
Blocco di contenuti
Anatomia
- Testo sovrapposto
- Titolo
- Descrizione
- Pulsante
Specifiche tecniche
Anatomia
- Premessa
- Elemento attivo
- Elementi non attivi
- Elementi totali
Specifiche tecniche
Immersivi
Anatomia
- Sfondo immagine
- Tela cinematografica
- Poster
- Colore dello sfondo
- Blocco di contenuti
- Impaginazione
- Griglia dei contenuti
Specifiche tecniche
Scheda
Anatomia
- Sfondo immagine
- Tela cinematografica
- Poster
- Sfondo scheda
- Blocco di contenuti
- Impaginazione
- Griglia dei contenuti
Specifiche tecniche
Utilizzo
Usa caroselli in primo piano per mostrare e promuovere una selezione curata
di contenuti in un formato coinvolgente, visivamente accattivante e facile da esplorare.
Immagini sullo sfondo
Le immagini sullo sfondo svolgono un ruolo cruciale per migliorare il coinvolgimento
degli utenti in un carosello in primo piano di un'app di streaming.
Immagini di alta qualità
Utilizza immagini ad alta risoluzione visivamente accattivanti e pertinenti ai contenuti della scheda attiva.
check_circle
Cosa fare
Utilizza immagini nitide, visivamente accattivanti e pertinenti al blocco di contenuti.
cancel
Cosa non fare
Evita di utilizzare immagini con testo sullo sfondo.
Gerarchia visiva evidente
Assicurati che lo sfondo non distolga l'attenzione dai contenuti della scheda attiva applicando un retino sopra l'immagine. In questo modo l'utente può concentrarsi sul titolo, sulla descrizione e sul pulsante di invito all'azione della scheda.
check_circle
Cosa fare
Utilizza una retina per migliorare la leggibilità e la digestione dei contenuti.
cancel
Cosa non fare
Assicurati che lo sfondo non influisca sulla leggibilità e sulla visibilità
del resto dei contenuti sullo schermo.
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,["# Featured carousels showcase a selection of content relevant to the user.\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#Carousel(kotlin.Int,androidx.compose.ui.Modifier,androidx.tv.material3.CarouselState,kotlin.Long,androidx.compose.animation.ContentTransform,androidx.compose.animation.ContentTransform,kotlin.Function1,kotlin.Function2)) | Available |\n\nHighlights\n----------\n\n- Use featured carousels to highlight specific content.\n- Featured carousels can include UI elements such as images, headlines, content details, videos, actions, and pagination controls.\n- Carousels are usually located on the app's homepage or landing page, which makes them readily accessible.\n- Featured carousels are visually appealing to help engage the user, and create an immersive experience.\n- The content displayed can be personalized based on the user's viewing history, preferences, or current trends.\n\nVariants\n--------\n\nThere are two different ways of integrating featured carousels:\n\n1. Immersive\n2. Card\n\nContent block\n-------------\n\n### Anatomy\n\n1. Overline text\n2. Title\n3. Description\n4. Button\n\n### Specs\n\nPagination\n----------\n\n### Anatomy\n\n1. Background\n2. Active element\n3. Inactive elements\n4. Total elements\n\n### Specs\n\nImmersive\n---------\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Background color\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nCard\n----\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Card background\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nUsage\n-----\n\nUse featured carousels to showcase and promote a curated selection\nof content in an engaging, visually appealing, and simple to navigate format.\n\n### Images in backgrounds\n\nImages in backgrounds play a crucial role in enhancing user engagement\nin a streaming app featured carousel.\n\n### High quality imagery\n\nUse high-resolution images that are visually appealing and relevant\nto the content of the focused card. \ncheck_circle\n\n### Do\n\nKeep images clean, visually appealing, and relevant to the content block. \ncancel\n\n### Don't\n\nAvoid using images with text in the background.\n\n### Obvious visual hierarchy\n\nEnsure that the background does not distract from the focused card's\ncontent by using a scrim over the image; this helps the user maintain\nfocus on the card's title, description, and call-to-action button. \ncheck_circle\n\n### Do\n\nUse a scrim to improve readability and content digestion. \ncancel\n\n### Don't\n\nMake sure the background doesn't affect readability and visibility of the rest of the content on the screen."]]
