Escolha um estilo de arte

Escolher um estilo de arte é o processo de planejar uma direção estética para seus elementos de UI.É importante começar o seu processo de design com um estilo de arte porque os estilos de arte fornecem regras visuais que você pode referenciar para garantir que sua interface forneça intuitivamente informações aos jogadores sobre o que eles podem fazer em sua experiência.

Usando o arquivo exemplo de experiência de tag de laser como referência, esta seção da interface do usuário mostra como tomar decisões significativas sobre como projetar seus elementos de UI de acordo com o gênero de sua experiência, incluindo orientações sobre:

• Identificar elementos de UI necessários de acordo com o que você deseja comunicar aos jogadores durante toda a sua experiência.
• Selecionar um tema de cores que reforce convenções de cores específicas de gênero que sejam intuitivas para o seu público.
• Esquematizar ícones simples que são fáceis de decifrar em qualquer tamanho de tela.
• Estabelecer uma ordem de botões que corresponda à probabilidade de diferentes fluxos de trabalho de jogadores.
• Determinar um sistema de texto que garanta a legibilidade em dispositivos alvo.

Depois de concluir esta seção, você aprenderá a projetar a estrutura e o fluxo da informação que deseja comunicar aos jogadores através da interface dentro de sua experiência.

Identifique seus elementos de UI

O primeiro passo ao escolher um estilo de arte para sua interface é 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 toda a sua experiência.

Existem muitas maneiras diferentes de brainstormar quais elementos de interface são necessários para os requisitos do seu jogo, mas é recomendado começar com a visualização do que um jogador precisa saber assim que se juntar à sua experiência.Por exemplo, quando um jogador abre a experiência de tag de laser de amostra, eles podem se perguntar as seguintes perguntas:

• Qual é o objetivo da experiência?
• Como sei quem está na minha Equipe?
• Como faço para acompanhar os pontos da minha Equipe?
• Como seleciono um blaster?
• Como sei onde o blaster atira um laser?
• Se estiver em um dispositivo móvel, como atiro meu blaster?
• Depois de atirar em um laser, quando posso atirar novamente?
• Como sei quando estou começando a rodada?
• Como sei quando etiqueto alguém com sucesso com meu blaster?
• Como sei quando a equipe inimiga me marca com sucesso?

Ao usar essas perguntas para entender quais informações são imperativas para que os jogadores sejam bem-sucedidos, você pode classificar as necessidades da interface do usuário da experiência de tag de laser de amostra em três categorias:

1. Informações sobre o objetivo da experiência.
2. Informações sobre o blaster.
3. Informações sobre o estado do jogador.

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

Depois de classificar as necessidades de UI da sua experiência em categorias, você pode criar uma lista dos elementos de UI necessários para atender aos requisitos de cada categoria.Para demonstrar, a experiência de tag de laser de amostra usa a seguinte tabela de elementos de UI para abordar a lista anterior de perguntas potenciais do jogador.Ao trabalhar neste Tutorial, o currículo da interface continuará a se referir a essa lista e a destacar as principais decisões de design que se relacionam com cada categoria de elementos de interface.

Agora que você tem uma lista de elementos de UI para sua experiência, é 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 através de aplicação consistente dentro da sua experiência, como usar uma cor brilhante para indicar quando algo é selecionável.Aplicar um tema de cores aos elementos da sua interface é importante, especialmente quando você depende de convenções de cores dentro do gênero de sua experiência, porque permite que os jogadores entendam rapidamente sua interface com o mínimo de esforço.

No Currículo de Arte Ambiental, cada metade do ambiente de tag de laser é colorida de uma visão de cima para baixo para diferenciar qual área do mapa está perto da zona de spawn respectiva de cada Equipe: hortelã para a equipe que se reúne no lado esquerdo do mapa, e carnation pink para a equipe que se reúne no lado direito do mapa.Essas cores específicas são úteis porque são complementares , o que significa que elas se contrastam bem umas com as outras e permitem que os jogadores facilmente escaneiem seus arredores e se orientem independentemente da direção que estão enfrentando no construção / simulação.

A experiência de tag de laser de amostra usa esse mesmo tema de cores em sua interface para destacar informações que pertencem a cada Equipe, como o indicador de equipe de cada jogador dentro do espaço 3D ou o rastreador de pontos de equipe que sobrepõe a tela.Essa consistência auxilia os jogadores a entender rapidamente as informações sobre o objetivo da experiência durante o jogo de ritmo acelerado de uma experiência de tiro em primeira pessoa, especialmente porque os jogadores precisam tomar decisões rápidas enquanto atravessam o ambiente.

