Fiches
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Les cartes sont les éléments constitutifs de votre application TV.
Ressources
Sélection
- Utilisez une fiche pour afficher du contenu sur un seul sujet.
- Une fiche peut contenir des images, des titres, du texte, des boutons, des listes et d'autres éléments d'interface utilisateur.
- Une fiche ne peut pas fusionner avec une autre, ni être divisée en plusieurs fiches.
- Il existe six variantes de cartes: standard, classique, compacte, en encart, standard large et classique large.
Variantes
Il existe cinq types de fiches, chacune correspondant à un cas d'utilisation différent:
- Standard
- Classique
- Petite
- Large norme
- Grand classique
Blocs de contenu
Le contenu d'une fiche est organisé en blocs distincts. La conception visuelle de la carte, y compris
l'emphase, indique une hiérarchie. La mise en page des cartes elles-mêmes s’adapte aux types de contenu qu’elles contiennent.
Anatomie
- Titre
- Sous-titre
- Description
- Texte en trop
Caractéristiques techniques
Fiche standard
Anatomie
- Image
- Blocage de contenu
États
Caractéristiques techniques
Carte classique
Anatomie
- Image
- Blocage de contenu
États
Caractéristiques techniques
Carte compacte
Anatomie
- Image
- Blocage de contenu
États
Caractéristiques techniques
Carte large standard
Anatomie
- Image
- Blocage de contenu
États
Caractéristiques techniques
Carte classique large
Anatomie
- Image
- Blocage de contenu
États
Caractéristiques techniques
Utilisation
Les cartes sont des éléments de conception polyvalents qui permettent d'afficher une variété de contenus de manière visuellement attrayante et conviviale. Les sections suivantes explorent les considérations de conception pour les cartes.
Format
Il existe trois formats courants pour les cartes: 16:9, 1:1 et 2:3.
Chaque format a ses points forts. Par conséquent, le meilleur choix dépend de vos besoins spécifiques.
- 16:9 est le format le plus courant pour les cartes. Ce format large convient bien à l'affichage d'images et de vidéos.
- 1:1 correspond à un format carré. C'est un bon choix pour les fiches qui doivent être visuellement équilibrées, comme les acteurs et l'équipe de tournage, les logos de chaîne ou les logos d'équipe.
- Le format 2:3 est plus haut. C'est un bon choix si vous voulez diviser
la grille et mettre plus d'emphase.
En fin de compte, le meilleur moyen de choisir un format pour vos cartes est de tester différentes options et de déterminer ce qui fonctionne le mieux.
Voici quelques exemples d'utilisation de différents formats
1:1
Distribution et équipe
Logos des équipes sportives
2:3
Livres populaires
16:9
Fiches de films
Mise en page et espacement
Vous pouvez faire varier la largeur des cartes en fonction du nombre de cartes visibles à l'écran en implémentant un pic approprié avec un espacement de 20 dp.
Mise en page à une carte
Largeur de la carte : 844 dp
Mise en page à deux cartes
Largeur de la carte : 412 dp
Mise en page à 3 fiches
Largeur de la carte : 268 dp
Mise en page à 4 fiches
Largeur de la carte : 196 dp
Mise en page à 5 fiches
Largeur de la carte : 124 dp
Blocage de contenu
La largeur du bloc de contenu dans une fiche doit être identique à celle de la vignette de l'image. Si vous devez afficher plus de texte dans le bloc de contenu, utilisez une variante de carte large.
check_circle
À faire
Utilisez des fiches larges pour afficher de courtes descriptions, mais seulement si cela est absolument nécessaire. La description ne doit pas dépasser quelques mots.
cancel
À éviter
Évitez les descriptions longues sur les cartes empilées verticalement.
Carte compacte
Les cartes compactes doivent être concises et plus faciles à lire. Le contenu qui précède l'image de fond doit être bref et précis. Évitez les titres trop longs,
les sous-titres ou les descriptions. Cela rend vos cartes plus attrayantes visuellement et plus faciles à lire.
Pour améliorer la lisibilité du texte sur une image, ajoutez une superposition de dégradé noir semi-transparent. Cela assombrit l'arrière-plan sans trop masquer
l'image, ce qui rend le texte plus facile à voir.
check_circle
À faire
Fiche compacte avec une bande sur le fond de l'image.
cancel
À éviter
N'utilisez pas de carte compacte sans bordure sur l'image de fond.
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).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# Cards are the basic building blocks of your TV app. \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#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.tv.material3.CardShape,androidx.tv.material3.CardColors,androidx.tv.material3.CardScale,androidx.tv.material3.CardBorder,androidx.tv.material3.CardGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) | Available |\n\nHighlights\n----------\n\n- Use a card to display content on a single topic.\n- A card can hold anything from images to headlines, supporting text, buttons, lists, and other UI elements.\n- A card cannot merge with another card or divide into multiple cards.\n- There are six variations of cards: standard, classic, compact, inset, wide standard, and wide classic.\n\nVariants\n--------\n\nThere are five types of cards, each with a different use case:\n\n1. Standard\n2. Classic\n3. Compact\n4. Wide standard\n5. Wide classic\n\nContent blocks\n--------------\n\nA card's contents are arranged in distinct blocks. The card visual design\nincluding emphasis denotes hierarchy. The layout of the cards themselves\naccommodates the types of content the cards contain.\n\n### Anatomy\n\n1. Title\n2. Subtitle\n3. Description\n4. Extra text\n\n### Specs\n\nStandard card\n-------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nClassic card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nCompact card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide standard card\n------------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide classic card\n-----------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nUsage\n-----\n\nCards are versatile design elements that can be used to display a variety\nof content in a visually appealing and user-friendly way. The following\nsections explore design considerations for cards.\n\n### Aspect ratio\n\nThere are three common aspect ratios for cards: 16:9, 1:1, and 2:3.\nEach aspect ratio has its strengths, so the best choice for\nyou depends on your specific needs.\n\n- 16:9 is the most common aspect ratio for cards. It is a wide aspect ratio that is well-suited for displaying images and videos.\n- 1:1 is a square aspect ratio. It is a good choice for cards that need to be visually balanced, such as cast and crew, channel logos, or team logos.\n- 2:3 is a taller aspect ratio. It is a good choice if you want to break up the grid and bring more emphasis.\n\nUltimately, the best way to choose an aspect ratio for your cards is to\nexperiment with different options and see what looks best.\n\nHere are some examples usages of different aspect ratios \n\n### 1:1\n\nCast and crew \n\nSports teams logos\n\n### 2:3\n\nTrending books\n\n### 16:9\n\nMovie cards\n\n### Layout and spacing\n\nVarying card widths based on the number of cards visible on the screen\ncan be achieved by implementing proper peaking with a spacing of 20dp. \n\n### 1-card layout\n\nWidth of the card --- 844dp\n\n### 2-card layout\n\nWidth of the card --- 412dp\n\n### 3-card layout\n\nWidth of the card --- 268dp\n\n### 4-card layout\n\nWidth of the card --- 196dp\n\n### 5-card layout\n\nWidth of the card --- 124dp\n\n### Content block\n\nThe width of the content block in a card should be the same width as the image\nthumbnail. If you need to display more text in the content block,\nuse a wide card variation. \ncheck_circle\n\n### Do\n\nUse wide cards to show short descriptions, but only if absolutely necessary. The length of the description should be only a few words. \ncancel\n\n### Don't\n\nAvoid long descriptions on vertically stacked cards.\n\n### Compact card\n\nCompact cards should be concise and easier to read. The content preceding the\nbackground image should be brief and to the point. Avoid long titles,\nsubtitles, or descriptions. This makes your cards more\nvisually appealing and easier to scan.\n\nTo make text more readable on an image, add a semi-transparent black\ngradient overlay. This darkens the background without obscuring\nthe image too much, making the text easier to see. \ncheck_circle\n\n### Do\n\nCompact card using scrim on top of image background. \ncancel\n\n### Don't\n\nDon't use compact cards without scrim on top of the background image."]]
