Escolha um estilo artístico

Escolher um estilo artístico é o processo de planejar uma direção estética para os elementos da sua interface do usuário (UI). É importante começar seu processo de design com um estilo artístico porque os estilos artísticos fornecem regras visuais que você pode consultar para garantir que sua UI forneça intuitivamente informações aos jogadores sobre o que eles podem fazer em 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 tomar decisões significativas sobre como projetar seus elementos de UI de acordo com o gênero do seu jogo, incluindo orientações sobre:

• Identificar os elementos de UI necessários de acordo com o que você deseja comunicar aos jogadores ao longo do seu jogo.
• Selecionar um tema de cores que reforce as convenções de cores específicas do gênero que são intuitivas para seu público.
• Esboçar ícones simples que sejam fáceis de decifrar em qualquer tamanho de tela.
• Estabelecer uma ordem de botões que corresponda à probabilidade de diferentes fluxos de trabalho dos jogadores.
• Determinar um sistema de texto que garanta legibilidade nos dispositivos-alvo.

Depois de concluir esta seção, você aprenderá como projetar a estrutura e o fluxo das informações que deseja comunicar aos jogadores por meio da UI dentro do seu jogo.

Identifique seus elementos de UI

O primeiro passo para escolher um estilo artístico para sua UI é identificar quais elementos de UI você precisa para os diferentes tipos de informações que deseja comunicar ao seu público. Fazer esse trabalho no início do seu processo de design é crucial porque permite que você categorize os elementos de UI de acordo com seu propósito funcional, tome decisões semânticas de acordo com onde e quando os jogadores vão interagir com cada elemento de UI e planeje onde você pode reutilizar elementos de UI em todo o seu jogo.

Existem muitas maneiras diferentes de fazer um brainstorming sobre quais elementos de UI são necessários para os requisitos de jogabilidade, mas é recomendável começar imaginando o que um jogador precisa saber assim que ele entrar no seu jogo. Por exemplo, quando um jogador abre o jogo de laser tag de exemplo, ele pode se fazer as seguintes perguntas:

• Qual é o objetivo do jogo?
• Como eu sei quem está no meu time?
• Como eu acompanho os pontos do meu time?
• Como eu seleciono um blaster?
• Como eu sei onde o blaster dispara um laser?
• Se estou em um dispositivo móvel, como eu atiro com meu blaster?
• Depois que eu atiro um laser, quando posso atirar novamente?
• Como eu sei quando estou começando a rodada?
• Como eu sei quando consigo marcar alguém com meu blaster?
• Como eu sei quando o time inimigo me marca com sucesso?

Ao usar essas perguntas para entender quais informações são imperativas para os jogadores saberem para ter sucesso, você pode classificar as necessidades de UI do jogo de laser tag de exemplo em três categorias:

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

Classificar as necessidades de UI do seu jogo em categorias é útil porque você pode formular seu estilo artístico em torno de cada grupo para reforçar quais informações cada categoria precisa ensinar aos jogadores. Por exemplo, se você quiser que sua UI informe aos jogadores quais ações eles podem realizar em relação ao status de saúde de seu personagem, você pode escolher um estilo artístico com elementos de UI que priorizam a cor verde e/ou ícones de adição para que os jogadores possam reconhecer rapidamente sua função.

Depois de classificar as necessidades de UI do seu jogo em categorias, você pode criar uma lista dos elementos de UI necessários para atender aos requisitos de cada categoria. Para demonstrar, o jogo de laser tag de exemplo usa a seguinte tabela de elementos de UI para abordar a lista anterior de perguntas potenciais dos jogadores. À medida que você avança neste tutorial, o currículo de UI continuará a se referir a esta lista e destacar as principais decisões de design que se relacionam a cada categoria de elementos de UI.

Agora que você tem uma lista de elementos de UI para seu jogo, é hora de começar a fazer escolhas estilísticas e semânticas para cada grupo de elementos de UI, começando com um tema de cores.

Selecione um tema de cores

