تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

التنسيقات

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

أهم التفاصيل

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

المبادئ

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

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

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

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

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

في MDPI 1 بكسل = 1 بكسل مستقل الكثافة.

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

ضمان الأمان والخروج من مستوى شحن البطارية

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

ملء الشاشة

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

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

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

التنسيق

تختلف أحجام شاشات التلفزيون من جهاز إلى آخر. وبما أن التلفزيون الحديث يحتوي على 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 بكسل مستقل الكثافة)، راجع البطاقات وتخطيطات ومعاينات المكونات الموصى بها.

بُنى التخطيط

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

تصميم أحادي اللوحة

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

تخطيط من جزأين

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

الحمل الإدراكي الزائد

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

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

الإجراءات التي يُنصح بها

ضَع المحتوى ذي الصلة معًا في لوحة واحدة. يساعد هذا المستخدمين على فهم تجميع المحتوى.

الإجراءات غير المُوصى بها

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

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

الإجراءات التي يُنصح بها

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

الإجراءات غير المُوصى بها

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

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

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

تصفّح

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

تراكب أيسر

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

تراكب أيمن

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

تراكب توسيط

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

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

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

المهام

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

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

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