Escolha um Estilo de Arte

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

Usando o exemplo de laser de tag.rbxl arquivo como referência, esta seção do curso de UI 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:

• Identificando elementos de UI necessários de acordo com o que você quer comunicar aos jogadores durante sua experiência.
• Selecionando um tema de cor que reforça as convenções de cores específicas do gênero que são intuitivas para seu público.
• Contorno de ícones simples que são fáceis de decifrar em qualquer tamanho de tela.
• Estabelecendo uma ordem de botão que corresponda à probabilidade de diferentes fluxos de trabalho de jogadores.
• Determinando um sistema de texto que garante a legibilidade em dispositivos alvo.

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

Identifique seus elementos de UI

O primeiro passo na escolha de um estilo de arte para sua UI é identificar quais elementos de UI você precisa para os vários tipos de informações que você deseja comunicar à sua audiência. Fazer isso no início do seu processo de design é crucial, pois permite que você categorize os elementos de UI por seu propósito funcional, tomando decisões semânticas de onde e quando os jogadores interagem com cada elemento de UI e planejando onde você pode reutilizar os elementos de UI em sua

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

• Qual é o objetivo da experiência?
• Como posso saber quem está em minha Equipe?
• Como eu sigo os pontos da minha Equipe?
• Como faço para selecionar um blaster?
• Como eu sei onde o laser do blaster atira?
• Se eu estiver em um dispositivo móvel, como faço para atirar no meu blaster?
• Depois de atirar um laser, quando posso atirar novamente?
• Como eu sei quando estou começando a partida?
• Como eu sei quando eu marquei alguém com meu blaster com sucesso?
• Como eu sei quando a equipe inimiga me etiqueta com sucesso?

Ao usar essas perguntas para entender que informações são imperativas para os jogadores saberem para ter sucesso, você pode classificar as necessidades da experiência de laser de exemplo 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.

Organizar a UI da sua experiência em categorias é útil, pois você pode formular o estilo de arte ao redor de cada agrupamento para reforçar o que informações cada categoria precisa ensinar aos jogadores. Por exemplo, se você quiser que sua UI diga aos jogadores quais ações eles podem tomar em relação à saúde statusseu personagem, você pode escolher um estilo de arte com elementos de UI que priorizam o ícone verde e/ou plus para que os jogadores possam reconhecer rapidamente sua função

Depois de classificar as necessidades da sua experiência na interface do usuário em categorias, você pode criar uma lista dos elementos da UI necessários para cumprir os requisitos de cada categoria. Para ilustrar, a experiência de laser de exemplo usa a seguinte tabela de elementos da UI para abordar a lista anterior de perguntas de potencial jogador. Como você trabalha através deste Tutorial, o curso de UI continuará a se referir a esta lista e destacar as principais decisões de design que se relacionam com cada categoria de element

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 agrupamento de elementos de UI, começando com um tema de cor.

Selecione um Tema de Cor

Um tema de cor , ou paleta de cores, é uma seleção de cores que cada uma comunica uma mensagem através de aplicação consistente dentro de sua experiência, como usar uma cor para indicar quando algo é selecionável. Aplicar um tema de cor a seus elementos de UI é importante, especialmente quando você confia em convenções de cores dentro do gênero de sua experiência, porque permite que os jogadores entendam rapidamente sua UI com esforço mínimo.

No Currículo de Arte Ambiental, cada metade do laser de rastreamento ambiental é colorido de uma visão de cima para baixo para diferenciar qual área do mapa está perto de cada zona de spawn de Equipe: menta para

A experiência de laser tag de exemplo usa esse mesmo tema de cor em sua UI 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 ponto de equipe que sobrepõe a tela. Essa consistência ajuda os jogadores a entender rapidamente as informações sobre o objetivo da experiência durante a rápida jogabilidade de uma experiência de primeira pessoa de tiro em primeira pessoa, especial

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

• A força de um tema de cor confia em ajudar os jogadores a fazer rápidas associações mentais entre cada cor e sua função. Por essa razão, limite seu tema de cor para apenas destacar as informações chave que você deseja que os jogadores associem com seus elementos da interface.
• Para garantir que os jogadores com cegueira de cores possam entender a mensagem do seu tema de cor, não confie sempre em cor apenas para se distingir entre os elementos da UI. Em vez disso, combina cores com ícones, formas e/ou animações para garantir que sua UI se comunique efetivamente com cada jogador.
• É mais importante para sua interface ser legível do que esteticamente agradável. Por esta razão, priorize a simples UI com cor que permanece lível sobre ambos os elementos de luz e sombra na 3D mundo.

Para destacar a orientação no último ponto, a experiência de laser de exemplo usa as cores neutras preto e branco para quase todos os outros elementos da UI que sobreposição a tela 2D. Preto e branco são bem claros um do outro, e eles são fáceis de ler como o resto da tela exibe um ambiente 3D colorido de outra forma.

Contorno de Ícones Simples

Um ícone icona é um símbolo que representa uma ação, Objetoou conceito em uma experiência. Traçar ícones que são simples e intuitivos é importante, pois o resultado final permite que os jogadores facilmente reconheçam o que são capazes de fazer e o que você quer dizer através de sua interface sem usar texto, o que pode desordenar a tela e chamar a atenção para o conteúdo que importa. Este

Os ícones simples geralmente têm um estilo distinto dos seus elementos 3D, embora ainda complementem o mundo geral de sua experiência. Por exemplo, no ambiente final do Currículo de Arte Ambiental, tanto os recursos modulares quanto os prop 3D têm um estilo de arte limpo e de alta tecnologia que utiliza formas retangulares com cantos redondos. Dos painéis alongados ao longo do piso até as janelas quase