Um tema de cores, ou paleta de cores, é uma seleção de cores que cada uma comunica uma mensagem por meio da aplicação consistente dentro do seu jogo, como usar uma cor brilhante para indicar quando algo é selecionável. Aplicar um tema de cores aos seus elementos de UI é importante, especialmente quando você depende de convenções de cores dentro do gênero do seu jogo, porque isso permite que os jogadores entendam rapidamente sua UI com o mínimo de esforço.

No Currículo de Arte Ambiental, cada metade do ambiente de laser tag é codificada por cores a partir de uma visão de cima para diferenciar qual área do mapa está próxima da respectiva zona de spawn de cada time: verde menta para o time que se reúne no lado esquerdo do mapa, e rosa carnation para o time que se reúne no lado direito do mapa. Essas cores específicas são úteis porque são complementares, o que significa que contrastam bem entre si, e permitem que os jogadores escaneiem facilmente seus arredores e se orientem, independentemente da direção em que estão voltados no prédio.

O jogo de laser tag de exemplo usa esse mesmo tema de cores em sua UI para destacar informações que dizem respeito a cada time, como o indicador de time de cada jogador dentro do espaço 3D, ou o rastreador de pontos do time que sobrepõe a tela. Essa consistência ajuda os jogadores a entender rapidamente informações sobre o objetivo do jogo durante a jogabilidade acelerada de um jogo de tiro em primeira pessoa, especialmente à medida que os jogadores precisam tomar decisões rápidas enquanto atravessam o ambiente.

Ao selecionar um tema de cores para seu próprio jogo, considere o seguinte:

• A força de um tema de cores depende de ajudar os jogadores a fazer associações mentais rápidas entre cada cor e sua função. Por essa razão, limite seu tema de cores para destacar apenas as informações-chave que você deseja que os jogadores associem aos seus elementos de UI.
• Para garantir que jogadores com daltonismo possam entender a mensagem do seu tema de cores, não confie apenas na cor para distinguir entre os elementos de UI. Em vez disso, combine cores com ícones, formas e/ou animações para garantir que sua UI se comunique efetivamente com todos os jogadores.
• É mais importante que sua UI seja legível do que esteticamente agradável. Por essa razão, priorize uma UI simples com cores que permaneçam legíveis sobre elementos claros e escuros no mundo 3D.

Para destacar a orientação no último ponto, o jogo de laser tag de exemplo utiliza as cores neutras de preto e branco para quase todos os outros elementos de UI que sobrepõem a tela 2D. Preto e branco contrastam bem entre si, e são fáceis de ler, já que o resto da tela exibe um ambiente 3D de outra forma colorido.

Esboce ícones simples

Um ícone é um símbolo que representa uma ação, objeto ou conceito em um jogo. Esboçar ícones que sejam simples e intuitivos é importante porque o resultado final permite que os jogadores reconheçam facilmente o que podem fazer e o que você deseja comunicar a eles por meio de sua UI sem usar texto, que pode poluir a tela e desviar a atenção do conteúdo que importa. Esse processo é ainda mais crucial se seu público acessar seu jogo usando uma tela pequena em dispositivos móveis.

Ícones simples idealmente têm um estilo distinto dos seus elementos 3D, enquanto ainda complementam o mundo geral do seu jogo. Por exemplo, no ambiente final do Currículo de Arte Ambiental, tanto os ativos 3D modulares quanto os de prop têm um estilo artístico limpo e de alta tecnologia que utiliza formas retangulares com cantos suaves e arredondados. Desde os painéis chanfrados ao longo do chão até as janelas quase circulares no teto, nada inclui uma borda afiada.

Para complementar esse estilo artístico, enquanto ainda permanece único, todos os elementos de UI que você aprenderá a criar mais tarde neste tutorial incluem uma estética futurista e ângulos arredondados sem corresponder à linguagem de forma dos ativos 3D no ambiente. Isso mantém o significado de cada ícone distinto de outras informações tanto no espaço 2D quanto no 3D.

