Estruture seus layouts

Estruturar seus layouts é o processo de projetar a estrutura e o fluxo das informações que você deseja comunicar através da interface do usuário em vários fluxos de trabalho. Esta etapa crítica do tutorial permite que você itere sobre a disposição dos elementos da interface do usuário, descubra pontos problemáticos e melhore a experiência do jogador antes de investir tempo e recursos em um design problemático que não funciona para o seu jogo.

Usando o jogo de laser tag de exemplo .rbxl como referência, esta seção do currículo de interface do usuário mostra como estruturar seus elementos de interface na tela, incluindo orientações sobre:

• Planejar uma hierarquia visual para sua interface que leve intuitivamente os jogadores a recursos e informações que eles precisam para ter sucesso em seu jogo.
• Bloquear elementos da interface com formas básicas para revisar a composição dos seus elementos de interface ao lado da interface principal e dos controles de toque do Roblox.
• Desenvolver fluxos de usuários para considerar as ações necessárias que os jogadores devem realizar para alcançar seus objetivos.

Depois de concluir esta seção, você aprenderá como construir e configurar sua interface no Studio que respeite seu estilo artístico e wireframes.

Planeje uma hierarquia visual

Uma hierarquia visual é uma estrutura de organização que destaca os elementos da interface de acordo com sua ordem de importância. Planejar uma hierarquia visual para os diferentes fluxos de trabalho em seu jogo é importante porque prepara os jogadores para o sucesso na realização de seus objetivos, o que é especialmente necessário para a jogabilidade rápida de jogos de tiro em primeira pessoa, nos quais os objetivos mudam de momento a momento.

Hierarquias visuais eficazes guiam os jogadores através dos recursos e informações que eles precisam para atender aos requisitos de jogabilidade, de acordo com onde eles naturalmente olham na tela para completar os fluxos de trabalho. Por exemplo, a hierarquia visual do jogo de laser tag de exemplo deve guiar os jogadores através das seguintes categorias de elementos da interface enquanto navegam pelo mapa e marcam jogadores da equipe inimiga:

1. Informações sobre o objetivo do jogo.
2. Informações sobre o blaster.
3. Informações sobre o estado do jogador.

A localização de cada uma dessas categorias na tela no design final destaca sua ordem de importância:

• A primeira categoria está perto do topo porque contém elementos da interface que têm mais significado sobre como vencer o jogo.
• A segunda categoria ocupa a maior parte do espaço da tela perto do meio porque atua como o ponto focal para chamar a atenção dos jogadores para a ação no espaço 3D, e tem o maior significado para jogar o jogo.
• A terceira categoria está perto das laterais porque os jogadores podem ler essas informações periféricas sem desviar sua atenção da jogabilidade.

Para alguns gêneros de jogos, você só precisa exibir uma categoria de informações por vez, porque é o único tipo de informação que é importante para o jogador durante aquele fluxo de trabalho. No entanto, para jogos de tiro em primeira pessoa, os jogadores precisam ver elementos da interface de várias categorias ao mesmo tempo, porque todos fornecem informações que o jogador precisa para ter sucesso, como a pontuação de sua equipe, o tempo de recarga de seu blaster e se eles foram marcados fora de uma rodada.

Ao planejar uma hierarquia visual para os fluxos de trabalho em seu próprio jogo, considere o seguinte:

• Se você agrupar elementos da interface de diferentes categorias juntos na tela, os jogadores não saberão onde olhar para o que precisam. Para ajudar os jogadores a navegar em seu jogo, agrupem elementos da interface da mesma categoria juntos.
• Se você tiver muitas categorias na tela ao mesmo tempo, os jogadores podem não saber a que informações precisam prestar atenção. Para evitar sobrecarregar os jogadores com desordem, exiba elementos da interface contextualmente para diferentes fluxos de trabalho.
• Da mesma forma, se houver muitos elementos da interface por categoria, isso pode distrair os jogadores de entender como completar uma ação ou processo. Por essa razão, é importante usar seu estilo artístico para fornecer ênfase visual para suas ordens de interação ideais.

Para uma revisão completa da hierarquia visual para o jogo de laser tag de exemplo, veja a tabela a seguir:

Bloqueie elementos da interface

Agora que você tem uma hierarquia visual em mente, pode bloquear elementos individuais da interface usando formas básicas para revisar a composição do seu layout de interface personalizado ao lado da interface principal do Roblox em vários dispositivos. Este processo permite que você veja onde precisa modificar seu design para que seja eficaz em todos os tamanhos de tela que os jogadores podem usar para acessar seu jogo, como em dispositivos móveis, tablets, laptops e telas de TV.

Antes de começar, você precisa descobrir quanto espaço na tela está disponível para seus elementos de interface personalizados, levando em consideração a interface principal do Roblox. Por exemplo, por padrão, o Roblox exibe os seguintes elementos da interface em todos os jogos:

• Uma lista de jogadores dentro do jogo.
• A barra de saúde do personagem.
• A mochila do personagem.
• Uma janela de chat.
• Um botão de captura.
• Um menu pop-up de emotes do personagem.

Você pode desativar qualquer um desses elementos que não atendem aos requisitos de jogabilidade do seu próprio jogo para economizar espaço na tela para sua interface personalizada. Por exemplo, o jogo de laser tag de exemplo não requer uma mochila porque os jogadores só têm a capacidade de selecionar um único blaster. No entanto, se os jogadores pudessem selecionar vários blasters ao mesmo tempo, o jogo poderia desativar essa interface principal para garantir que sempre haja espaço para o selecionador de blaster quando os jogadores renascerem, e então fornecer outro local para selecionar de seu inventário.

