تصميم واجهة المستخدم وتجربة المستخدم

*This content is translated using AI (Beta) and may contain errors. To view this page in English, click here.


تجمع واجهة المستخدم (UI) بين التصميم الفني البصري مع تصميم المعلومات المركز على التواصل لإنتاج قوائم وتصميمات للمتاجر وعروض HUD وغيرها من الواجهات التي يتفاعل معها اللاعبون. تتعلق تجربة المستخدم (UX) بكيفية تفاعل اللاعبين مع اللعبة، وكيف يعبرون عن خياراتهم، وكيف ينتقلون من خيار إلى آخر. بينما تعمل واجهة المستخدم وتجربة المستخدم غالبًا معًا، تركّز تجربة المستخدم بشكل أكبر على التفاعل وتجربة اللاعب بدلاً من التصميم البصري والمعلوماتي لواجهة المستخدم.

واجهة المستخدم

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

  • الأولوية
  • الانتباه
  • اللغة البصرية
  • العادات
  • الاتساق

الأولوية

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

  • ماذا يفعل اللاعب في هذه اللحظة؟
  • ما هو أهم شيء ينبغي عليهم أن يكونوا على دراية به، أو الوصول إليه؟
  • ما الخيارات التي يجب عليهم اتخاذها؟
  • ما المعلومات التي يحتاجونها ليتمكنوا من اتخاذ هذه الخيارات؟
  • كم مرة سيقومون بتلك الخيارات؟

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

أمثلة

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

عرض مقرب لزر دائري غير محدد للعناصر مع أيقونة كتاب بني. البيئة في الخلفية هي تراب بني مع بركة من الثلج.
العناصر قبل الاختيار في Spellbound RPG
عرض مقرب لزر دائري محدد للعناصر مع أيقونة كتاب بني، إلى جانب ثلاثة أزرار إضافية للمهارات، والمعدات، وDeck اللاعبين. تُعرض الأزرار الإضافية فقط عند اختيار الزر.
العناصر بعد الاختيار في Spellbound RPG

في Super Striker League، تتفاوت تفاعلات اللاعب اعتمادًا على ما إذا كانوا يتحكمون في الكرة. بدون الكرة، يمكن للاعبين Sprint وTackle لاستعادة السيطرة. بمجرد امتلاك الكرة، تتحول الأزرار إلى Deke وPass، مما يمكن اللاعبين من تفادي الخصوم وتمرير الكرة. من خلال تغيير هذه الأزرار، تظل واجهة المستخدم مفيدة من الناحية السياقية، مما يتجنب التشتت غير الضروري.

الأزرار السياقية في Super Striker League
الأزرار السياقية في Super Striker League

في The Survival Game, يحتاج اللاعبون إلى أن يكونوا على دراية بحالتهم الصحية والجوع، ولديهم وصول سريع إلى خريطتهم وعتادهم وأدواتهم. تتيح لهم هذه المعلومات اتخاذ قرارات وتحديد أولويات الإجراءات من أجل البقاء. إذا كانت هذه المعلومات أو الأدوات يصعب العثور عليها أو مفقودة، يصبح البقاء على قيد الحياة أكثر تحديًا وإحباطًا بلا داع.

ميزات HUD في The Survival Game

الانتباه

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

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

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

أمثلة

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

واجهة مرور الموسم في Jailbreak

في Dragon Adventures, يُعطى الأولوية البصرية لأكبر حزمة عملات من خلال زيادة حجمها وفصلها بمسافة أكبر، لتفريقها عن الحزم الأصغر.

حزم العملات في Dragon Adventures

في Tower Defense Simulator، يتم استخدام كل من الحجم والقرب لتجميع وتمييز قوالب الأبراج اليومية عن الصناديق اليومية.

المتجر في Tower Defense Simulator

اللغة البصرية

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

الرموز

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

إحصائيات اللاعبين في Winds of Fortune

الأزرار

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

الأزرار في BotClash Simulator

النص

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

متجر الملابس في Winds of Fortune

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

العادات

