Diretrizes para redimensionar em layouts estreitos

Artigo
07/22/2015

Projete a interface do usuário de seu aplicativo de modo que ela se ajuste quando um usuário redimensioná-la para uma exibição retangular ou estreita. As diretrizes neste tópico se aplicarão se você planejar:

Modificar a largura mínima do aplicativo para 320 pixeis, em vez dos 500 pixel padrão (layout estreito).
Projetar o aplicativo para mudar para um layout vertical quando o usuário redimensioná-lo, de modo que a altura seja maior do que a largura (layout retangular).

Para obter recomendações mais gerais, veja Guidelines for supporting multiple screen sizes. Para obter diretrizes específicas sobre o design de jogos para layouts estreitos, veja o manual de ideias para Jogos.

Se desejar ver um exemplo de aplicação dessas diretrizes, consulte:

Exemplos

Layouts estreitos

Por padrão, a largura mínima de um aplicativo da Windows Store é de 500 pixeis. Veja aqui um aplicativo com largura de 500 pixels.

Aplicativo com largura mínima padrão de 500 pixels.

E aqui, um aplicativo com largura de 320 pixels.

Aplicativo com largura mínima estreita de 320 pixels.

Se escolher fornecer suporte a uma largura mínima mais estreita que 500 pixeis, faça algumas alterações de design para que o aplicativo funcione e possa ser usado nesse tamanho. Siga as orientações da seção O que fazer e o que não fazer para garantir que seu aplicativo seja eficaz em larguras mais estreitas que 500 pixeis.

Layouts retangulares

Além disso, você poderá fazer alterações no design do aplicativo sempre que a altura for maior do que a largura. Por exemplo, projete o aplicativo para movimento panorâmico na vertical, em vez de na horizontal, quando a altura for maior do que a largura.

Veja aqui um aplicativo que se move panoramicamente na horizontal, quando está em tela inteira.

Aplicativo que se move panoramicamente na horizontal, em tela inteira

E este é o aplicativo quando a altura é maior do que a largura e. O movimento panorâmico do aplicativo agora é vertical.

Aplicativo com altura maior do que a largura e que se move panoramicamente na vertical

Meu aplicativo deve fornecer suporte a uma largura mínima de 320 pixeis?

Fornecer suporte a larguras mais estreitas que o padrão mínimo dependerá da função para a qual os usuários empregarão seu aplicativo. Aqui estão alguns cenários comuns nos quais você deve dar suporte a larguras estreitas, até 320 pixels:

A capacidade multitarefa é importante para seu aplicativo.
Você quer que os usuários mantenham seu aplicativo na tela.
Seu aplicativo interage com outro aplicativo em um cenário complementar.
Seu aplicativo se adapta bem a larguras estreitas.

Se você mantiver a largura mínima padrão de 500 pixeis, não haverá necessidade de qualquer consideração especial para as larguras estreitas do seu aplicativo.

O que fazer e o que não fazer

Se o aplicativo fizer o movimento panorâmico na horizontal quando estiver em tela inteira, alterne para um movimento na vertical quando a altura da janela do aplicativo for maior que a largura.
Para acomodar o tamanho estreito, faça as seguintes alterações no design quando a largura do aplicativo for inferior a 500 pixeis:
- Use o estilo de botão de voltar menor. Para saber mais sobre tamanhos de botão de voltar, veja Lista de ícones de símbolos.
- Use 20 pixels para a margem esquerda.
- Use o tamanho 20 pt para o cabeçalho do aplicativo.
- Use os valores de deslocamento menores para animações de transições de páginas e animações de transições de conteúdo.
Este é o aplicativo de calculadora em uma largura normal:

Este é o mesmo aplicativo com largura de 320 pixeis. Sua margem esquerda é de 20 pixeis e a fonte do cabeçalho foi reduzida ao tamanho de 20pt, de acordo com as recomendações sobre layout estreito.
Se o aplicativo fizer o movimento panorâmico na horizontal quando estiver em tela inteira, dimensione a exibição de modo que apenas uma coluna ou painel sejam exibidos quando a altura da janela do aplicativo for maior que a largura. Decida a largura exata em que o aplicativo deve alternar para uma única coluna ou painel. No modo de exibição em coluna única ou painel único, certifique-se de incluir a navegação para que os usuários passem de um painel para outro.
Projete o layout do aplicativo e todos os controles de modo que se dimensionem até o tamanho mínimo e para que possam ser utilizados em janelas de aplicativo rectangulares e estreitas. Controles importantes a serem considerados:
Não conduza o usuário para outra parte do aplicativo quando o tamanho da janela é modificado para uma largura estreita.
Não forneça suporte a larguras mais estreitas que o padrão mínimo (500 pixeis) se você não puder preservar a maioria das funcionalidades de seu aplicativo em tamanhos estreitos.