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

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

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

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

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

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