Defina wireframes para seus layouts

Wireframing seus layouts é o processo de projetar a estrutura e o fluxo da informação que você deseja comunicar através da interface do usuário em vários fluxos de trabalho.Este passo crítico do tutorial permite que você itere sobre a organização de seus elementos de UI, descubra pontos de dor 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 o arquivo experiência de tag de laser de amostra arquivo como referência, esta seção da interface do usuário mostra como estruturar seus elementos de UI na tela, incluindo orientação sobre:

• Planejar uma hierarquia visual para a sua interface que leve de forma intuitiva os jogadores a recursos e informações de que precisam para ter sucesso em sua experiência.
• Bloquear em elementos de UI com formas básicas para revisar a composição de seus elementos de UI ao lado do núcleo de UI e controles de toque do Roblox.
• Desenvolver fluxos de usuário para contabilizar as ações necessárias que os jogadores devem tomar para alcançar seus objetivos.

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

Planeje uma hierarquia visual

Uma hierarquia visual é uma estrutura de organização que destaca os elementos de UI pela ordem de importância.Planejar uma hierarquia visual para os diferentes fluxos de trabalho em sua experiência é importante porque define os jogadores para o sucesso em alcançar seus objetivos, o que é especialmente necessário para o jogo rápido de experiências de tiro em primeira pessoa, em que os objetivos mudam de momento a momento.

Hierarquias visuais eficazes guiam os jogadores através dos recursos e informações de que precisam para atender aos requisitos de jogabilidade de acordo com onde eles naturalmente olham na tela para concluir fluxos de trabalho.Por exemplo, a hierarquia visual da experiência de tag de laser de amostra deve guiar os jogadores através das seguintes categorias de elementos de UI enquanto navegam pelo mapa e marcam 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 destaque final do design destaca sua ordem de importância:

• A primeira categoria está perto do topo porque contém elementos de UI que têm mais importância sobre como ganhar o jogo .
• A segunda categoria ocupa a maior parte do espaço na 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 dos lados porque os jogadores podem ler essas informações periféricas sem desviar sua atenção do jogabilidade.

Para alguns gêneros de experiência, você só precisa exibir uma categoria de informações de cada vez porque é o único tipo de informação que é importante para o jogador durante esse fluxo de trabalho.No entanto, para experiências de tiro em primeira pessoa, os jogadores precisam ver elementos de interface de usuário 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 período de espera para seu blaster e se eles são rotulados fora de uma rodada.

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

• Se você agrupar elementos de interface de usuário de diferentes categorias juntos em toda a tela, os jogadores não saberão onde procurar o que precisam.Para ajudar os jogadores a navegar pela sua experiência, elementos de interface de grupo da mesma categoria juntos .
• Se você tiver muitas categorias na tela de uma só vez, os jogadores podem não saber que informações precisam prestar atenção.Para evitar sobrecarregar os jogadores com bagunça, exibir elementos de interface de usuário contextualmente para diferentes fluxos de trabalho .
• Da mesma forma, se houver muitos elementos de UI por categoria, isso pode distrair os jogadores de entender 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 para a experiência de tag de laser de amostra, veja a tabela a seguir:

Bloquear em elementos de UI

Agora que você tem uma hierarquia visual em mente, você pode bloquear elementos de UI individuais usando formas básicas para revisar a composição do seu layout de UI personalizado ao lado da interface de usuário principal do Roblox em vários dispositivos.Esse processo permite que você veja onde precisa modificar seu design para que seja eficaz em todas as dimensões de tela que os jogadores podem usar para acessar sua experiência, como no celular, tablet, laptop e na tela 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 de usuário principal 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 chat.
• Um botão de captura.
• Um menu pop-up de emotes de personagem.

Você pode desativar qualquer um desses elementos que não atenda 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 tag de laser de amostra 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 de uma vez, a experiência poderia desativar essa interface de usuário principal para garantir que sempre haja espaço para o seletor de blaster quando os jogadores reaparecerem, então forneça outro local para selecionar do seu inventário.

Além da interface de usuário principal do Roblox, você também deve considerar o espaço de tela 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 joystick virtual é 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 pela sua experiência, mesmo quando eles não têm acesso a um teclado ou Controle.

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

Para demonstrar esse método, revise as duas seguintes imagens de como os blocos de experiência de etiqueta a laser de amostra se encaixam nos elementos de UI personalizados para dispositivos móveis e PC.Ambas as imagens incluem:

• Formas básicas para representar a interface de usuário personalizada porque 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 da lista de jogadores ativos e da 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 de PC.

Ao projetar seus layouts dessa maneira enquanto pensa em quantos elementos de UI podem existir na tela ao mesmo tempo, você está protegendo o futuro para todos os layouts potenciais de acordo com os dispositivos e os fluxos de trabalho dos jogadores.

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

• Onde e como você bloqueia na sua interface pode impactar a composição de seus layouts. Almeje equilíbrio e simetria na quantidade e tamanho de seus elementos de UI personalizados ao lado da interface de usuário 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 acesso perto da posição de descanso natural para os dedos.
• Quando os jogadores navegam pelo seu ambiente, o espaço 3D pode se tornar distrativo da sua interface de usuário na tela. Teste seus layouts contra uma variedade de fundos possíveis para garantir que os elementos de UI na tela permaneçam claros e legíveis.

Para mais informações sobre o que considerar ao projetar e bloquear elementos de UI para vários dispositivos, veja Posicionamento e tamanho - Fatores de plataforma cruzada.

Desenvolver fluxos de usuário

Um fluxo de usuário é uma coleção de caminhos que os jogadores podem tomar em uma experiência para concluir uma tarefa, como escolher uma arma, comprar um item ou curar um personagem.Fluxos de usuário 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, os fluxos de usuário eficazes também contam com caminhos incomuns que os jogadores podem querer tomar por conta própria para alcançar o mesmo objetivo.

O seguinte diagrama de fluxo mostra o fluxo do usuário de um jogador entrando e jogando a experiência de tag de laser de amostra.Quando um jogador abre a experiência, ele se junta a um lobby.Se a rodada ainda não está em andamento, eles esperam até que o ciclo de rodada comece, caso contrário, eles se juntam a uma equipe que está atualmente jogando o jogo.Se a condição final 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 o principal jogo de marcar ou ser marcado pelo Equipeinimigo, equipando um novo blaster dentro da arena ou reaparecendo depois de serem marcados.Uma vez que os jogadores atendam à condição final, eles terminam a rodada e se juntam ao lobby novamente.

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

• Sair de uma rodada antes que a condição de término seja atendida?
• Sair do jogo enquanto se junta a uma Equipe?
• Receber uma chamada telefônica no meio de uma rodada?
• Perder sua conexão com a rodada por menos de 15 segundos?

Ao visualizar todas as ações potenciais que os jogadores podem tomar ou cenários que podem acontecer aos jogadores enquanto completam tarefas, você pode determinar melhor como a disposição dos elementos da sua interface afeta negativamente a experiência deles, antes de implementar seus designs no Studio.Se as tarefas forem intuitivas, não invasivas 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 seus layouts com vários tipos de jogadores para obter uma compreensão das rotas que eles querem tomar para alcançar seus objetivos.
• Gráficos de fluxo podem se tornar difíceis de ler e ineficazes se 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 de cada vez .
• Os padrões de interação variam dependendo de se os jogadores estão usando controles de toque, gamepads ou mouses 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 os fluxos de trabalho.

Depois de finalizar o design de seus wireframes, é hora de passar para o Studio e fazer com que sua interface venha à vida.