يوفر هذا القسم إرشادات تصميم لتخطيطات الشاشة التي يمكن قياسها عبر مجموعة من أحجام الشاشات.
ويتم استخدام قيم المساحة المتروكة والسطر الرئيسي المحددة هنا في المكوّنات ومواصفات الوسائط ومواصفات مركز الإشعارات ومواصفات برنامج الاتصال.
إرشادات سريعة (TL:DR):
- إسناد التخطيطات إلى فئات حجم الشاشة المناسبة
- استخدام شبكة بدقة 8 وحدات بكسل مستقلة الكثافة (dp) للمحاذاة
- ضبط عرض الهوامش على% 12 من مساحة عمل التطبيق
- وضع أشرطة التمرير وأدوات المساعدة في التنقّل في الهوامش
- استخدام المساحة المتروكة لمسافات ثابتة بين العناصر
مفاهيم التنسيق الرئيسية
- مساحة عمل التطبيق: مساحة الشاشة المتاحة للتطبيق بعد حساب مساحة الشاشة التي تشغلها ميزات الشركة المصنعة للسيارة وواجهة مستخدم النظام
- فئات حجم الشاشة: مجموعة من 4 نطاقات لعرض الشاشة (العادي والعريض والعريض جدًا والعريض جدًا)، و3 نطاقات لارتفاع الشاشة (قصيرة وعادية وطويل)، تشير فيها كلمة "الشاشة" إلى مساحة عمل التطبيق بدلاً من المساحة الكاملة من الحافة إلى الحافة
- المساحة المتروكة: مجموعة من قيم التباعد التي تحدد التباعد العمودي والأفقي الثابت بين العناصر والمكونات في تنسيق
- الخطوط الأساسية: مجموعة من قيم التباعد ذات العرض المتغيّر، والتي يتم تحديدها حسب فئات العرض، والتي تشير إلى مسافة أفقية بين هامش أو حافة مكوّن وعنصر في التنسيق
- المنطقة المرنة: جزء من مكوّن يتم تعيينه أحيانًا للحد الأدنى أو الأقصى للقيمة، ويمكن تغيير حجمه ليتناسب مع حجم الشاشة.
مساحة عمل التطبيق
مساحة عمل التطبيق هي مساحة الشاشة المتاحة المتبقية بعد حساب مساحة الشاشة التي تشغلها ميزات الشركة المصنعة للسيارة وواجهة مستخدم النظام. تم تصميم مساحة عمل التطبيق بحيث تحتوي على الهوامش اليمنى واليسرى ولوحة التطبيق، وهي منطقة المحتوى الأساسية للتطبيق.
ويجب أن يساوي كل هامش نسبة 12% من عرض مساحة العمل في التطبيق. تحتوي الهوامش عادةً على أشرطة تمرير وعناصر تنقل للتطبيق.
أحجام الشاشة
تعتمد التنسيقات ذات المواصفات المرجعية على مجموعة من فئات حجم الشاشة بناءً على عرض وارتفاع مساحة عمل التطبيق.
وفي المواصفات الواردة في هذه الإرشادات، يُشار إلى هذه الفئات بالاسم. على سبيل المثال، يشير مصطلح "واسع" إلى جميع قيم عرض الشاشة التي تتراوح بين 930 بكسل مستقل الكثافة و1279 بكسل مستقل الكثافة.
تؤثر فئات حجم الشاشة في الاقتراحات لما يلي:
- تباعد الأسطر الأساسية في المكونات والعناصر
- تحجيم المناطق المرنة للمكوّنات
- حالات إخفاء عناصر اختيارية أو عرضها، مثل صورة الألبوم على شريط التحكّم المصغّر
فئات العرض
| الإذن بالوصول العادي | واسع | عريض جدًا | عريضة جدًا | |
|---|---|---|---|---|
| نطاق عرض الشاشة | 690 – 929 بكسل مستقل الكثافة | 930 – 1279 بكسل مستقل الكثافة | 1280 – 1919dp | ≥ 1920 بكسل مستقل الكثافة |
فئات الارتفاع
| فيديو Shorts | الإذن بالوصول العادي | طويل | |
|---|---|---|---|
| نطاق ارتفاع الشاشة | من 0 إلى 609 بكسل مستقل الكثافة | 610 – 1199 بكسل مستقل الكثافة | ≥ 1200 بكسل مستقل الكثافة |
المسافات
تعتمد تخطيطات المواصفات المرجعية على شبكة 8dp. من الناحية العملية، يعني ذلك أنّ مكونات واجهة المستخدم والعناصر في المواصفات متباعدة عن بعضها بمضاعفات 8dp.
هناك نوعان من التباعد:
المساحة المتروكة، للتباعد بين العرض الثابت والارتفاع الثابت
الأسطر الرئيسية، لتباعد عرض متغيّر
مساحة متروكة
تحدد المساحة المتروكة مسافات بعرض ثابت وارتفاع ثابت بين المكونات في تنسيق المواصفات المرجعية. كما يمكن أن يحدد أيضًا مسافات ثابتة بين العناصر داخل المكون، مثل المسافة بين أهداف الأرقام المجاورة على مكون لوحة الاتصال. عادةً، كلما كانت العلاقة بين عنصرين أقرب، زادت ضيق المساحة المتروكة بينهما.
هناك 9 قيم مساحة متروكة، تُعرف باسم P0 - P8.
في ما يلي قيم المساحة المتروكة والأحجام المقابلة لها:
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4 بكسل مستقل الكثافة | 8 بكسل مستقل الكثافة | 12 بكسل مستقل الكثافة | 16 بكسل مستقل الكثافة | 24 بكسل مستقل الكثافة | 32 بكسل مستقل الكثافة | 48 بكسل مستقل الكثافة | 64 بكسل مستقل الكثافة | 96 بكسل مستقل الكثافة |
وعلى عكس keylines التي تغيّر قيم التباعد بناءً على فئات عرض الشاشة، تظل قيم المساحة المتروكة ثابتة. على سبيل المثال، تكون P1 دائمًا 8dp. ومع ذلك، في بعض الحالات، قد تكون للمسافة بين مجموعة معينة من المكونات أو العناصر قيم مساحة متروكة مختلفة في تخطيطات المواصفات المرجعية لأحجام الشاشات المختلفة. على سبيل المثال، التباعد الرأسي الموصى به بين عناصر الشبكة هو P4 للشاشات القصيرة وP5 للشاشات القياسية والطويلة.
الخطوط الرئيسية
بدلاً من تحديد مساحة متروكة بين العناصر في مواصفات مرجعية، تحدد الخطوط الأساسية مدى بُعد العنصر عن أقرب هامش أو حافة للمكون. تُغيّر الخطوط الرئيسية القيمة بناءً على عرض الشاشة. وهي توفر طريقة ملائمة لتغيير حجم التخطيط إلى أحجام مختلفة للشاشة مع الحفاظ على تباعد متناسب وأفقي للعناصر.
هناك 5 خطوط رئيسية، تُعرف باسم KL0 إلى KL4.
في ما يلي قيم الأسطر الأساسية لكل عرض شاشة:
| عرض الشاشة | الإذن بالوصول العادي | واسع | عريض جدًا | عريضة جدًا |
|---|---|---|---|---|
| KL0 | 16 بكسل مستقل الكثافة | 24 بكسل مستقل الكثافة | 24 بكسل مستقل الكثافة | 32 بكسل مستقل الكثافة |
| KL1 | 24 بكسل مستقل الكثافة | 32 بكسل مستقل الكثافة | 32 بكسل مستقل الكثافة | 48 بكسل مستقل الكثافة |
| KL2 | 96 بكسل مستقل الكثافة | 112 بكسل مستقل الكثافة | 112 بكسل مستقل الكثافة | 112 بكسل مستقل الكثافة |
| KL3 | 112 بكسل مستقل الكثافة | 128 بكسل مستقل الكثافة | 128 بكسل مستقل الكثافة | 152 بكسل مستقل الكثافة |
| KL4 | 148 بكسل مستقل الكثافة | 168 بكسل مستقل الكثافة | 168 بكسل مستقل الكثافة | 168 بكسل مستقل الكثافة |
استراتيجيات التوسيع
توفّر التصاميم ذات المواصفات المرجعية إرشادات لضبط حجم التطبيقات على أحجام الشاشات المختلفة. للمساعدة في التوسعة السلس، تتضمّن المواصفات عادةً ما يلي:
- المنطقة المرنة، وهي جزء من مكوّن يجب على شركات تصنيع السيارات توسيعه أو تصغيره ليلائم حجم شاشتها تحديدًا
- يُوصى اختياريًا بالحد الأدنى والحد الأقصى للعرض للمنطقة المرنة، ويهدف إلى منع تغيير حجم المكونات إلى أحجام غير مرغوب فيها
- يتم استخدام الخطوط الرئيسية للحفاظ على تباعد متناسب وأفقي بين العناصر، ويتم ضبط هذه التباعد بشكل مختلف بناءً على فئة عرض الشاشة.
- المساحة المتروكة، لتحديد مسافات ثابتة بين المكونات والعناصر
اختياريًا، تحدد بعض المواصفات ما إذا كان سيتم إخفاء أو عرض عناصر معينة بناءً على عرض الشاشة.
المثال 1: شريط التحكّم المصغّر
شريط التحكم المصغر هو مثال على مكون يقترح تنسيق المواصفات المرجعية استعراض عرض المكوِّن وإخفاء عنصر غير أساسي بأحجام شاشة أصغر.
تتضمن مواصفات شريط التحكم المصغّر إرشادات ضبط الحجم:
- يجب أن يظهر العنصر المربع في اليمين (يُستخدم عادةً لصورة الألبوم) فقط عندما يكون عرض الشاشة 930 بكسل مستقل الكثافة أو أكبر،
- يجب ألا يكون قسم العرض المرن في المنتصف أضيق أبدًا عن 440 بكسل مستقل الكثافة، ويمكن تكبيره لتناسب الشاشات الأعرض ما دام عرض المكوِّن بالكامل لا يتجاوز 1028 بكسل مستقل الكثافة.
مثال 2: الشبكات
الشبكات هي مثال على المكونات التي يمكن وضعها وتحديد حجمها في أعمدة وصفوف داخل تخطيط.
يعتمد عدد الأعمدة المقترَح (3 على الشاشات الأقل عرضًا و4 أعمدة على الشاشات الأعرض) على حجم الشاشة. يمكن تعديل عرض العمود وارتفاع الصف ضمن فئة الشاشة طالما أن الشبكات لا تقل أبدًا عن الحد الأدنى المقترَح للعرض. توضح الصورة المتحركة أدناه كيف يمكن تغيير حجم الشبكات إلى شاشات أوسع وأضيق من خلال اتباع التوصيات الواردة في تخطيطات المرجع.
