Concevoir vos mises en page

Concevoir vos mises en page est le processus de conception de la structure et du flux des informations que vous souhaitez communiquer à travers l'interface utilisateur dans divers flux de travail. Cette étape critique du tutoriel vous permet d'itérer sur l'agencement de vos éléments d'interface utilisateur, de découvrir des points de douleur et d'améliorer l'expérience du joueur avant d'investir du temps et des ressources dans un design problématique qui ne fonctionne pas pour votre jeu.

En utilisant le jeu de laser tag d'exemple fichier .rbxl comme référence, cette section du curriculum d'interface utilisateur vous montre comment structurer vos éléments d'interface utilisateur à l'écran, y compris des conseils sur :

• Planifier une hiérarchie visuelle pour votre interface utilisateur qui guide intuitivement les joueurs vers les fonctionnalités et les informations dont ils ont besoin pour réussir dans votre jeu.
• Bloquer les éléments d'interface utilisateur avec des formes de base pour examiner la composition de vos éléments d'interface utilisateur aux côtés de l'interface utilisateur de base de Roblox et des contrôles tactiles.
• Développer des flux d'utilisateurs pour tenir compte des actions nécessaires que les joueurs doivent entreprendre pour atteindre leurs objectifs.

Après avoir terminé cette section, vous apprendrez à construire et configurer votre interface utilisateur dans Studio en respectant votre style artistique et vos maquettes.

Planifier une hiérarchie visuelle

Une hiérarchie visuelle est une structure d'organisation qui met en évidence les éléments d'interface utilisateur par leur ordre d'importance. Planifier une hiérarchie visuelle pour les différents flux de travail de votre jeu est important car cela prépare les joueurs à réussir dans l'accomplissement de leurs objectifs, ce qui est particulièrement nécessaire pour le gameplay rapide des jeux de tir à la première personne où les objectifs changent d'un instant à l'autre.

Des hiérarchies visuelles efficaces guident les joueurs à travers les fonctionnalités et les informations dont ils ont besoin pour répondre à vos exigences de gameplay en fonction de l'endroit où ils regardent naturellement à l'écran pour compléter les flux de travail. Par exemple, la hiérarchie visuelle du jeu de laser tag d'exemple doit guider les joueurs à travers les catégories suivantes d'éléments d'interface utilisateur alors qu'ils naviguent sur la carte et marquent les joueurs de l'équipe ennemie :

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

L'emplacement de chacune de ces catégories à l'écran dans le design final met en évidence leur ordre d'importance :

• La première catégorie est près du haut car elle contient des éléments d'interface utilisateur qui ont le plus de signification sur la façon de gagner le jeu.
• La deuxième catégorie occupe la majorité de l'espace à l'écran près du milieu car elle agit comme le point focal pour attirer l'attention des joueurs sur l'action dans l'espace 3D, et elle a la plus grande signification pour jouer au jeu.
• La troisième catégorie est près des côtés car les joueurs peuvent lire ces informations périphériques sans détourner leur attention du gameplay.

Pour certains genres de jeux, vous n'avez besoin d'afficher qu'une seule catégorie d'informations à la fois car c'est le seul type d'informations qui est important pour le joueur pendant ce flux de travail. Cependant, pour les jeux de tir à la première personne, les joueurs doivent voir des éléments d'interface utilisateur de plusieurs catégories en même temps car ils fournissent tous des informations dont le joueur a besoin pour réussir, comme le score de leur équipe, la période de recharge de leur blaster, et s'ils sont éliminés d'un tour.

Lors de la planification d'une hiérarchie visuelle pour les flux de travail de votre propre jeu, considérez ce qui suit :

• Si vous regroupez des éléments d'interface utilisateur de différentes catégories ensemble à travers l'écran, les joueurs ne sauront pas où chercher ce dont ils ont besoin. Pour aider les joueurs à naviguer dans votre jeu, regroupez les éléments d'interface utilisateur de la même catégorie ensemble.
• Si vous avez trop de catégories à l'écran en même temps, les joueurs peuvent ne pas savoir quelles informations ils doivent surveiller. Pour éviter de submerger les joueurs avec du désordre, affichez les éléments d'interface utilisateur de manière contextuelle pour différents flux de travail.
• De même, s'il y a trop d'éléments d'interface utilisateur par catégorie, cela peut distraire les joueurs de comprendre comment accomplir une action ou un processus. Pour cette raison, il est important d'utiliser votre style artistique pour fournir un accent visuel pour vos ordres d'interaction idéaux.

