كيفية الحفاظ على وضوح رؤية عناصر التحكم بالحيوان الأليف والشخصية في واجهة لعبة مدمجة

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

خصّص للشخصية مساحة بصرية محددة قبل ضبط عناصر التحكم لتلائم الشاشة. حافظ على وضوح الأجزاء الأساسية من ملامح الشخصية وتعبيراتها، وتجنب وضع الأزرار أو التسميات التوضيحية فوقها. إذا كان الإجراء يتطلب لمس الحيوان الأليف مباشرةً، فاترك مساحة التفاعل تلك خالية من العوائق؛ وإذا كانت عناصر التحكم تعلو مشهد اللعبة، فتأكد من أنها لا تغطي الجزء الذي يحتاج اللاعبون لرؤيته من الشخصية. وتوصي إرشادات عناصر التحكم في الألعاب من Apple بالحد من عناصر التحكم الافتراضية عندما يمكن للتفاعل المباشر مع كائنات اللعبة أداء الغرض بدلاً منها (Game controls).

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

اجعل الأيقونة المرئية مدمجة دون تقليص مساحة هدف اللمس الفعلي لتطابق حجمها. توصي Apple بحد أدنى قدره 44 × 44 نقطة لعناصر التحكم المستخدمة بكثرة و28 × 28 نقطة لعناصر التحكم الأقل أهمية على منصاتها. بينما توصي Android بما لا يقل عن 48 × 48 بكسل غير مرتبط بالكثافة (dp) لأهداف اللمس التفاعلية. هذه قياسات خاصة بكل منصة، لذا استخدم وحدات وإرشادات المنصة المعنية بدلاً من التعامل مع الأرقام كقيم قابلة للتبادل (Apple game controls، وAndroid accessibility guidance). اترك مسافة فاصلة كافية لتجنب النقرات العرضية، لا سيما عندما يؤدي إجراءان إلى نتيجتين مختلفتين.

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

افحص النصوص والأيقونات فوق الأجزاء الفاتحة والداكنة من المشهد. فالتباين الذي يصلح لخلفية ما قد يتلاشى عندما يتحرك الحيوان الأليف أو يتغير المشهد. وبالنسبة للنصوص، تحدد إرشادات WCAG الصادرة عن W3C نسبة تباين تبلغ 4.5:1 للنص العادي و3:1 للنص الكبير. ورغم أن إرشادات WCAG مخصصة لمحتوى الويب وليست قاعدة خاصة بالألعاب، فإن معايير التباين الخاصة بها يمكن أن تكون بمثابة مراجعة مفيدة لنص الواجهة فوق الخلفيات المتغيرة (W3C contrast guidance). لا تعتمد على اللون بمفرده للتعبير عن عدم توفر إجراء ما؛ بل قم أيضاً بتغيير تسميته التوضيحية أو شكله أو حالته بشكل مرئي.

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

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

صمم بناءً على المساحة القابلة للاستخدام، وليس فقط المستطيل الخارجي للشاشة. يمكن أن تتداخل النتوءات (Notches) وفتحات الكاميرا وأشرطة النظام ومناطق الإيماءات مع عناصر التحكم المهمة بالقرب من الحافة. تصف إرشادات التخطيط من Apple المناطق الآمنة بأنها مناطق تساعد في إبقاء المحتوى بعيداً عن عناصر الواجهة وميزات الجهاز. وتوصي Android بالمثل بمراعاة الهوامش البادئة لأشرطة النظام والإيماءات وفتحات الشاشة، مع إبعاد عناصر التحكم الحيوية عن الفتحات (Apple layout guidance، وAndroid edge-to-edge guidance). يمكن أن تمتد الرسوميات الخلفية إلى الحافة بينما تظل العناصر التفاعلية في مساحتها المحددة للداخل.

لا تفترض أن ترتيباً مدمجاً واحداً سيناسب جميع نسب الأبعاد. ثبت عناصر التحكم في المساحة القابلة للاستخدام واجعل التباعد أو التجميع يتكيف عندما يتغير العرض المتاح. توصي إرشادات ألعاب Android لـ Unity باستخدام واجهة برمجة تطبيقات المنطقة الآمنة (Safe-area API) ودعم أحجام شاشات ونسب أبعاد مختلفة. اختبر التخطيطات العمودية أو الأفقية فقط إذا كانت اللعبة تدعمها، وأعد الفحص بعد التدوير، أو تغيير حجم النافذة، أو طي الجهاز إذا كانت تلك الإعدادات ضمن نطاق العمل (Android guidance for Unity games on large screens).

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

استخدم قائمة تدقيق قصيرة للنجاح/الفشل لكل تخطيط مدعوم:

• يظل الحيوان الأليف مرئياً أثناء الإجراء الرئيسي، بما في ذلك وجهه أو تفاصيله الأساسية الأخرى.

• الإجراء الرئيسي يسهل الوصول إليه، وتتضح حالة الضغط عليه، ولا يتداخل مع هدف آخر.

• تظل التسميات التوضيحية ومؤشرات الحالة المهمة مقروءة على خلفيات المشهد المتغيرة.

• لا يوجد عنصر تحكم أساسي أسفل فتحة كاميرا، أو شريط نظام، أو منطقة إيماءات.

• فتح عنصر تحكم ثانوي لا يخفي الجزء المطلوب من الشخصية أو مساحة اللعب للخطوة التالية.

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

• Apple Developer، Game controls

• Apple Developer، Layout

• Android Developers، Make apps more accessible

• Android Developers، Edge-to-edge design

• Android Developers، Make your Unity game great on all form factors

• مبادرة إتاحة الويب W3C، Understanding Success Criterion 1.4.3: Contrast (Minimum)