Estruture suas layouts

Wireframing your layouts é o processo de design da estrutura e do fluxo da informação que você quer comunicar através da UI em vários fluxos de trabalho. Este passo crítico do tutorial permite que você itere em torno da arranque de seus elementos de UI, descubra pontos de dor e melhore a experiência do jogadorantes de você investir tempo e recursos em um design problemático que não funciona para sua experiência.

Usando o exemplo de laser de tag.rbxl file como referência, esta seção do curso de UI mostra como estruturar seus elementos de UI na tela, incluindo orientações sobre:

• Planejando uma hierarquia visual para sua UI que leva os jogadores às funções e informações que eles precisam para ter sucesso em sua experiência.
• Bloqueando em elementos da UI com formas básicas para revisar a composição de seus elementos da UI ao lado dos controles principais do Roblox e da interface do usuário.
• Desenvolver fluxos de usuário para contar as ações necessárias que os jogadores devem fazer para alcançar seus objetivos.

Depois de concluir esta seção, você aprenderá a construir e configurar sua UI no Studio que respeita seu estilo de arte e wireframe.

Planeje uma Hierarquia Visual

Uma hierarquia visual é uma estrutura de organização que destaca os elementos da UI por sua ordem de importância. Planejar uma hierarquia visual para os diferentes workflows em sua experiência é importante, pois configura os jogadores para o sucesso na conclusão de seus objetivos, o que é especialmente necessário para o gameplay rápido de experiências de primeira pessoa de tiro em primeira pessoa, na qual os objetivos mudam de momento em momento.

Hierarquias visuais eficazes guiam os jogadores através das características e informações que eles precisam para completar seus requisitos de jogo de acordo com onde eles naturalmente olham na tela para completar fluxos de trabalho. Por exemplo, a hierarquia visual da experiência de rastreamento de laser deve guiar os jogadores através das seguintes categorias de elementos da UI enquanto eles navegam pelo mapa e marcam os jogadores no Equipeinimigo:

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 da parte superior , porque contém elementos de UI que têm a maior significância na maneira de ganhar o jogo.
• A segunda categoria ocupa a maioria do espaço de 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 dos lados , porque os jogadores podem ler esta informação periférica sem desviar sua atenção do jogabilidade.

Para alguns gêneros de experiência, você só precisa exibir uma categoria de informação em um momento, porque é o único tipo de informação que é importante para o jogador durante esse fluxo de trabalho. No entanto, para experiências de primeira pessoa, os jogadores precisam ver elementos de UI de várias categorias ao mesmo tempo, porque todos eles fornecem informações que o jogador precisa para ter sucesso, como o score do seu Equipe, o período de

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

• Se você agrupar itens de UI de diferentes categorias em toda a tela, os jogadores não saberão onde procurar o que eles precisam. Para ajudar os jogadores a navegar sua experiência, agrupar itens de UI do mesmo category juntos .
• Se você tiver muitas categorias na tela de uma vez, os jogadores podem não saber que informações eles precisam prestar atenção. Para evitar sobrecarregar os jogadores com desordem, exibir elementos da interface do usuário contextualmente para diferentes workflows .
• Da mesma forma, se houver muitos elementos de UI por categoria, ele pode distrair os jogadores de entender como completar uma ação ou processo. Por essa razão, é importante usar seu estilo de arte para fornecer ênfase visual para suas ordens ideais de interação.

Para uma revisão abrangente da hierarquia visual para a experiência de laser de exemplo, consulte a tabela a seguir:

Bloquear em Elementos da UI

Agora que você tem uma hierarquia visual em mente, você pode bloquear em cada elemento de UI individual usando formas básicas para revisar a composição de sua interface personalizada ao lado do Roblox's core UI em múltiplos dispositivos. Este processo permite que você veja onde você precisa modificar seu design para que seja efetivo em todos os tamanhos de tela que os jogadores podem usar para acessar sua experiência, como em móveis, tablets, laptops e telas de TV.

Antes de você começar, você precisa descobrir quanto espaço de tela está disponível para seus elementos de UI personalizados, considerando o fator de tamanho do núcleo do Roblox. Por exemplo, por padrão, o Roblox exibe os seguintes elementos de UI 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 bate-papo.
• Um botão de captura.
• Um menu pop-up de emotes de personagem.

Você pode desativar qualquer um desses elementos que não atende aos requisitos de jogabilidade da sua própria experiência para economizar espaço na tela para sua própria UI personalizada. Por exemplo, a experiência de laser 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 puderem selecionar vários blasters de

Além da interface do usuário principal do Roblox, você também deve considerar o espaço necessário para os controles de toque padrão do Roblox. Por exemplo, quando os jogadores acessam sua experiência usando um dispositivo móvel, um controle virtual de polegares é exibido no canto inferior esquerdo da tela e um botão de pulo é exibido no canto inferior direito da tela. Isso garante que os jogadores sempre possam navegar na sua experiência, mesmo quando eles