Para complementar este estilo de arte, ainda mantendo-se único, todos os elementos da interface que você aprenderá a fazer mais tarde neste tutorial incluem uma estética futurista e ângulos redondos sem corresponder ao idioma de forma dos recursos 3D no ambiente. Isso mantém cada ícone significado de outras informações tanto no espaço 2D quanto no espaço 3D.

Para mostrar esse conceito, veja as seguintes duas imagens da experiência de laser de exemplo do crosshair que diz aos jogadores onde o laser deles atira na tela, e o botão que permite que os jogadores atirem seu laser em dispositivos móveis. Ambos os ícones incluem ângulos suaves para serem coesivos com o mundo geral, mas suas formas hexagonais e circulares as separam de qualquer coisa que os jogadores pudessem associar aos í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 esta razão, limite detalhes em seus ícones que se tornariam in reconhecido em dispositivos móveis.
• Ícones são poderosos porque podem comunicar uma mensagem, não importa o idioma do jogador. Desde que isso não afete a compreensão do jogador da sua interface, substituir texto desnecessário por ícones para melhorar 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çar o simbolismo dentro do gênero de 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 no gênero de sua experiência, confira o Banco de Dados da Interface do Jogo. Esta ferramenta gratuita para designers de UI inclui capturas de tela de centenas de jogos de diferentes gêneros que você pode referenciar durante 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 UI. Como há muitos elementos de interação interagíveis na tela, é importante estabelecer uma ordem de interação intuitiva para ajudar os jogadores a tomar decisões enquanto eles navegam por vários fluxos de trabalho.

Existem três tipos de interação em um fluxo de trabalho:

• Interação Primária – A ação que um jogador mais provavelmente realizará.
• Segunda Interação – A ação que um jogador provavelmente fará como alternativa à ação principal.
• Interação Terciária – 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 executar a ação. Para ilustrar esse conceito, examine a seguinte imagem da ordem de interação para a experiência de trabalho selecionar um blaster na 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 realizar é selecionar entre os dois tipos diferentes de blasters, para que os botões do blaster sejam muito maiores que qualquer outro elemento interagível no design. Este nível de ênfase visual prende a atenção do jogador, e chama sua atenção para o meio do elemento principal da interface. Depois que o jogador fizer sua decisão,

Embora seja improvável, o jogador pode não saber que eles são capazes de selecionar um dos botões de arma para comunicar qual arma eles querem usar. Para ajudar nessa situação, há dois botões de seta terciários que o jogador pode usar para alternar entre suas escolhas. Esses botões são sutis e muito menores que os elementos das interações principais e secundárias, mas eles também são percebíveis ao jogador que precisa de direção sobre

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 SELECIONAR com o botão esquerdo, os jogadores não teriam direção clara na sequência de escolhas que eles precisam fazer. Por essa razão, além do destaque visual de um botão, os fluxos de trabalho efetivos seguem um h

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 eles podem interagir com sua UI para executar ações. Por essa razão, é recomendado fornecer pelo menos um formulário de feedback visual</form> para elementos interativos de UI, como exibir um contorno ou alterar o tamanho, cor ou animação de um botão quando ele estiver em foco.
• Se as etiquetas em elementos interativos da UI são vazias ou semelhantes umas às outras no mesmo fluxo de trabalho, os jogadores podem confundir-se com a maneira de completar uma ação ou processo. Para evitar uma experiência de jogador negativa, crie etiquetas que sejam limpar, concisas e distintas umas das outras .
• Se os elementos de UI interativos são muito grandes, eles podem distrair de outras informações importantes na tela. Conversamente, se eles são muito pequenos, eles podem ser difíceis de ler ou difíceis de selecionar, especialmente se estiverem em proximidade próxima em dispositivos móveis. Por esta razão, é essencial revisar o tamanho de seus elementos de UI interativos em vários tamanhos de tela .

In implementar no Studio , você aprenderá a usar objetos UIAspectRatioConstraint para garantir que os elementos da UI mantenham uma proporção de aspecto específica, não importa o dispositivo que os jogadores usam para acessar sua experiência. Além de tornar seu processo de design mais fácil, esta técnica também pode ajudá-lo a at

Determine um Sistema de Texto

Um sistema de texto é um conjunto de regras sobre fontes e estilo para todas as palavras em sua UI, como " sempre usar cabeçalhos ousados" ou "use uma fonte verde ao referenciar uma estatística de saúde ". Determinar um sistema de texto cedo no seu processo de design permite que você tenha uma estrutura que você pode aplicar consistentemente em sua experiência, para que os jogadores saibam o que esperar enquanto procuram pela informação que eles prec

Embora os sistemas de texto possam variar dependendo do gênero ou requisitos do mundo 3D, o mais importante regra que todos os sistemas de texto devem seguir é garantir que todo o seu texto de UI é 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 lerem seu UI, considerando

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

Por exemplo, o seguinte design de resposta de tela de quando um jogador é marcado fora escala 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 para idiomas com traduções mais longas, e inclui um fundo de contraste para que os jogadores possam ler o texto, não importa que cor esteja no fundo.

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

• O texto é difícil de ler quando ele se mistura com o ruído de seu fundo. Para melhorar a legibilidade de sua interface, exibir texto no topo de uma cor contrastante ou com um traço .
• 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 capturar as discrepâncias em seu texto, teste seu design em vários dispositivos durante o 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, 引用 o maior espaço que seu texto pode ocupar na tela .
• Embora alguns fontes possam ajustar as estéticas de sua experiência, eles podem ser difíceis de ler em grandes quantidades. Por esta razão, use texto estilizado com parcimônia , como para títulos ou texto de alerta.

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