القائمة الشاملة هي تركيبة من صف من المحتوى ومعاينة العنصر المحدّد. تعرض المحتوى في إطار عرض أكبر.
المراجع
Type | رابط | الحالة |
---|---|---|
التصميم | مصدر التصميم (Figma) | متوفرة |
التنفيذ | Jetpack Compose | متوفرة |
أهمّ الميزات
- معاينة المحتوى الديناميكي. عندما يتنقل المستخدم عبر صف المحتوى، يتم تحديث منطقة المعاينة تلقائيًا لعرض العنصر الذي تم التركيز عليه حاليًا.
- يتميز مكوِّن القائمة المجسَّمة بإطار عرض أكبر لعرض المحتوى، ما يسهّل على المستخدمين عرض التفاصيل المرئية للعنصر محل التركيز وتقديرها.
- توفر القوائم الشاملة معلومات ذات صلة وسياقية حول العنصر الذي يتم التركيز عليه، ما يساعد المستخدمين على اتخاذ قرارات مدروسة بدون مغادرة تجربة التصفّح.
- يستخدم مكوِّن القائمة المجسَّمة الإفصاح التدريجي للكشف عن مزيد من التفاصيل حول المحتوى أثناء تنقّله، ما يقلّل من العبء الإدراكي ويحافظ على تفاعل المستخدمين.
- يضمن مكون القائمة المجسَّمة تفاعلات متسقة عبر التطبيق، مزودًا بتجربة المستخدمين المألوفة والقابلة للتنبؤ.
علم التشريح
- خلفية الصورة
- حظر المحتوى
- البطاقة قيد التركيز
- شبكة المحتوى
- تمويه سينمائي
- الملصق
- لون الخلفية
المواصفات
السُلوك
عند التنقل بين البطاقات في القائمة المجسَّمة، تظهر تفاصيل البطاقة التي تم اختيارها تدريجيًا في الخلفية.
عندما تكون القائمة الشاملة في بؤرة التركيز، يزداد ارتفاعها للكشف عن معلومات إضافية، مثل عنوان الخلفية والوصف، كما هو موضّح في الفيديو التالي.
الاستخدام
يمكنك استخدام لوحات العرض الدوّارة التفاعلية لجذب الانتباه إلى المحتوى المميّز أو الترويجي، مثل الإصدارات الجديدة أو العروض الرائجة أو العناوين الحصرية. يوفر إطار العرض الأكبر والمعاينة الديناميكية طريقة مقنعة لعرض هذه العناصر ذات الأولوية العالية.
عرض الصورة
- تركيز البطاقة: أثناء تنقّل المستخدم في لوحة العرض الدوّارة، يتم التوكيد على البطاقة التي يتم التركيز عليها بصريًا، مع تحجيم البطاقة بمقدار 1.1 واستخدام حدود وإشارات مرئية أخرى مثل المسقط الرأسي للإشارة إلى اختياره. التأكّد من أنّ عناوين المحتوى داخل الصورة المصغّرة للبطاقة محلّ التركيز تكون مرئية بوضوح وتسهل قراءتها
- صورة الخلفية: عندما يكون التركيز على بطاقة، تظهر صورة خلفية مقابلة في إطار العرض الأكبر. وننصحك باستخدام صورة الخلفية هذه بجودة عالية وجذابة بصريًا لأنّها توفّر خلفية جذابة وغامرة للمحتوى.
مقطوعة موسيقية
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/immersive-list/immersive-list-image-composition-do.webp?authuser=6&hl=ar)
الإجراءات التي يُنصح بها
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/immersive-list/immersive-list-image-composition-dont.webp?authuser=6&hl=ar)
الإجراءات غير المُوصى بها
لضمان ظهور الصور المستخدمة كخلفيات في مكون القائمة المجسَّمة بشكل جيد، تأكد من ضبط حجمها بشكل مناسب حتى لا تكون مموهة أو مشوهة.
نسبة العرض إلى الارتفاع
استخدِم نسبة 16:9 للصور الخلفية كلما أمكن ذلك لضمان الحصول على تصميم متناسق وجذّاب من الناحية المرئية.