Choisir un style artistique

Choisir un style artistique est le processus de planification d'une direction esthétique pour vos éléments d'interface utilisateur (UI). Il est important de commencer votre processus de conception avec un style artistique, car les styles artistiques fournissent des règles visuelles de référence pour garantir que votre UI fournit intuitivement aux joueurs des informations sur ce qu'ils peuvent faire dans votre jeu.

En utilisant le fichier de jeu de laser tag exemple .rbxl comme référence, cette section du curriculum d'interface utilisateur vous montre comment prendre des décisions significatives sur la façon de concevoir vos éléments UI en fonction du genre de votre jeu, y compris des conseils sur :

• Identifier les éléments UI nécessaires en fonction de ce que vous souhaitez communiquer aux joueurs tout au long de votre jeu.
• Sélectionner un thème de couleur qui renforce les conventions de couleur spécifiques au genre, intuitives pour votre public.
• Esquisser des icônes simples qui sont faciles à déchiffrer sur n'importe quelle taille d'écran.
• Établir un ordre de boutons qui correspond à la probabilité des différents flux de travail des joueurs.
• Déterminer un système de texte qui garantit la lisibilité sur les appareils cibles.

Après avoir complété cette section, vous apprendrez à concevoir la structure et le flux des informations que vous souhaitez communiquer aux joueurs à travers l'UI de votre jeu.

Identifiez vos éléments UI

La première étape pour choisir un style artistique pour votre UI est d'identifier quels éléments UI vous avez besoin pour les différents types d'informations que vous souhaitez communiquer à votre public. Faire ce travail au début de votre processus de conception est crucial, car cela vous permet de catégoriser les éléments UI par leur fonction, de prendre des décisions sémantiques en fonction de l'endroit et du moment où les joueurs vont interagir avec chaque élément UI, et de planifier où vous pouvez réutiliser des éléments UI dans votre jeu.

Il existe de nombreuses façons de réfléchir aux éléments UI nécessaires pour vos exigences de gameplay, mais il est recommandé de commencer par imaginer ce qu'un joueur doit savoir dès qu'il rejoint votre jeu. Par exemple, lorsqu'un joueur ouvre le jeu de laser tag exemple, il peut se poser les questions suivantes :

• Quel est l'objectif du jeu ?
• Comment savoir qui est dans mon équipe ?
• Comment suivre les points de mon équipe ?
• Comment sélectionner un blaster ?
• Comment savoir où le blaster tire un laser ?
• Si je suis sur un appareil mobile, comment tirer avec mon blaster ?
• Après avoir tiré un laser, quand puis-je tirer à nouveau ?
• Comment savoir quand je commence le round ?
• Comment savoir quand je tague quelqu'un avec mon blaster ?
• Comment savoir quand l'équipe ennemie me tague avec succès ?

En utilisant ces questions pour comprendre quelles informations sont impératives pour que les joueurs réussissent, vous pouvez trier les besoins UI du jeu de laser tag exemple en trois catégories :

1. Informations sur l'objectif du jeu.
2. Informations sur le blaster.
3. Informations sur l'état du joueur.

Trier les besoins UI de votre jeu en catégories est utile car cela vous permet de formuler votre style artistique autour de chaque groupe pour renforcer les informations que chaque catégorie doit enseigner aux joueurs. Par exemple, si vous souhaitez que votre UI indique aux joueurs quelles actions ils peuvent entreprendre concernant l'état de santé de leur personnage, vous pourriez choisir un style artistique avec des éléments UI qui privilégient la couleur verte et/ou des icônes de plus pour que les joueurs puissent rapidement reconnaître leur fonction.

Après avoir trié les besoins UI de votre jeu en catégories, vous pouvez créer une liste des éléments UI nécessaires pour répondre aux exigences de chaque catégorie. Pour démontrer, le jeu de laser tag exemple utilise le tableau suivant d'éléments UI pour répondre à la liste précédente de questions potentielles des joueurs. Au fur et à mesure que vous travaillez à travers ce tutoriel, le curriculum UI continuera de se référer à cette liste et de mettre en évidence les décisions de conception majeures qui se rapportent à chaque catégorie d'éléments UI.

Maintenant que vous avez une liste d'éléments UI pour votre jeu, il est temps de commencer à faire des choix stylistiques et sémantiques pour chaque groupe d'éléments UI, en commençant par un thème de couleur.

Sélectionnez un thème de couleur