Ao levar em consideração os elementos da interface do usuário principal do Roblox, que são necessários para a jogabilidade de sua experiência, e a possibilidade de controles de toque, você pode bloquear em seus elementos de UI personalizados em um design que é adaptativo em todos os dispositivos. Isso é importante porque significa que você não precisa manter versões separadas de sua UI à medida que atualiza sua experiência.

Para mostrar este método, revise as duas imagens a seguir de como a experiência de laser de exemplo bloqueia na interface do usuário personalizada para ambos os dispositivos móveis e PC. Ambas as imagens incluem:

• Formas básicas para representar UI personalizado, pois permite que o design seja facilmente atravessado por várias iterações antes de alcançar o design final.
• Colorir em tons cinza que permite que o olho siga a informação 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 eles ocupam na tela.
• Espaço para controles móveis, mesmo que não sejam necessários para dispositivos PC.

Ao projetar seus layouts desta maneira enquanto você pensa em quantos elementos da interface de usuário podem existir na tela ao mesmo tempo, você está futuramente protegendo todos os layouts potenciais de acordo com os dispositivos e workflows dos jogadores.

Ao bloquear elementos na UI para seus layouts, considere o seguindo:

• Onde e como você bloqueia em sua UI pode impactar a composição de seus layouts. Mire a simetria e equilíbrio em sua quantidade e tamanho de elementos de UI personalizados ao lado dos elementos-chave da Roblox.
• Interagir com UI que está longe dos cantos inferiores de alguns dispositivos móveis e de tablet é desconfortável ou impossível. Coloque elementos interativos em áreas fáceis de alcançar perto da posição de descanso natural para os dedos.
• À medida que os jogadores navegam através do seu ambiente, o espaço 3D pode se tornar distraído da sua interface do usuário na tela. Teste seus layouts contra uma variedade de possíveis fundos de fundo para garantir que seus elementos da interface do usuário na tela permaneçam claros e legíveis.

Para mais informações sobre o que considerar ao projetar e bloquear em seus elementos da UI para vários dispositivos, veja Posicionando e Ajustando - Fatores de Plataforma Cruzada.

Desenvolver Fluxos de Usuário

Um fluxo de usuário é uma coleção de caminhos que os 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ário geralmente começam onde você espera que os jogadores comecem a tarefa e termine com a ação final ou conquista que os jogadores alcançam no final da tarefa. Além disso, fluxos de usuário efetivos também contam caminhos incomuns que os jogadores

O seguinte gráfico de fluxo mostra 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, eles se juntam a um lobby. Se a rodada ainda não estiver em andamento, eles esperam até que a

É importante desenvolver fluxos de usuário para tudo o que os jogadores podem fazer em sua experiência, pois permite que você avalie onde e como você quer que eles concluam tarefas e antecipar onde você pode aliviar os pontos de dor para qualquer pessoa que seguir seu próprio caminho. Por exemplo, se você desenvolvesse fluxos de usuário adicionais para a experiência de laser de exemplo, o que acontece quando os jogadores:

• Sair de uma rodada antes da condição de fim?
• Sair do jogo enquanto se juntar a uma Equipe?
• Receber um telefonema no meio de uma rodada?
• Perder sua conexão à partida por menos de 15 segundos?

Ao visualizar todas as ações potenciais que os jogadores podem fazer ou cenários que podem acontecer aos jogadores enquanto completam tarefas, você pode melhor determinar como a layout do seu elementos da UI afeta negativamente sua experiência, então faça ajustes antes de implementar seus designs no Studio. Se as tarefas se sentirem intuitivas, não intrusivas e convenientes, os jogadores são mais prováveis de passar tempo em sua experiência e retornar em uma data posterior.

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

• 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 suas layouts com vários tipos de jogadores para obter uma compreensão das rotas que eles querem seguir para alcançar seus objetivos.
• Gráficos de fluxo podem se tornar difíceis de ler e ineficazes se eles tentarem capturar vários cenários de uma vez dentro do diagrama. Para focar sua atenção em cada tarefa, limite os gráficos de fluxo a uma tarefa primária em um tempo .
• Os padrões de interação variam dependendo se os jogadores estão usando controlesde toque, gamepads ou mouse de computador para interagir com sua experiência. Se você estiver projetando para vários dispositivos, desenvolva fluxos de usuário únicos para cada dispositivo para que você possa identificar pontos de dor e simplificar fluxos de trabalho.

Depois de finalizar o design de seus wireframes, é hora de se mover para o Studio e fazer sua UI chegar à vida.