Choisissez un style d'art

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

En utilisant l'expérience de laser de génération comme référence, cette section du cours de l'interface de l'utilisateur vous montre comment prendre des décisions significatives sur la façon de concevoir vos éléments d'interface en fonction du genre de votre expérience, y compris des conseils sur :

• Identification des éléments d'interface 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 normes de couleur spécifiques au genre qui sont intuitives pour votre audience.
• Délimiter des icônes simples qui sont faciles à déchiffrer sur n'importe quelle taille d'écran.
• Établir un ordre de bouton qui correspond à la probabilité des différents flux de travail des joueurs.
• Détermination d'un système de texte qui garantit la lisibilité sur les appareils cibles.

Après avoir terminé cette section, vous apprendrez à concevoir la structure et le flux d'informations que vous souhaitez communiquer aux joueurs via l'interface utilisateur dans votre expérience.

Identifyez vos éléments d'interface utilisateur

La première étape dans le choix d'un style d'art pour votre interface utilisateur est d'identifier les éléments d'interface dont vous avez besoin pour les différents types d'informations que vous voulez communiquer à votre audience. En faisant ce travail au début de votre processus de conception, vous pouvez catégoriser les éléments d'interface par leur but fonctionnel, prendre des décisions sémantiques en fonction de l'endroit et du moment où les joueurs interagissent avec chaque élément d'interface et planifier où vous pouvez réutil

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

• Quel est le but de l'expérience ?
• Comment puis-je savoir qui est dans mon équipe ?
• Comment puis-je suivre les points de mon équipe ?
• Comment puis-je sélectionner un blaster ?
• Comment puis-je savoir où le laser est tiré par le blaster ?
• Si je suis sur un appareil mobile, comment puis-je 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 à marquer quelqu'un avec mon blaster ?
• Comment puis-je savoir quand l'équipe ennemie m'a marqué avec succès ?

En utilisant ces questions pour comprendre quelles informations sont nécessaires pour que les joueurs s'épanouissent, vous pouvez trier les besoins de l'interface expériencedu laser de la catégorie suivante :

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

Organiser vos besoins en matière d'interface utilisateur dans des catégories est utile, car vous pouvez formuler votre style d'art autour de chaque groupe pour renforcer l'information que chaque catégorie doit enseigner aux joueurs. Par exemple, si vous voulez que votre UI leur dise quelles actions ils peuvent prendre en matière de santé statutleur personnage, vous pourriez choisir un style d'art avec des éléments UI qui priorisent le vert clair et/ou plus des icônes pour que les joueurs puissent rapidement reconnaître

Après avoir classé les besoins de l'interface 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'exemple de laser de suivi utilise la table suivante d'éléments d'interface pour adresser la liste précédente de questions potentielles. Au fur et à mesure que vous travaillez à travers ce tutoriel, le cours d'interface utilisateur continuera à se référer à cette liste et mettra en év

Maintenant que vous avez une liste d'éléments d'interface pour votre expérience, il est temps de commencer à prendre des choix stylistiques et sémantiques pour chaque groupe d'éléments d'interface, 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 chacun communique un message à travers une application cohérente dans votre expérience, telles que l'utilisation d'une couleur pour indiquer quand quelque chose est sélectable. L'application d'un thème de couleur à vos éléments UI est important, surtout lorsque vous vous appuyez sur les normes de couleur dans le genre de votre expérience, car cela permet aux joueurs de comprendre rapidement votre UI

Dans le environnement artistique environnemental, chaque moitié de l'environnement de la balise laser est colorée d'un point de vue de haut en bas pour différentier quelle zone de la carte est proche de chaque zone d'apparition respectuelle : menthe pour l

L'expérience de laser tag utilisera cette même thème de couleur dans son UI pour mettre en évidence les informations qui sont pertinentes pour chaque équipe, telles que l'indicateur d'équipe de chaque joueur dans l'espace 3D ou le tracker de point d'équipe qui couvre l'écran. Cette cohérence aide les joueurs à comprendre rapidement l'objectif de l'expérience lors de la rapidement paced gameplay d'un jeu de tir en 1re personne, sur