Un thème de couleur, ou palette de couleurs, est une sélection de couleurs qui communiquent chacune un message par une application cohérente dans votre jeu, comme l'utilisation d'une couleur vive pour indiquer quand quelque chose est sélectionnable. Appliquer un thème de couleur à vos éléments UI est important, surtout lorsque vous vous appuyez sur des conventions de couleur dans le genre de votre jeu, car cela permet aux joueurs de comprendre rapidement votre UI avec un minimum d'effort.

Dans le Curriculum d'Art Environnemental, chaque moitié de l'environnement de laser tag est codée par couleur d'une vue de dessus pour différencier quelle zone de la carte est près de la zone de spawn respective de chaque équipe : menthe pour l'équipe qui se regroupe sur le côté gauche de la carte, et rose carnation pour l'équipe qui se regroupe sur le côté droit de la carte. Ces couleurs spécifiques sont utiles car elles sont complémentaires, ce qui signifie qu'elles contrastent bien entre elles, et permettent aux joueurs de scanner facilement leur environnement et de s'orienter, peu importe la direction dans laquelle ils font face dans le bâtiment.

Le jeu de laser tag exemple utilise ce même thème de couleur dans son UI pour mettre en évidence les informations qui concernent chaque équipe, comme l'indicateur d'équipe de chaque joueur dans l'espace 3D, ou le suivi des points de l'équipe qui se superpose à l'écran. Cette cohérence aide les joueurs à comprendre rapidement les informations sur l'objectif du jeu pendant le gameplay rapide d'un jeu de tir à la première personne, surtout lorsque les joueurs doivent prendre des décisions rapides tout en traversant l'environnement.

Lors de la sélection d'un thème de couleur pour votre propre jeu, considérez ce qui suit :

• La force d'un thème de couleur repose sur l'aide qu'il apporte aux joueurs pour établir rapidement des associations mentales entre chaque couleur et sa fonction. Pour cette raison, limitez votre thème de couleur pour ne mettre en évidence que les informations clés que vous souhaitez que les joueurs associent à vos éléments UI.
• Pour garantir que les joueurs atteints de daltonisme peuvent comprendre le message de votre thème de couleur, ne comptez pas uniquement sur la couleur pour distinguer les éléments UI. Au lieu de cela, combinez les couleurs avec des icônes, des formes et/ou des animations pour garantir que votre UI communique efficacement avec chaque joueur.
• Il est plus important que votre UI soit lisible qu'esthétiquement plaisante. Pour cette raison, priorisez une UI simple avec des couleurs qui restent lisibles sur des éléments à la fois clairs et sombres dans le monde 3D.

Pour souligner les conseils du dernier point, le jeu de laser tag exemple utilise les couleurs neutres de noir et blanc pour presque tous les autres éléments UI qui se superposent à l'écran 2D. Le noir et le blanc contrastent bien entre eux, et ils sont faciles à lire alors que le reste de l'écran affiche un environnement 3D autrement coloré.

Esquissez des icônes simples

Une icône est un symbole qui représente une action, un objet ou un concept dans un jeu. Esquisser des icônes qui sont simples et intuitives est important car le résultat final permet aux joueurs de reconnaître facilement ce qu'ils peuvent faire et ce que vous souhaitez leur communiquer à travers votre UI sans utiliser de texte, ce qui peut encombrer l'écran et détourner l'attention du contenu qui compte. Ce processus est encore plus crucial si votre public accède à votre jeu via un petit écran sur des appareils mobiles.

Les icônes simples ont idéalement un style distinct de vos éléments 3D tout en complétant le monde global de votre jeu. Par exemple, dans l'environnement final du Curriculum d'Art Environnemental, les actifs 3D modulaires et de props ont un style artistique propre et high-tech qui utilise des formes rectangulaires avec des coins doux et arrondis. Des panneaux biseautés le long du sol aux fenêtres presque circulaires dans le plafond, rien n'inclut un bord tranchant.

Pour compléter ce style artistique tout en restant unique, tous les éléments UI que vous apprendrez à créer plus tard dans ce tutoriel incluent une esthétique futuriste et des angles ronds sans correspondre au langage de forme des actifs 3D dans l'environnement. Cela garde la signification de chaque icône distincte des autres informations dans l'espace 2D et 3D.

