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 (UI) dans différents flux de travail. Cette étape critique du tutoriel vous permet d'itérer sur l'arrangement de vos éléments UI, de découvrir des points de douleur et d'améliorer l'expérience des joueurs avant d'investir du temps et des ressources dans un design problématique qui ne fonctionne pas pour votre expérience.

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

• La planification d'une hiérarchie visuelle pour votre UI qui conduit intuitivement les joueurs vers les fonctionnalités et les informations dont ils ont besoin pour réussir dans votre expérience.
• Le blocage des éléments UI avec des formes de base pour revoir la composition de vos éléments UI aux côtés de l'UI de base de Roblox et des contrôles tactiles.
• Le développement de flux d'utilisateurs pour prendre en compte les actions nécessaires que les joueurs doivent entreprendre pour atteindre leurs objectifs.

Après avoir terminé cette section, vous apprendrez à construire et à configurer votre UI dans Studio qui respecte votre style artistique et vos maquettes.

Planifiez une hiérarchie visuelle

Une hiérarchie visuelle est une structure d'organisation qui met en avant les éléments UI par leur ordre d'importance. Planifier une hiérarchie visuelle pour les différents flux de travail de votre expérience est important car cela prépare les joueurs au succès dans l'accomplissement de leurs objectifs, ce qui est particulièrement nécessaire pour le gameplay rapide des expériences de tir à la première personne où les objectifs changent de moment en moment.

Les 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 de l'expérience de laser tag d'exemple doit guider les joueurs à travers les catégories suivantes d'éléments UI pendant qu'ils naviguent sur la carte et marquent les joueurs de l'équipe ennemie :

1. Informations sur l'objectif de l'expérience.
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 proche du haut car elle contient des éléments UI qui ont le plus de signification sur la manière 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 d'expérience, vous n'avez besoin d'afficher qu'une seule catégorie d'informations à la fois car c'est le seul type d'information qui est important pour le joueur pendant ce flux de travail. Cependant, pour les expériences de tir à la première personne, les joueurs ont besoin de voir des éléments UI de plusieurs catégories en même temps car ils fournissent tous des informations nécessaires à la réussite du joueur, 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 expérience, considérez ce qui suit :

• Si vous regroupez des éléments UI de différentes catégories ensemble à travers l'écran, les joueurs ne sauront pas où regarder pour ce dont ils ont besoin. Pour aider les joueurs à naviguer dans votre expérience, regroupez les éléments UI 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 prêter attention. Pour éviter de surcharger les joueurs avec du désordre, affichez les éléments UI contextuellement pour différents flux de travail.
• De même, s'il y a trop d'éléments UI par catégorie, cela peut distraire les joueurs de comprendre comment réaliser 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 une révision complète de la hiérarchie visuelle de l'expérience de laser tag d'exemple, consultez le tableau suivant :

Blocage des éléments UI

Maintenant que vous avez une hiérarchie visuelle en tête, vous pouvez bloquer les éléments UI individuels en utilisant des formes de base pour revoir la composition de votre mise en page UI personnalisée à côté de l'UI 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 tous les tailles d'écran que les joueurs peuvent utiliser pour accéder à votre expérience, comme sur mobile, tablette, ordinateur portable et écrans de télévision.

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

• Une liste de joueurs dans l'expérience.
• La barre de vie du personnage.
• Le sac à dos du personnage.
• Une fenêtre de chat.
• Un bouton de capture.
• Un menu contextuel des émotes du personnage.

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

En plus de l'UI 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 expérience à 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 expérience, même lorsqu'ils n'ont pas accès à un clavier ou à une manette.

En tenant compte à la fois des éléments UI de base de Roblox qui sont nécessaires pour le gameplay de votre expérience, ainsi que de la possibilité de contrôles tactiles, vous pouvez bloquer vos éléments UI personnalisés dans une seule conception qui est adaptable à travers les appareils. C'est important car cela signifie que vous n'avez pas besoin de maintenir des versions séparées de votre UI en mettant à jour votre expérience.

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

• Des formes de base pour représenter l'UI personnalisée car cela permet au design 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 l'information sans la distraction d'un environnement de fond coloré
• L'état ouvert de la fenêtre de chat et la liste des joueurs actifs pour voir combien d'espace elles 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 pensant au nombre d'éléments UI qui peuvent exister à l'écran en même temps, vous préparez l'avenir pour tous les formats de mises en page potentielles selon les appareils et les flux de travail des joueurs.

Lors du blocage des éléments UI pour vos mises en page, considérez ce qui suit :

• L'endroit et la manière dont vous bloquez votre UI peuvent influencer la composition de vos mises en page. Visez l'équilibre et la symétrie dans la quantité et la taille de vos éléments UI personnalisés aux côtés de l'UI de base de Roblox.
• Interagir avec des éléments UI é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 à atteindre 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 UI à l'écran. Testez vos mises en page contre une variété de fonds possibles pour assurer que vos éléments UI à l'écran restent clairs et lisibles.

Développez des flux d'utilisateurs

Un flux d'utilisateurs est une collection de chemins que les joueurs peuvent emprunter dans une expérience pour accomplir une tâche, comme choisir une arme, acheter un objet ou soigner un personnage. Les flux d'utilisateur 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'achèvement atteint par les joueurs à la fin de la tâche. De plus, des flux d'utilisateurs efficaces prennent également en compte les chemins inhabituels que les joueurs pourraient vouloir emprunter pour atteindre le même objectif.

Le tableau de flux suivant affiche le flux d'un joueur entrant et jouant à l'expérience de laser tag d'exemple. Lorsque un joueur ouvre l'expérience, il rejoint un hall. Si le tour n'est pas encore en cours, il attend le début de la boucle du tour, sinon il rejoint une équipe qui est actuellement en train de jouer le 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 respawner après avoir été éliminés. Une fois que les joueurs rencontrent la condition de fin, ils terminent le tour et rejoignent à nouveau le hall.

Il est important de développer des flux d'utilisateurs pour tout ce que les joueurs peuvent faire dans votre expérience car cela vous permet d'évaluer où et comment vous voulez 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 l'expérience de laser tag d'exemple, que se passe-t-il lorsque les joueurs :

• Quittent un tour avant que la condition de fin ne soit remplie ?
• Quittez l'expérience en rejoignant une équipe ?
• Reçoivent un appel téléphonique en plein 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 arriver aux joueurs tout en accomplissant des tâches, vous pouvez mieux déterminer comment la mise en page de vos éléments UI impacte négativement leur expérience, puis effectuer des ajustements avant de mettre en œuvre vos designs dans Studio. Si les tâches semblent intuitives, peu intrusives et pratiques, les joueurs sont plus susceptibles de passer du temps dans votre expérience et de revenir à une date ultérieure.

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

• Ce que vous voulez que les joueurs fassent dans votre expérience 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 avoir une compréhension des chemins qu'ils souhaitent emprunter pour atteindre leurs objectifs.
• Les tableaux de flux peuvent devenir difficiles à lire et inefficaces s'ils essaient de capturer plusieurs scénarios à la fois dans le diagramme. Pour vous concentrer sur chaque tâche, limitez les tableaux de flux à une tâche principale à la fois.
• Les modèles d'interaction varient selon que les joueurs utilisent des contrôles tactiles, des manettes ou des souris d'ordinateur pour interagir avec votre expérience. Si vous concevez pour plusieurs appareils, développez des flux d'utilisateurs uniques pour chaque appareil afin que vous puissiez 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 UI.