Práticas recomendadas para o Xbox

  • Artigo

Por padrão, todos os aplicativos UWP serão executados em Xbox One sem nenhum esforço extra de sua parte. No entanto, se quiser que o aplicativo brilhe, encante os clientes e concorra com as melhores experiências de aplicativo em Xbox, você deverá seguir as práticas abaixo.

Observação

Antes de começar, examine as diretrizes de design dispostas em Projetando para TV e Xbox.

Para criar as melhores experiências para Xbox One

Desativar: modo mouse

Os usuários do Xbox adoram seus controladores. Para otimizar a entrada do controlador, desabilite o modo do mouse e habilite a navegação direcional (também conhecida como navegação e interação de foco XY). Cuidado com armadilhas de foco e interface do usuário inacessível.

Desenhe: um retângulo de foco apropriado para uma experiência de 10 pés

Como a maioria dos usuários do Xbox permanece sentada na sala de estar diante da TV, lembre-se de que o retângulo de foco padrão é difícil de ver a dez pés de distância. Para garantir que o elemento da interface do usuário com o foco de entrada esteja claramente visível para o usuário sempre, siga as diretrizes de Foco visual. Em XAML, você terá esse comportamento gratuitamente quando o aplicativo for executado em Xbox, mas aplicativos HTML precisarão usar um estilo CSS personalizado.

Integre-se: à classe SystemMediaTransportControls

Os usuários do Xbox querem controlar aplicativos de mídia com o Xbox Media Remote, a Cortana (especialmente os comandos de voz "Executar" e "Pausar") e o Xbox SmartGlass. Para obter esses recursos gratuitamente, o aplicativo deve usar a classe SystemMediaTransportControls, incluída automaticamente nos controles de mídia do Xbox. Se o aplicativo tiver controles de mídia personalizados, verifique se eles se integram à classe SystemMediaTransportControls para oferecer esses recursos aos usuários. Se você estiver criando um aplicativo de música em segundo plano, integre-o à classe SystemMediaTransportControls para garantir que os controles de música em segundo plano funcionem corretamente na guia multitarefa do Xbox.

Considere: desenhar a borda da tela

Muitas TVs cortam as bordas da tela, de maneira que todo o conteúdo importante do aplicativo deva ser exibido dentro da área de segurança da TV. A UWP usa o overscan para manter o conteúdo dentro da área de segurança da TV, mas esse comportamento padrão pode desenhar uma borda óbvia ao redor do aplicativo. Para proporcionar a melhor experiência, desative o comportamento padrão e siga as instruções em Como desenhar a interface para a borda da tela.

Importante

Se você desabilitar overscan, será sua responsabilidade se certificar de que os elementos interativos e o texto permaneçam dentro da área de segurança da TV.

Considere: o uso de cores seguras para TV

As TVs não manipulam intensidades de cores extremas, assim como fazem os monitores de computadores. Evite cores de alta intensidade no aplicativo, de maneira que os usuários não vejam efeitos de faixa estranhos ou uma imagem lavada. Além disso, lembre-se de que as diferenças entre as TVs indicam que as cores que aparente corretas na sua TV podem parecer muito diferentes para os usuários. Leia Cores para entender como fazer seu aplicativo ficar ótimo para todos!

Lembre-se: você pode desabilitar a escala

Os aplicativos UWP são dimensionados automaticamente para garantir que os elementos da interface do usuário, como controles e fontes, permaneçam legíveis em todos os dispositivos. Os aplicativos que usam XAML são dimensionados em 200%, e os aplicativos que usam HTML são dimensionados em 150%. Se você quiser mais controle sobre a aparência do aplicativo no Xbox, desabilite o fator de escala padrão para usar as dimensões de pixel reais de uma HDTV (1920x1080). Dê uma olhada em Como desativar o dimensionamento para obter informações sobre como adaptar seu aplicativo para ficar ótimo no Xbox.

Confira também