التصميم التكيّفي هو ممارسة تصميم تنسيقات تتكيّف مع نقاط توقّف وأجهزة معيّنة.
لتنفيذ التنسيقات التكيّفية بفعالية، اتّبِع الخطوات التالية:
في البداية، ضع في اعتبارك عرض فئة نافذة الجهاز لتحديد تغييرات التنسيق، ثم اضبط الارتفاع. التوافق مع أحجام الشاشات المختلفة:
يستفيد نظام التشغيل Android من مفاهيم التصميم السريع الاستجابة، على غرار تطوير الويب، ويستخدم شبكات وصورًا مرنة لإنشاء تخطيطات تستجيب بفعالية لسياقها.
السماح للتصاميم بالاستجابة لمجموعة متنوعة من الأحجام باستخدام طرق تكيُّفية: إعادة التدفق، والكشف، وتغيير العرض التقديمي
تجنَّب قفل تطبيقك على الوضع العمودي فقط. ويؤدي ذلك إلى ظهور أعمدة سوداء على جانبي الشاشة عند تغيير حجم تطبيقك.
الإجراءات غير المُوصى بها
للحصول على إرشادات تصميم حول تكييف التنسيقات مع أحجام الشاشات الموسّعة، يمكنك الاطّلاع على دليل المطوّرين التوافق مع أحجام الشاشات المختلفة في Compose وصفحة تطبيق التنسيق في Material Design 3. يمكنك أيضًا الاطّلاع على معرض التصميمات الأساسية للشاشات الكبيرة على Android للحصول على أفكار حول تنفيذ تنسيقات الشاشات الكبيرة.
التفكير بشكل تكيفي
يجب أن يكون التصميم التكيّفي هو التصميم التلقائي عند تصميم تطبيقك، لأنّ سوق الأجهزة الجوّالة التي تعمل بنظام Android يتطوّر باستمرار، لذا لا يمكنك التفكير في الأجهزة الجوّالة على أنّها هواتف محمولة فقط. بدلاً من ذلك، يجب أن يشمل كل شيء بدءًا من الهواتف المحمولة والهواتف القابلة للطي والأجهزة اللوحية وكل ما بينها.
في حين أنّ بعض الميزات وحالات الاستخدام قد لا تكون منطقية على كل حجم شاشة أو شكل جهاز، يتيح التصميم المتكيّف للمستخدمين المزيد من الحرية فيما يتعلق ببيئة العمل المريحة وسهولة الاستخدام وجودة التطبيق.
الطرق والجودة
يمكنك البدء بتصميم الشاشات الرئيسية (التي توضّح المفاهيم الأساسية أو تطبيقك) مع أحجام الصفوف كنقاط توقّف لتكون بمثابة إرشادات لبقية تطبيقك. ويمكن أن تُبرز هذه التجارب الرئيسية الصفات المختلفة المتوافقة مع الأجهزة المختلفة وعوامل الشكل. أو يمكنك تصميم المحتوى ليكون متجاوبًا على مستوى أساسي من خلال تحديد كيفية تقييد المحتوى أو توسيعه أو إعادة تدفقه.
في هذا المثال، يتم إعادة ترتيب المحتوى وعناصر التنقّل وتوسيعها وتغيير حجمها لتوفير تجربة تنقّل مريحة أكثر. ويتوسّع تخطيط الشبكة من التنسيق العمودي إلى التنسيق المتعدد الأعمدة. ويتم إعادة ترتيب العنوان في شريط التطبيق والفلاتر وتوسيعها لتناسب تخطيط الشبكة.
إجراءات يُنصح بها
الإجراءات غير المُوصى بها
إجراءات يُنصح بها
إجراءات يُنصح بها
الإجراءات غير المُوصى بها
تأكَّد من أنّ مربّعات الإدخال والأزرار ليست ممدودة.
فكِّر من منظور الاحتواء والألواح.
استخدِم مفهوم الاحتواء في اللوحات لتجميع المحتوى في التصاميم التكيّفية. على سبيل المثال، المثال المستخدَم هو شاشة تفاصيل، وهي لوحة واحدة يمكن عرضها في عرض على شكل قائمة مع تفاصيل.
يجب أن تلتزم الأحجام الصغيرة بتنسيق لوحة واحدة.
يمكن استخدام تنسيقات تتضمّن لوحة واحدة أو لوحتَين في الشاشات المتوسطة الحجم.
يمكن استخدام تخطيطات متعددة الألواح مع الشاشات الكبيرة والكبيرة جدًا.
استخدِم الحاويات المضمّنة والمرئية لتجميع العناصر معًا. ويمكن نقل اللوحات أو إخفاؤها أو توسيعها أو حصرها أو عرضها كنافذة منبثقة. ويؤدي استخدام اللوحات إلى تسهيل عملية التصميم على جميع الأجهزة الجوّالة.
على الرغم من أنّ اللوحات ليست ضرورية على الشاشات الكبيرة، يجب التفكير في المحتوى ضمن مجموعات احتواء لتوفير المرونة.
السماح للعناصر بالتغيير وإعادة الترتيب من خلال التركيز على كيفية تكيّف العناصر مع الشبكة، مع مراعاة التغيير العمودي للعناصر والجمع بين القيود والتغييرات في العرض
ضَع في اعتبارك حجم المحتوى وكميته المعروضة.
قد تصبح شبكة صغيرة من الفيديوهات على هاتف ضيقة ومربكة على جهاز لوحي. عدِّل مقياس عنصر واجهة المستخدم استنادًا إلى حجم الشاشة وكثافتها وطريقة الإدخال.
يجب أن يستوفي التطبيق العالي الجودة متطلبات الفئة المميزة في إرشادات جودة التطبيق الأساسي وجودة التطبيق على الشاشات الكبيرة.
لمزيد من المعلومات حول التنسيقات، يمكنك الاطّلاع على صفحة "فهم التنسيق" في التصميم المتعدد الأبعاد 3 (M3).
استفِد من أحجام عامل الشكل الفريدة.
لا تنسَ أحجام الشاشات الأصغر ونِسب العرض إلى الارتفاع المختلفة، لأنّ هواتف Android تتضمّن مجموعة من الأحجام، ويمكن أن تتضمّن الأجهزة القابلة للطي شاشة غطاء صغيرة يمكنها عرض تطبيقك.
بالنسبة إلى التصاميم المستندة إلى عناصر التحكّم، مثل مشغّلات الوسائط، يجب السماح بإعادة ترتيب عناصر التحكّم وإظهار المحتوى.
لمساعدة المستخدمين على التكيّف مع هذه التجربة، استخدِم عنصرًا ثابتًا، مثل زر تشغيل كبير، لتكييف المحتوى من حوله، وستصبح الصورة الرئيسية هي الخلفية على شاشة الغلاف.
ما وراء فئات الحجم
على الرغم من أنّ حجم النافذة هو عامل شائع في التصميم المتكيّف، يجب أن يكون تطبيقك جاهزًا أيضًا لكي يتمكّن المستخدمون من توصيل شاشات وأجهزة إدخال، وعرض المحتوى من مسافات مختلفة، وتغيير وضع الجهاز. يمكنك التحقّق من هذه التغييرات باستخدام واجهة برمجة التطبيقات mediaQuery، والتي تتيح لك إضافة تفاصيل دقيقة عند تصميم طريقة تكييف تطبيقك لعناصر معيّنة في واجهة المستخدم مع حالات استخدام محدّدة.
يمكنك تعديل تصميم تطبيقك على مستوى المكوّن أو اللوحة، بدلاً من تصميم شاشات كاملة لكل حجم ونوع إدخال وشكل جهاز ووضعية.
لمزيد من المعلومات حول التفاعل مع الإدخال، يمكنك الاطّلاع على أدلّة التفاعل مع تجربة سطح المكتب.
يمكنك الاطّلاع على نموذج دراسة حالة، Pawparrazzi، تم إنشاؤه وتصميمه باستخدام أحدث واجهات برمجة التطبيقات المتجاوبة وإرشادات التصميم.
