Ramelez vos布局

Wireframer vos layouts est le processus de conception de la structure et du flux d'informations que vous souhaitez communiquer via l'interface utilisateur dans différents workflows. Ce pas crucial du tutoriel vous permet d'itérer sur la disposition de vos éléments d'interface, de découvrir les points de douleur et d'améliorer l'expérience de l'joueuravant d'investir du temps et des ressources dans un design problématique qui ne fonctionne pas pour votre expérience.

En utilisant l'expérience de laser de test de l'exemple.rbxl comme référence, cette section du cours de l'interface de l'utilisateur vous montre comment structurez vos éléments d'interface sur l'écran, y compris des conseils sur :

• Planifier une hiérarchie visuelle pour votre interface utilisateur qui mène intuitivement les joueurs aux fonctionnalités et aux informations dont ils ont besoin pour réussir dans votre expérience.
• Bloquer 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 des contrôlesde touche.
• Développer des flux d'utilisateur pour tenir compte des actions nécessaires que les joueurs doivent prendre pour atteindre leurs objectifs.

Après avoir terminé cette section, vous apprendrez à construire et à configurer votre interface utilisateur dans Studio qui respecte votre style d'art et vos wireframes.

Planifier une hiérarchie visuelle

Une hiérarchie visuelle est une structure d'organisation qui met en évidence les éléments de l'interface utilisateur par leur ordre d'importance. La planification d'une hiérarchie visuelle pour les différents workflows dans votre expérience est importante car elle met les joueurs sur le succès dans l'accomplissement de leurs objectifs, ce qui est particulièrement nécessaire pour le jeu rapide des expériences de tir en premier plan dans lesquelles les objectifs changent d'un moment à l'autre.

Les hiérarchies visuelles efficaces guident les joueurs à travers les fonctionnalités et les informations dont ils ont besoin pour remplir vos exigences en matière de jeu en fonction de l'endroit où ils regardent naturellement sur l'écran pour terminer les workflows. Par exemple, la hiérarchie visuelle de l'expérience de laser de poche doit guider les joueurs à travers les catégories suivantes d'éléments d'interface en naviguant sur la carte et en marquant les joueurs sur l'équipe ennemi :

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

Le lieu de chacune de ces catégories a sur l'écran dans le design final souligne leur ordre d'importance :

• La première catégorie est près du haut parce qu'elle contient des éléments d'interface utilisateur qui ont la plus grande signification sur la façon de gagner le jeu.
• La deuxième catégorie couvre la majorité de l'espace d'écran près du milieu parce qu'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 parce que 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 parce que c'est le seul type d'informations qui est important pour le joueur pendant ce workflow. Cependant, pour les expériences de tir à la première personne, les joueurs doivent voir les éléments de l'interface utilisateur de plusieurs catégories en même temps car ils fournissent tous les types d'informations dont le joueur a

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

• Si vous regroupez les éléments de l'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, regroupez les éléments de l'interface utilisateur du même catégorie ensemble .
• Si vous avez trop de catégories sur l'écran à la fois, les joueurs peuvent ne pas savoir quelles informations ils doivent payer attention. Pour éviter de surcharger les joueurs avec des encombrements, affichez les éléments de l'interface utilisateur contextuelement pour différents workflows .
• De même, si il y a trop d'éléments d'interface utilisateur par catégorie, il peut distraire les joueurs de comprendre comment terminer une action ou un processus. Pour cette raison, il est important d'utiliser votre style d'art pour fournir un focus visuel pour vos commandes d'interaction idéales.

Pour une revue complète de la hiérarchie visuelle pour l'expérience de laser tag, voir le tableau suivant :

Bloquer dans les éléments d'interface

Maintenant que vous avez une hiérarchie visuelle en tête, vous pouvez bloquer dans des éléments d'interface individuels en utilisant des formes de base pour examiner la composition de votre interface personnalisée avec Roblox's core UI sur plusieurs appareils. Ce processus vous permet de voir où vous devez modifier votre conception afin qu'elle soit efficace sur toutes les tailles d'écran que les joueurs peuvent utiliser pour accéder à votre expérience, telles que sur mobile, tablette, ordinateur portable et TV.

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

• Une liste de joueurs dans l'expérience.
• Barre de santé du personnage.
• Le sac à dos du personnage.
• Une fenêtre de chat.
• Un bouton de capture.
• Un menu contextuel pour les emotes 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 gagner de l'espace d'écran pour votre propre expérience UI personnalisée. Par exemple, l'expérience de laser de pointeur ne nécessite pas de sac à dos car les joueurs n'ont que la capacité de sélectionner un seul blaster. Cependant,