Além da interface principal do Roblox, você também deve considerar o espaço necessário na tela para os controles de toque padrão do Roblox. Por exemplo, quando os jogadores acessam seu jogo usando um dispositivo móvel, um joystick virtual é exibido no canto inferior esquerdo da tela, e um botão de pular é exibido no canto inferior direito da tela. Isso garante que os jogadores possam sempre navegar em seu jogo, mesmo quando não têm acesso a um teclado ou controle.

Ao levar em conta tanto os elementos da interface principal do Roblox que são necessários para a jogabilidade do seu jogo, quanto a possibilidade de controles de toque, você pode bloquear seus elementos de interface personalizados em um design que seja adaptável entre dispositivos. Isso é importante porque significa que você não precisa manter versões separadas de sua interface à medida que atualiza seu jogo.

Para demonstrar esse método, revise as duas imagens a seguir de como o jogo de laser tag de exemplo bloqueia os elementos da interface personalizados para dispositivos móveis e PC. Ambas as imagens incluem:

• Formas básicas para representar a interface personalizada, pois isso permite que o design passe facilmente por várias iterações antes de alcançar o design final.
• Coloração em escala de cinza que permite que o olho siga as informações sem a distração de um ambiente de fundo colorido.
• O estado aberto da janela de chat e a lista de jogadores ativos e a janela de chat para ver quanto espaço elas ocupam na tela.
• Espaço para controles móveis, mesmo que não sejam necessários para dispositivos PC.

Quando você projeta seus layouts dessa maneira, pensando em quantos elementos da interface podem existir na tela ao mesmo tempo, você está preparando o futuro para todos os layouts potenciais de acordo com os dispositivos e fluxos de trabalho dos jogadores.

Ao bloquear elementos da interface para seus layouts, considere o seguinte:

• Onde e como você bloqueia sua interface pode impactar a composição de seus layouts. Busque equilíbrio e simetria na quantidade e tamanho de seus elementos de interface personalizados ao lado da interface principal do Roblox.
• Interagir com a interface que está longe dos cantos inferiores de alguns dispositivos móveis e tablets é desconfortável ou impossível. Coloque elementos interativos em zonas de fácil alcance perto da posição de descanso natural para os polegares.
• Quando os jogadores navegam pelo seu ambiente, o espaço 3D pode se tornar uma distração para sua interface na tela. Teste seus layouts contra uma variedade de possíveis fundos para garantir que seus elementos da interface na tela permaneçam claros e legíveis.

Desenvolva fluxos de usuários

Um fluxo de usuários é uma coleção de caminhos que os jogadores podem seguir em um jogo para completar uma tarefa, como escolher uma arma, comprar um item ou curar um personagem. Os fluxos de usuários geralmente começam onde você espera que os jogadores comecem a tarefa e terminam com a ação final ou conquista que os jogadores alcançam ao final da tarefa. Além disso, fluxos de usuários eficazes também consideram caminhos incomuns que os jogadores podem querer seguir por conta própria para alcançar o mesmo objetivo.

O seguinte fluxograma exibe o fluxo de usuários de um jogador entrando e jogando o jogo de laser tag de exemplo. Quando um jogador abre o jogo, ele entra em um lobby. Se a rodada ainda não estiver em andamento, ele espera até que o loop da rodada comece; caso contrário, ele se junta a uma equipe que está jogando o jogo. Se a condição de término não foi atendida, como atingir um limite de tempo ou marcar 10 jogadores por equipe, então os jogadores selecionam seu blaster e experimentam a jogabilidade principal de marcar ou ser marcado pela equipe inimiga, equipando um novo blaster dentro da arena ou renascendo após serem marcados fora. Uma vez que os jogadores atendem à condição de término, eles finalizam a rodada e entram novamente no lobby.

É importante desenvolver fluxos de usuários para tudo o que os jogadores podem fazer em seu jogo, pois isso permite que você avalie onde e como deseja que eles completem tarefas e antecipe onde pode aliviar os pontos problemáticos para quem segue seu próprio caminho. Por exemplo, se você fosse desenvolver fluxos de usuários adicionais para o jogo de laser tag de exemplo, o que acontece quando os jogadores:

• Saem de uma rodada antes que a condição de término seja atendida?
• Saem do jogo enquanto se juntam a uma equipe?
• Recebem uma ligação no meio de uma rodada?
• Perdem a conexão com a rodada por menos de 15 segundos?

Ao visualizar todas as ações potenciais que os jogadores podem realizar ou cenários que podem acontecer com os jogadores enquanto completam tarefas, você pode determinar melhor como o layout de seus elementos da interface impacta negativamente a experiência deles, e então fazer ajustes antes de implementar seus designs no Studio. Se as tarefas parecerem intuitivas, não intrusivas e convenientes, os jogadores são mais propensos a passar tempo em seu jogo e retornar em uma data posterior.

Ao desenvolver fluxos de usuários para seu próprio jogo, considere o seguinte:

• O que você deseja que os jogadores façam em seu jogo e o que eles desejam fazer pode ser completamente diferente. É melhor testar seus layouts com vários tipos de jogadores para entender os caminhos que eles desejam seguir para alcançar seus objetivos.
• Fluxogramas podem se tornar difíceis de ler e ineficazes se tentarem capturar múltiplos cenários de uma vez dentro do diagrama. Para focar sua atenção em cada tarefa, limite os fluxogramas a uma tarefa principal por vez.
• Padrões de interação variam dependendo se os jogadores estão usando controles de toque, gamepads ou mouses de computador para interagir com seu jogo. Se você está projetando para vários dispositivos, desenvolva fluxos de usuários únicos para cada dispositivo para que você possa identificar pontos problemáticos e simplificar fluxos de trabalho.

Depois de finalizar o design de seus wireframes, é hora de ir para o Studio e dar vida à sua interface.