كيف تختار تخطيط شاشة الحيوان الأليف الافتراضي: شاشة LCD كلاسيكية أم تصميم هجين حديث؟
بالنسبة لواجهة الحيوان الأليف الافتراضي، اختر تخطيط شاشة LCD الكلاسيكية عندما تتناسب التجربة الأساسية مع مجموعة صغيرة من مشاهد البكسل التي يمكن التعرف عليها فوراً وقليل من الإجراءات. واختر تصميماً هجيناً حديثاً عندما يحتاج اللاعبون إلى قراءة تفاصيل متغيرة، أو تصفح أنشطة متعددة، أو استخدام الواجهة عبر أحجام شاشات مختلفة. وإذا كانت كلتا الصفتين مهمتين، فحافظ على مشهد الحيوان الأليف مستوحىً بوضوح من فن البكسل مع وضع الحالة وعناصر التحكم القابلة للقراءة في واجهة مرنة حوله. اتخذ قرارك من خلال تحديد المهمة الأكثر شيوعاً على الشاشة، ثم اختبر تلك المهمة بأصغر حجم مدعوم.
ما يعنيه النمطان من الناحية العملية
يتعامل تخطيط شاشة LCD الكلاسيكية مع العرض كمسرح مدمج؛ حيث يتشارك الحيوان الأليف، ومجموعة صغيرة من رموز الحالة، وعدد قليل من عناصر التحكم إطاراً بصرياً ثابتاً. ويخلق فن البكسل (Pixel art)، ولوحة الألوان المحدودة، والقيود المتعمدة على المعلومات المعروضة هوية بصرية واضحة. ينجح هذا النمط عندما تكون الحلقة الرئيسية بسيطة: رؤية الحيوان الأليف، وفهم حالته المباشرة، واختيار إجراء ما.
أما النمط الهجين الحديث، فيحتفظ ببعض من ذلك العرض المؤطر الشبيه بالبكسل، ولكنه يمنح المعلومات المساعدة مساحة أكبر. يمكن للحيوان الأليف أن يظل محور التركيز البصري، بينما تستخدم التسميات التوضيحية والقوائم والإعدادات والتفاصيل الثانوية نصوصاً قابلة لتغيير الحجم وعناصر تحكم تقليدية في الواجهة. وقد يُعيد أيضاً ترتيب العناصر مع تغير المساحة. تعيد الواجهات المتجاوبة عادةً تموضع المحتوى أو تغيير حجمه أو إعادة تدفقه ليناسب أحجام النوافذ المختلفة، بدلاً من تكبير كل عنصر بشكل موحد (إرشادات مايكروسوفت للتصميم المتجاوب).
تعامل مع التصميم "الهجين" كخيار تصميمي، وليس كوعد بأن كل جهاز أو ميزة ستعمل تلقائياً. لا يزال التخطيط بحاجة إلى قرارات واضحة بشأن ما يظل مرئياً، وما يُنقل إلى القائمة، وكيف يتصرف عندما تكون المساحة المتاحة ضيقة.
ابدأ بالمهمة التي يكررها اللاعب
اكتب المهمة الأكثر تكراراً للاعب في شكل تسلسل قصير: على سبيل المثال، ملاحظة حاجة معينة، وفتح الإجراء ذي الصلة، واختياره، وتأكيد ما حدث. ارسم مخططاً أولياً لذلك التسلسل داخل إطار العرض. إذا كان التسلسل يمكن أن يظل مرئياً دون تسميات توضيحية دقيقة للغاية، أو رموز متداخلة، أو تغييرات متكررة في القائمة، فقد يكون تكوين LCD الكلاسيكي كافياً.
بعد ذلك، اذكر المعلومات التي يجب فهمها بلمحة سريعة وتلك التي يمكن أن تنتظر عرضاً تفصيلياً. قد تكون وضعية الحيوان الأليف وبضعة مؤشرات واضحة ملائمة للشاشة الرئيسية؛ في حين قد تتناسب الأوصاف الأطول أو المجموعات أو خيارات التهيئة بشكل أفضل مع لوحة ثانوية في التصميم الهجين. هذا التقسيم هو استنتاج تصميمي وليس قاعدة عامة: يعتمد التجميع الصحيح على الأنشطة والمفردات الفعلية في اللعبة.
احسب الخيارات ذات المعنى، وليس الأيقونات الزخرفية. فخمسة أيقونات تفتح كل منها قائمة أخرى قد تتطلب جهداً أكبر من ثلاثة إجراءات مصحوبة بتسميات توضيحية. إذا كان يتعين على اللاعبين الدخول والخروج مراراً وتكراراً من القوائم المتداخلة لإكمال المهمة المركزية، فزد من المساحة أو بسّط المهمة قبل إضافة المزيد من زخارف الشاشة.
اختر شاشة LCD الكلاسيكية عندما تدعم القيودُ التجربةَ
يعد التخطيط الكلاسيكي مناسباً جداً عندما يكون فن البكسل أساسياً للمظهر المنشود، ويظل الحيوان الأليف مقروءاً بحجم صغير، وتكون الإجراءات المعتادة قليلة بما يكفي لعرضها أو الوصول إليها مباشرة. يمكن لمسرحه المقيد أن يجعل الحيوان الأليف وحالته يبدوان متماسكين. كما أنه يمنح التصميم حدوداً واضحة: لا يمكن للأنظمة الثانوية أن تزدحم بها الشاشة الرئيسية دون تنازل متعمد.
تحقق مما إذا كان يمكن تمييز الحالات الرئيسية دون الاعتماد على تحولات دقيقة في الألوان. استخدم أشكالاً أو وضعيات أو تسميات توضيحية أو أنماطاً يمكن التعرف عليها بالإضافة إلى اللون. اختبر الشاشة بتدرج الرمادي وبحجم عرضها الفعلي؛ فالرسم النقطي (sprite) الذي يبدو جذاباً عند تكبيره على لوحة التصميم قد يتحول إلى كتلة بكسلات غير واضحة في التخطيط النهائي المطروح.
يصبح النمط غير ملائم عندما تضيف كل ميزة جديدة علامة حالة أو اختصاراً دقيقاً آخر. إذا كان اللاعبون بحاجة إلى دليل مفاتيح لفهم الشاشة الرئيسية، أو إذا تم تقليص حجم الحيوان الأليف لإفساح المجال للوحة معلومات متنامية، فقد يكون الإطار المدمج يحمل أكثر من طاقته.
اختر تصميماً هجيناً عندما تختلف المعلومات أو حجم الشاشة
يكون التصميم الهجين مفيداً عندما يحتاج مشهد الحيوان الأليف إلى التعايش مع نص حالة مقروء، أو خيارات أنشطة متعددة، أو عرض تفصيلي. ويمكنه أيضاً الاستجابة بشكل أكثر فعالية لأحجام النوافذ المختلفة: تصف إرشادات مايكروسوفت إعادة تدفق واجهة ذات عمود واحد إلى أعمدة متعددة على شاشة أكبر وإظهار بيانات وصفية أقل في النوافذ الأصغر. طبّق هذا المبدأ بانتقائية: يمكن للمساحة الإضافية أن تكشف عن تفاصيل مفيدة، ولكن لا ينبغي أن تجعل الحيوان الأليف يتنافس مع لوحات متعددة بارزة بنفس القدر.
حدد ترتيب الشاشة الضيقة أولاً. احتفظ بالحيوان الأليف، والحالة الأكثر أهمية، والإجراء الأساسي متاحين؛ وانقل المعلومات الثانوية إلى لوحة أو قائمة ذات تسمية واضحة. وبالنسبة للشاشات الأوسع، اعرض التفاصيل الداعمة أو ضع قائمة بجانب المشهد. حافظ على اتساق ترتيب الإجراءات وأسمائها حتى لا يؤدي تغيير التخطيط إلى جعل المهمة نفسها تبدو وكأنها نظام مختلف.
لا تقم بتكبير التكوين الكلاسيكي بأكمله حتى يملأ شاشة عرض كبيرة؛ لأن ذلك قد يترك مساحات فارغة غير ملائمة أو يجعل عناصر التحكم متباعدة بشكل مفرط. بدلاً من ذلك، حدد الأجزاء التي يجب أن تنمو، والأجزاء التي يجب أن تظل مشهداً محتوياً، والمعلومات الإضافية المفيدة حقاً. تصف إرشادات التخطيط في Material Design التخطيطات بشكل مماثل بأنها متكيفة مع الإدخال والأجهزة وعناصر الشاشة، مع هوامش وأعمدة ومناطق متجاوبة (فهم التخطيط - Understanding Layout).
استخدم بطاقة تقييم سريعة لاتخاذ القرار
قيّم كل عبارة بـ "نعم" أو "جزئياً" أو "لا" بالنسبة للتصميم الحالي. هذه قائمة مرجعية عملية وليست أداة تقييم معتمدة رسمياً.
- يمكن إكمال المهمة الرئيسية للحيوان الأليف من خلال مجموعة مدمجة من الخيارات المرئية.
- يظل الحيوان الأليف وحالته المهمة واضحين عند أصغر حجم شاشة مستهدف.
- معظم المعلومات المساعدة اختيارية أثناء التفاعل الرئيسي.
- تحتاج الواجهة إلى تقديم كميات مختلفة جوهرياً من المعلومات على أحجام الشاشات المختلفة.
- يحتاج اللاعبون إلى تسميات توضيحية أو أوصاف قد تصبح مكدسة داخل الإطار الكلاسيكي.
- يجب أن يظل مشهد الحيوان الأليف متميزاً بصرياً عن القوائم وتفاصيل الحالة.
يرجح اختيار "نعم" في الغالب للنقاط الثلاث الأولى التخطيط الكلاسيكي أولاً. بينما يرجح اختيار "نعم" للحاجة إلى معلومات متغيرة أو تسميات توضيحية مقروءة التصميم الهجين. وإذا انقسمت الإجابات، فقم بإنشاء نموذج أولي لتصميم هجين بنافذة ثابتة للحيوان الأليف بفن البكسل ومنطقة منفصلة وأبسط للحالة والإجراءات. يحافظ هذا على المشهد مع السماح للواجهة المساعدة بالتكيف.
أنشئ نموذجاً أولياً وتحقق من الخيار قبل اعتماده
قم ببناء شاشة تمثيلية واحدة لكل خيار جاد، باستخدام نفس الحيوان الأليف والحالة والمهمة. قم بتضمين الحالة العادية الأكثر ازدحاماً بالمعلومات، وليس فقط شاشة الخمول الأكثر وضوحاً ونظافة. اطلب من بضعة أشخاص غير مطلعين على المخطط الأولي تحديد الحالة الحالية للحيوان الأليف وإكمال المهمة المركزية. لاحظ أين يترددون، أو يخطئون في قراءة رمز ما، أو يغفلون عن إجراء ما؛ وعدّل التخطيط بناءً على المشكلات الملحوظة بدلاً من افتراض أن النمط بحد ذاته يحلها.
اختبر عند أصغر حجم مستهدف، وعند حجم أوسع، ومع تكبير النص إذا كانت الواجهة تدعم ذلك. تحقق من تركيز لوحة المفاتيح إذا كانت التجربة تُشغّل عبر لوحة المفاتيح، وتأكد من بقائه مرئياً أثناء تنقل اللاعب بين عناصر التحكم. بالنسبة لواجهات الويب التي يتم تشغيلها بالمؤشر، تحدد إرشادات إمكانية الوصول إلى محتوى الويب WCAG 2.2 حداً أدنى لحجم الهدف يبلغ 24 × 24 بكسل CSS لمعيار AA، مع استثناءات محددة؛ كما تحدد نسبة تباين 3:1 ومساحة دنيا لمؤشرات التركيز بموجب معيار مظهر التركيز AAA (نظرة عامة على WCAG 2.2 من W3C). تعد هذه المعايير فحوصات مفيدة، لكنها لا تحدد النمط البصري المناسب للعبة.
أخيراً، تأكد من بقاء النص مقروءاً على خلفية المشهد، ومن أن عناصر التحكم المحددة وغير النشطة تبدو مختلفة، ومن أن الشاشة لا تزال تعبر عن تسلسلها الهرمي عند غياب الألوان. إذا نجح النموذج التجريبي الكلاسيكي في هذه الاختبارات ودعم المهمة المتكررة بشكل مباشر، فاحتفظ بقيوده. أما إذا فرض مراراً تسميات توضيحية ضيقة أو إجراءات مخفية، فاستخدم تصميماً هجيناً واحتفظ بالمعالجة الكلاسيكية حيث تقدم أكبر فائدة: مشهد الحيوان الأليف، أو إطاره، أو مجموعة صغيرة من الإشارات البصرية المألوفة.