اختر أسلوب الفن

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

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

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

بعد الانتهاء من هذا القسم، ستتعلم كيفية تصميم هيكل وتدفق المعلومات التي تريد التواصل بها مع اللاعبين من خلال واجهة المستخدم داخل لعبتك.

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

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

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

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

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

1. معلومات حول هدف اللعبة.
2. معلومات حول المسدس.
3. معلومات حول حالة اللاعب.

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

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

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

اختيار موضوع لوني

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

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

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

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

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

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

رسم أيقونات بسيطة

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

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

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

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

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

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

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

إنشاء ترتيب التفاعل

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

هناك عادةً ثلاثة أنواع من التفاعلات في تدفق العمل:

• التفاعل الأساسي – الإجراء الذي من المرجح أن يقوم به اللاعب.
• التفاعل الثانوي – الإجراء الذي من المحتمل أن يقوم به اللاعب كبديل للإجراء الأساسي.
• التفاعل الثالث – الإجراء الذي من غير المرجح أن يقوم به اللاعب.

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

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

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

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

عند إنشاء ترتيب تفاعل لتدفقات العمل في لعبتك الخاصة، ضع في اعتبارك ما يلي:

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

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

تحديد نظام نصي

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

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

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

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

عند تحديد نظام نصي للعبتك الخاصة، ضع في اعتبارك ما يلي:

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

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