Lors de la sélection d'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 à l'utilisateur à faire rapidement des associés mentaux 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 souhaitez que les joueurs associent avec vos éléments de l'interface utilisateur.
• Pour vous assurer que les joueurs aveugles peuvent comprendre le message de votre thème de couleur, n'utilisez pas toujours la couleur seule pour distinguer entre 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 utilisateur communique efficacement avec chaque joueur.
• Il est plus important que votre interface utilisateur soit lisible que visuellement agréable. Pour cette raison, prioriser l'interface utilisateur simple avec la couleur qui reste lisible sur les éléments clairs et sombres dans le monde 3D.

Pour mettre en évidence le conseil dans le dernier point, l'expérience de marquage laser utilise les couleurs neutres noir et blanc pour presque tous les autres éléments de l'interface utilisateur qui superposent l'écran 2D. Le noir et le blanc sont bien mis en évidence l'un de l'autre, et ils sont faciles à lire comme le reste de l'écran affiche un environnement 3D autrement coloré.

Contours des icônes simples

Une icône est un symbole qui représente une action, un objet ou un concept dans une expérience. Outliner les 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 dire à travers votre interface utilisateur sans utiliser du texte, ce qui peut encombrer l'écran et attirer l'attention sur ce qui est important. Ce processus est

Les icônes simples ont généralement un style distinct de vos éléments 3D tout en complétant toujours le monde général de votre expérience. Par exemple, dans l'environnement final du parcours d'art environnemental, les ressources modulaires et prop 3D ont tous un style d'art propre et high-tech qui utilise des formes rectangulaires avec des coins arrondis. Des panneaux biseautés le long du sol au près des fenêtres rondes dans le plafond, ri

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

Pour démontrer ce concept, voir les deux images suivantes de l'expérience de marquage laser de l'échantillon qui montre 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 des choses qu'un joueur pourrait associer aux icônes dans l'expérience.

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

• Les icônes simples sont lisibles même quand elles sont petites. Pour cette raison, limite les détails sur vos icônes qui deviendraient in reconnaissable sur les écrans des appareils mobiles.
• Les icônes sont puissantes car elles peuvent communiquer un message, peu importe la langue du joueur. Tant que cela n'affecte pas l'理解 du joueur de votre interface utilisateur, remplacer 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 styliquement 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 dans le genre de votre expérience afin que les joueurs puissent comprendre vos icônes sans guidance supplémentaire.

Si vous ne savez pas quel type d'icônes sont courantes dans le genre de votre expérience, consultez la base de données d'interface utilisateur du jeu. Ce outil gratuit pour les concepteurs d'interface inclut des captures d'écran des centaines de jeux de différents genres que vous pouvez référencer pendant votre processus de conception.

Établir un ordre d'interaction

Une 순서 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'interaction interactable sur l'écran, il est important de créer un ordre d'interaction intuitif pour aider les joueurs à prendre des décisions en naviguant dans différents workflows.

Il y a généralement trois types d'interactions dans un workflow :

• Interaction principale – L'action qu'un joueur est le plus susceptible de faire.
• Interaction secondaire – L'action qu'un joueur est probable de faire en tant qu'alternative à l'action principale.
• Interaction tertiaire – L'action qu'un joueur est le moins susceptible de faire.

Chaque type d'interaction doit avoir un niveau différent d'accent visuel en fonction de la probabilité qu'un joueur exécute l'action. Pour illustrer ce concept, examinez la image suivante de l'ordre d'interaction pour que le workflow sélectionne un blaster dans l'expérience de laser de A, dans laquelle A représente l'interaction principale, B représente l'interaction secondaire et C représente l'interaction tertiaire.

Dans ce workflow, l'action qu'un joueur est la plus susceptible de performer 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 interactable dans le design. Ce niveau d'attention visuelle attire l'attention du joueur et attire leur œil vers le centre de l'élément principal de l'interface utilisateur. Après que le joueur ait pris sa décision, le prochain

