Crie maquetes para seus layouts

Criar maquetes para 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 sua experiência.

Usando a experiência 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 da interface do usuário na tela, incluindo orientações sobre:

• Planejar uma hierarquia visual para sua interface que leve intuitivamente os jogadores às funcionalidades e informações de que precisam para ter sucesso em sua experiência.
• Bloquear elementos da interface do usuário com formas básicas para revisar a composição de seus elementos da interface ao lado da interface principal da Roblox e dos controles por toque.
• Desenvolver fluxos de usuários para levar em conta as ações necessárias que os jogadores devem realizar para alcançar seus objetivos.

Após concluir esta seção, você aprenderá como construir e configurar sua interface no Studio, respeitando seu estilo artístico e suas maquetes.

Planeje uma hierarquia visual

Uma hierarquia visual é uma estrutura organizacional que destaca os elementos da interface do usuário pela sua ordem de importância. Planejar uma hierarquia visual para os diferentes fluxos de trabalho em sua experiência é importante porque prepara os jogadores para o sucesso em alcançar seus objetivos, o que é especialmente necessário para a jogabilidade rápida de experiências de tiro em primeira pessoa, nas quais os objetivos mudam de momento para momento.

Hierarquias visuais eficazes guiam os jogadores através das funcionalidades e informações que precisam para atender aos requisitos de jogabilidade, de acordo com onde olham naturalmente na tela para completar os fluxos de trabalho. Por exemplo, a hierarquia visual da experiência de laser tag de exemplo deve guiar os jogadores pelas seguintes categorias de elementos da interface à medida que navegam pelo mapa e marcam jogadores da equipe adversária:

1. Informações sobre o objetivo da experiência.
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 maior relevância 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 a maior importância para jogar o jogo.
• A terceira categoria está perto das laterais porque os jogadores podem ler estas informações periféricas sem desviar sua atenção da jogabilidade.

Para alguns gêneros de experiência, você só precisa exibir uma categoria de informação de cada vez, pois é o único tipo de informação que é importante para o jogador durante aquele fluxo de trabalho. No entanto, para experiências de tiro em primeira pessoa, os jogadores precisam ver elementos da interface de múltiplas categorias ao mesmo tempo, pois 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 foram marcados fora de uma rodada.

Ao planejar uma hierarquia visual para os fluxos de trabalho em sua própria experiência, considere o seguinte:

• Se você agrupar elementos da interface de categorias diferentes pela tela, os jogadores não saberão onde olhar para o que precisam. Para ajudar os jogadores a navegar em sua experiência, agrupem os elementos da interface da mesma categoria juntos.
• Se você tiver muitas categorias na tela ao mesmo tempo, os jogadores podem não saber em que informação devem prestar atenção. Para evitar sobrecarregar os jogadores com bagunça, exiba os 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 como completar uma ação ou processo. Por esse motivo, é 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 da experiência de laser tag de exemplo, veja a tabela a seguir:

Bloqueie os elementos da IU

Agora que você tem uma hierarquia visual em mente, pode bloquear elementos individuais da interface do usuário usando formas básicas para rever a composição do seu layout de interface personalizada ao lado da interface principal da 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 sua experiência, como em dispositivos móveis, tablets, laptops e TVs.

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

• Uma lista de jogadores dentro da experiência.
• 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 da sua própria experiência para economizar espaço na tela para sua interface personalizada. Por exemplo, a experiência de laser tag de exemplo não requer uma mochila, pois os jogadores só têm a capacidade de selecionar um único blaster. No entanto, se os jogadores pudessem selecionar múltiplos blasters ao mesmo tempo, a experiência poderia desativar essa interface principal para garantir que haja sempre espaço para o seletor de blaster quando os jogadores respawnam, e então fornecer outro local para selecionar em seu inventário.

Além da interface principal da Roblox, você também deve considerar o espaço na tela necessário para os controles de toque padrão da Roblox. Por exemplo, quando os jogadores acessam sua experiência 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 estejam sempre capazes de navegar em sua experiência, mesmo quando não têm acesso a um teclado ou controlador.

