Wireframe vos conceptions

Filmer vos conceptions est le processus de conception de la structure et du flux de l'information que vous souhaitez communiquer via l'interface utilisateur dans différents workflows.Cette étape critique du tutoriel vous permet d'itérer sur l'organisation de vos éléments d'interface utilisateur, de découvrir les points douloureux 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 expérience.

En utilisant le fichier expérience de balise laser d'échantillon file comme référence, cette section de l'interface utilisateur montre comment structurer vos éléments d'interface utilisateur sur l'écran, y compris des directives 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 expérience.
• Blocage dans les éléments de l'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 principale de Roblox et de ses contrôles tactiles.
• Développer des flux d'utilisateur pour tenir compte des actions nécessaires que les joueurs doivent prendre pour atteindre leurs objectifs.

Une fois que vous aurez terminé cette section, vous apprendrez à construire et configurer votre interface utilisateur dans Studio qui respecte votre style d'art 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 par leur ordre d'importance.Planifier une hiérarchie visuelle pour les différents workflows de votre expérience est important car cela met les joueurs en position de réussir dans l'accomplissement de leurs objectifs, ce qui est particulièrement nécessaire pour le jeu rapide des expériences de tireur à la première personne dans lesquelles les objectifs changent du moment à l'autre.

Les hiérarchies visuelles efficaces guident les joueurs à travers les fonctionnalités et les informations dont ils ont besoin pour répondre aux exigences de jeu selon l'endroit où ils regardent naturellement sur l'écran pour terminer les flux de travail.Par exemple, la hiérarchie visuelle de l'expérience de balise laser de l'échantillon doit guider les joueurs à travers les catégories suivantes d'éléments d'interface utilisateur lorsqu'ils naviguent sur la carte et marquent les joueurs de l'équipe adverse :

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 sur l'écran dans le dernier design met en évidence leur ordre d'importance :

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

Pour certains genres d'expérience, vous n'avez besoin de montrer 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 tireur à 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, telles que le score de son équipe, la période de récupération pour son blaster et s'il est étiqueté en dehors d'une ronde.

Lorsque vous planifiez une hiérarchie visuelle pour les flux de travail dans votre propre expérience, tenez compte des éléments suivre:

• Si vous regroupez les éléments d'interface utilisateur de différentes catégories sur l'ensemble de l'écran, les joueurs ne sauront pas où chercher ce dont ils ont besoin.Pour aider les joueurs à naviguer dans votre expérience, groupez les éléments d'interface utilisateur de la même catégorie ensemble .
• Si vous avez trop de catégories sur l'écran en même temps, les joueurs peuvent ne pas savoir quelle information ils doivent prêter attention.Pour éviter d'écraser les joueurs avec du désordre, afficher les éléments d'interface utilisateur contextuellement pour différents workflows .
• 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 terminer une action ou un processus.Pour cette raison, il est important de utiliser votre style artistique pour fournir une énigme visuelle pour vos commandes d'interaction idéales .

Pour une révision complète de la hiérarchie visuelle pour l'expérience de balise laser de l'échantillon, voir le tableau suivant :

Bloc dans les éléments de l'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 revoir la composition de votre interface utilisateur personnalisée aux côtés de l'interface utilisateur principale de Roblox sur plusieurs appareils.Ce processus vous permet de voir où vous devez modifier votre conception pour qu'elle soit efficace sur toutes les tailles d'écran auxquelles les joueurs peuvent accéder à votre expérience, telles que sur mobile, tablette, ordinateur portable et télévision.

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

• Une liste de joueurs dans l'expérience.
• 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 n'importe lequel de ces éléments qui ne répond pas aux exigences de jeu de votre propre expérience afin de libérer de l'espace d'écran pour votre interface utilisateur personnalisée.Par exemple, l'expérience de balise laser de test 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 interface utilisateur principale pour garantir 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 principale de Roblox, vous devez également tenir compte de l'espace d'écran nécessaire pour les commandes contrôlespar défaut de Roblox.Par exemple, lorsque les joueurs accèdent à votre expérience en utilisant 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 sont toujours en mesure de naviguer dans votre expérience, même lorsqu'ils n'ont pas accès à un clavier ou à une manette.

En tenant compte des éléments d'interface utilisateur principaux de Roblox nécessaires pour le gameplay de votre expérience et de la possibilité de contrôles tactiles, vous pouvez bloquer vos éléments d'interface utilisateur personnalisés dans un design adaptatif sur tous les appareils.C'est important parce que cela signifie que vous n'avez pas besoin de maintenir des versions séparées de votre interface utilisateur lorsque vous mettez à jour votre expérience.

Pour démontrer cette méthode, examinez les deux images suivantes de la façon dont les blocs d'expérience de marquage laser d'échantillon dans l'interface utilisateur personnalisée pour les appareils mobiles et PC s'affichent.Les deux images incluent :