Bien qu'il soit peu probable que le joueur sache qu'il est capable de sélectionner l'un des boutons du blaster pour communiquer sur lequel ils veulent utiliser le blaster. Pour aider dans cette situation, il y a deux boutons de flèche tertiaires que le joueur peut utiliser pour faire la transition entre leurs choix. Ces boutons sont subtils et beaucoup plus petits que les éléments des principales et secondaires interactions, mais ils sont également perçus par le joueur qui a besoin de direction sur les actions qu'ils sont cap

Si vous plaçiez ces interactions primaires, secondaires et tertiaires dans un autre ordre d'interaction, par exemple en échangeant le bouton sélectionner avec le bouton flèche de gauche, les joueurs n'auraient pas de direction claire sur la séquence de choix qu'ils doivent prendre. Pour cette raison, en plus de l'accent visuel d'un bouton d'ordre, les flux de travail efficaces suivent une

Lors de l'établissement d'un ordre d'interaction pour les workflows 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 exécuter des actions. Pour cette raison, il est recommandé de fournir au moins une forme de retour visuel pour les éléments d'interface interactible, tels que la présentation 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 de l'interface utilisateur interagissables sont vagues ou similaires les uns aux autres dans le même workflow, les joueurs peuvent mal comprendre comment terminer une action ou un processus. Pour éviter une mauvaise expérience utilisateur, créez des étiquettes qui sont effacer, concises et distinctes les uns des autres .
• Si les éléments d'interface utilisateur interactifs sont trop grands, ils peuvent détourner l'attention d'autres informations importantes sur l'écran. Conversément, s'ils sont trop petits, ils peuvent être difficiles à lire ou difficiles à selectionner, surtout s'ils sont en proximité rapprochée 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 le studio, vous apprendrez à utiliser les objets UIAspectRatioConstraint pour garantir que les éléments de l'interface utilisateur conservent un certain aspect ratio, peu importe le dispositif 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 à at

Déterminer un système de texte

Un système de textes est un ensemble de règles sur les polices et le style pour tous les mots de votre interface, tels que « toujours utiliser des en-têtes en gros » ou « utiliser une police verte lors de la référence d'une statistique de santé ». Déterminer un système de textes tôt dans votre processus de conception vous permet d'avoir une structure que vous pouvez appliquer cohérentement dans toute votre expérience afin que les joueurs sachent ce qu'ils peuvent attendre lorsqu'

Bien que les systèmes de texte puissent varier en fonction du genre ou des exigences mondiales 3D, le règle la plus importante que tous les systèmes de texte doivent suivre est de garantir que tout votre texte d'interface 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 de l'utilisateur pour les joueurs qui lis

• Les appareils joueurs peuvent utiliser pour accéder à votre expérience.
• La langue dans laquelle les joueurs peuvent lire votre texte localisé.
• Le fond de l'écran textuel sous-jacente.

Par exemple, la réponse d'écran suivante lorsqu'un joueur est marqué comme sorti s'adapte à une taille de police plus petite ou plus grande selon la taille de l'appareil d'un joueur, inclut suffisamment d'espace sur chaque côté du texte pour les langues avec plus longues traductions, et inclut un fond de police contrastant afin que les joueurs puissent lire le texte peu importe la couleur dans leur fond.

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, affichez le texte au-dessus d'une couleur contrastée ou avec un coup de crayon .
• Si vous n'échellez pas votre texte pour différents appareils, le texte prendra soit trop de place, soit il deviendra trop petit et indéchiffrable sur l'écran du joueur. Pour tester les différences 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 d'origine lorsque vous les localisez dans d'autres langues. Pour améliorer la composition de votre design, référez-vous au plus d'espace que votre texte peut prendre sur l'écran .
• Bien que certaines polices puissent s'adapter à l'esthétique de votre expérience, elles peuvent être difficiles à lire en grande quantité. Pour cette raison, utilisez judicieusement le texte style , 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 prochaine section du tutoriel pour apprendre à wireframe le layout de chaque élément dans différents workflows de joueurs.