Ao selecionar um tema de cores para sua própria experiência, considere o seguindo:

• A força de um tema de cores depende de ajudar os jogadores a fazerem associações mentais rápidas entre cada cor e sua função.Por esse motivo, limite seu tema de cores a apenas destacar as informações principais que você quer que os jogadores associem aos seus elementos de UI.
• Para garantir que os jogadores com deficiência visual possam entender a mensagem do seu tema de cores, não confie sempre apenas na cor para distinguir entre elementos de UI .Em vez disso, combine cores com ícones, formas e/ou animações para garantir que sua interface de usuário se comunique efetivamente com cada jogador.
• É mais importante para a sua UI ser legível do que agradável esteticamente.Por esse motivo, priorize a interface simples com cor que permanece legível sobre ambos os elementos claros e escuros no mundo 3D.

Para destacar a orientação no último ponto, a experiência de tag de laser de amostra 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 se contrastam bem e são fáceis de ler como o resto da tela exibe um ambiente 3D colorido de outra forma.

Esquema de ícones simples

Um ícone é um símbolo que representa uma ação, Objetoou conceito em uma experiência .Traçar ícones simples e intuitivos é importante porque o resultado final permite que os jogadores reconheçam facilmente o que eles são capazes de fazer e o que você deseja dizer a eles através de sua interface sem usar texto, o que pode desordenar a tela e chamar a atenção para fora do conteúdo que importa.Esse processo é ainda mais crucial se o seu público acessar a sua experiência usando uma tela pequena em dispositivos móveis.

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

Para complementar esse estilo de arte enquanto ainda permanece único, todos os elementos de UI que você aprenderá a fazer mais tarde neste tutorial incluem uma estética futurista e ângulos redondos sem correspondência à linguagem de forma dos recursos 3D no ambiente.Isso mantém o significado de cada ícone distinto da outra informação no espaço 2D e 3D.

Para demonstrar esse conceito, veja as duas seguintes imagens da experiência de tag de laser de amostra que diz aos jogadores onde seu blaster atira na tela e o botão que permite que os jogadores atirem seu blaster em dispositivos móveis.Ambas as ícones incluem ângulos suaves para serem coesos com o mundo geral, mas suas formas hexagonais e circulares os separam de qualquer coisa que um jogador possa associar às ícones na experiência.

Ao traçar ícones simples para sua própria experiência, considere o seguindo:

• Ícones simples são legíveis mesmo quando são pequenos.Por esse motivo, limite detalhes em suas ícones que se tornariam in reconhecíveis nas telas de dispositivos móveis.
• Ícones são poderosos porque podem comunicar uma mensagem, não importa o idioma do jogador.Desde que não afete a compreensão do jogador de sua interface, substitua texto desnecessário por ícones para melhorar os esforços de localização.
• Muitas experiências do mesmo gênero usam ícones que são estilisticamente semelhantes, como um ícone de espada que representa força ou um copo que representa magia. Abraçe o simbolismo dentro do gênero da sua experiência para que os jogadores possam entender seus ícones sem orientação adicional.

Se você não sabe que tipos de ícones são comuns dentro do gênero da sua experiência, confira o Banco de Dados de UI de Jogo.Essa ferramenta gratuita de recursos para designers de UI inclui capturas de tela de centenas de jogos de diferentes gêneros que você pode referenciar durante o seu processo de design.

Estabelecer uma ordem de interação

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

Normalmente, existem 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 executar.
• Interação Secundária – A ação que um jogador provavelmente executará como alternativa à ação primária.
• Interação terciária – A ação que um jogador é menos provável de executar.

Cada tipo de interação deve ter um nível diferente de ênfase visual dependendo da probabilidade de um jogador executar a ação.Para ilustrar esse conceito, examine a seguinte imagem da ordem de interação para o fluxo de trabalho para selecionar um blaster na experiência de tag de laser de amostra, na qual 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 executar é selecionar entre os dois tipos diferentes de blasters, portanto, os botões de blaster são muito maiores do que qualquer outro elemento interativo no design.Este nível de ênfase visual captura a atenção do jogador e atrai seu olho para o meio do elemento de UI geral.Depois que o jogador tomar sua decisão, o próximo passo lógico no fluxo de trabalho é confirmar sua seleção e iniciar a rodada.Por esse motivo, o botão SELECIONAR está diretamente abaixo da interação primária.

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

