Compartilhar via


Diretrizes para redimensionar em layouts estreitos

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:

    Este é o aplicativo de calculadora em uma largura normal:

    Aplicativo de calculadora compartilhando a tela com aplicativo Viagem Bing

    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.

    Aplicativo de calculadora com largura de 320 pixels, cabeçalho e margens menores

  • 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.

    Aplicativo com movimento panorâmico vertical em tela inteira, com dois painéis

    Aplicativo com movimento panorâmico vertical em largura estreita, com um único painel

  • 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.

Tópicos relacionados

Para desenvolvedores (HTML)

Guia de início rápido: definindo layouts de aplicativo

CoreWindow.SizeChanged

OffsetWidth property

Para desenvolvedores (XAML)

Guia de início rápido: projetando aplicativos para diferentes tamanhos de janela

CoreWindow.SizeChanged

Windows.UI.Xaml.VisualStateManager

Exemplos

Exemplo de layout de janelas redimensionadas para largura de 320 pixels

Exemplo de layout de janelas com altura maior do que a largura