Pour démontrer ce concept, voyez les deux images suivantes du jeu de laser tag exemple du réticule qui indique aux joueurs où leur blaster tire sur l'écran, et le bouton qui permet aux joueurs de tirer avec leur blaster sur des appareils mobiles. Les deux icônes incluent des angles doux pour être cohérents avec le monde global, mais leurs formes hexagonales et circulaires les distinguent de tout ce qu'un joueur pourrait associer aux icônes dans le jeu.

Lors de l'esquisse d'icônes simples pour votre propre jeu, considérez ce qui suit :

• Les icônes simples sont lisibles même lorsqu'elles sont petites. Pour cette raison, limitez les détails sur vos icônes qui deviendraient méconnaissables sur les écrans d'appareils mobiles.
• Les icônes sont puissantes car elles peuvent communiquer un message peu importe la langue du joueur. Tant que cela n'impacte pas la compréhension du joueur de votre UI, remplacez le texte inutile par des icônes pour améliorer les efforts de localisation.
• De nombreux jeux du même genre utilisent des icônes stylistiquement similaires, comme une icône d'épée qui représente la force, ou un bécher qui représente la magie. Embrassez le symbolisme au sein du genre de votre jeu afin que les joueurs puissent comprendre vos icônes sans orientation supplémentaire.

Si vous ne savez pas quels types d'icônes sont courants dans le genre de votre jeu, consultez la Base de Données UI de Jeu. Cet outil gratuit pour les concepteurs UI comprend des captures d'écran de centaines de jeux de différents genres que vous pouvez consulter pendant votre processus de conception.

Établir un ordre d'interaction

Un ordre d'interaction est la séquence d'interactions que les joueurs peuvent avoir avec votre UI. Comme il y a souvent plusieurs éléments UI interactifs à l'écran, il est important d'établir un ordre d'interaction intuitif pour aider les joueurs à prendre des décisions alors qu'ils naviguent à travers divers flux de travail.

Il existe généralement trois types d'interactions dans un flux de travail :

• Interaction Principale – L'action qu'un joueur est le plus susceptible d'effectuer.
• Interaction Secondaire – L'action qu'un joueur est susceptible d'effectuer en alternative à l'action principale.
• Interaction Tertiaire – L'action qu'un joueur est le moins susceptible d'effectuer.

Chaque type d'interaction doit avoir un niveau d'emphase visuelle différent en fonction de la probabilité qu'un joueur effectue l'action. Pour illustrer ce concept, examinez l'image suivante de l'ordre d'interaction pour le flux de travail de sélection d'un blaster dans le jeu de laser tag exemple, où A représente l'interaction principale, B représente l'interaction secondaire, et C représente l'interaction tertiaire.

Dans ce flux de travail, l'action qu'un joueur est le plus susceptible d'effectuer est de sélectionner entre les deux types de blasters différents, donc les boutons de blaster sont beaucoup plus grands que tout autre élément interactif dans la conception. Ce niveau d'emphase visuelle attire l'attention du joueur et dirige son regard vers le milieu de l'élément UI global. Après que le joueur ait pris sa décision, l'étape logique suivante dans le flux de travail est de confirmer sa sélection et de commencer le round. Pour cette raison, le bouton SÉLECTIONNER est directement en dessous de l'interaction principale.

Bien que peu probable, le joueur peut ne pas savoir qu'il peut sélectionner l'un des boutons de blaster pour communiquer quel blaster il souhaite utiliser. Pour aider dans cette situation, il y a deux boutons fléchés tertiaires que le joueur peut utiliser pour faire défiler ses choix. Ces boutons sont subtils et beaucoup plus petits que les éléments des interactions principales et secondaires, mais ils sont également perceptibles pour le joueur qui a besoin d'orientation sur les actions qu'il peut effectuer.

Si vous deviez placer ces interactions principales, secondaires et tertiaires dans un ordre d'interaction différent, comme échanger le bouton SÉLECTIONNER avec le bouton fléché gauche, les joueurs n'auraient pas de direction claire sur la séquence de choix qu'ils doivent faire. Pour cette raison, en plus de l'emphase visuelle d'un ordre de boutons, des flux de travail efficaces suivent une hiérarchie visuelle qui guide les joueurs à travers votre ordre idéal de décisions selon la direction dans laquelle ils sont susceptibles de scanner les informations, comme de haut en bas et de gauche à droite.

Lors de l'établissement d'un ordre d'interaction pour les flux de travail dans votre propre jeu, considérez ce qui suit :