العادات هي خيارات تصميم شائعة يتم رؤيتها عبر العديد من الألعاب المختلفة. تشمل بعض الأمثلة:

  • رمز X على زر يغلق الحوار عند الضغط عليه
  • اللون الرمادي المستخدم على الأزرار التي لا يمكن استخدامها حاليًا
  • أيقونة قفل تغطي زر أو ميزة للإشارة إلى أن اللاعب لم يكسبها أو يفتحها بعد

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

أزرار الإغلاق X في Winds of Fortune، Dragon Adventures، BotClash Simulator، وDOORS
Consistency "Health" in Arcane Odyssey

الاتساق

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

إليك بعض الأمثلة على الاتساق في واجهة المستخدم في اللعبة:

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

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

تجربة المستخدم

يتعلق تصميم تجربة المستخدم بكيفية تفاعل اللاعبين مع اللعبة، وكيف يعبرون عن خياراتهم، وكيف يتحركون من خيار إلى آخر. على الرغم من أن تجربة المستخدم تعمل غالبًا جنبًا إلى جنب مع واجهة المستخدم (UI)، إلا أنها تركز بشكل أكبر على التفاعل وتجربة اللاعب بدلاً من التصميم المرئي والمعلوماتي لواجهة المستخدم.

فهم اللاعبين

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

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

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

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

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

بعد النظر في هذه العوامل واختيار مجموعة لاعب مستهدفة (أو مجموعات)، تعرف عليهم من خلال لقائهم، واللعب معهم، ومعرفة أهدافهم وتفضيلاتهم لتحسين اختيارات التصميم.

تصميم التفاعلات

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

  • العادات
  • الاستعارات
  • التغذية الراجعة

العادات

العادات هي تصميمات ومبادئ تجربة المستخدم التي قد يكون اللاعبون بالفعل على دراية بها من ألعاب أخرى.

"E" إعداد القرب في Mermaid Life

تشمل أمثلة العادات:

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

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

الاستعارات

الاستعارات تربط مفهومًا مجردًا بآخر أكثر ألفة، مما ينشئ اختصارًا لفهمه. في هذا المثال من Spellbound Wizard RPG، يُجرى عمل سحر ساحر من خلال سحب بطاقات من مجموعة. يجعل واجهة المستخدم / تجربة المستخدم المعتمدة على مجموعة السحب العمل المجرد لعمل السحر، الذي ليس له تعبير في الحياة الحقيقية، شيئًا يمكن للاعبين التعلق به بشكل أسهل وفهمه بسرعة أكبر.

تشكيل السحر كبطاقات في Spellbound RPG

التغذية الراجعة

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

  • عدو يلعب رد فعله "الضرب" للإشارة إلى أنه قد تلقى ضررًا من سلاح اللاعب
  • زر يتغير لونه للدلالة على حالة التمرير، والاكتئاب، والإفراج (المحدد)
  • تأثير صوت "تشينغ!" من الصندوق النقدي عند إتمام اللاعب للشراء
  • شريط تقدم يملأ كلما أنجز اللاعب أهداف المهام

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

تصميم التدفقات

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

على سبيل المثال، لتجهيز عنصر على شخصية في Berry Avenue RP، يحتاج اللاعب إلى:

  • العثور على زر الشخصية والضغط عليه
  • تحديد فئة عنصر (وجه، رأس، رقبة، إلخ)
  • التمرير للعثور على عنصر من اهتمامه
  • الضغط على العنصر لتجهيزه على شخصيته
  • البحث عن زر "إنهاء" والضغط عليه للخروج من تخصيص الشخصية
تدفق تخصيص الشخصيات في Berry Avenue RP

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

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

  • الرغبة في تعديل شخصية بسرعة
  • العثور على عناصر بسهولة أثناء التعديل
  • معاينة العناصر قبل الاختيار
  • إزالة العناصر بسهولة بعد الاختيار

توجه هذه الأهداف بعد ذلك تصميم واجهة المستخدم وتجربة المستخدم للميزة:

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

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

مثال لمخطط التدفق.
©2026 شركة Roblox Corporation. تُعد منصّة Roblox، وشعار Roblox وشعار "توسيع حدود المخيلة"، من ضمن علاماتنا التجارية المسجّلة وغير المسجّلة في الولايات المتحدة وبلدان أخرى.