تصميم تخطيطاتك

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

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

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

بعد الانتهاء من هذا القسم، ستتعلم كيفية بناء وتكوين واجهة المستخدم الخاصة بك في Studio بحيث تتماشى مع نمط فنك ونماذجك الأولية.

التخطيط لهيراركية بصرية

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

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

1. معلومات حول هدف التجربة.
2. معلومات حول البندقية.
3. معلومات حول حالة اللاعب.

يبرز الموقع الذي تحتله كل من هذه الفئات على الشاشة في التصميم النهائي ترتيب أهميتها:

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

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

عند التخطيط لهيراركية بصرية لتدفقات العمل في تجربتك الخاصة، ضع في اعتبارك ما يلي:

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

للاطلاع على مراجعة كاملة للهيراركية البصرية لتجربة لعبة الليزر النموذجية، انظر الجدول التالي:

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

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

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

• قائمة باللاعبين داخل التجربة.
• شريط صحة الشخصية.
• حقيبة الشخصية.
• نافذة دردشة.
• زر التقاط.
• قائمة منبثقة من تعابير الشخصية.

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

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

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

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

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

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

عند حجب عناصر واجهة المستخدم لتخطيطاتك، ضع في اعتبارك ما يلي:

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

تطوير تدفقات المستخدم

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

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

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

• يغادر اللاعب الجولة قبل استيفاء شرط النهاية؟
• يغادر اللاعب التجربة أثناء الانضمام إلى فريق؟
• يتلقى مكالمة هاتفية وسط جولة؟
• يفقدون اتصالهم بالجولة لأقل من 15 ثانية؟

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

عند تطوير تدفقات المستخدم لتجربتك الخاصة، ضع في اعتبارك ما يلي:

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

بعد الانتهاء من تصميم نماذجك الأولية، حان الوقت للانتقال إلى Studio وإحياء واجهة المستخدم الخاصة بك.