Carte
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Le schede sono gli elementi di base di un'app TV.
Risorse
In evidenza
- Utilizza una scheda per visualizzare i contenuti su un singolo argomento.
- Una scheda può contenere qualsiasi cosa, dalle immagini ai titoli, come testo di supporto, pulsanti, elenchi e altri elementi dell'interfaccia utente.
- Una scheda non può essere unita a un'altra scheda o suddivisa in più schede.
- Esistono sei varianti di schede: standard, classiche, compatte,
inserite, wide standard e wide classic.
Varianti
Esistono cinque tipi di schede, ognuna con un caso d'uso diverso:
- Standard
- Un classico
- Di dimensioni ridotte
- Standard largo
- Classico ampio
Blocchi di contenuti
I contenuti di una scheda sono disposti in blocchi distinti. La grafica delle schede,
che include l'enfasi, indica una gerarchia. Il layout delle schede stesse
consente i tipi di contenuti delle schede.
Anatomia
- Titolo
- Sottotitolo
- Descrizione
- Testo aggiuntivo
Specifiche tecniche
Carta standard
Anatomia
- Immagine
- Blocco di contenuti
Stati
Specifiche tecniche
Carta classica
Anatomia
- Immagine
- Blocco di contenuti
Stati
Specifiche tecniche
Scheda compatta
Anatomia
- Immagine
- Blocco di contenuti
Stati
Specifiche tecniche
Carta standard Wide
Anatomia
- Immagine
- Blocco di contenuti
Stati
Specifiche tecniche
Carta Classica larga
Anatomia
- Immagine
- Blocco di contenuti
Stati
Specifiche tecniche
Utilizzo
Le schede sono elementi di design versatili che possono essere utilizzati per mostrare una varietà di contenuti in modo visivamente accattivante e facile da usare. Le seguenti sezioni illustrano le considerazioni sulla progettazione delle schede.
Proporzioni
Esistono tre proporzioni comuni per le schede: 16:9, 1:1 e 2:3.
Ogni formato ha i suoi punti forti, perciò la scelta migliore dipende dalle tue esigenze specifiche.
- 16:9 è il formato più comune per le schede. Si tratta di un formato ampio,
adatto alla visualizzazione di immagini e video.
- 1:1 è una proporzione quadrata. È ideale per le schede che devono
essere equilibrate a livello visivo, ad esempio cast e troupe, loghi dei canali o dei team.
- 2:3 è un formato più alto. È una buona scelta se vuoi separare
la griglia e enfatizzare.
In ultima analisi, il modo migliore per scegliere le proporzioni per le schede è
sperimentare con diverse opzioni e vedere quella migliore.
Di seguito sono riportati alcuni esempi di utilizzo di proporzioni diverse
1:1
Cast e troupe
Loghi di squadre sportive
2:3
Libri del momento
16:9
Schede film
Layout e spaziatura
È possibile ottenere schede di larghezze diverse in base al numero di schede visibili sullo schermo
implementando un picco corretto con una spaziatura di 20 dp.
Layout a 1 scheda
Larghezza della scheda: 844 dp
Layout a due schede
Larghezza della scheda: 412 dp
Layout a tre schede
Larghezza della scheda: 268 dp
Layout a 4 schede
Larghezza della scheda: 196 dp
Layout a 5 schede
Larghezza della scheda: 124 dp
Blocco di contenuti
La larghezza del blocco di contenuti in una scheda deve corrispondere a quella della miniatura dell'immagine. Se devi mostrare più testo nel blocco di contenuti,
utilizza una variante di scheda ampia.
check_circle
Cosa fare
Utilizza le schede larghe per mostrare descrizioni brevi, ma solo se assolutamente necessario. La descrizione deve contenere solo poche parole.
cancel
Cosa non fare
Evita descrizioni lunghe su schede impilate in verticale.
Scheda compatta
Le schede compatte devono essere concise e più facili da leggere. I contenuti che precedono l'immagine di sfondo devono essere brevi e dritti al punto. Evita titoli,
sottotitoli o descrizioni lunghi. Ciò rende le carte più visivamente accattivanti
e più facili da consultare.
Per rendere più leggibile il testo in un'immagine, aggiungi
un overlay gradiente nero semitrasparente. In questo modo lo sfondo scurisce senza occultare
l'immagine, rendendo il testo più facile da vedere.
check_circle
Cosa fare
Scheda compatta con striscia sulla parte superiore dello sfondo dell'immagine.
cancel
Cosa non fare
Non utilizzare schede compatte senza cornice sull'immagine di sfondo.
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.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 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."]]