En plus de l'interface utilisateur principale de Roblox, vous devez également tenir compte de l'espace d'écran nécessaire pour les contrôlesde touche par défaut de Roblox. Par exemple, lorsque les joueurs accèdent à votre expérience à l'aide d'un appareil mobile, un thumbstick 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

En prenant en compte les éléments de l'interface utilisateur principale de Roblox nécessaires à la jouabilité de votre expérience, ainsi que la possibilité de contrôles tactiles, vous pouvez bloquer dans vos éléments d'interface utilisateur personnalisés dans un design adaptif sur les appareils. Ceci est important car il signifie que vous n'avez pas besoin de maintenir des versions séparées de votre UI à mesure que vous mettez à jour votre expérience.

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

• Formes de base pour représenter l'interface utilisateur personnalisée, car il permet au design de se terminer facilement en plusieurs itérations avant d'atteindre le design final.
• Coloration grayscale qui permet à l'œil de suivre l'information sans la distraction d'un environnement de couleur
• 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 de place ils prennent sur l'écran.
• Espace pour les commandes pour mobiles même si elles ne sont pas nécessaires pour les appareils PC.

Lorsque vous concevez vos布局 de cette façon tout en pensant à combien d'éléments d'interface utilisateur peuvent exister sur l'écran en même temps, vous êtes futuriste pour tous les布局 potentiels en fonction des appareils et des workflows des joueurs.

Lorsque vous bloquez dans les éléments de l'interface utilisateur pour vos布局, tenez compte des éléments suivre:

• L'endroit et la façon dont vous bloquez dans votre interface utilisateur peut avoir un impact sur la composition de vos layouts. Visez pour l'équilibre et la symétrie dans la quantité et la taille de vos éléments d'interface utilisateur personnalisés côté Roblox's core UI.
• Interagir avec l'interface utilisateur qui est loin des coins inférieurs de certains appareils mobiles et de tablettes est soit inconfortable soit impossible. Placez des éléments interactifs dans des zones faciles d'accès près de la position de repos naturelle pour les doigts.
• Lorsque les joueurs naviguent dans votre environnement, l'espace 3D peut devenir distracting de votre on-screen UI. Testez vos布局 contre une variété de possibles arrière-plans pour vous assurer que vos éléments de l'interface utilisateur sur l'écran restent clairs et lisibles.

Pour plus d'informations sur ce à quoi il faut faire attention en concevant et en bloquant dans vos éléments d'interface pour plusieurs appareils, voir Positionnement et taillage - Facteurs trans-plate-forme.

Développer des 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 typiquement commencent là où vous attendez que les joueurs commencent la tâche, et finissent avec la dernière action ou le succès que les joueurs atteignent au bout de la tâche. En outre, les flux d'utilisateur efficaces comptent également des chemins inattendus que les

Le tableau de bord suivant montre le flux de l'utilisateur d'un joueur qui entre et joue à l'expérience de laser de jeu. Lorsqu'un joueur ouvre l'expérience, il rejoint un lobby. Si la manche n'est pas encore en cours, il attend que la manche

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 voulez qu'ils accomplissent des tâches, et d'anticiper où vous pouvez soulager les points de douleur pour n'importe qui qui suit leur propre chemin. Par exemple, si vous développez des flux d'utilisateur supplémentaires pour l'expérience de laser de poche, ce qui se produit lorsque les joueurs :

• Quitter une manche avant la condition d'arrêt ?
• Quitter le jeu pendant que vous rejoignez une équipe ?
• Recevoir un appel au milieu d'un tour ?
• 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 se produire aux joueurs pendant l'exécution des tâches, vous pouvez mieux déterminer comment la disposition de vos éléments d'interface affecte négativement leur expérience, puis prendre des ajustements avant d'opter pour vos conceptions dans Studio. Si les tâches se sentent intuitives, non intrusives et faciles à utiliser, les joueurs passent plus de temps dans votre expérience et reviennent 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布局 avec plusieurs types de joueurs pour obtenir une compréhension des chemins qu'ils veulent prendre pour atteindre leurs objectifs.
• Les tableaux de bord 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 bord à une tâche principale à la fois .
• Les modèles d'interaction varient en fonction de si les joueurs utilisent des commandes contrôles, des manettes de jeu ou une souris pour interagir avec votre expérience. Si vous concevez pour plusieurs appareils, développez des flux d'utilisateur uniques pour chaque appareil afin de pouvoir identifier les points de douleur et simplifier les flux de travail.

Après avoir finalisé le design de vos wireframes, il est temps de passer dans Studio et de donner vie à votre interface utilisateur.