Choisissez un style d'art

Choisir un style artistique est le processus de planification d'une direction esthétique pour vos éléments d'interface utilisateur.Il est important de commencer votre processus de conception avec un style d'art parce que les styles d'art fournissent des règles visuelles auxquelles vous pouvez vous référer pour vous assurer que votre interface utilisateur fournit intuitivement aux joueurs des informations sur ce qu'ils peuvent faire dans votre expérience.

En utilisant le fichier expérience de balise laser d'échantillon expérience de balise laser d'échantillon comme référence, cette section de l'interface utilisateur montre comment prendre des décisions significatives sur la façon de concevoir vos éléments d'interface utilisateur selon le genre de votre expérience, y compris des conseils sur :

• Identifier les éléments d'interface utilisateur nécessaires en fonction de ce que vous voulez communiquer aux joueurs tout au long de votre expérience.
• Sélection d'un thème de couleur qui renforce les conventions de couleur spécifiques au genre qui sont intuitives pour votre audience.
• Définir des icônes simples qui sont faciles à décoder sur n'importe quelle taille d'écran.
• Établir un ordre de boutons correspondant à la probabilité des différents workflows des joueurs.
• Détermination d'un système de texte qui garantit la lisibilité sur les appareils cibles.

Une fois que vous aurez terminé cette section, vous apprendrez à concevoir la structure et le flux de l'information que vous souhaitez communiquer aux joueurs via l'interface utilisateur dans votre expérience.

Identifier vos éléments d'interface utilisateur

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

Il existe de nombreuses façons différentes de brainstormer les éléments d'interface utilisateur nécessaires pour vos exigences de jeu, mais il est recommandé de commencer par imaginer ce qu'un joueur doit savoir dès qu'il rejoint votre expérience.Par exemple, lorsqu'un joueur ouvre l'expérience de balise laser d'échantillon, il peut se poser les questions suivantes :

• Quel est l'objectif de l'expérience ?
• Comment puis-je 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 puis-je savoir quand je commence la manche ?
• Comment puis-je savoir quand j'ai réussi à taguer quelqu'un avec mon blaster ?
• Comment puis-je savoir quand l'équipe ennemie me marque avec succès ?

En utilisant ces questions pour comprendre quelles informations sont indispensables pour que les joueurs réussissent, vous pouvez trier les besoins de l'interface utilisateur de l'expérience de marquage laser d'échantillon dans trois catégories :

1. Informations sur l'objectif de l'expérience.
2. Informations sur le blaster.
3. Informations sur l'état du joueur.

Trier les besoins d'interface utilisateur de votre expérience en catégories est utile car vous pouvez formuler votre style artistique autour de chaque regroupement pour renforcer les informations dont chaque catégorie a besoin pour enseigner aux joueurs.Par exemple, si vous voulez que votre interface utilisateur indique aux joueurs quelles actions ils peuvent prendre en matière du statut de santé de leur personnage, vous pouvez choisir un style artistique avec des éléments d'interface utilisateur qui donnent la priorité à la couleur verte et/ou aux icônes plus pour que les joueurs puissent rapidement reconnaître leur fonction.

Après avoir trié les besoins d'interface utilisateur de votre expérience en catégories, vous pouvez créer une liste des éléments d'interface utilisateur nécessaires pour répondre aux exigences de chaque catégorie.Pour démontrer, l'expérience de balise laser de test utilise la table suivante d'éléments d'interface utilisateur pour aborder la liste précédente des questions potentielles du joueur.Pendant que vous travaillez à travers ce tutoriel, le programme d'interface utilisateur continuera de se référer à cette liste et de souligner les principales décisions de conception qui se rapportent à chaque catégorie d'éléments d'interface utilisateur.

