التنسيقات

التخطيطات عبارة عن قوالب هيكلية توفر إطار عمل للحفاظ على الاتساق المرئي عبر تطبيقك. من خلال تحديد الشبكات المرئية والتباعد والأقسام، تنشئ التخطيطات هيكلاً متماسكًا ومنظمًا لعرض المعلومات وعناصر واجهة المستخدم.

صورة الغلاف للتنسيقات

أهمّ الميزات

  • على عكس الويب أو الأجهزة الجوّالة، تبلغ نسبة العرض إلى الارتفاع في الشاشة الثابتة 16:9 لأجهزة التلفزيون.
  • حسِّن التصميمات على المحاور الأفقية والرأسية لسهولة الاستخدام والتحكم.

المبادئ

إرشادات لمساعدتك في اتخاذ قرارات التصميم عند تصميم تخطيطات التلفزيون.

تصميم للشاشات الكبيرة

تصميم للشاشات الكبيرة

منذ انتشار أجهزة التلفزيون العالية الدقة، أصبحت أجهزة التلفزيون المستطيلة التي تبلغ نسبة عرض إلى ارتفاعها 16:9 هي القاعدة. في السابق، كانت أجهزة التلفزيون تُصنع على شكل مربّع يُعرف بنسبة عرض إلى ارتفاع تبلغ 4:3 أو 1.33 إلى 1.

التصميم لنظام Android

التصميم على نظام Android الأساسي

عند التصميم، استخدم dp لعرض العناصر بشكل موحّد على الشاشات ذات الكثافات المختلفة، كما هو الحال مع أي جهاز آخر يعمل بنظام التشغيل Android. يجب التصميم دائمًا بدقة MDPI بدقة 960 × 540 بكسل.

عند استخدام MDPI، 1 بكسل = 1 بكسل مستقل الكثافة.

يجب أن تكون مواد العرض متوافقة مع 1080p. ويسمح هذا لنظام Android بخفض دقّة عناصر التنسيق إلى 720p إذا لزم الأمر.

ضمان إذن الوصول

ضمان إذن الوصول والإشراف على الأمان

التأكد من أن العناصر المهمة مرئية دائمًا للمستخدمين. للقيام بذلك، ضع العناصر ذات هامش 5% يبلغ 48 بكسل مستقل الكثافة على الجانبين الأيسر والأيمن و27 بكسل مستقل الكثافة في الجزء العلوي والسفلي من التخطيط. يضمن ذلك أن عناصر شاشة التنسيق موجودة ضمن العرض الزائد.

ملء الشاشة

ملء الشاشة

لا تضبط عناصر شاشة الخلفية أو تقتطعها في المنطقة الآمنة التي تخرج عن إطار الشاشة. يمكنك بدلاً من ذلك السماح بالعرض الجزئي للعناصر خارج الشاشة. وهذا يضمن أن جميع الشاشات تعرض بشكل صحيح عناصر الخلفية والعناصر خارج الشاشة.

التحسين باستخدام المحاور

التحسين باستخدام المحاور

فكِّر في كيفية استخدام الأشخاص لوحدة التحكّم عن بُعد مع التلفزيون. تأكَّد من أنّ واجهة التلفزيون سهلة الاستخدام مع جهاز التحكّم عن بُعد. صمم كل اتجاه (لأعلى ولأسفل ويسار ويمين) ليكون له غرض واضح ونمط تنقل لمساعدة المستخدمين على فهم كيفية التنقل عبر مجموعات كبيرة من الخيارات.

التنسيق

تختلف أحجام شاشات التلفزيون من جهاز لآخر. نظرًا لأن نسبة العرض إلى الارتفاع في التلفزيون الحديث تبلغ نسبة العرض إلى الارتفاع 16:9، فمن المستحسن تصميم تطبيقك بحجم شاشة 960 × 540 بكسل. يضمن ذلك إمكانية تغيير حجم جميع العناصر بشكل يتناسب مع شاشات HD أو 4K.

شبكة تخطيط

هوامش الخروج عن إطار الشاشة

هوامش الخروج عن إطار الشاشة هي المسافات بين المحتوى، والحافتين اليسرى واليمنى من الشاشة.

960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp

تحمي الهوامش الحدودية العناصر الأساسية من المشاكل المحتملة التي تؤدي إلى الخروج عن إطار الشاشة. وللحفاظ على أمان المحتوى والمعلومات، استخدِم تنسيق هامش بنسبة% 5 (58 بكسل مستقل الكثافة على الجوانب و28 بكسل مستقل الكثافة على الحافتين العلوية والسفلية).

