التخطيطات عبارة عن قوالب هيكلية توفر إطار عمل للحفاظ الاتساق المرئي عبر تطبيقك. من خلال تحديد الشبكات المرئية والتباعد والأقسام، تنشئ التخطيطات هيكلاً متماسكًا ومنظمًا عرض المعلومات وعناصر واجهة المستخدم.
![صورة الغلاف للتنسيقات](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/cover-layouts.webp?authuser=9&hl=ar)
أهم التفاصيل
- على عكس الويب أو الأجهزة الجوّالة، تبلغ نسبة العرض إلى الارتفاع للشاشة الثابتة 16:9 في أجهزة التلفزيون.
- حسِّن التصاميم على المحاور الأفقية والرأسية لسهولة الاستخدام. والتحكم المستمر.
المبادئ
إرشادات لمساعدتك في اتخاذ قرارات التصميم عند تصميم تخطيطات التلفزيون.
![تصميم للشاشات الكبيرة](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/design-for-large-screens.webp?authuser=9&hl=ar)
التصميم للشاشات الكبيرة
منذ انتشار أجهزة التلفزيون عالية الدقة، أصبحت أجهزة التلفزيون المستطيلة التي تبلغ نسبة العرض إلى الارتفاع فيها 16:9 هي القاعدة المعتادة. في السابق، كان يتم تصنيع أجهزة التلفزيون في شكل مربّع يُعرف بنسبة العرض إلى الارتفاع 4:3 أو 1.33 إلى 1.
![التصميم لنظام Android](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/design-on-android-platform.webp?authuser=9&hl=ar)
التصميم على نظام Android الأساسي
عند التصميم، يمكنك استخدام dp لعرض العناصر بشكل موحد على الشاشات ذات الكثافات المختلفة، كما هو الحال مع أي جهاز آخر يعمل بنظام التشغيل Android. احرص دائمًا على التصميم بدقة MDPI بدقة 960 بكسل * 540 بكسل.
في MDPI 1 بكسل = 1 بكسل مستقل الكثافة.
يجب أن تكون مواد العرض متوافقة مع دقة 1080p. ويسمح ذلك لنظام Android بتصغير عناصر التنسيق إلى 720p إذا لزم الأمر.
![ضمان ظهور الفيديو](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/ensuring-visibility-and-overscan-safety.webp?authuser=9&hl=ar)
ضمان الأمان والخروج من مستوى شحن البطارية
ضمان ظهور العناصر المهمة للمستخدمين دائمًا. ولإجراء ذلك، ضَع العناصر مع هامش 5% يبلغ 48 بكسل مستقل الكثافة على الجانبين الأيسر والأيمن و27 بكسل مستقل الكثافة في أعلى وأسفل التنسيق. يضمن هذا أن تكون عناصر شاشة التخطيط ضمن الخروج عن إطار الشاشة.
![ملء الشاشة](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/fill-the-full-screen.webp?authuser=9&hl=ar)
ملء الشاشة
عدم تعديل عناصر شاشة الخلفية أو اقتصاصها وفقًا للمنطقة الآمنة المغادِرة للمسح. بدلاً من ذلك، يمكنك السماح بالعرض الجزئي للعناصر خارج الشاشة. يضمن هذا أن تعرض جميع الشاشات الخلفية والعناصر خارج الشاشة بشكل صحيح.
![التحسين باستخدام المحاور](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/optimize-with-axes.webp?authuser=9&hl=ar)
التحسين باستخدام المحاور
فكِّر في الطريقة التي يستخدم بها الأشخاص جهاز التحكّم عن بُعد مع أجهزة التلفزيون. تأكَّد من سهولة استخدام واجهة التلفزيون مع جهاز التحكّم عن بُعد. صمم كل اتجاه (لأعلى ولأسفل ويسار ويمين) للحصول على غرض واضح ونمط تنقل لمساعدة المستخدمين على فهم كيفية التنقل عبر مجموعات كبيرة من الخيارات.
التنسيق
تختلف أحجام شاشات التلفزيون من جهاز إلى آخر. وبما أن التلفزيون الحديث يحتوي على 16:9، يوصى بتصميم التطبيق باستخدام حجم الشاشة 960 × 540 بكسل يضمن ذلك إمكانية استعادة جميع العناصر يتم تغيير حجمها بشكل يتناسب مع الشاشات عالية الدقة أو 4K.
تجاوز الهوامش
هوامش التعليق الزائد هي المسافات بين المحتوى الحواف اليسرى واليمنى للشاشة.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
تحمي الهوامش الحدودية العناصر الأساسية من المشكلات المحتملة للتجاوز. للحفاظ على أمان المحتوى والمعلومات، استخدم تخطيط هامش بنسبة 5٪ (58 بكسل مستقل الكثافة على جانبَي الجهاز و28 بكسل مستقل الكثافة على الحافتين العلوية والسفلية)
الأعمدة وهوامش التوثيق
يتم وضع المحتوى في مناطق من الشاشة تحتوي على أعمدة وهوامش توثيق. يتكون نظام الشبكة من 12 عمودًا. هوامش التوثيق هي المسافات بين والأعمدة التي تساعد في تقسيم المحتوى.
استخدِم 12 عمودًا بعرض 52 بكسل مستقل الكثافة مع مسافة تفصل بينها 20 بكسل مستقل الكثافة (dp). يجب أن تكون هناك مساحة 58 بكسل مستقل الكثافة على كلا الجانبين و4 بكسل مستقل الكثافة (dp) للوضع العمودي التباعد بين الأسطر.
أنماط التنسيق
هناك ثلاثة أنماط تخطيط متاحة اعتمادًا على ما تريد والغرض وجهاز العرض: تخطيط الحزمة الأفقية، وتخطيط المكدس العمودي، وتخطيط الشبكة.
تخطيط التكديس الأفقي
يقوم تخطيط التكديس الأفقي بترتيب المكونات أفقيًا. ويمكن أن تختلف من حيث الحجم أو النسبة أو التنسيق. غالبًا ما يكون هذا التخطيط تُستخدم لتجميع المحتوى والمكونات.
تصميم الحزمة العمودية
يقوم تخطيط المكدس العمودي بترتيب المكونات بطريقة رأسية، مما يسمح بمرونة الحجم والنسبة والتنسيق. من الشائع تُستخدم لتجميع أنواع مختلفة من النصوص والمكونات التفاعلية أنماط التخطيط معًا.
تنسيق الشبكة
الشبكة عبارة عن مجموعة من الأعمدة والصفوف المتقاطعة، يعرض "التنسيق" المحتوى في هذه الشبكة. فهو يرتب المحتوى بطريقة منطقية ، مما يسهل على المستخدمين التنقل والتصفح.
لمنع التداخل، من المهم مراعاة المساحة المتروكة بين البنود والزيادة في حجم الحالات المركزة. على سبيل المثال، عندما يركز (مثل البطاقة). إذا كنت تستخدم اقتراحاتنا تخطيط الشبكة (12 عمودًا بـ 52 بكسل مستقل الكثافة، مع هوامش التوثيق في 20 بكسل مستقل الكثافة)، راجع البطاقات وتخطيطات ومعاينات المكونات الموصى بها.
بُنى التخطيط
إليك بعض بُنى التخطيط لمساعدتك على إنشاء القرارات عند تصميم تخطيطات التلفزيون. من خلال تقسيم شاشات التلفزيون أفقيًا، يمكنها المساعدة في فصل أنواع مختلفة من المكونات وتوصيل المعلومات التسلسل الهرمي ومنطق التنقل. يمكن أن يحتوي الجزء على أعمدة وحدات متعددة. يمكن لكل لوحة استضافة أنماط تنسيق مختلفة، مثل تنسيق التكديس وتخطيط الشبكة.
![مثال على التخطيط أحادي اللوحة](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/single-pane-layout.webp?authuser=9&hl=ar)
تصميم أحادي اللوحة
يمكن أن يساعد التخطيط أحادي اللوحة في جذب الانتباه إلى المحتوى الأساسي. ويمكنك استخدامها مع تجربة إعادة توجيه المحتوى وصفحات المعلومات المهمة.
![مثال على التخطيط من جزأين](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=9&hl=ar)
تخطيط من جزأين
يحقق التنسيق المكون من جزأين بشكل أفضل عندما تعرض الصفحة محتوى هرميًا. يُستخدم على نطاق واسع في التجارب المتعلقة بالمهام.
الحمل الإدراكي الزائد
يمكن أن يؤدي المحتوى المعقّد وغير الواضح إلى الارتباك والإزعاج وانخفاض التفاعل. اجعل تصميمك سهل الاستعراض ومنظّمًا وحاضرًا المعلومات الأساسية فقط.
تجنَّب استخدام عدد كبير جدًا من اللوحات لتجميع المحتوى. يؤدي هذا إلى إنشاء الحمل المعرفي غير الضروري والتسلسل الهرمي للمستخدمين.
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/layout-do.webp?authuser=9&hl=ar)
الإجراءات التي يُنصح بها
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/layout-dont.webp?authuser=9&hl=ar)
الإجراءات غير المُوصى بها
العرض الهرمي والتنقّل السريع
اللوحات لفصل المحتوى مرئيًا وتنظيمه. فهي تساعد في توجيه المستخدمين وإنشاء واجهة أكثر سهولة لتحسين التجربة
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=9&hl=ar)
الإجراءات التي يُنصح بها
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/hierarchy-dont.webp?authuser=9&hl=ar)
الإجراءات غير المُوصى بها
نماذج التنسيق
تعزز قوالب التخطيط الترتيب والاتساق والألفة. التصميم إنشاء تجربة واجهة مستخدم مريحة تعرض بوضوح مكان المستخدم، وإلى أين يمكن أن يذهب.
تصفّح
يعرض نموذج المتصفح "مجموعات" لمحتوى الوسائط أو صفوف في مكدس عمودي. ويتنقل المستخدمون لأعلى ولأسفل لتصفح الصفوف وكذلك التنقل لليمين واليسار لتصفح محتوى صف معين.
![تصفّح](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/browse.webp?authuser=9&hl=ar)
تراكب أيسر
يعرض نموذج التنقل الأيمن لوحة تراكب على الجانب الأيمن من الشاشة. ويعرض عادةً عناصر التنقل أو العناصر التي يمكنك اتخاذ إجراء بشأنها ذي صلة بالمحتوى في الخلفية.
![تراكب على اليسار](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/left-overlay.webp?authuser=9&hl=ar)
تراكب أيمن
يعرض نموذج التراكب الأيمن لوحة تراكب على الجانب الأيمن من الشاشة. فهي تعرض عادةً العناصر التي تعتمد عليها بشكل مستقل عن المحتوى في الخلفية.
![تراكب أيمن](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/right-overlay.webp?authuser=9&hl=ar)
تراكب توسيط
يُظهر نموذج التراكب الأوسط عنصرًا نمطيًا يظهر أعلى طريقة عرض حالية. يتم استخدامها لتوصيل المعلومات العاجلة أو المطالبة باتخاذ قرار.
![تراكب توسيط](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/center-overlay.webp?authuser=9&hl=ar)
التراكب السفلي
يُستخدم نموذج التراكب السفلي بشكل شائع مع الأوراق السفلية. الأوراق السفلية هي أسطح تحتوي على محتوى تكميلي ثابت في أسفل الشاشة. وهي تتيح لك إنشاء تدفقات صغيرة دون فقدان سياق الصفحة الحالية.
![التراكب السفلي](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/bottom-overlay.webp?authuser=9&hl=ar)
المهام
يعرض نموذج الإجراء العنوان والعنوان الفرعي على اليمين، مع خيارات أو إجراءات على اليسار. عادةً ما يُطلب من المستخدمين تحديد خيار أو تنفيذ إجراء باستخدام هذا القالب.
![المهام](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/actions.webp?authuser=9&hl=ar)
تفاصيل المحتوى
يعرض نموذج تفاصيل المحتوى المحتوى بتنسيق أفقي مكدّس. يتضمن المحتوى بشكل عام العنوان والبيانات الوصفية والوصف القصير والإجراءات السريعة ومجموعات المعلومات ذات الصلة.
![تفاصيل المحتوى](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/content-detail.webp?authuser=9&hl=ar)
موسيقى مجمّعة
يعرض نموذج التجميع تفاصيل عنصر على الجانب الأيسر من الشاشة، مثل بودكاست بالإضافة إلى عناصره، مثل الحلقات، على اللوحة اليسرى.
![موسيقى مجمّعة](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/compilation.webp?authuser=9&hl=ar)
شبكة
يعرض نموذج الشبكة مجموعات من المحتوى في شبكة منظمة. وتعرض هذه الصفحة محتوًى منطقيًا واضحًا للتنقّل عن بُعد ويتيح تجربة تصفُّح مثالية.
![شبكة](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/grid-example.webp?authuser=9&hl=ar)
تنبيه
يعرض نموذج التنبيه رسالة بملء الشاشة. يتطلب ذلك عادةً اتخاذ إجراء لإزالة حظر التنبيه والرجوع إلى الشاشة السابقة.
![تنبيه](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/alert.webp?authuser=9&hl=ar)
أعمدة البطاقة
تنسيق بطاقة واحدة
عرض البطاقة: 844 بكسل مستقل الكثافة
![تنسيق بطاقة واحدة](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/1-card.webp?authuser=9&hl=ar)
تنسيق بطاقتَين
عرض البطاقة: 412 بكسل مستقل الكثافة
![تنسيق بطاقتَين](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/2-card.webp?authuser=9&hl=ar)
تخطيط من 3 بطاقات
عرض البطاقة: 268 وحدة بكسل مستقلة الكثافة
![تخطيط من 3 بطاقات](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/3-card.webp?authuser=9&hl=ar)
تنسيق من 4 بطاقات
عرض البطاقة: 196 بكسل مستقل الكثافة
![تنسيق من 4 بطاقات](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/4-card.webp?authuser=9&hl=ar)
تنسيق من 5 بطاقات
عرض البطاقة: 124 بكسل مستقل الكثافة
![تنسيق من 5 بطاقات](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/5-card.webp?authuser=9&hl=ar)