Maintenant que vous avez une liste d'éléments d'interface utilisateur pour votre expérience, il est temps de commencer à faire des choix stylistiques et sémantiques pour chaque regroupement d'éléments d'interface utilisateur, à commencer 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 application cohérente dans votre expérience, comme l'utilisation d'une couleur brillante pour indiquer quand quelque chose est sélectionnable.Appliquer un thème de couleur à vos éléments d'interface utilisateur est important, notamment lorsque vous comptez sur des conventions de couleur dans le genre de votre expérience, car cela permet aux joueurs de comprendre rapidement votre interface avec un effort minimal.

Dans le cursus d'art environnemental, chaque moitié de l'environnement de balise laser est colorée d'une vue de haut en bas pour différencier la zone de la carte qui est près de la zone d'apparition respective de chaque équipe : menthe pour l'équipe qui se rassemble sur le côté gauche de la carte, et rose carnation pour l'équipe qui se rassemble sur le côté droit de la carte.Ces couleurs spécifiques sont utiles car elles sont complémentaires , ce qui signifie qu'elles se complètent bien, et permet aux joueurs de scanner facilement leur environnement et de s'orienter indépendamment de la direction vers laquelle ils sont tournés dans le construction.

L'expérience de balise laser d'échantillon utilise le même thème de couleur dans son interface utilisateur pour mettre en évidence les informations qui concernent chaque équipe, telles que l'indicateur d'équipe de chaque joueur dans l'espace 3D ou le traqueur de points d'équipe qui recouvre l'écran.Cette cohérence aide les joueurs à pouvoir comprendre rapidement les informations sur l'objectif de l'expérience pendant le jeu de tir à la première personne, notamment car les joueurs doivent prendre des décisions rapides en traversant l'environnement.

Lorsque vous sélectionnez un thème de couleur pour votre propre expérience, tenez compte des suivre:

• La force d'un thème de couleur repose sur l'aide aux joueurs à établir des rapprochements mentaux rapides entre chaque couleur et leur fonction.Pour cette raison, limitez votre thème de couleur à ne mettre en évidence que les informations clés que vous voulez que les joueurs associent à vos éléments d'interface utilisateur .
• Pour assurer que les joueurs souffrant de daltonisme peuvent comprendre le message de votre thème de couleur, ne comptez pas toujours sur la couleur seule pour distinguer les éléments de l'interface utilisateur .Au lieu de cela, combinez les couleurs avec des icônes, des formes et/ou des animations pour assurer que votre interface communique efficacement avec chaque joueur.
• Il est plus important que votre interface utilisateur soit lisible que plaisante esthétiquement.Pour cette raison, préférez une interface utilisateur simple avec une couleur qui reste lisible sur les éléments légers et sombres dans le monde 3D.

Pour mettre en évidence la guidance dans le dernier point, l'expérience de balise laser d'échantillon utilise les couleurs neutres noires et blanches pour presque tous les autres éléments d'interface utilisateur qui recouvrent l'écran 2D.Le contraste noir et blanc se complète bien, et il est facile de lire car l'écran affiche le reste d'un environnement 3D coloré autrement.

Décrire des icônes simples

Un icône est un symbole qui représente une action, un objet ou un concept dans une expérience.Définir des icônes simples et intuitives est important car le résultat final permet aux joueurs de reconnaître facilement ce qu'ils sont capables de faire et ce que vous voulez leur dire par l'intermédiaire de votre interface utilisateur sans utiliser de texte, ce qui peut encombrer l'écran et attirer l'attention loin du contenu qui compte.Ce processus est encore plus important si votre audience accède à votre expérience en utilisant un petit écran sur les 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 expérience.Par exemple, dans l'environnement final du cursus d'art environnemental Environmental Art Curriculum, les ressources 3D modulaires et propres ont toutes deux un style d'art propre et high-tech qui utilise des formes rectangulaires avec des coins arrondis doux.Des panneaux biseautés le long du sol aux fenêtres presque circulaires dans le plafond, rien n'inclut une bords aiguisé.