هوامش الخروج عن إطار الشاشة

الأعمدة وهوامش التوثيق

يتم وضع المحتوى في مناطق على الشاشة تحتوي على أعمدة وهوامش التوثيق. يتكون نظام الشبكة من 12 عمودًا. هوامش التوثيق هي المسافات بين الأعمدة التي تساعد في تقسيم المحتوى.

استخدِم 12 عمودًا بعرض 52 بكسل مستقل الكثافة (dp) مع مسافة بينها تبلغ 20 بكسل مستقل الكثافة. يجب أن تكون هناك مساحة 58dp على كلا الجانبين، و4dp للتباعد الرأسي بين السطور.

الأعمدة وهوامش التوثيق

أنماط التنسيق

هناك ثلاثة أنماط تخطيط متاحة اعتمادًا على الغرض المقصود وجهاز العرض: تخطيط المكدس الأفقي، وتخطيط المكدس العمودي، وتخطيط الشبكة.

تنسيق تكديس أفقي

يعمل تخطيط التكدس الأفقي على ترتيب المكوّنات أفقيًا. ويمكن أن تختلف من حيث الحجم أو النسبة أو التنسيق. غالبًا ما يستخدم هذا التخطيط لتجميع المحتوى والمكونات.

تنسيق تكديس أفقي

تنسيق تكديس عمودي

تخطيط التكدس العمودي يرتب المكونات بطريقة عمودية، بما يسمح بحجم ونسبة وتنسيق مرن. يُستخدم عادةً لتجميع أنواع مختلفة من النصوص والمكونات التفاعلية وأنماط التخطيط معًا.

تنسيق تكديس عمودي

تنسيق الشبكة

الشبكة عبارة عن مجموعة من الأعمدة والصفوف المتقاطعة، ويعرض تخطيط الشبكة المحتوى في هذه الشبكة. إنه يرتب المحتوى بطريقة منطقية، مما يسهل على المستخدمين التنقل والتصفح.

تنسيق الشبكة

لمنع التداخل، من المهم مراعاة المساحة المتروكة بين العناصر وزيادة حجم الحالات المركزة. على سبيل المثال، عندما يتم تمييز مكون مركز (مثل البطاقة). إذا كنت تستخدم تخطيط الشبكة الذي نقترحه (12 عمودًا في 52dp، مع هامش التوثيق في 20dp)، فراجع البطاقات لمعرفة تخطيطات ومعاينات المكوّنات الموصى بها.

بُنى التخطيط

فيما يلي بعض هياكل التخطيط لمساعدتك على اتخاذ قرارات أفضل عند تصميم تخطيطات التلفزيون. من خلال تقسيم شاشات التلفزيون أفقيًا، يمكن أن يساعد في فصل أنواع مختلفة من المكونات، وتوصيل التسلسل الهرمي للمعلومات ومنطق التنقل. يمكن أن يحتوي الجزء على أعمدة وحدات متعددة. يمكن أن تستضيف كل لوحة أنماط تخطيط مختلفة مثل "Stack" (تخطيط المكدس) و"Grid Layout" (تخطيط الشبكة).

مثال على تخطيط أحادي اللوحة

تخطيط أحادي اللوحة

يمكن أن يساعد التخطيط أحادي اللوحة في جذب الانتباه إلى المحتوى الأساسي. استخدِم هذه الميزة مع تجربة إعادة توجيه المحتوى وصفحات المعلومات المهمة.

مثال على تخطيط ثنائي اللوحة

تخطيط من لوحتين

يحقق التخطيط المكون من لوحتين أداءً أفضل عندما تعرض الصفحة محتوى هرميًا. يُستخدم على نطاق واسع في تجارب إعادة توجيه المهام.

الحِمل المعرفي

يمكن أن يؤدي المحتوى المعقد وغير الواضح إلى الارتباك والانزعاج والتراجع في التفاعل. اجعل تصميمك سهل التصفح ومنظمًا وأن يقدم معلومات أساسية فقط.

تجنَّب استخدام عدد كبير جدًا من اللوحات لتجميع المحتوى. يؤدي هذا إلى إنشاء حمل معرفي وتسلسل هرمي غير ضروري للمستخدمين.

يمكنك وضع المحتوى ذي الصلة معًا في لوحة واحدة. يساعد هذا المستخدمين على فهم تجميع المحتوى.
تجنَّب استخدام عدد كبير جدًا من اللوحات لتجميع المحتوى. يؤدي هذا إلى إنشاء حمل معرفي وتسلسل هرمي غير ضروري للمستخدمين.

