البطاقات
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
البطاقات هي الوحدات الأساسية المستخدَمة في تطبيق البث التلفزيوني.
المراجع
أهمّ الميزات
- استخدِم بطاقة لعرض محتوى حول موضوع واحد.
- يمكن أن تحتوي البطاقة على أي شيء بدءًا من الصور إلى العناوين،
والنص الداعم والأزرار والقوائم وغيرها من عناصر واجهة المستخدم.
- لا يمكن دمج بطاقة مع بطاقة أخرى أو تقسيمها إلى بطاقات متعدّدة.
- هناك ستة أشكال من البطاقات: قياسية وكلاسيكية وصغيرة
وداخلية وواسعة وواسعة وكلاسيكية.
الصيغ
هناك خمسة أنواع من البطاقات، ولكل منها حالة استخدام مختلفة:
- الميزات العادية
- فيلم كلاسيكي
- Compact
- معيار واسع
- كلاسيكي عريض
وحدات المحتوى
يتم ترتيب محتوى البطاقة في مجموعات منفصلة. يشير التصميم المرئي للبطاقة،
بما في ذلك التوكيد إلى التسلسل الهرمي. يتسع تخطيط البطاقات نفسها
لأنواع المحتوى التي تحتوي عليها البطاقات.
علم التشريح
- العنوان
- العنوان الفرعي
- الوصف
- نص إضافي
المواصفات
البطاقة العادية
علم التشريح
- صورة
- حظر المحتوى
الولايات
المواصفات
ألعاب البطاقات الكلاسيكية
علم التشريح
- صورة
- حظر المحتوى
الولايات
المواصفات
بطاقة مكثفة
علم التشريح
- صورة
- حظر المحتوى
الولايات
المواصفات
البطاقة العادية العريضة
علم التشريح
- صورة
- حظر المحتوى
الولايات
المواصفات
بطاقة كلاسيكية عريضة
علم التشريح
- صورة
- حظر المحتوى
الولايات
المواصفات
الاستخدام
البطاقات هي عناصر تصميم متعددة الاستخدامات يمكن استخدامها لعرض مجموعة متنوعة من المحتوى بطريقة جذابة بصريًا وسهلة الاستخدام. تستكشف الأقسام التالية
اعتبارات التصميم للبطاقات.
نسبة العرض إلى الارتفاع
ثمة ثلاث نِسب عرض إلى ارتفاع شائعة للبطاقات: 16:9 و1:1 و2:3.
لكل نسبة عرض إلى ارتفاع لها نقاط قوتها، لذا يعتمد الخيار الأفضل بالنسبة إليك على احتياجاتك الخاصة.
- 16:9 هي نسبة العرض إلى الارتفاع الأكثر شيوعًا للبطاقات. وهي نسبة عرض إلى ارتفاع واسعة مناسبة تمامًا
لعرض الصور ومقاطع الفيديو.
- 1:1 هي نسبة عرض إلى ارتفاع مربّعة. وهو خيار جيد للبطاقات التي تحتاج إلى أن تكون متوازنة بصريًا، مثل فريق التمثيل وطاقم العمل أو شعارات القنوات أو شعارات الفريق.
- 2:3 هي نسبة عرض إلى ارتفاع أطول. يعد اختيارًا جيدًا إذا كنت تريد تقسيم
الشبكة وجلب المزيد من التوكيد.
في النهاية، أفضل طريقة لاختيار نسبة عرض إلى ارتفاع لبطاقاتك هي تجربة خيارات مختلفة وتحديد تلك الأنسب لك.
في ما يلي بعض الأمثلة على استخدامات نِسب العرض إلى الارتفاع المختلفة
1:1
فريق التمثيل وطاقم العمل
شعارات الفِرق الرياضية
2:3
كتب رائجة
16:9
بطاقات الأفلام
التخطيط والتباعد
يمكن تحقيق اختلاف في عرض البطاقات استنادًا إلى عدد البطاقات الظاهرة على الشاشة
من خلال تطبيق أعلى مستوى مناسب مع تباعد بمقدار 20 وحدة بكسل مستقلة الكثافة.
تصميم بطاقة واحدة
عرض البطاقة: 844 بكسل مستقل الكثافة (dp)
تصميم بطاقتَين
عرض البطاقة: 412 وحدة بكسل مستقلة الكثافة (dp)
تصميم ثلاثي البطاقات
عرض البطاقة - 268 بكسل مستقل الكثافة
تصميم من 4 بطاقات
عرض البطاقة: 196 بكسل مستقل الكثافة
تصميم من 5 بطاقات
عرض البطاقة - 124 بكسل مستقل الكثافة
حظر المحتوى
يجب أن يكون عرض قالب المحتوى في البطاقة بنفس عرض الصورة المصغرة. إذا كنت بحاجة إلى عرض المزيد من النص في مجموعة المحتوى،
فاستخدم تباينًا واسعًا للبطاقة.
check_circle
الإجراءات التي يُنصح بها
استخدِم البطاقات العريضة لعرض أوصاف قصيرة، ولكن فقط عند الضرورة القصوى. يجب أن يكون طول الوصف بضع كلمات فقط.
cancel
الإجراءات غير المُوصى بها
تجنَّب استخدام الأوصاف الطويلة للبطاقات عموديًا.
بطاقة مكثفة
يجب أن تكون البطاقات المكثفة موجزة وسهلة القراءة. يجب أن يكون المحتوى الذي يسبق صورة
الخلفية موجزًا ومباشرًا. تجنب العناوين الطويلة
أو العناوين الفرعية أو الأوصاف ويجعل هذا بطاقاتك أكثر جاذبية
من الناحية المرئية وأسهل في المسح.
لتسهيل قراءة النص على الصورة، أضِف تراكبًا متدرج أسود شبه شفاف. يؤدي ذلك إلى تعتيم الخلفية دون حجب
الصورة أكثر من اللازم، مما يسهل رؤية النص.
check_circle
الإجراءات التي يُنصح بها
بطاقة مدمجة تستخدم شريط تمرير أعلى خلفية الصورة
cancel
الإجراءات غير المُوصى بها
لا تستخدم بطاقات مكثفة بدون تظليل صورة الخلفية.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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."]]
