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 dos Playables consiste principalmente em três componentes:
- Ações dos Playables
- Canvas do jogo
- Menus e caixas de diálogo
Essas práticas recomendadas de design de jogos oferecem recomendações sobre como criar seu jogo para o canvas.
Redimensionamento do jogo
Para garantir que os jogos se adaptem adequadamente a diferentes tamanhos e orientações de tela, considere estas práticas.
Redimensione o jogo e adapte a interface ao tamanho e à proporção do canvas.
Use pillarboxing ou letterboxing se o jogo não puder ser totalmente responsivo ao tamanho e à proporção do canvas.
Evite acionar barras de rolagem. Elas afetam negativamente a jogabilidade e a navegação geral. Preencha o canvas sem que o jogo possa ser rolado dentro dele. As barras de rolagem são adequadas para rolagem intencional, por exemplo, ao rolar uma lista vertical longa na interface do jogo. O ideal é que os jogos sejam totalmente responsivos à janela de visualização.
Escalonamento do jogo
Renderize com clareza (não borrado, pixelizado ou esticado) em diferentes resoluções de tela.
Garanta que a interface do jogo (textos, ícones) seja dimensionada adequadamente 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 3840 x 2560).
Evite recursos rasterizados de baixa resolução que aparecem borrados quando dimensionados para telas grandes.
Tipografia
Garanta a legibilidade em dispositivos e tamanhos de tela.
Os textos que aparecem no jogo, como botões, menus e balões de fala, 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ência geral, consulte WCAG2.1 (em inglês).
 |
 |
| Use tamanhos de fonte grandes com peso e contraste suficientes para legibilidade. Neste exemplo, a taxa de contraste é de 4,48:1. | Evite tamanhos de fonte pequenos e cores de baixo contraste. Neste exemplo, a taxa de contraste é de 3,07:1. |
Interação
Esta seção aborda as práticas recomendadas sobre interações do usuário e elementos relacionados.
Áreas de toque
Aumente as áreas de toque para facilitar a interação.
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).
Neste exemplo, o botão renderizado visualmente tem 24 dp, enquanto a área de toque invisível inclui 12 dp ao redor do ícone para atingir a área de toque de 48 x 48 dp.
Adicione padding ao redor de ícones e botões para aumentar o tamanho da área de toque.
Botões
Use estilos exclusivos para cada estado do botão:
- Ativado
- Desativado
- Passar o cursor (para dispositivos de entrada sem toque)
- Focado
- Compacto
Procure diferenciar os botões por hierarquia também. Por exemplo, botões de ação primários e secundários em um Iniciar menu (consulte as Diretrizes de design do Google Material 2 para botões).
Estilos exclusivos que distinguem cada estado do botão
Entrada do teclado
Para aumentar a acessibilidade do jogo em dispositivos e usuários, ofereça suporte à entrada do teclado para todos os controles de jogabilidade e navegação na tela, além da entrada por toque e mouse.
Para jogos que oferecem suporte à entrada do teclado, permita que os usuários fechem menus no jogo e caixas de diálogo usando a Esc. Isso é feito além de ter 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 , mensagens de erro e pop-ups de informações de Ajuda.
Evite mapear ações para o toque longo da tecla Esc, já que ela é usada para sair do modo de tela cheia em navegadores da Web para computador.
Para jogos que têm listeners de pressionamento de tecla registrados: não use preventDefault()
com Esc eventos de tecla. Quando estiver em tela cheia no Safari, isso fará com que o evento de pressionamento de tecla seja consumido pelo jogo sem sair da tela cheia.
Retorno tátil
Quando apropriado, recomendamos usar o retorno tátil (vibrações) para tornar seus jogos mais divertidos e imersivos.
Momentos importantes do jogo
Esta seção aborda momentos importantes em um jogo que criam uma ótima experiência para o jogador.
Tutorial
Inclua um breve tutorial ou nível de integração para ajudar novos jogadores.
A integração garante que os usuários aprendam a jogabilidade básica e os elementos essenciais do jogo para continuar e aproveitar o jogo.
Como os Playables são rápidos e acessíveis para os usuários começarem a jogar, procure manter a integração o mais mínima possível. Embora nem todos os jogos exijam 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 conhecer para jogar e aproveitar o jogo.
Os tutoriais podem estar no seguinte formato:
- Conjunto de telas no início do jogo (ou, mais idealmente, apresentado contextualmente durante o jogo quando apropriado)
- Nível de tutorial real que o usuário joga
Pausar
Comunique claramente o estado do jogo ao usuário.
Informe claramente ao usuário quando o jogo está pausado e como ele pode retomar o jogo. Evite fazer com que o usuário pense que o jogo congelou ou falhou.
Rotule claramente o estado do jogo como "pausado" e ofereç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 terminou o jogo.
Se o jogo tiver um final definitivo (por exemplo, um número finito de níveis), informe isso claramente ao usuário. Isso evita que o usuário pense que o jogo está quebrado ou congelado. O ideal é que o jogo celebre e parabenize 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 consistir em controles deslizantes para ajustar o volume ou uma alternância de mudo para cada um ou ambos.
Acessibilidade
A acessibilidade no design permite que usuários com habilidades variadas joguem e aproveitem seu jogo.
Ao contrário do design de software e da Web, não existem diretrizes de acessibilidade padrão do setor para design de jogos. Para um bom recurso com diretrizes adicionais sobre design de jogos inclusivo, consulte Diretrizes de acessibilidade de jogos. Recomendamos que você considere como essas diretrizes podem ser aplicadas ao design do seu jogo.