العرض الهرمي والتنقّل السريع

تعمل اللوحات على فصل المحتوى وتنظيمه بصريًا. فهي تساعد في إرشاد المستخدمين، وبإمكانها إنشاء واجهة أكثر سهولة تعزز التجربة.

تجميع المحتوى استنادًا إلى مسار القراءة للمستخدم تأكد من توافق مسار التركيز مع التسلسل الهرمي أو منطق اتخاذ القرار.
لا توجه انتباه المستخدم ذهابًا وإيابًا بين اللوحات. ويؤدي ذلك إلى إنشاء مسارات تركيز غير طبيعية لا تتماشى مع عادات القراءة لدى المستخدمين.

نماذج التنسيق

تعزز قوالب التخطيط النظام والاتساق والمعرفة. يخلق التصميم تجربة واجهة مستخدم مريحة تنقل بوضوح مكان المستخدم، وأين يمكنه الذهاب.

تصفّح

يعرض نموذج المتصفّح صفوفًا لمحتوى الوسائط أو "مجموعات" في حزمة عمودية. يتنقل المستخدمون لأعلى ولأسفل لتصفّح الصفوف، ويتنقلون يمينًا ويسارًا لتصفّح محتوى صف معيّن.

تصفّح

التراكب الأيسر

يعرض نموذج التنقّل الأيمن لوحة مركّبة على الجانب الأيمن من الشاشة. يعرض عادةً شريط التنقّل أو العناصر التي يمكنك اتخاذ إجراء بشأنها ذات الصلة بالمحتوى في الخلفية.

تراكب أيمن

التراكب الأيمن

يُظهر قالب التراكب الأيمن لوحة تراكب على الجانب الأيمن من الشاشة. ويظهر عادةً في الخلفية عناصر تتّخذ إجراءات بشأنها بشكل مستقل عن المحتوى.

التراكب الأيمن

توسيط التراكب

يُظهر نموذج التراكب الأوسط عنصرًا شكليًا يتداخل أعلى طريقة عرض حالية. ويتم استخدامه لتوصيل المعلومات العاجلة أو الحث على اتخاذ قرار.

توسيط التراكب

التراكب السفلي

يُستخدم قالب التراكب السفلي بشكل شائع مع الأوراق السفلية. الأوراق السفلية هي أسطح تحتوي على محتوى تكميلي يتم تثبيته في أسفل الشاشة. وتسمح لك بإنشاء تدفقات صغيرة دون فقدان سياق الصفحة الحالية.

التراكب السفلي

المهام

يعرض نموذج الإجراء العنوان والعنوان الفرعي على اليمين، مع خيارات أو إجراءات على اليسار. عادةً ما يُطلب من المستخدمين اتخاذ خيار أو تنفيذ إجراء باستخدام هذا القالب.

المهام

تفاصيل المحتوى

يعرض نموذج تفاصيل المحتوى المحتوى بتنسيق أفقي مكدس. يتضمن المحتوى عادةً العنوان والبيانات الوصفية والوصف القصير والإجراءات السريعة ومجموعات المعلومات ذات الصلة.

تفاصيل المحتوى

موسيقى مجمّعة

يعرض نموذج التجميع تفاصيل عنصر على يمين الشاشة، مثل بودكاست، مع عناصره، مثل حلقاته، على اللوحة اليسرى.

موسيقى مجمّعة

معرّف الإصدار العالمي (GRid)

يعرض قالب الشبكة مجموعات من المحتوى في شبكة منظمة. فهو يعرض المحتوى بمنطق واضح للتنقل عن بُعد وتجربة تصفُّح مثالية.

معرّف الإصدار العالمي (GRid)

تنبيه

يعرض نموذج التنبيه رسالة بملء الشاشة. يتطلب ذلك عادةً اتخاذ إجراء لإزالة حظر التنبيه والعودة إلى الشاشة السابقة.

تنبيه

أعمدة البطاقة

تنسيق بطاقة واحدة

عرض البطاقة: 844dp

تنسيق بطاقة واحدة

تنسيق بطاقتين

عرض البطاقة: 412 بكسل مستقل الكثافة

تنسيق بطاقتين

تنسيق بطاقات 3

عرض البطاقة: 268 بكسل غير مرتبطة بالكثافة

تنسيق بطاقات 3

تنسيق 4 بطاقات

عرض البطاقة: 196 بكسل مستقل الكثافة

تنسيق 4 بطاقات

تنسيق البطاقات 5

عرض البطاقة: 124dp

تنسيق البطاقات 5