Pour compléter ce style artistique tout en restant unique, tous les éléments d'interface que vous apprendrez à faire plus tard dans ce tutoriel incluent une esthétique futuriste et des angles ronds sans correspondre à la langue de forme des ressources 3D de l'environnement.Cela maintient la signification de chaque icône distincte de toute autre information dans l'espace 2D et 3D.

Pour démontrer ce concept, voir les deux images suivantes de l'expérience de balise laser d'échantillon qui indique aux joueurs où leur blaster tire sur l'écran, et le bouton qui permet aux joueurs de tirer leur blaster sur les appareils mobiles.Les deux icônes incluent des angles doux pour être cohérentes avec le monde global, mais leurs formes hexagonales et circulaires les distinguent de tout ce que le joueur pourrait associer aux icônes dans l'expérience.

Lorsque vous dessinez des icônes simples pour votre propre expérience, tenez compte des suivre:

• 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 illisibles sur les écrans des appareils mobiles.
• Les icônes sont puissantes car elles peuvent communiquer un message, peu importe la langue du joueur.Tant qu'il n'a pas d'impact sur la compréhension du joueur de votre interface utilisateur, remplacez le texte inutile par des icônes pour améliorer les efforts de localisation.
• De nombreuses expériences du même genre utilisent des icônes qui sont stylistiquement similaires, telles qu'une icône d'épée qui représente la force, ou un verre qui représente la magie. Embrassez le symbolisme au sein du genre de votre expérience afin que les joueurs puissent comprendre vos icônes sans guide supplémentaire.

Si vous ne savez pas quels types d'icônes sont communs dans le genre de votre expérience, consultez la base de données d'interface de jeu.Cet outil gratuit de ressources pour les designers d'interface inclut des captures d'écran de centaines de jeux de différents genres que vous pouvez référencer pendant votre processus de conception.

Établir une ordre d'interaction

Un ordre d'interaction est la séquence d'interactions que les joueurs peuvent avoir avec votre interface utilisateur .Comme il y a souvent plusieurs éléments d'interface utilisateur interactifs sur l'écran, il est important d'établir une ordre d'interaction intuitif pour aider les joueurs à prendre des décisions en naviguant dans différents flux de travail.

Il y a 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 de réaliser en tant qu'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 visuel différent selon 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 l'expérience de balise laser d'échantillon, dans laquelle 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 la plus probable que le joueur effectue est de sélectionner entre les deux types de blasters différents, de sorte que les boutons de blaster sont beaucoup plus grands que tout autre élément interactif dans le design.Ce niveau d'accent visuel attire l'attention du joueur et attire son œil vers le milieu de l'élément d'interface global.Après que le joueur ait pris sa décision, l'étape logique suivante dans le flux de travail est de confirmer leur sélection et de commencer la manche.Pour cette raison, le bouton SELECT 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 le blaster qu'il souhaite utiliser.Pour aider dans cette situation, il y a deux boutons de flèche tertiaires que le joueur peut utiliser pour passer d'un choix à l'autre.Ces boutons sont subtils et beaucoup plus petits que les éléments des interactions primaires et secondaires, mais ils sont également perceptibles pour le joueur qui a besoin de direction sur les actions qu'il est capable d'effectuer.

Si vous deviez placer ces interactions primaires, secondaires et tertiaires dans un autre ordre d'interaction, comme échanger le bouton SELECT avec le bouton flèche 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'accent visuel d'un ordre de boutons, des flux de travail efficaces suivent une hiérarchie visuelle qui guide les joueurs à travers leur ordre idéal de décisions selon la direction dans laquelle ils sont susceptibles de scanner des informations, comme du haut vers le bas et de gauche à droite .

Lors de la création d'une commande d'interaction pour les flux de travail dans votre propre expérience, tenez compte des éléments suivre:

• Les joueurs doivent avoir une compréhension claire de quand ils peuvent interagir avec votre interface utilisateur pour effectuer des actions.Pour cette raison, il est recommandé de fournir au moins une forme de retour visuel pour les éléments d'interface utilisateur interactifs, tels que l'affichage d'un contour ou le changement de la taille, de la couleur ou de l'animation d'un bouton lorsqu'il est en focus.
• Si les étiquettes sur les éléments d'interface utilisateur interactifs sont vagues ou similaires les unes aux autres dans le même flux de travail, les joueurs peuvent mal comprendre comment terminer une action ou un processus.Pour éviter une expérience négative du joueur, créez des étiquettes effacer, concises et distinctes les unes des autres .
• Si les éléments d'interface utilisateur interactifs sont trop grands, ils peuvent distraire de toute autre information importante sur l'écran.Inversement, s'ils sont trop petits, ils peuvent être difficiles à lire ou difficiles à selectionner, notamment s'ils sont à proximité sur les appareils mobiles.Pour cette raison, il est essentiel de revoir la taille de vos éléments d'interface utilisateur interactifs sur différentes tailles d'écran .

Dans Implémenter dans Studio, vous apprendrez à utiliser UIAspectRatioConstraint les objets pour garantir que les éléments d'interface utilisateur maintiennent une proportion spécifique d'aspect, peu importe l'appareil que les joueurs utilisent pour accéder à votre expérience.En plus de rendre votre processus de conception plus facile, cette technique peut également vous aider à respecter la recommandation de la norme d'accessibilité des contenus Web Taille et espacement de la cible tactile pour créer une zone de toucher pour les éléments d'interface utilisateur interactifs d'au moins 9x9 mm sur les appareils mobiles.

Déterminer un système de texte

Un système de texte est un ensemble de règles sur les polices et le style pour tous les mots de votre interface utilisateur, comme « toujours des en-têtes audacieux » ou « utiliser une police verte lors de la référence d'une statistique de santé ». Déterminer un système de texte au début de votre processus de conception vous permet d'avoir une structure que vous pouvez appliquer de manière cohérente tout au long de votre expérience afin que les joueurs sachent à quoi s'attendre lorsqu'ils recherchent les informations dont ils ont besoin.

Bien que les systèmes de texte puissent varier en fonction du genre de l'expérience 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 le texte de votre interface utilisateur soit clair et facile à lire .En utilisant cette règle comme base pour toutes les décisions relatives à votre système de texte, vous pouvez améliorer l'accessibilité et l'expérience utilisateur pour les joueurs qui lisent votre interface utilisateur en tenant compte des différentes façons dont les joueurs peuvent interagir avec votre texte, telles que :

• Les joueurs d'appareils peuvent utiliser pour accéder à votre expérience.
• La langue dans laquelle les joueurs peuvent lire votre texte localisé.
• L'arrière-plan possible sous-jacent derrière le texte sur l'écran.

Par exemple, la réponse d'écran suivante lorsqu'un joueur est étiqueté détermine une taille de police plus petite ou plus grande selon la taille du appareildu joueur, inclut suffisamment d'espace à chaque côté du texte anglais pour les langues avec des traductions plus longues, et inclut un arrière-plan contrasté 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 expérience, tenez compte des éléments suivre:

• Le texte est difficile à lire lorsqu'il se fond dans le bruit de son arrière-plan.Pour améliorer la lisibilité de votre interface utilisateur, afficher le texte au-dessus d'une couleur contrastante ou avec un trait .
• Si vous ne redimensionnez pas votre texte pour différents appareils, le texte prendra trop de place ou deviendra petit et illisible sur l'écran du joueur.Pour repérer les discrepances dans votre texte, testez votre conception 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 la plus grande quantité d'espace que votre texte peut occuper sur l'écran .
• Bien que certaines polices puissent s'adapter à l'esthétique de votre expérience, elles peuvent être difficiles à lire en grandes quantités.Pour cette raison, utilisez le texte stylisé de manière parcimonieuse , comme pour les titres ou le texte d'avertissement.

Une fois que vous avez un plan pour le style artistique de votre interface utilisateur, vous pouvez passer à la section suivante du tutoriel pour apprendre à wireframer la disposition de chaque élément dans différents flux de travail des joueurs.