استمتِع بالوصول السلس إلى أفلامك وبرامجك التلفزيونية والموسيقى المفضّلة لديك وغير ذلك الكثير على الشاشة الكبيرة وفي أي وقت في المنزل.
المراجع
Type | رابط | الحالة |
---|---|---|
التصميم | مصدر التصميم (Figma) | متوفرة |
Inter (Google Fonts) | متوفرة | |
التنفيذ | Jetpack Compose (GitHub) | متوفرة |
المظهر
المظهر الملوّن
يتم إنشاء نسق ألوان باستخدام أداة إنشاء المظاهر Material Design 3.
![مظهر اللون](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/color.webp?authuser=6&hl=ar)
أسلوب الخط
يستخدم مقياس الكتابة في JetStream الخط الطباعي لإنتاج مظهر بسيط وواضح لشاشات التلفزيون.
![أسلوب الخط](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/typography.webp?authuser=6&hl=ar)
الشكل
يتم تطبيق نصف قطر دقيق على البطاقات والأزرار لإنشاء حواف يسهل الوصول إليها.
![شكل](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/shape.webp?authuser=6&hl=ar)
التركيز
يتم استخدام مخطط ثلاثي الأبعاد مع لون مخطط في JetStream.
![الموضوع الذي يركّز عليه الفيديو](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/focus-theme.webp?authuser=6&hl=ar)
الصفحة الرئيسية
الصفحة الرئيسية
الصفحة المقصودة لتطبيق JetStream.
![الصفحة الرئيسية](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home.webp?authuser=6&hl=ar)
لوحة عرض دوّارة مميزة
لوحة عرض دوّارة على شكل بطاقات:
![لوحة عرض دوّارة مميّزة](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-fc-focused.webp?authuser=6&hl=ar)
صف المحتوى
تستخدم منصة JetStream نمط بطاقات عاديًا بنسبة عرض إلى ارتفاع تبلغ 2:3 في تصميم مكوّن من 5 أعمدة.
![صف المحتوى](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-trending-focused.webp?authuser=6&hl=ar)
القائمة الشاملة
يمكنك إبراز المحتوى الخاص في التطبيق باستخدام مكوِّن القائمة المجسَّمة، مثل أهم 10 أفلام رائجة.
![قائمة شاملة](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-top-10.webp?authuser=6&hl=ar)
الفئات
الفئات
تعرض صفحة "الفئات" الأنواع بتنسيق شبكة لتسهيل التنقّل والوصول إليها.
![الفئات](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories.webp?authuser=6&hl=ar)
بطاقات الفئات
![بطاقات الفئات](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories-action.webp?authuser=6&hl=ar)
تفاصيل الفئة
يتم استخدام شبكة بطاقات بحجم 2:3 مع عنوان لإنشاء صفحة "تفاصيل الفئة".
![تفاصيل الفئة](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories-details.webp?authuser=6&hl=ar)
الوسائط
الأفلام
علامة تبويب "أفلام عادية" تحتوي على بطاقات مميّزة بنسبة عرض إلى ارتفاع تبلغ 16:9 في الأعلى مع شبكة محتوى في أسفلها
![الأفلام](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/movies.webp?authuser=6&hl=ar)
العروض
![برامج](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/shows.webp?authuser=6&hl=ar)
المكتبة
المفضّلة
تتضمّن علامة التبويب "عناصر التحكّم المفضَّلة" شرائح فلاتر في أعلى الشاشة تتيح البحث سريعًا عن المحتوى.
![الأجهزة المفضَّلة](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/favorities.webp?authuser=6&hl=ar)
بحث
الصفحة المقصودة للبحث
تحتوي صفحة البحث على شريط بحث يتضمّن طلبات بحث مقترَحة استنادًا إلى عمليات البحث الأخيرة.
![الصفحة المقصودة للبحث](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/search-default.webp?authuser=6&hl=ar)
البحث النشط
عندما يركّز المستخدم على شريط البحث، تنبثق لوحة المفاتيح، ويتم تعديل النتائج المعروضة أدناه ديناميكيًا بينما يكتب المستخدم.
![البحث النشط](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/search-active.webp?authuser=6&hl=ar)
تفاصيل الكيان
الصفحة المقصودة الخاصة بالتفاصيل
تقدّم صفحة التفاصيل عرضًا سينمائيًا مع ملخص موجز للحبكة وزرًا بارزًا لعبارة الحث على اتخاذ إجراء لمشاهدة الفيلم.
![الصفحة المقصودة للتفاصيل](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/details.webp?authuser=6&hl=ar)
فريق التمثيل وطاقم العمل
يضم قسم "طاقم العمل وفريق العمل" صفًا من البطاقات الكلاسيكية مع عناوين وأوصاف، مصحوبة بمادة عرض صورة بنسبة عرض إلى ارتفاع 2:3.
![فريق التمثيل وطاقم العمل](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/cast-crew.webp?authuser=6&hl=ar)
التقييمات
يعرض قسم التقييمات بطاقة عريضة كلاسيكية مخصّصة تتضمّن معلومات إضافية.
![التقييمات](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/ratings.webp?authuser=6&hl=ar)
التشغيل
مشغّل الفيديو
مشغّل فيديو عادي يتّبع أفضل الممارسات.
![مشغّل الفيديو](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/player.webp?authuser=6&hl=ar)
إعدادات مشغّل الفيديو
نافذة منبثقة لمقاطع الترجمة والشرح في مشغّل الفيديو:
![إعدادات مشغّل الفيديو](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/player-closed-captions.webp?authuser=6&hl=ar)
الإعدادات
إعدادات الحساب
يتميّز تنسيق صفحة الحسابات بتصميم من عمودَين مع عنصر قائمة على اليمين ومكوِّنات البطاقة المخصّصة على اليسار، ويتم ترتيبه على شكل شبكة.
![إعدادات الحساب](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-account.webp?authuser=6&hl=ar)
مربّع حوار حذف الحساب
تم تصميم مربّع الحوار بخلفية متباينة لإبرازه عن باقي الشاشة. الزران في مربع الحوار محاذاة إلى اليسار للحصول على مظهر نظيف ومنظم.
![مربّع حوار حذف الحساب](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-delete-account.webp?authuser=6&hl=ar)
لمحة
يعرض القسم "لمحة" لوحة على يسار الشاشة مع عرض نص يمكن التنقّل فيه.
![لمحة](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-about.webp?authuser=6&hl=ar)
إعدادات الترجمة
يتم استخدام مكوِّن القائمة لعرض إعدادات مختلفة ضمن العنوان الفرعي، ويستخدم إجراءات مثل مفتاح تبديل أو تصنيف.
![إعدادات الترجمة](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-subtitles.webp?authuser=6&hl=ar)
السجلّ
يستخدم سجلّ البحث تنسيقًا يعرض قائمة بطلبات البحث التي تم البحث عنها سابقًا، إلى جانب خيار محو سجلّ البحث بالكامل.
![السجل](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-history.webp?authuser=6&hl=ar)
مساعدة
يستخدم قسم "المساعدة والدعم" مكوّن قائمة مخصّصة لعرض خيارات متنوعة، بما في ذلك معلومات الاتصال والأسئلة الشائعة.
![المساعدة](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-help.webp?authuser=6&hl=ar)