EagleUp Game
حيث تلتقي ملموسية الطاولة بتصميم الواجهة الرقمية.
القطاع: الألعاب | المنظومة التقنية: Figma, Design Systems, Game UI | الحالة: قيد التطوير | العميل: إيطاليا
ما هي لعبة EagleUp#
EagleUp لعبة هجينة بين تقمّص الأدوار على الطاولة وألعاب الفيديو: لعبة تحفظ العمق الاجتماعي والاستراتيجي لتقمّص الأدوار المادي، وتترجم التجربة في الوقت نفسه إلى صيغة رقمية بتغذية بصرية حية، وواجهات علوية تفاعلية، وردهات لعب جماعي متصلة.
وغطّى تكليفنا طبقة التصميم البصري: أدلة الأسلوب، وتصميم شاشات الردهة، وأنظمة الواجهة العلوية، ولغة التصميم التي تمنح اللعبة هوية متسقة عبر كل شاشة يلمسها اللاعب.
كان هذا تكليف تصميم، لا بناءً متكاملاً. وما سلّمناه هو الأساس البصري والتفاعلي الذي يبني عليه فريق التطوير. أما عمل التطوير فيجري عندهم.
مشكلة التصميم: إحساس الطاولة داخل قالب رقمي#
تنجح ألعاب تقمّص الأدوار على الطاولة بسبب الماديّة. ثقل حجر النرد، وملمس أوراق الشخصيات، والترتيب المكاني للقطع على اللوح. هذه ليست زخرفاً، بل أنماط تفاعل استبطنها اللاعبون عبر عقود. وحين تنقلون لعبة كهذه إلى صيغة رقمية، تكون الغريزة الأولى أن تجعلوها تشبه لعبة فيديو. وتلك الغريزة خاطئة.
فاللاعبون القادمون من ألعاب الطاولة المادية لا يريدون واجهة عامة من ألعاب الخيال الجماعية. يريدون دفء التجربة على الطاولة ومنطقها الملموس معروضين على الشاشة. ينبغي أن تبدو الخريطة خريطة يمكن طيّها، لا مرحلة تعودون إليها بعد الموت. وينبغي أن تسند الواجهة العلوية القصة لا أن تعلن عن نفسها.
تلك كانت المشكلة الجوهرية في هذا المشروع. كل شاشة صممناها كان عليها أن تجيب السؤال نفسه: هل تبدو هذه EagleUp، أم تبدو كأي لعبة أخرى؟
ما الذي صممناه#
دليل الأسلوب واللغة البصرية#
طوّرنا دليل أسلوب EagleUp من الصفر: خيارات المحارف، ولوحات الألوان، وأنظمة الأيقونات، وقواعد التباعد، وأنماط المكونات التي تمتد عبر كل واجهة في اللعبة. وهو المرجع لكل مصمم ومطور يلمس الواجهة من الآن فصاعداً.
وكان على الاتجاه البصري أن يحمل أمرين معاً. الدفء مهم: ملامس عضوية، وعناصر مرسومة باليد، وألوان ترابية خافتة تستدعي مواد اللعب المادية. لكن الوضوح مهم كذلك: تدرّج نمطي نظيف، وتباعد متسق، ومؤشرات تفاعل بيّنة دون أن تكون تقنية باردة. وجعل هذين الأمرين يتعايشان دون أن يغلب أحدهما هو التحدي التصميمي الفعلي.
شاشات الردهة#
الردهة أول شاشة يراها اللاعب. صممنا شاشات ردهة تتولى المتطلبات العملية (قائمة اللاعبين، وإعدادات اللعبة، وإدارة الجلسة، ومسارات الدعوة) وهي ترسّخ هوية اللعبة في الوقت نفسه. وتستمد المعالجة البصرية من ثقافة الطاولة. ينبغي أن تبدو كالجلوس إلى طاولة مع الأصدقاء، لا كالدخول في طابور مطابقة.
تصميم الواجهة العلوية#
الواجهة العلوية هي حيث تصير المفاضلات مكلفة. فأثناء اللعب يتنافس كل عنصر على الشاشة على انتباه اللاعب. فالمعلومات الزائدة تكسر الانغماس، والقليلة تترك اللاعبين تائهين في منتصف الجلسة.
صممنا الواجهة العلوية لـ EagleUp حول ما يحتاجه اللاعب في كل لحظة من اللعبة: الصحة، والموارد، وترتيب الأدوار، والإجراءات المتاحة. فتحصل اللحظات السردية على مساحة أوسع للتنفس، وتحصل الأدوار النشطة على تخطيط أكثف. ويتغير تدرّج المعلومات مع السياق بدل أن يبقى ثابتاً.
نظام مكونات لتسليم التطوير#
كل شاشة سلّمناها بُنيت من مكتبة مكونات منظّمة في Figma: أزرار، وبطاقات، ونوافذ حوارية، وحقول إدخال، ومؤشرات حالة، وعناصر تنقل، كلها موثَّقة بحالاتها (افتراضية، وعند التحويم، ونشطة، ومعطّلة) وبإرشادات استخدامها. فيستلم فريق التطوير نظاماً ينفّذه باتساق، لا مجرد مجموعة نماذج ساكنة يفسّرها.
القدرات الأساسية#
- دليل أسلوب يغطي المحارف، واللون، والأيقونات، والتباعد، وأنماط المكونات.
- شاشات الردهة: إدارة جلسة تصلح في الوقت نفسه لأن تكون الانطباع الأول عن اللعبة.
- أنظمة واجهة علوية مبنية حول كثافة معلومات تتغير بالسياق.
- مكتبة مكونات بحالات وصيغ موثَّقة وإرشادات تسليم.
- تصميم بصري وتفاعلي مضبوط للاعبين القادمين من خلفيات اللعب المادي.
النتائج#
EagleUp قيد التطوير. ومخرجات التصميم مكتملة، وفريق التطوير يبني منها الآن.
وهذا المشروع يمثّل نوعاً بعينه من التكليف: عمل تصميم خالص يجب فيه أن تستقر الطبقة البصرية والتفاعلية قبل كتابة أول سطر من شيفرة اللعبة. عملنا بهذه الطريقة من قبل، والتسليم يهم أكثر مما يبدو. فالمطورون يتحركون أسرع حين يكون النظام واضحاً، ويتخذون قرارات تفسير أقل، و«سأسأل المصمم لاحقاً» أقل. ذلك ما تفعله مكتبة مكونات موثَّقة جيداً فعلاً.
أتحتاجون تصميم واجهة وتجربة لمنتج أو لعبة أو تطبيق؟ اطّلعوا على خدمات تصميم تجربة المستخدم وواجهته أو احجزوا تدقيق أتمتة مجاني.