Se você colocar essas interações primárias, secundárias e terciárias em uma ordem de interação diferente, como trocar o botão SELECT com o botão de seta esquerda, os jogadores não teriam direção clara sobre a sequência de escolhas que precisam fazer.Por esse motivo, além da ênfase visual de uma ordem de botões, fluxos de trabalho efetivos seguem uma hierarquia visual que guia os jogadores através da ordem ideal de decisões de acordo com a direção em que eles provavelmente vão escanear informações, como de cima para baixo e de esquerda para a direita.

Ao estabelecer uma ordem de interação para os fluxos de trabalho em sua própria experiência, considere o seguindo:

• Os jogadores precisam ter uma compreensão clara de quando podem interagir com a sua interface para executar ações.Por esse motivo, é recomendado fornecer pelo menos uma forma de feedback visual para elementos de UI interativos, como exibir um contorno ou alterar o tamanho, cor ou animação de um botão quando estiver em foco.
• Se as etiquetas em elementos de UI interativos forem vagas ou semelhantes uma à outra no mesmo fluxo de trabalho, os jogadores podem mal interpretar como completar uma ação ou processo.Para evitar uma experiência negativa do jogador, crie rótulos que sejam limpar, concisos e distintos uns dos outros .
• Se os elementos de interface interativa forem muito grandes, eles podem distrair de outras informações importantes na tela.Inversamente, se forem muito pequenos, pode ser difícil de ler ou difícil de selecionar, especialmente se estiverem em proximidade próxima em dispositivos móveis.Por esse motivo, é essencial revisar o tamanho de seus elementos de UI interativos em vários tamanhos de tela .

Em Implementar no Studio, você aprenderá a usar objetos UIAspectRatioConstraint para garantir que os elementos da interface mantenham uma proporção de aspecto específica, não importa qual dispositivo os jogadores usem para acessar sua experiência.Além de tornar o seu processo de design mais fácil, essa técnica também pode ajudá-lo a atender à recomendação da Web Content Accessibility Guidelines' Tamanho e espaçamento do alvo de toque para criar uma zona de toque para elementos de UI interativos que tenham pelo menos 9x9 mm em dispositivos móveis.

Determine um sistema de texto

Um sistema de texto texto é um conjunto de regras sobre fontes e estilo para todas as palavras na sua interface de usuário, como " sempre títulos ousados" ou "use fonte verde ao referir 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 você pode aplicar consistentemente ao longo de sua experiência para que os jogadores saibam o que esperar ao procurar as informações de que precisam.

Embora os sistemas de texto possam variar dependendo do gênero da experiência ou dos requisitos do mundo 3D, a regra mais importante que todos os sistemas de texto devem seguir é garantir que todo o texto da sua interface seja claro e fácil de ler **** .Ao usar 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 lêem sua interface por considerar as diferentes maneiras pelas quais os jogadores podem interagir com seu texto, como:

• Os jogadores de dispositivos que podem usar para acessar sua experiência.
• O idioma em que os jogadores podem ler o seu texto localizado.
• O possível plano de fundo subjacente por trás do texto na tela.

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

Ao determinar um sistema de texto para sua própria experiência, considere o seguindo:

• O texto é difícil de ler quando se mistura com o ruído de seu fundo.Para melhorar a legibilidade da sua UI, exibir texto em cima de uma cor de contraste ou com um traço .
• Se você não dimensionar seu texto para diferentes dispositivos, o texto vai ocupar muito espaço ou se tornar pequeno e ininteligível na tela do jogador.Para detectar discrepâncias em seu texto, teste seu design em vários dispositivos durante todo o processo de design.
• 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 o seu texto pode ocupar na tela .
• Embora algumas fontes possam se encaixar na estética de sua experiência, elas podem ser difíceis de ler em grandes quantidades.Por esse motivo, use texto estilizado com moderação , como para títulos ou texto de alerta.

Uma vez que você tenha um plano para o estilo de arte da sua interface de usuário, você pode passar para a próxima seção do tutorial para aprender a wireframear o layout de cada elemento em vários fluxos de trabalho do jogador.