Pour un examen complet de la hiérarchie visuelle pour le jeu de laser tag d'exemple, consultez le tableau suivant :

Bloquer les éléments d'interface utilisateur

Maintenant que vous avez une hiérarchie visuelle en tête, vous pouvez bloquer des éléments d'interface utilisateur individuels en utilisant des formes de base pour examiner la composition de votre mise en page d'interface utilisateur personnalisée aux côtés de l'interface utilisateur de base de Roblox sur plusieurs appareils. Ce processus vous permet de voir où vous devez modifier votre design afin qu'il soit efficace sur toutes les tailles d'écran que les joueurs peuvent utiliser pour accéder à votre jeu, comme sur mobile, tablette, ordinateur portable et écrans de télévision.

Avant de commencer, vous devez déterminer combien d'espace à l'écran est disponible pour vos éléments d'interface utilisateur personnalisés tout en tenant compte de l'interface utilisateur de base de Roblox. Par exemple, par défaut, Roblox affiche les éléments d'interface utilisateur suivants dans chaque jeu :

• Une liste de joueurs dans le jeu.
• La barre de santé du personnage.
• Le sac à dos du personnage.
• Une fenêtre de chat.
• Un bouton de capture.
• Un menu contextuel d'émotes de personnage.

Vous pouvez désactiver tous ces éléments qui ne répondent pas aux exigences de gameplay de votre propre jeu afin de libérer de l'espace à l'écran pour votre interface utilisateur personnalisée. Par exemple, le jeu de laser tag d'exemple ne nécessite pas de sac à dos car les joueurs n'ont la possibilité de sélectionner qu'un seul blaster. Cependant, si les joueurs pouvaient sélectionner plusieurs blasters à la fois, le jeu pourrait désactiver cette interface utilisateur de base pour s'assurer qu'il y a toujours de la place pour le sélecteur de blaster lorsque les joueurs réapparaissent, puis fournir un autre emplacement pour sélectionner dans votre inventaire.

En plus de l'interface utilisateur de base de Roblox, vous devez également tenir compte de l'espace d'écran nécessaire pour les contrôles tactiles par défaut de Roblox. Par exemple, lorsque les joueurs accèdent à votre jeu à l'aide d'un appareil mobile, un joystick virtuel s'affiche dans le coin inférieur gauche de l'écran, et un bouton de saut s'affiche dans le coin inférieur droit de l'écran. Cela garantit que les joueurs peuvent toujours naviguer dans votre jeu, même s'ils n'ont pas accès à un clavier ou à une manette.

En tenant compte à la fois des éléments d'interface utilisateur de base de Roblox qui sont nécessaires pour le gameplay de votre jeu, et de la possibilité de contrôles tactiles, vous pouvez bloquer vos éléments d'interface utilisateur personnalisés dans une conception qui s'adapte à travers les appareils. Cela est important car cela signifie que vous n'avez pas besoin de maintenir des versions séparées de votre interface utilisateur à mesure que vous mettez à jour votre jeu.

Pour démontrer cette méthode, examinez les deux images suivantes de la façon dont le jeu de laser tag d'exemple bloque les éléments d'interface utilisateur personnalisés pour les appareils mobiles et PC. Les deux images incluent :

• Des formes de base pour représenter l'interface utilisateur personnalisée car cela permet à la conception de passer facilement par plusieurs itérations avant d'atteindre le design final.
• Une coloration en niveaux de gris qui permet à l'œil de suivre les informations sans la distraction d'un environnement de fond coloré.
• L'état ouvert de la fenêtre de chat et de la liste des joueurs actifs pour voir combien d'espace ils occupent à l'écran.
• De l'espace pour les contrôles mobiles même s'ils ne sont pas nécessaires pour les appareils PC.

Lorsque vous concevez vos mises en page de cette manière tout en réfléchissant au nombre d'éléments d'interface utilisateur qui peuvent exister à l'écran en même temps, vous préparez l'avenir pour tous les agencements potentiels en fonction des appareils et des flux de travail des joueurs.

Lors du blocage des éléments d'interface utilisateur pour vos mises en page, considérez ce qui suit :

