القوائم
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
القوائم هي تمثيل بصري لعنصر واحد أو أكثر مرتبط ببعضه.
ويتم استخدامها عادةً لعرض مجموعة من الخيارات.
المراجع
أهم التفاصيل
- القوائم هي مجموعة مستمرة من النصوص أو الصور.
- يجب أن تبدو القوائم طبيعية وأن تكون قابلة للمعاينة.
- تتألف القوائم من عناصر تحتوي على إجراءات أساسية وتكميلية يتم تمثيلها بالأيقونات والنصوص.
المتغيرات
هناك ثلاثة أنواع من القوائم: قائمة من سطر واحد وقائمة من سطرَين وقائمة من ثلاثة أسطر.
- قائمة من سطر واحد: سطر واحد للتواصل مع كل عنصر يضمن هذا التصميم البسيط أن يكون كل عنصر مختلفًا بوضوح عن الآخر.
- قائمة من سطرَين: تستخدِم سطرَين متوازيين للإشارة إلى كل عنصر.
يضمن هذا التصميم المُنظَّم سهولة القراءة ويتجنّب التداخل العميق في المحتوى.
- قائمة من ثلاثة أسطر: تستخدِم ثلاثة أسطر متوازية لتمثيل كل عنصر.
يُضفي هذا التصميم الزخرفي مستوىً عالٍ من الظهور المرئي.
علم التشريح
- الرمز: رسم صغير يمثّل عنصرًا أو إجراءً معيّنًا، وغالبًا ما
يُستخدَم للتعبير بصريًا عن فكرة أو مفهوم.
- الخط العلوي: سطر قصير من النص يظهر فوق العنوان أو الترجمة المصاحبة، ويُستخدَم عادةً لتوفير سياق أو تأكيد إضافي.
- العنوان: سطر نص كبير وغامق يُستخدَم كعنوان رئيسي ل
عنصر تصميم أو صفحة.
- العنوان الفرعي: سطر نص أصغر يقدّم معلومات إضافية
أو سياقًا أسفل عنوان رئيسي.
- عنصر التحكّم: عنصر تفاعلي يسمح للمستخدم بإدخال قرار.
الولايات
المواصفات
الاستخدام
القوائم هي مجموعات من النصوص والصور يتم تنظيمها عموديًا.
تم تحسين القائمة لتسهيل فهم القراءة، وهي تتألف من عمود واحد
متواصل من العناصر.
يمكن أن تحتوي عناصر القائمة على إجراءات أساسية وتكميلية يتم تمثيلها
بواسطة الرموز والنصوص.
check_circle
الإجراءات التي يُنصح بها
عناصر القائمة ليست أزرارًا. لا تحتوي العناصر على حاويات. تكون عناصر القائمة غير محدّدة وغير مُركّزة تلقائيًا.
warning
تنبيه
استخدِم خلفية الحاوية لعناصر القائمة عند الضرورة فقط.
عناصر التحكّم في الاختيار
تتحكّم عناصر التحكّم في عرض المعلومات والإجراءات لعناصر القائمة. ويمكن محاذاة هذه العناصر
مع الحافة الأمامية أو الخلفية لعنصر القائمة.
- مربّعات الاختيار: اختَر عنصرًا واحدًا أو أكثر من القائمة.
- أزرار الاختيار: اختَر عنصرًا واحدًا فقط
في القائمة.
- مفاتيح التبديل: يمكنك تفعيل عنصر تحكّم أو إيقافه.
check_circle
الإجراءات التي يُنصح بها
استخدِم مؤشر اختيار رمز لعرض العنصر المحدّد بوضوح في قائمة. سيساعد ذلك المستخدمين في تحديد العنصر الذي اختاروه بسهولة وتحسين تجربة المستخدم العامة.
cancel
الإجراءات غير المُوصى بها
تجنَّب الاعتماد فقط على لون الخلفية للإشارة إلى العنصر المحدّد في القائمة.
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,["# Lists are a visual representation of one or more related items.\nThey are commonly used to display a collection of options.\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#ListItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.ListItemShape,androidx.tv.material3.ListItemColors,androidx.tv.material3.ListItemScale,androidx.tv.material3.ListItemBorder,androidx.tv.material3.ListItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource)) | Available |\n\nHighlights\n----------\n\n- Lists are a continuous collection of text or images.\n- Lists should feel natural and be scannable.\n- Lists are made up of items containing primary and supplemental actions represented by icons and text.\n\nVariants\n--------\n\nThere are three types of lists: one-line list, two-line list, and\nthree-line list.\n\n1. **One-line list**: A single line to communicate each item. This simple design ensures each item is clearly distinct from the other.\n2. **Two-line list**: Uses two parallel lines to communicate each item. This structured design ensures natural readability and avoids cognitive overload.\n3. **Three-line list**: Uses three parallel lines to represent each item. This decorative design creates a high level of visual prominence.\n\nAnatomy\n-------\n\n1. **Icon**: A small graphic that represents a specific object or action, often used to visually communicate an idea or concept.\n2. **Overline**: A short line of text that appears above title or subtitle, often used to provide additional context or emphasis.\n3. **Title**: A large, bold line of text that serves as the main heading of a design element or page.\n4. **Subtitle**: A smaller line of text that provides additional information or context below a main title.\n5. **Control**: An interactive element that allows the user to input a decision.\n\nStates\n------\n\nSpec\n----\n\nUsage\n-----\n\nLists are vertically organized groups of text and images.\nOptimized for reading comprehension, a list consists of a single\ncontinuous column of items.\nList items can contain primary and supplemental actions represented\nby icons and text. \ncheck_circle\n\n### Do\n\nList items are not buttons. The items don't have containers. List items are, by default, unselected and unfocused. \nwarning\n\n### Caution\n\nUse container background for list items only when necessary.\n\n### Selection controls\n\nControls display information and actions for list items. They can be aligned\nto the leading or trailing edge of the list item.\n\n\n\u003cbr /\u003e\n\n1. **Checkboxes**: Select one or more list items.\n2. **Radio buttons**: Select exactly one item in the list.\n3. **Switches**: Toggle a control on or off.\n\ncheck_circle\n\n### Do\n\nUse an icon selection indicator to clearly show the selected item in a list. This will help users easily identify which item they have selected and improve the overall user experience. \ncancel\n\n### Don't\n\nAvoid relying solely on the background color to indicate selection in a list. \ncancel\n\n### Don't\n\nAvoid placing buttons inside a list item as it can cause confusion about which element is currently in focus.\n\n### Icons\n\ncheck_circle\n\n### Do\n\nIf you're showing the same type of content in the list, omit icons to reduce visual noise and improve the user experience. Avoid using icons in a list when they serve no purpose and don't provide additional information. \ncancel\n\n### Don't\n\nAvoid using the same icon for all items in a list. This can be visually overwhelming and confusing for users. Instead, use icons only when they add value or provide additional information.\n\n### Avatars and images\n\nList items can include images in a circular crop to represent a\nperson or entity."]]