Ao levar em conta tanto os elementos de interface principais da Roblox que são necessários para a jogabilidade da sua experiência, quanto a possibilidade de controles de toque, você pode bloquear seus elementos de interface personalizada em um design que se adapte a vários dispositivos. Isso é importante porque significa que você não precisa manter versões separadas de sua interface à medida que atualiza sua experiência.

Para demonstrar esse método, reveja as duas imagens a seguir de como a experiência de laser tag de exemplo bloqueia os elementos da interface personalizada 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 tons 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 lista de jogadores ativos e 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ê projetar seus layouts dessa maneira, pensando em quantos elementos da interface podem existir na tela ao mesmo tempo, estará preparando-os para todas as possíveis configurações de acordo com os dispositivos e fluxos de trabalho dos jogadores.

Ao bloquear os elementos da interface do usuário para seus layouts, considere o seguinte:

• Onde e como você bloqueia sua interface pode impactar na composição dos seus layouts. Busque equilíbrio e simetria na quantidade e tamanho dos seus elementos de interface personalizados ao lado da interface principal da Roblox.
• Interagir com UI 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 natural de descanso dos polegares.
• Quando os jogadores navegam pelo seu ambiente, o espaço 3D pode se tornar uma distração da 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ário é uma coleção de caminhos que jogadores podem seguir em uma experiência para completar uma tarefa, como escolher uma arma, comprar um item ou curar um personagem. Fluxos de usuários normalmente começam onde você espera que os jogadores iniciem a tarefa e terminam com a ação ou conquista final que os jogadores alcançam no final da tarefa. Além disso, fluxos de usuários eficazes também levam em conta caminhos incomuns que os jogadores podem querer seguir por conta própria para atingir o mesmo objetivo.

O fluxograma a seguir exibe o fluxo de usuário de um jogador entrando e jogando a experiência de laser tag de exemplo. Quando um jogador abre a experiência, ele entra em um lobby. Se a rodada ainda não começou, ele espera até que o loop da rodada comece, do 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 respawnando após serem marcados para fora. Uma vez que os jogadores atendam à condição de término, eles finalizam a rodada e entram novamente no lobby.

É importante desenvolver fluxos de usuários para tudo que os jogadores podem fazer em sua experiência, pois isso permite que você avalie onde e como deseja que eles completem as tarefas e antecipe onde pode aliviar os pontos problemáticos para qualquer um que siga seu próprio caminho. Por exemplo, se você desenvolvesse fluxos de usuários adicionais para a experiência de laser tag de exemplo, o que aconteceria quando os jogadores:

• Saírem de uma rodada antes que a condição de término seja atendida?
• Deixarem a experiência enquanto entram em uma equipe?
• Receberem uma ligação durante uma rodada?
• Perderem 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 suas tarefas, você pode determinar melhor como o layout de seus elementos da interface impacta negativamente sua experiência, e então fazer ajustes antes de implementar seus designs no Studio. Se as tarefas parecerem intuitivas, discretas e convenientes, os jogadores têm mais chances de passar tempo em sua experiência e retornar em uma data posterior.

Ao desenvolver fluxos de usuários para sua própria experiência, considere o seguinte:

• O que você quer que os jogadores façam em sua experiência e o que eles querem 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 ao mesmo tempo dentro do diagrama. Para focar sua atenção em cada tarefa, limite os fluxogramas a uma tarefa principal de cada vez.
• Padrões de interação variam dependendo se os jogadores estão usando controles por toque, gamepads ou mouses de computador para interagir com sua experiência. Se você está projetando para vários dispositivos, desenvolva fluxos de usuários únicos para cada dispositivo para que possa identificar pontos problemáticos e simplificar fluxos de trabalho.

Após finalizar o design de suas maquetes, é hora de ir para o Studio e dar vida à sua interface.