المقياس والأحجام والتصميم المرئي

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

• بالنسبة إلى تطبيقات Unity أو OpenXR أو WebXR: يمكنك اتّباع أي لغة تصميم تريدها. على الرغم من أنّ مكتبة Material Design متاحة فقط لتطبيقات Android، لا يزال بإمكانك اتّباع اقتراحات التصميم فيها للمساعدة في تطبيق الألوان والتباعد والحجم والأزرار والخطوط.

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

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

  إذا كنت تُنشئ تطبيق Android باستخدام مكتبة Material Design 3، يمكنك بسهولة إضافة سلوكيات واجهة المستخدم المكانية إلى مكوّناته وتنسيقاته التكيُّفية.

كيفية اختبار التصميم المرئي لتطبيقك

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

استخدام المحاكيات وأجهزة المحاكاة والأجهزة الحقيقية

• إذا كنت تُطوّر تطبيقًا متوافقًا مع Android، يمكنك اختبار تطبيقك على محاكي Android XR. يساعدك ذلك في تحديد المشاكل المحتمَلة وإجراء عمليات تكرار سريعة بدون استخدام جهاز.

قائمة التحقّق من اختبار التصميم المرئي

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

جمع ملاحظات المستخدمين

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

الاستهدافات في Android XR

في تطبيق الواقع المعزّز، يكون الهدف هو المنطقة التي يمكن النقر عليها أو الإشارة إليها ويتفاعل معها المستخدمون. تزيد الاستهدافات الأكبر من الدقة والراحة وسهولة الاستخدام. لجعل تطبيقك متاحًا للجميع، اتّبِع إرشادات استهداف التصميم المتعدد الأبعاد. وستكون متوافقة مع تطبيقات Android وUnity وOpenXR وWebXR. إذا كان تطبيقك يتبع اقتراحات Material Design، تستوفي أحجام الاستهداف الحد الأدنى، مع أنّ 56dp هو الحجم الأمثل.

يجب مراعاة ما يلي في جميع عناصر واجهة المستخدم التفاعلية:

• المقاس المستهدف المقترَح: 56dp x ‏56dp أو أكبر
• المساحة المرئية: 48dp x ‏48dp أو أكبر
• الخلوص بين الهدف والعنصر الوظيفي المرئي: 4dp
• لتحقيق تفاعلات دقيقة، يجب ألا تتراكب أهداف مؤشر عناصر واجهة المستخدم المختلفة.

احرص على إضافة حالات التمرير بمؤشر الماوس.

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

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

المسافة بين الاستهدافات

تنصح لغة Material Design بترك مسافة لا تقل عن 8dp بين الأهداف، بما في ذلك buttons. يضمن هذا التباعد قدرة المستخدمين على التمييز بسهولة بين العناصر التفاعلية وتجنُّب إجراء اختيارات غير مقصودة.

يمكن أن تختلف المسافة المحدّدة بين الأزرار حسب سياقها و حجمها. في ما يلي بعض العوامل التي يجب أخذها في الاعتبار:

• حجم الزر: قد تتطلّب الأزرار الأكبر حجمًا مساحة أكبر بينها للحفاظ على وضوحها المرئي.
• تجميع الأزرار: يمكن تجميع الأزرار ذات الصلة الوظيفية بشكلٍ وثيق معًا، في حين يجب أن يكون هناك مزيد من الفصل بين الأزرار غير ذات الصلة.
• التنسيق: يمكن أن يؤثّر التنسيق العام للشاشة في المسافة بين الأزرار. على سبيل المثال، قد تكون المسافة بين الأزرار في شريط الأدوات أقرب من المسافة بين الأزرار في مربّع الحوار.

حجم اللوحة وحجمها

تم تصميم Android XR لكي يكون تطبيقك مريحًا وسهل القراءة ويمكن لجمهورٍ واسع استخدامه. للحصول على تجربة مثالية، يستخدم Android XR نسبة 0.868 dp إلى dmm.

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

اقتراحات

• تكون زوايا اللوحات مستديرة بدرجة 32dp. ويمكنك إلغاء هذا الإعداد التلقائي.

سلوكيات عمق اللوحة

• مساحة المنزل: يتم تشغيل التطبيقات على بُعد 1.75 متر من المستخدم، ولا يمكن للمطوّرين تجاوز ذلك.
• المساحة الكاملة: يتم تشغيل التطبيقات تلقائيًا في الموضع نفسه الذي كانت عليه في المساحة الرئيسية. يمكنك استخدام المنطق المكاني لوضع اللوحات استنادًا إلى موقع المستخدم، ولكننا ننصح بمسافة إطلاق تبلغ 1.75 متر.

عندما يكون التطبيق على بُعد 1.75 متر من المستخدم:

• يتم عرض 1024dp على أنّه 1556.24 ملم.
• يتم عرض 720dp على أنّه 1093.66 مليمتر
• متر واحد في الواقع المادي = متر واحد في الواقع الممتد

الأزرار والرموز

إذا كان لديك تطبيق Android حالي، لن تحتاج إلى تصميم مكونات خاصة لنظام Android XR. اتّبِع إرشادات التصميم المتعدد الأبعاد في ما يتعلّق بالأزرار والرموز. إذا كان لديك تطبيق Unity أو OpenXR أو WebXR، يمكنك إبقاء الأزرار والرموز كما هي أو الاستفادة من الإلهام المأخوذ من Material Design.

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

الألوان

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

المظهران الداكن والفاتح في XR

استخدِم المظهرَين الداكن والفاتح كما تفعل في تطبيق Android المتوافق مع الأجهزة الجوّالة. يمكن للمستخدمين التبديل بين المظهرَين الداكن والفاتح في Android XR، واختيار النمط المرئي الذي يناسبهم بشكل أفضل.

مزيد من المعلومات حول أنظمة الألوان في التصميم المتعدد الأبعاد

أسلوب الخط في الواقع الممتد

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

لإنشاء تطبيق سهل الاستخدام، ننصحك باتّباع إرشادات التنسيق المرئي في Material Design.

أفضل الممارسات المتعلقة بالخطّ في الواقع المعزّز

• الحجم للمسافات المتغيرة: تذكَّر أنّ المستخدمين سيتنقّلون ويشاهدون النص من مواقع جغرافية مختلفة. تأكَّد من أنّ أحجام الخطوط كبيرة بما يكفي لقراءة المحتوى من مسافة بعيدة.
• وضع النص في مجال رؤية المستخدم الطبيعي: يتجنّب ذلك الحركة المفرطة للرأس وشدّة الرقبة.
• الأخذ بعين الاعتبار العمق والحجم: استخدِم إشارات العمق والحجم لإنشاء التسلسل الهرمي في المساحة الثلاثية الأبعاد.
• التأكّد من أنّ النص مقروء على خلفية المستخدم: توفّر الأوزان الثقيلة مزيدًا من التباين. يمكنك تعديلها حسب الألوان والإضاءة والتفاصيل في البيئة.
• استخدام خطّ ملائم للاستخدام على مختلف الأجهزة: قد تكون اللوحات قريبة جدًا أو بعيدة جدًا، وقد تكون زوايا الاطّلاع عليها من المستخدمين غير ملائمة.
• الحد من النص المرتبط بالكائنات المتحركة: يمكن أن يسبب ذلك دوار الحركة.

أسلوب الخط الذي يمكن الوصول إليه في الواقع المعزّز

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