הדפסת כרטיסים
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
כרטיסים הם אבני הבניין הבסיסיות של האפליקציה לטלוויזיה.
משאבים
המיטב
- אפשר להשתמש בכרטיס כדי להציג תוכן בנושא מסוים.
- כרטיס יכול להכיל כל דבר, מתמונות ועד כותרות,
תמיכה בטקסט, בלחצנים, ברשימות וברכיבים אחרים של ממשק המשתמש.
- כרטיס לא יכול להתמזג עם כרטיס אחר או לפצל אותו לכמה כרטיסים.
- יש שש וריאציות של כרטיסים: רגילה, קלאסי, קומפקטית,
inset, סטנדרטי רחב וקלאסי רחב.
וריאנטים
יש חמישה סוגים של כרטיסים, לכל אחד מהם יש תרחיש לדוגמה שונה:
- רגיל
- קלאסי
- קומפקטית
- תקן רחב
- רחבה קלאסית
חסימות תוכן
התוכן של הכרטיס מסודר לפי בלוקים נפרדים. העיצוב החזותי של הכרטיס
כולל הדגשה מייצגת היררכיה. הפריסה של הכרטיסים עצמם
להכיל את סוגי התוכן שהכרטיסים מכילים.
אנטומיה
- כותרת
- כותרת משנה
- תיאור
- טקסט נוסף
מפרטים
כרטיס רגיל
אנטומיה
- תמונה
- חסימת תוכן
מדינות
מפרטים
כרטיס קלאסי
אנטומיה
- תמונה
- חסימת תוכן
מדינות
מפרטים
כרטיס קומפקטי
אנטומיה
- תמונה
- חסימת תוכן
מדינות
מפרטים
כרטיס רגיל רחב
אנטומיה
- תמונה
- חסימת תוכן
מדינות
מפרטים
כרטיס קלאסי רחב
אנטומיה
- תמונה
- חסימת תוכן
מדינות
מפרטים
שימוש
כרטיסים הם אלמנטים עיצוביים מגוונים שאפשר להשתמש בהם כדי להציג מגוון
של התוכן באופן מושך וידידותי למשתמש. הבאים
בקטעים השונים בוחנים את השיקולים לעיצוב כרטיסים.
יחס גובה-רוחב
יש שלושה יחסי גובה-רוחב נפוצים לכרטיסים: 16:9, 1:1 ו-2:3.
לכל יחס גובה-רוחב יש יתרונות משלו, אז הבחירה הטובה ביותר
תלוי בצרכים הספציפיים שלכם.
- 16:9 הוא יחס הגובה-רוחב הנפוץ ביותר לכרטיסים. זהו היבט רחב
שמתאים היטב להצגת תמונות וסרטונים.
- 1:1 הוא יחס גובה-רוחב של ריבוע. זהו בחירה טובה לכרטיסים שצריכים
להיות מאוזנת מבחינה חזותית, למשל: צוות השחקנים והצוות, סמלי לוגו של הערוץ או סמלי לוגו של הקבוצה.
- 2:3 הוא יחס גובה-רוחב גבוה יותר. כדאי לבחור אם רוצים להפריד
ולהדגיש את הרשת.
בסופו של דבר, הדרך הטובה ביותר לבחור יחס גובה-רוחב לכרטיסים שלכם היא
לנסות אפשרויות שונות ולבדוק מה נראה הכי טוב.
הנה כמה דוגמאות לשימושים ביחסי גובה-רוחב שונים
1:1
השחקנים ושאר אנשי הצוות
סמלי לוגו של קבוצות ספורט
2:3
ספרים פופולריים
16:9
כרטיסי סרטים
פריסה וריווח
שינוי רוחב הכרטיסים בהתאם למספר הכרטיסים שמוצגים במסך
ניתן לעשות זאת על ידי הטמעה נכונה של שיא עם רווח של 20dp.
פריסה של כרטיס אחד
רוחב הכרטיס — 844dp
פריסה של 2 כרטיסים
רוחב הכרטיס — 412dp
פריסה של 3 כרטיסים
רוחב הכרטיס — 268dp
פריסה של 4 כרטיסים
רוחב הכרטיס — 196dp
פריסה של 5 כרטיסים
רוחב הכרטיס — 124dp
חסימת תוכן
הרוחב של גוש התוכן בכרטיס צריך להיות זהה לרוחב התמונה.
התמונה הממוזערת. אם אתם צריכים להציג טקסט נוסף בבלוק התוכן,
להשתמש בווריאציה רחבה של כרטיס.
check_circle
מה מותר לעשות
כדאי להשתמש בכרטיסים רחבים כדי להציג תיאורים קצרים, אבל רק אם הם הכרחיים. התיאור צריך לכלול כמה מילים בלבד.
cancel
מה אסור לעשות
מומלץ להימנע מתיאורים ארוכים בכרטיסים שהוערמו במאונך.
כרטיס קומפקטי
כרטיסים קומפקטיים צריכים להיות תמציתיים וקלים יותר לקריאה. התוכן שלפני
תמונת הרקע צריכה להיות קצרה וממוקדת. הימנעו מכותרות ארוכות
כתוביות או תיאורים. כך הכרטיסים שלך יהיו יותר
מושכים מבחינה חזותית וקל יותר לסרוק אותם.
כדי להפוך טקסט לקריא יותר על תמונה, צריך להוסיף צבע שחור שקוף למחצה
בשכבת-על הדרגתית. הפעולה הזו תכהה את הרקע בלי להסתיר
את התמונה יותר מדי, וכך קל יותר לראות את הטקסט.
check_circle
מה מותר לעשות
כרטיס קומפקטי עם חיתוך על רקע התמונה.
cancel
מה אסור לעשות
אין להשתמש בכרטיסים קומפקטיים ללא חיתוך מעל תמונת הרקע.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 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."]]
