الشبكات والوحدات

تُعد وحدات البكسل المستقلة الكثافة (dp) ووحدات البكسل القابلة للتوسّع (sp) ضرورية لإنشاء التنسيقات وعرض الخطوط التي تتجاوب بشكل موحّد مع مجموعة كبيرة من كثافات الشاشة وفئات الحجم وعوامل الشكل ونِسب العرض إلى الارتفاع التي تتكوّن منها أجهزة Android.

الخلاصات

• في حال استخدام شبكة أساسية، التزم بالقياسات 4 و8.
• استخدِم وحدات dp وsp في تدوين المواصفات بدلاً من وحدات البكسل.
• تصدير رسومات نقطية (راستر) لجميع الحِزم
• صمِّم تطبيقك مع مراعاة إمكانية الاستجابة، وذلك من خلال وضع فئات الأحجام ودرجات الدقة ونِسب العرض إلى الارتفاع المختلفة في الاعتبار.
• وحدات البكسل المستقلة الكثافة (dp): وحدات البكسل المستقلة الكثافة هي وحدات مرنة يتم تغيير حجمها لتوفير أبعاد موحّدة على أي شاشة، وهي تستند إلى الكثافة المادية للشاشة. وتكون هذه الوحدات مرتبطة بشاشة تبلغ كثافتها 160 نقطة لكل بوصة، حيث تعادل وحدة بكسل مستقلة الكثافة الواحدة وحدة بكسل واحدة تقريبًا.
• وحدات البكسل القابلة للتوسّع (sp): تؤدي وحدات البكسل القابلة للتوسّع الوظيفة نفسها التي تؤديها وحدات البكسل غير المرتبطة بالكثافة، ولكنها مخصّصة للخطوط. تكون القيمة التلقائية لـ sp هي نفسها القيمة التلقائية لـ dp. يحسب نظام التشغيل Android حجم الخط الفعلي الذي سيتم استخدامه استنادًا إلى الجهاز والإعدادات المفضّلة للمستخدم التي تم ضبطها في إعدادات الجهاز.

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

يستخدم Android هذه الوحدات للمساعدة في تغيير الحجم والترجمة على مستوى مجموعة الأجهزة ودرجات الدقة.

حِزم الكثافة

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

يصنّف نظام التشغيل Android نطاقات كثافة الشاشة في "حِزم" ويستخدمها لتقديم المجموعة المثالية من مواد العرض إلى جهازك. إنّ فئات الكثافة الأكثر استخدامًا هي mdpi وhdpi وxhdpi وxxhdpi وxxxhdpi (تشير nodpi وanydpi إلى فئة لا يتم تغيير حجمها حسب دقة الجهاز، ويتم استخدامها عادةً مع الرسومات المتجهة القابلة للرسم) ويتوافق كل منها مع ملف موارد لتطبيقك.

لحساب dp، اتّبِع الخطوات التالية:

dp = (العرض بالبكسل * 160) / كثافة الشاشة

الشبكة الأساسية

يساعد التصميم باستخدام شبكة أساسية في إنشاء تباعد ومحاذاة متسقَين في جميع أنحاء واجهة المستخدم، وتستخدم واجهة مستخدم Android شبكة 8 dp للتخطيط والمكوّنات والتباعد.

من الأفضل محاذاة العناصر الأصغر حجمًا، مثل الأيقونات والأنواع وبعض العناصر داخل المكوّنات، مع شبكة 4 dp.

شبكات التخطيط

تشكّل الشبكات أساس أي تخطيط، لذا يجب مراعاة التسلسل الهرمي للمحتوى وكميته وحتى الرسالة.

الشبكة الهرمية

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

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

الشبكة النموذجية

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

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

شبكة الأعمدة

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

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

فئات الحجم

فئات أحجام النوافذ هي مجموعة من نقاط توقّف إطارات العرض التي تساعدك في تصميم وتطوير واختبار تنسيقات التطبيقات المتجاوبة والمتكيّفة. تقسّم منصة Android فئات حجم النافذة إلى 3 فئات: صغيرة ومتوسطة وكبيرة. يمكنك الاطّلاع على مزيد من المعلومات حول فئات أحجام النوافذ.

نِسب العرض إلى الارتفاع

نسبة العرض إلى الارتفاع هي نسبة عرض العنصر إلى ارتفاعه، وتُكتب على النحو التالي: العرض:الارتفاع.

للحفاظ على الاتساق في التصميم، استخدِم نسبة عرض إلى ارتفاع ثابتة في العناصر، مثل الصور والمساحات وحجم الشاشة.

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

• 16:9
• 3:2
• 4:3
• 1:1
• 3:4
• 2:3