• Où et comment vous bloquez votre interface utilisateur peut impacter la composition de vos mises en page. Visez l'équilibre et la symétrie dans la quantité et la taille de vos éléments d'interface utilisateur personnalisés aux côtés de l'interface utilisateur de base de Roblox.
• Interagir avec des éléments d'interface utilisateur qui sont éloignés des coins inférieurs de certains appareils mobiles et tablettes est soit inconfortable, soit impossible. Placez les éléments interactifs dans des zones faciles d'accès près de la position de repos naturelle pour les pouces.
• Lorsque les joueurs naviguent dans votre environnement, l'espace 3D peut devenir distrayant par rapport à votre interface utilisateur à l'écran. Testez vos mises en page contre une variété de fonds possibles pour vous assurer que vos éléments d'interface utilisateur à l'écran restent clairs et lisibles.

Développer des flux d'utilisateurs

Un flux d'utilisateurs est une collection de chemins que les joueurs peuvent emprunter dans un jeu pour accomplir une tâche, comme choisir une arme, acheter un objet ou soigner un personnage. Les flux d'utilisateurs commencent généralement là où vous vous attendez à ce que les joueurs commencent la tâche, et se terminent par l'action finale ou l'accomplissement que les joueurs atteignent à la fin de la tâche. De plus, des flux d'utilisateurs efficaces tiennent également compte des chemins inhabituels que les joueurs peuvent vouloir emprunter eux-mêmes pour atteindre le même objectif.

Le diagramme de flux suivant affiche le flux d'un joueur entrant et jouant au jeu de laser tag d'exemple. Lorsqu'un joueur ouvre le jeu, il rejoint un lobby. Si le tour n'est pas encore en cours, il attend que la boucle de tour commence, sinon il rejoint une équipe qui joue actuellement au jeu. Si la condition de fin n'a pas été remplie, comme atteindre une limite de temps ou éliminer 10 joueurs par équipe, alors les joueurs sélectionnent leur blaster et vivent le gameplay principal de marquer ou d'être marqué par l'équipe ennemie, d'équiper un nouveau blaster dans l'arène, ou de réapparaître après avoir été éliminés. Une fois que les joueurs remplissent la condition de fin, ils terminent le tour et rejoignent à nouveau le lobby.

Il est important de développer des flux d'utilisateurs pour tout ce que les joueurs peuvent faire dans votre jeu car cela vous permet d'évaluer où et comment vous souhaitez qu'ils accomplissent des tâches, et d'anticiper où vous pouvez atténuer les points de douleur pour quiconque suit son propre chemin. Par exemple, si vous deviez développer des flux d'utilisateurs supplémentaires pour le jeu de laser tag d'exemple, que se passe-t-il lorsque les joueurs :

• Quitte un tour avant que la condition de fin ne soit remplie ?
• Quitte le jeu tout en rejoignant une équipe ?
• Reçoit un appel téléphonique au milieu d'un tour ?
• Perd leur connexion au tour pendant moins de 15 secondes ?

En visualisant toutes les actions potentielles que les joueurs peuvent entreprendre ou les scénarios qui peuvent se produire pour les joueurs lors de l'accomplissement de tâches, vous pouvez mieux déterminer comment la mise en page de vos éléments d'interface utilisateur impacte négativement leur expérience, puis apporter des ajustements avant de mettre en œuvre vos conceptions dans Studio. Si les tâches semblent intuitives, non intrusives et pratiques, les joueurs sont plus susceptibles de passer du temps dans votre jeu et de revenir à une date ultérieure.

Lors du développement de flux d'utilisateurs pour votre propre jeu, considérez ce qui suit :

• Ce que vous voulez que les joueurs fassent dans votre jeu et ce qu'ils veulent faire peut être complètement différent. Il est préférable de tester vos mises en page avec plusieurs types de joueurs pour comprendre les chemins qu'ils souhaitent emprunter pour atteindre leurs objectifs.
• Les diagrammes de flux peuvent devenir difficiles à lire et inefficaces s'ils essaient de capturer plusieurs scénarios à la fois dans le diagramme. Pour concentrer votre attention sur chaque tâche, limitez les diagrammes de flux à une tâche principale à la fois.
• Les modèles d'interaction varient en fonction de si les joueurs utilisent des contrôles tactiles, des manettes de jeu ou des souris d'ordinateur pour interagir avec votre jeu. Si vous concevez pour plusieurs appareils, développez des flux d'utilisateurs uniques pour chaque appareil afin de pouvoir identifier les points de douleur et simplifier les flux de travail.

Après avoir finalisé la conception de vos maquettes, il est temps de passer à Studio et de donner vie à votre interface utilisateur.