• Formes de base pour représenter l'interface utilisateur personnalisée car elle permet au design de passer facilement par plusieurs itérations avant d'obtenir le design final.
• Coloration en échelle de gris qui permet à l'œil de suivre des informations sans la distraction d'un environnement coloré
• L'état ouvert de la fenêtre de chat et de la liste des joueurs actifs et de la fenêtre de chat pour voir combien d'espace ils prennent sur l'écran.
• Espace pour les contrôles mobiles, même s'ils ne sont pas nécessaires pour les appareils PC.

Lorsque vous concevez vos maquettes de cette façon tout en pensant à combien d'éléments d'interface utilisateur peuvent exister à l'écran en même temps, vous futurisez pour tous les types de maquettes potentiels selon les appareils et les workflows des joueurs.

Lors du blocage d'éléments d'interface utilisateur pour vos conceptions, tenez compte des éléments suivre:

• L'endroit et la manière dont vous bloquez dans votre interface utilisateur peuvent avoir un impact sur la composition de vos layouts. 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 principale de Roblox.
• Interagir avec l'interface utilisateur qui est loin des coins inférieurs de certains appareils mobiles et tablettes est soit désagréable, soit impossible. Placer des éléments interactifs dans des zones facilement accessibles 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 à l'interface utilisateur sur écran. Testez vos conceptions contre une variété de fonds possibles pour vous assurer que vos éléments d'interface utilisateur sur écran restent clairs et lisibles.

Pour plus d'informations sur ce qu'il faut prendre en compte lorsque vous concevez et bloquez vos éléments d'interface utilisateur pour plusieurs appareils, voir Positionnement et taille - Facteurs cross-plateforme.

Développer les flux d'utilisateur

Un flux d'utilisateur est une collection de chemins que les joueurs peuvent prendre dans une expérience pour terminer une tâche, comme choisir une arme, acheter un itemou guérir un personnage.Les flux d'utilisateur commencent généralement là où vous attendez que les joueurs commencent la tâche, et se terminent par l'action ou la réalisation finale que les joueurs atteignent à la fin de la tâche.En outre, les flux d'utilisateur efficaces tiennent également compte des chemins inhabituels que les joueurs peuvent vouloir emprunter pour atteindre le même objectif.

Le tableau de flux suivant montre le flux d'utilisateur d'un joueur entrant et jouant à l'expérience de marquage laser d'échantillon.Lorsqu'un joueur ouvre l'expérience, il rejoint un lobby.Si la manche n'est pas encore en cours, ils attendent que la boucle de la manche commence, sinon ils rejoignent une équipe qui joue actuellement au jeu.Si la condition de fin n'a pas été satisfaite, comme atteindre une limite de temps ou étiqueter 10 joueurs par équipe, les joueurs sélectionnent leur blaster et expérimentent le principal jeu de marquage ou d'être marqué par l'équipe adverse, équipant un nouveau blaster dans l'arène ou réapparaissant après avoir été marqué.Une fois que les joueurs ont satisfait à la condition de fin, ils terminent la manche et rejoignent à nouveau le lobby.

Il est important de développer des flux d'utilisateur pour tout ce que les joueurs peuvent faire dans votre expérience car cela vous permet d'évaluer où et comment vous souhaitez qu'ils terminent des tâches, et d'anticiper où vous pouvez soulager les points de douleur pour tout ceux qui suivent leur propre chemin.Par exemple, si vous développez des flux d'utilisateur supplémentaires pour l'expérience de balise laser d'échantillon, que se passe-t-il lorsque les joueurs :

• Quitter une ronde avant que la condition de fin soit satisfaite ?
• Quitter le jeu tout en rejoignant une équipe ?
• Recevoir un appel téléphonique au milieu d'une ronde ?
• Perdre leur connexion à la manche pendant moins de 15 secondes ?

En visualisant toutes les actions potentielles que les joueurs peuvent prendre ou les scénarios qui peuvent arriver aux joueurs pendant qu'ils terminent des tâches, vous pouvez mieux déterminer comment la disposition de vos éléments d'interface utilisateur a un impact négatif sur leur expérience, puis faire des ajustements avant d'implémenter vos conceptions dans Studio.Si les tâches se sentent intuitives, discrètes et pratiques, les joueurs sont plus susceptibles de passer du temps dans votre expérience et de revenir plus tard.

Lors du développement des flux d'utilisateur pour votre propre expérience, tenez compte des éléments suivre:

• 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 conceptions avec plusieurs types de joueurs pour obtenir une compréhension des chemins qu'ils souhaitent prendre pour atteindre leurs objectifs.
• Les tableaux de flux peuvent devenir difficiles à lire et inefficaces s'ils tentent de capturer plusieurs scénarios à la fois dans le diagramme.Pour vous concentrer sur chaque tâche, limitez les tableaux de flux à une seule 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 expérience.Si vous concevez pour plusieurs appareils, développez des flux d'utilisateur uniques pour chaque appareil afin que vous puissiez identifier les points de douleur et simplifier les flux de travail.

Après avoir finalisé le design de vos maquettes, il est temps de passer au studio et de faire vivre votre interface utilisateur.