• Les joueurs doivent avoir une compréhension claire de quand ils peuvent interagir avec votre UI pour effectuer des actions. Pour cette raison, il est recommandé de fournir au moins une forme de retour visuel pour les éléments UI interactifs, comme afficher un contour ou changer la taille, la couleur ou l'animation d'un bouton lorsqu'il est en focus.
• Si les étiquettes sur les éléments UI interactifs sont vagues ou similaires les unes aux autres dans le même flux de travail, les joueurs peuvent mal comprendre comment compléter une action ou un processus. Pour éviter une expérience négative pour le joueur, créez des étiquettes qui sont claires, concises et distinctes les unes des autres.
• Si les éléments UI interactifs sont trop grands, ils peuvent distraire d'autres informations importantes à l'écran. Inversement, s'ils sont trop petits, ils peuvent être difficiles à lire ou à sélectionner, surtout s'ils sont proches les uns des autres sur des appareils mobiles. Pour cette raison, il est essentiel de vérifier la taille de vos éléments UI interactifs sur différentes tailles d'écran.

Dans Implémenter dans Studio, vous apprendrez à utiliser des objets UIAspectRatioConstraint pour garantir que les éléments UI maintiennent un rapport d'aspect spécifique peu importe quel appareil les joueurs utilisent pour accéder à votre jeu. En plus de faciliter votre processus de conception, cette technique peut également vous aider à respecter les recommandations des Directives d'Accessibilité du Contenu Web concernant la taille et l'espacement des cibles tactiles pour créer une zone tactile pour les éléments UI interactifs d'au moins 9x9 mm sur les appareils mobiles.

Déterminez un système de texte

Un système de texte est un ensemble de règles concernant les polices et le style pour tous les mots de votre UI, comme "toujours en gras les en-têtes" ou "utiliser une police verte lors de la référence à une statistique de santé." Déterminer un système de texte tôt dans votre processus de conception vous permet d'avoir une structure que vous pouvez appliquer de manière cohérente tout au long de votre jeu afin que les joueurs sachent à quoi s'attendre en cherchant les informations dont ils ont besoin.

Bien que les systèmes de texte puissent varier en fonction du genre du jeu ou des exigences du monde 3D, la règle la plus importante que tous les systèmes de texte doivent suivre est de garantir que tout votre texte UI est clair et facile à lire. En utilisant cette règle comme base pour toutes les décisions liées à votre système de texte, vous pouvez améliorer l'accessibilité et l'expérience utilisateur pour les joueurs lisant votre UI en tenant compte des différentes manières dont les joueurs peuvent interagir avec votre texte, telles que :

• L'appareil que les joueurs peuvent utiliser pour accéder à votre jeu.
• La langue dans laquelle les joueurs peuvent lire votre texte localisé.
• Le possible arrière-plan sous-jacent derrière le texte à l'écran.

Par exemple, le design de réponse d'écran suivant lorsque le joueur est tagué s'adapte à une taille de police plus petite ou plus grande selon l'appareil du joueur, inclut suffisamment d'espace de chaque côté du texte anglais pour les langues avec des traductions plus longues, et inclut un arrière-plan contrastant afin que les joueurs puissent lire le texte peu importe la couleur de leur arrière-plan.

Lors de la détermination d'un système de texte pour votre propre jeu, considérez ce qui suit :

• Le texte est difficile à lire lorsqu'il se fond dans le bruit de son arrière-plan. Pour améliorer la lisibilité de votre UI, affichez le texte sur une couleur contrastante ou avec un contour.
• Si vous ne redimensionnez pas votre texte pour différents appareils, le texte prendra trop de place ou deviendra petit et indéchiffrable sur l'écran du joueur. Pour détecter les incohérences dans votre texte, testez votre design sur plusieurs appareils tout au long du processus de conception.
• Les mots peuvent s'étendre au-delà de votre design original lorsque vous les localisez dans d'autres langues. Pour améliorer la composition de votre design, référez-vous à l'espace maximal que votre texte peut occuper à l'écran.
• Bien que certaines polices puissent correspondre à l'esthétique de votre jeu, elles peuvent être difficiles à lire en grande quantité. Pour cette raison, utilisez le texte stylisé avec parcimonie, comme pour les titres ou le texte d'alerte.

Une fois que vous avez un plan pour le style artistique de votre UI, vous pouvez passer à la section suivante du tutoriel pour apprendre à créer le wireframe de la disposition de chaque élément dans divers flux de travail des joueurs.