Liste immersive
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Une liste immersive est une combinaison
d'une ligne de contenu et un aperçu
l'élément sélectionné. Son contenu s'affiche dans une fenêtre d'affichage plus grande.
Ressources
Sélection
- Aperçu du contenu dynamique. Lorsqu'un utilisateur parcourt la ligne de
contenu, la zone d'aperçu est automatiquement mise à jour pour afficher
l'élément sélectionné.
- Le composant "Liste immersive" dispose d'une fenêtre d'affichage plus grande pour
afficher du contenu, ce qui permet aux utilisateurs de le regarder et de l'apprécier
les détails visuels
de l'élément sélectionné.
- Les listes immersives fournissent des informations pertinentes et contextuelles
sur l'élément sélectionné, ce qui aide les utilisateurs à prendre des décisions éclairées sans
de quitter l'expérience
de navigation.
- Le composant "Liste immersive" utilise la divulgation progressive pour révéler
plus de détails sur le contenu lorsque les utilisateurs
naviguent, réduisant ainsi les capacités cognitives
et maintenir l'engagement utilisateur.
- Le composant "Liste immersive" garantit des interactions cohérentes dans l'application,
offrant aux utilisateurs une expérience familière et prévisible.
Anatomie
- Arrière-plan avec image
- Blocage de contenu
- Fiche mise au point
- Grille de contenu
- Fond de scène
- Affiche
- Couleur du fond
Caractéristiques techniques
Comportement
Lorsque vous naviguez entre les fiches de la liste immersive, les détails
sélectionnée s'affichent progressivement en arrière-plan.
Lorsque la liste immersive est au centre, sa hauteur augmente pour révéler
des informations supplémentaires, telles que le titre de l'arrière-plan et
comme illustré dans la vidéo suivante.
Utilisation
Utilisez des carrousels immersifs lorsque vous souhaitez attirer l'attention sur une sélection
contenus faisant l'objet de la promotion, tels que des nouveautés, des émissions populaires ou des
titres. La fenêtre d'affichage plus grande
et l'aperçu dynamique offrent
de mettre en avant ces éléments prioritaires.
Affichage de l'image
- Sélection de la fiche: lorsque l'utilisateur parcourt le carrousel,
la carte sélectionnée est mise en valeur visuellement, elle est mise à l'échelle de 1, 1,
et d'autres repères visuels comme
l'élévation pour indiquer sa sélection. Vérifier le contenu
les titres dans la miniature de la fiche sélectionnée sont clairement
visibles et plus faciles à lire.
- Image de fond: lorsqu'une fiche est mise au point, un arrière-plan
s'affiche dans la fenêtre d'affichage plus grande. Nous vous recommandons d'utiliser cet arrière-plan.
est de haute qualité et visuellement attrayante, car elle offre une expérience immersive
une toile de fond attrayante pour le contenu.
Composition
check_circle
À faire
Ajustez et alignez le sujet dans l'angle supérieur droit pour créer une expérience cinématique.
cancel
À éviter
Évitez d'utiliser le recadrage plein écran, car cela rendra le sujet sous le contenu.
Pour s'assurer que les images utilisées comme arrière-plans dans le composant de liste immersive
sont corrects, veillez à les mettre à l'échelle
de manière appropriée afin qu'elles ne soient pas floues
ou déformées.
Format
Dans la mesure du possible, utilisez le format 16:9 pour les images de fond afin de vous assurer
une mise en page visuellement
attrayante et cohérente.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[null,null,["Dernière mise à jour le 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."]]
