کارت ها
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
کارت ها بلوک های اصلی برنامه تلویزیونی شما هستند.
منابع
نکات برجسته
- از کارت برای نمایش محتوا در یک موضوع استفاده کنید.
- کارت می‌تواند هر چیزی را از تصاویر گرفته تا سرفصل‌ها، متن، دکمه‌ها، فهرست‌ها و سایر عناصر رابط کاربری را در خود جای دهد.
- یک کارت نمی تواند با کارت دیگری ادغام شود یا به چند کارت تقسیم شود.
- شش نوع کارت وجود دارد: استاندارد، کلاسیک، فشرده، درونی، استاندارد گسترده و کلاسیک گسترده.
انواع
پنج نوع کارت وجود دارد که هر کدام کاربرد متفاوتی دارند:
- استاندارد
- کلاسیک
- فشرده
- استاندارد گسترده
- کلاسیک گسترده
بلوک های محتوا
محتویات کارت در بلوک های مجزا مرتب شده اند. طراحی بصری کارت از جمله تاکید، نشان دهنده سلسله مراتب است. طرح خود کارت ها انواع محتوای کارت ها را در خود جای می دهد.
آناتومی
- عنوان
- زیرنویس
- توضیحات
- متن اضافی
مشخصات
کارت استاندارد
آناتومی
- تصویر
- بلوک محتوا
ایالات
مشخصات
کارت کلاسیک
آناتومی
- تصویر
- بلوک محتوا
ایالات
مشخصات
کارت جمع و جور
آناتومی
- تصویر
- بلوک محتوا
ایالات
مشخصات
کارت استاندارد گسترده
آناتومی
- تصویر
- بلوک محتوا
ایالات
مشخصات
کارت کلاسیک عریض
آناتومی
- تصویر
- بلوک محتوا
ایالات
مشخصات
استفاده
کارت‌ها عناصر طراحی همه‌کاره‌ای هستند که می‌توان از آنها برای نمایش محتوای مختلف به شیوه‌ای جذاب و کاربرپسند استفاده کرد. بخش‌های زیر ملاحظات طراحی کارت‌ها را بررسی می‌کنند.
نسبت ابعاد
سه نسبت تصویر رایج برای کارت ها وجود دارد: 16:9، 1:1 و 2:3. هر نسبت ابعادی نقاط قوت خود را دارد، بنابراین بهترین انتخاب برای شما بستگی به نیازهای خاص شما دارد.
- 16:9 رایج ترین نسبت تصویر برای کارت ها است. این یک نسبت تصویر گسترده است که برای نمایش تصاویر و فیلم ها مناسب است.
- 1:1 یک نسبت مربع است. این یک انتخاب خوب برای کارت هایی است که باید از نظر بصری متعادل باشند، مانند بازیگران و خدمه، آرم کانال یا آرم تیم.
- 2:3 نسبت تصویر بلندتر است. اگر می خواهید شبکه را از بین ببرید و تاکید بیشتری داشته باشید، انتخاب خوبی است.
در نهایت، بهترین راه برای انتخاب نسبت تصویر برای کارت‌هایتان این است که گزینه‌های مختلف را آزمایش کنید و ببینید چه چیزی بهتر به نظر می‌رسد.
در اینجا چند نمونه از استفاده از نسبت های مختلف وجود دارد
1:1
بازیگران و خدمه
لوگوی تیم های ورزشی
2:3
کتاب های پرطرفدار
16:9
کارت های فیلم
چیدمان و فاصله
با اجرای پیک مناسب با فاصله 20dp می توان به عرض کارت های متفاوت بر اساس تعداد کارت های قابل مشاهده روی صفحه دست یافت.
طرح 1 کارتی
عرض کارت - 844dp
طرح 2 کارتی
عرض کارت - 412dp
طرح 3 کارتی
عرض کارت - 268dp
طرح 4 کارتی
عرض کارت - 196dp
طرح 5 کارتی
عرض کارت - 124dp
بلوک محتوا
عرض بلوک محتوا در کارت باید به اندازه تصویر کوچک تصویر باشد. اگر نیاز به نمایش متن بیشتری در بلوک محتوا دارید، از تنوع کارت گسترده استفاده کنید.
check_circle
انجام دهید
از کارت های پهن برای نشان دادن توضیحات کوتاه استفاده کنید، اما فقط در صورت لزوم. طول توضیحات باید فقط چند کلمه باشد.
cancel
نکن
از توضیحات طولانی در کارت‌هایی که به صورت عمودی روی هم چیده شده‌اند خودداری کنید.
کارت جمع و جور
کارت های فشرده باید مختصر و راحت تر خوانده شوند. محتوای قبل از تصویر پس زمینه باید مختصر و دقیق باشد. از عنوان‌ها، زیرنویس‌ها یا توضیحات طولانی خودداری کنید. این باعث می‌شود کارت‌های شما از نظر بصری جذاب‌تر و اسکن آنها آسان‌تر شود.
برای خوانایی بیشتر متن روی یک تصویر، یک روکش گرادیان سیاه نیمه شفاف اضافه کنید. این کار پس‌زمینه را تاریک می‌کند بدون اینکه تصویر را بیش از حد مبهم کند و باعث می‌شود متن راحت‌تر دیده شود.
check_circle
انجام دهید
کارت فشرده با استفاده از scrim در بالای پس‌زمینه تصویر.
cancel
نکن
از کارت‌های فشرده و بدون حاشیه در بالای تصویر پس‌زمینه استفاده نکنید.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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."]]