Para demonstrar esse conceito, veja as seguintes duas imagens do jogo de laser tag de exemplo da mira que informa aos jogadores onde seu blaster dispara na tela, e o botão que permite aos jogadores atirar com seu blaster em dispositivos móveis. Ambos os ícones incluem ângulos suaves para serem coesos com o mundo geral, mas suas formas hexagonais e circulares os diferenciam de qualquer coisa que um jogador poderia associar os ícones dentro do jogo.

Ao esboçar ícones simples para seu próprio jogo, considere o seguinte:

• Ícones simples são legíveis mesmo quando são pequenos. Por essa razão, limite detalhes em seus ícones que se tornariam irreconhecíveis nas telas de dispositivos móveis.
• Ícones são poderosos porque podem comunicar uma mensagem independentemente da língua do jogador. Desde que não impacte a compreensão do jogador sobre sua UI, substitua texto desnecessário por ícones para melhorar os esforços de localização.
• Muitos jogos do mesmo gênero usam ícones que são estilisticamente semelhantes, como um ícone de espada que representa força, ou um frasco que representa magia. Abrace o simbolismo dentro do gênero do seu jogo para que os jogadores possam entender seus ícones sem orientação adicional.

Se você não souber quais tipos de ícones são comuns dentro do gênero do seu jogo, confira o Banco de Dados de UI de Jogos. Esta ferramenta de recurso gratuita para designers de UI inclui capturas de tela de centenas de jogos de diferentes gêneros que você pode consultar durante seu processo de design.

Estabeleça uma ordem de interação

Uma ordem de interação é a sequência de interações que os jogadores podem ter com sua UI. Como geralmente há vários elementos de UI interativos na tela, é importante estabelecer uma ordem de interação intuitiva para ajudar os jogadores a tomar decisões enquanto navegam por vários fluxos de trabalho.

Existem tipicamente três tipos de interações em um fluxo de trabalho:

• Interação Primária – A ação que um jogador é mais provável de realizar.
• Interação Secundária – A ação que um jogador é provável de realizar como uma alternativa à ação primária.
• Interação Terciária – A ação que um jogador é menos provável de realizar.

Cada tipo de interação deve ter um nível diferente de ênfase visual dependendo da probabilidade de um jogador realizar a ação. Para ilustrar esse conceito, examine a seguinte imagem da ordem de interação para o fluxo de trabalho de selecionar um blaster no jogo de laser tag de exemplo, onde A representa a interação primária, B representa a interação secundária e C representa a interação terciária.

Neste fluxo de trabalho, a ação que um jogador é mais provável de realizar é selecionar entre os dois tipos diferentes de blasters, então os botões de blaster são muito maiores do que qualquer outro elemento interativo no design. Esse nível de ênfase visual chama a atenção do jogador e direciona seu olhar para o meio do elemento geral da UI. Depois que o jogador toma sua decisão, o próximo passo lógico no fluxo de trabalho é confirmar sua seleção e iniciar a rodada. Por essa razão, o botão SELECIONAR está diretamente abaixo da interação primária.

Embora improvável, o jogador pode não saber que pode selecionar um dos botões de blaster para comunicar qual blaster deseja usar. Para ajudar nessa situação, existem dois botões de seta terciários que o jogador pode utilizar para alternar entre suas escolhas. Esses botões são sutis e muito menores do que os elementos das interações primária e secundária, mas também são percebíveis para o jogador que precisa de direção sobre quais ações pode realizar.

Se você colocasse essas interações primária, secundária e terciária em uma ordem de interação diferente, como trocar o botão SELECIONAR pelo botão de seta esquerda, os jogadores não teriam uma direção clara sobre a sequência de escolhas que precisam fazer. Por essa razão, além da ênfase visual de uma ordem de botões, fluxos de trabalho eficazes seguem uma hierarquia visual que guia os jogadores através da sua ordem ideal de decisões de acordo com a direção que eles são mais propensos a escanear informações, como de cima para baixo e da esquerda para a direita.

Ao estabelecer uma ordem de interação para os fluxos de trabalho em seu próprio jogo, considere o seguinte:

• Os jogadores precisam ter uma compreensão clara de quando podem interagir com sua UI para realizar ações. Por essa razão, é recomendável fornecer pelo menos uma forma de feedback visual para elementos de UI interativos, como exibir um contorno ou mudar o tamanho, a cor ou a animação de um botão quando está em foco.
• Se os rótulos dos elementos de UI interativos forem vagos ou semelhantes entre si no mesmo fluxo de trabalho, os jogadores podem entender mal como completar uma ação ou processo. Para evitar uma experiência negativa para o jogador, crie rótulos que sejam claros, concisos e distintos entre si.
• Se os elementos de UI interativos forem muito grandes, podem distrair de outras informações importantes na tela. Por outro lado, se forem muito pequenos, podem ser difíceis de ler ou difíceis de selecionar, especialmente se estiverem próximos em dispositivos móveis. Por essa razão, é essencial revisar o tamanho dos seus elementos de UI interativos em vários tamanhos de tela.

Em Implementar no Estúdio, você aprenderá como usar objetos UIAspectRatioConstraint para garantir que os elementos de UI mantenham uma proporção específica, não importa qual dispositivo os jogadores usem para acessar seu jogo. Além de facilitar seu processo de design, essa técnica também pode ajudá-lo a atender à recomendação de Tamanho e Espaçamento do Alvo de Toque das Diretrizes de Acessibilidade de Conteúdo da Web para criar uma zona de toque para elementos de UI interativos que tenha pelo menos 9x9 mm em dispositivos móveis.

Determine um sistema de texto

Um sistema de texto é um conjunto de regras sobre fontes e estilos para todas as palavras em sua UI, como "sempre negritar cabeçalhos" ou "usar fonte verde ao referenciar uma estatística de saúde." Determinar um sistema de texto no início do seu processo de design permite que você tenha uma estrutura que pode aplicar consistentemente em todo o seu jogo, para que os jogadores saibam o que esperar enquanto buscam as informações de que precisam.

Embora os sistemas de texto possam variar dependendo do gênero do jogo ou dos requisitos do mundo 3D, a regra mais importante que todos os sistemas de texto devem seguir é garantir que todo o seu texto de UI seja claro e fácil de ler. Usando essa regra como base para todas as decisões relacionadas ao seu sistema de texto, você pode melhorar a acessibilidade e a experiência do usuário para os jogadores que leem sua UI, considerando as diferentes maneiras que os jogadores podem interagir com seu texto, como:

• O dispositivo que os jogadores podem usar para acessar seu jogo.
• O idioma em que os jogadores podem ler seu texto localizado.
• O possível fundo subjacente por trás do texto na tela.

Por exemplo, o seguinte design de resposta de tela de quando um jogador é marcado é escalado para um tamanho de fonte menor ou maior de acordo com o dispositivo do jogador, inclui espaço suficiente em cada lado do texto em inglês para idiomas com traduções mais longas, e inclui um fundo contrastante para que os jogadores possam ler o texto, não importa qual cor esteja em seu fundo.

Ao determinar um sistema de texto para seu próprio jogo, considere o seguinte:

• O texto é difícil de ler quando se mistura com o ruído de seu fundo. Para melhorar a legibilidade da sua UI, exiba texto sobre uma cor contrastante ou com um contorno.
• Se você não escalar seu texto para diferentes dispositivos, o texto ocupará muito espaço ou se tornará pequeno e indecifrável na tela do jogador. Para detectar discrepâncias em seu texto, teste seu design em vários dispositivos ao longo do processo de design.
• As palavras podem se estender além do seu design original quando você as localiza em outros idiomas. Para melhorar a composição do seu design, referencie o maior espaço que seu texto pode ocupar na tela.
• Embora algumas fontes possam se encaixar na estética do seu jogo, podem ser difíceis de ler em grandes quantidades. Por essa razão, use texto estilizado com moderação, como para títulos ou texto de alerta.

Uma vez que você tenha um plano para o estilo artístico da sua UI, você pode passar para a próxima seção do tutorial para aprender como criar o wireframe do layout de cada elemento em vários fluxos de trabalho dos jogadores.