As práticas recomendadas de design a seguir ajudam a garantir uma experiência ideal para os usuários que jogam no YouTube em diferentes dispositivos e plataformas.
Além dos componentes do sistema operacional, a experiência da Sala de jogos consiste principalmente em três componentes:
- Ações da Sala de jogos
- Tela do jogo
- Menus e caixas de diálogo
Essas práticas recomendadas de design de jogos fornecem recomendações sobre como criar seu jogo para a tela dele.
Redimensionamento de jogos
Considere estas práticas para garantir que os jogos se adaptem adequadamente a diferentes tamanhos e orientações de tela.
Redimensione o jogo e adapte a interface ao tamanho e à proporção da tela.
Use efeito letterbox ou efeito letterbox se o jogo não puder ser totalmente responsivo ao tamanho e proporção da tela dele.
Evite acionar as barras de rolagem. As barras de rolagem afetam negativamente a jogabilidade e a navegação geral. Preencha a tela sem fazer com que o jogo se torne rolável dentro dela. As barras de rolagem são adequadas para rolagem intencional, por exemplo, ao percorrer uma longa lista vertical na interface do jogo. Idealmente, os jogos são totalmente responsáveis pela janela de visualização.
Escalonamento de jogos
Renderize claramente (não desfocado, pixelado ou esticado) em diferentes resoluções de tela.
Confira se a interface do jogo (textos, ícones) é dimensionada corretamente quando renderizada em telas de resolução mais baixa (como dispositivos móveis de 360 x 800) e telas de resolução mais alta (como monitores de computador de 3.840 x 2.560).
Evite recursos rasterizados de baixa resolução que apareçam desfocados quando dimensionados para telas grandes.
Tipografia
Garanta a legibilidade em todos os dispositivos e tamanhos de tela.
Os textos que aparecem no jogo, como botões, menus e balões de diálogo, precisam ser legíveis em diferentes dispositivos e tamanhos de tela. Isso pode ser feito dimensionando e adaptando o texto automaticamente ou oferecendo aos usuários uma configuração para ajustar o tamanho da fonte.
Se o texto for menor que 18 pt ou se estiver em negrito e for menor que 14 pt, defina a taxa de contraste de cores como pelo menos 4,5:1.
Em todos os demais textos, defina a taxa de contraste de cores como pelo menos 3:1.
Para referências gerais, consulte WCAG2.1.
 |
 |
| Use fontes grandes com peso e contraste suficientes para legibilidade. Neste exemplo, a taxa de contraste é 4.48:1. | Evite fontes pequenas e cores de baixo contraste. Neste exemplo, a taxa de contraste é 3,07:1. |
Interação
Esta seção aborda as práticas recomendadas para interações do usuário e elementos relacionados.
Áreas de toque
Aumente as áreas de toque o suficiente para facilitar a interação.
Verifique se as áreas de toque têm pelo menos 48 x 48 dp com pelo menos 8 dp de espaço entre elas. Consulte as diretrizes do Material Design para facilitar a interação.
Nesse exemplo, o botão renderizado visualmente tem 24 dp, enquanto a área de toque invisível inclui 12 dp ao redor do ícone para alcançar a área de toque de 48 x 48 dp.
Adicione padding ao redor dos ícones e botões para aumentar o tamanho da área de toque.
Botões
Use estilos exclusivos para cada estado de botão:
- Ativado
- Desativado
- Passar o cursor (para dispositivos de entrada sem toque)
- Focado
- Comprimido
Tente também diferenciar os botões por hierarquia. Por exemplo, botões de ação principais ou secundários em um menu Iniciar. Consulte as Diretrizes de design do Google Material 2 para botões (link em inglês).
Estilos exclusivos que distinguem cada estado de botão
Entrada do teclado
Para aumentar a acessibilidade do jogo em todos os dispositivos e usuários, ofereça suporte à entrada de teclado para todos os controles de jogo e navegação na tela, além da entrada por toque e mouse.
Para jogos com suporte à entrada de teclado, permita que os usuários fechem os menus e as caixas de diálogo do jogo usando a tecla Esc. Além disso, há um botão de fechamento visual (por exemplo, um ícone X no canto superior). Exemplos comuns de modais ou caixas de diálogo são o menu Configurações, o menu Pausar, as mensagens de erro e os pop-ups de informações da Ajuda.
Evite mapear ações para tocar e manter pressionada a tecla Esc, porque ela é usada para sair do modo de tela cheia em navegadores da Web para computadores.
Para jogos com listeners de pressionamento de tecla registrados: não use preventDefault()
com eventos de tecla Esc. Quando em tela cheia no Safari, o
evento de pressionamento de tecla é consumido pelo jogo sem sair da tela cheia.
Retorno tátil
Quando apropriado, recomendamos o uso de retorno tátil (vibrações) para deixar os jogos mais divertidos e imersivos.
Momentos importantes do jogo
Esta seção aborda momentos importantes que criam uma ótima experiência para o jogador.
Tutorial
Inclua um breve tutorial ou um nível de integração para ajudar os novos jogadores.
A integração garante que os usuários aprendam os fundamentos básicos da jogabilidade e dos elementos essenciais para seguir e aproveitar o jogo.
Como o objetivo da Sala de jogos é ser rápido e acessível para os usuários começarem a jogar, tente manter o mínimo de integração possível. Embora nem todos os jogos precisem de um tutorial, a maioria deles se beneficia de alguma forma de integração. Considere as principais mecânicas, regras e habilidades que o jogador precisa saber para jogar e aproveitar o jogo.
Os tutoriais podem estar no seguinte formato:
- Conjunto de telas no início do jogo ou, de preferência, apresentadas contextualmente durante todo o jogo, quando apropriado.
- Nível do tutorial real em que o usuário passa
Pausar
Comunicar claramente o estado do jogo ao usuário.
Comunique claramente ao usuário quando o jogo estiver pausado e como ele pode retomar o jogo. Evite fazer o usuário pensar que o jogo travou ou travou.
Rotule claramente o estado do jogo como "pausado" e forneça uma ação clara (botão) para retomar o jogo.
Fim da partida
Comunique ao usuário que ele concluiu o último nível ou o jogo.
Se o jogo tiver um fim definitivo (por exemplo, um número finito de níveis), comunique claramente esse fato ao usuário. Isso evita que o usuário pense que o jogo está corrompido ou congelado. Idealmente, o jogo comemora e parabeniza o jogador por concluir o jogo.
Áudio
O jogo pode conter controles de volume separados para efeitos, fala e música de fundo. Os controles podem incluir controles deslizantes para ajustar o volume ou um botão de desativar o som para cada um ou ambos.
Acessibilidade
No design, a acessibilidade permite que usuários com diversas habilidades joguem e aproveitem seu jogo.
Ao contrário do design da Web e de software, não existem diretrizes de acessibilidade padrão do setor para o design de jogos. Para conferir um bom recurso com mais diretrizes sobre design de jogos inclusivo, consulte as Diretrizes de acessibilidade para jogos. Recomendamos que você considere como essas diretrizes podem ser aplicadas ao design do seu jogo.