إنّ التطبيقات التي تستخدم تنسيقات سريعة الاستجابة وتتكيّف تلقائيًا مع أحجام الشاشة المختلفة توفّر قيمة إضافية للمستخدمين وتوفّرتجارب مستخدمين أكثر إنتاجية وتفاعلاً.
تعمل التنسيقات المتجاوبة على تنسيق العناصر وتحديد مواضعها ديناميكيًا، مثل الأزرار وحقول النصوص وملفات الحوار، وذلك لتوفير تجربة مثالية للمستخدم. يمكنك تلقائيًا منح مستخدمي تطبيقك قيمة إضافية على الشاشات الكبيرة من خلال اتّباع ممارسات التصميم المتجاوب. سواء كان ذلك من خلال عرض المزيد من النصوص بشكل سريع أو المزيد من الإجراءات على الشاشة أو أهداف أكبر حجمًا وأكثر سهولة في النقر عليها، توفّر الممارسات المتوافقة مع الأجهزة الجوّالة تجربة محسّنة لمستخدمي الشاشات الكبيرة.
إضافة قيمة من خلال التصميم المتجاوب
الإجراءات التي يُنصح بها
- استخدِم مكتبة مكونات M3 Compose التي تتضمّن سلوكًا مدمجًا سريع الاستجابة والتكيّف.
- استخدِم التنسيقات المتجاوبة التي تتم تعديلها تلقائيًا بسلاسة لملء المساحة المتاحة على مختلف أحجام الشاشة.
الإجراءات غير المُوصى بها
- يمكنك تمديد عناصر واجهة المستخدم، بما في ذلك الحقول النصية والأزرار ومربّعات الحوار، لملء المساحة الإضافية.
- احرص على زيادة أحجام الخطوط، ما لم يكن الغرض منها هو الرسومات في المقام الأول.
إنشاء تطبيقات وشاشات معلومات سريعة الاستجابة لنظام التشغيل Wear OS
يتم تمديد واجهات المستخدم المتجاوبة وتغييرها للاستفادة إلى أقصى حدّ ممكن من كل مساح الشاشة المتاحة، بغض النظر عن حجم الشاشة التي يتم عرضها عليها.
عند تصميم تنسيقات سريعة الاستجابة على شاشة مستديرة، يكون لكل من طرق العرض التي تتيح الانتقال للأعلى أو للأسفل وتلك التي لا تتيح ذلك متطلبات فريدة للحفاظ على اتّساق تنسيق واجهة المستخدم وتصميمه. بالنسبة إلى طرق العرض التي تتيح الانتقال للأعلى أو للأسفل، استخدِم النسب المئوية لتحديد كل الهوامش العلوية والسفلية والجانبية لتجنّب الاقتصاص وتوفير التكبير/التصغير النسبي للعناصر. بالنسبة إلى طرق العرض التي لا تتيح الانتقال للأعلى أو للأسفل، استخدِم النسب المئوية والقيود العمودية لجميع الهوامش. بهذه الطريقة، يمكن أن يتمدد المحتوى الرئيسي في الوسط لملء المساحة المتوفّرة.
المشاهدات التي يتم التمرير فيها
يجب تحديد جميع الهوامش العلوية والسفلية والجانبية كنسب مئوية لتجنُّب الاقتصاص وتوفير مقياس نسبي للعناصر.
المشاهدات التي لا تتضمّن الانتقال إلى صفحات أخرى
يجب تحديد جميع الهوامش كنسب مئوية، ويجب تحديد القيود الرأسية بحيث يمكن للمحتوى الرئيسي في المنتصف التمدد لملء المنطقة المتاحة.
أمثلة
تعرض الصور التالية أمثلة على التطبيقات التي تتجاوب مع مختلف الأجهزة والمحسَّنة.
الأزرار التي تلتصق بالجانب
قائمة البطاقات
قائمة مفاتيح التبديل والأزرار
مربّع يتضمّن بطاقات صور
قائمة البطاقات التي تتضمّن صورًا
مربّع يحتوي على رسم بياني
