Diretrizes para suportar múltiplos tamanhos de tela

Artigo
05/15/2015

Aplicativos de Windows e Windows Phone Store podem ser executados em uma variedade de dispositivos com tamanhos e resoluções de tela diferentes. Os usuários também podem modificar a orientação da tela ou, se o aplicativo for executado em Windows, redimensioná-lo continuamente para uma largura mínima ou exibi-la ao lado de outros aplicativos. Se um usuário executa seu aplicativo em um dispositivo de telefone, tablet, notebook, desktop ou PPI, certifique-se de que sua interface de usuário tem boa aparência e mantém sua funcionalidade. Siga essas diretrizes ao projetar uma interface de usuário que se adapte a telas de todos os tamanhos e orientações.

Para diretrizes específicas sobre como adaptar um aplicativo da Windows Store a tamanhos estreitos de janela, consulte Guidelines for resizing to narrow layouts.

Descrição

Seu aplicativo provavelmente será executado em uma variedade de tamanhos de tela, que podem variar desde uma pequena tela de telefone até uma tela média de notebook, e talvez até mesmo a tela de um dispositivo PPI ou multifuncional. Dependendo do tamanho e resolução da tela, a quantia de área visível da qual seu aplicativo pode tirar vantagem varia.

aplicativo de exemplo em um tablet

aplicativo de exemplo em um monitor de desktop grande

Os termos a seguir são importantes para entender a escala em diferentes tamanhos de tela.

Termo	Descrição
Tamanho da tela	O tamanho físico da tela, em polegadas. Normalmente medido pela diagonal.
Resolução da tela	O número de pixels que a tela suporta, nos tamanhos horizontal e vertical. Por exemplo: 1366x768.
Taxa de proporção	O formato da tela na proporção da largura e altura. Por exemplo: 16:9.

A plataforma, os controles e os modelos foram projetados para se adaptar a diferentes tamanhos, resoluções e taxas de proporção de tela. Embora grande parte do layout do seu aplicativo será ajustada automaticamente a mudanças da tela, você precisa considerar seu layout de nível superior, as regiões do conteúdo, a navegação do aplicativo e os comandos para garantir que sejam inseridos de maneira previsível e intuitiva em todas as telas.

As tabelas a seguir mostram os tamanhos de tela mais importantes, a serem considerados no design do aplicativo.

Tamanho de tela inteira (resolução efetiva em pixel)	Descrição do dispositivo.
1366x768	Tabletes, conversíveis e muitos notebooks (taxa de proporção 16:9); resolução de linha de base de notebook/desktop
1920x1080	Notebooks e dispositivos grandes (taxa de proporção 16:9)
2560x1440	Dispositivo tudo-em-um muito grande (taxa de proporção 16:9)
1280x800 e 800x1280	Dispositivos pequenos - orientação primária retrato (taxa de proporção 16:10)
1024x768 e 768x1024	Dispositivos pequenos - orientação primária paisagem (taxa de proporção 4:3)
1371x857 e 857x1371	Dispositivos pequenos (taxa de proporção 16:10)
384x640	Telefone de 4,5" (taxa de proporção 15:9)
400x711	Telefone de 4,7" (taxa de proporção 16:9)
450x800	Telefone de 5,5" (taxa de proporção 16:9)
491x873	Telefone de 6" (taxa de proporção 16:9)

Ao projetar um aplicativo para ser executado em Windows mas não em Windows Phone, considere o tamanho da tela disponível quando um usuário tem dois aplicativos que dividem a tela, ou redimensiona um aplicativo para sua largura mínima.

Tamanho de tela dividida (resolução efetiva em pixel)	Descrição
672x768	Tela dividida ao meio em um dispositivo 1366x768
500x768	Tamanho mínimo padrão para aplicativo; tela dividida ao meio em um dispositivo 1024x768
320x768	Tamanho mínimo para aplicativos que dão suporte a uma largura mínima de 320 pixels

Para recomendações de dimensionamento, consulte Guidelines for scaling to pixel density.

Tamanhos importantes de janela em tela inteira e em tela dividida

O que fazer e o que não fazer

Quando possível, use controles flexíveis para dar suporte a conteúdos que refluam automaticamente. Os controles flexíveis incluem o XAML Grid control, grade CSS, layout multicoluna CSS e ScrollViewer control. Os controles de grade, por exemplo, tornam flexíveis seções específicas de sua interface de usuário para preencher o espaço disponível dependendo da resolução de tela do dispositivo de exibição e atribuir conteúdo a células diferentes com base no espaço de tela disponível.
Projete seu layout e controles de aplicativo para ajustar-se a telas de tamanho mínimo e funcionar com elas:
- Largura padrão mínima para aplicativos da Windows Store: 500px.
- Largura mínima não padrão para aplicativos da Windows Store: 320px.
- Mínimo (não ajustável) para aplicativos da Loja do Windows Phone: 384px (retrato) e 640px (paisagem).
A interface de usuário e controles precisam ser utilizáveis em todos os tamanhos de tela, até os mínimos (listados acima). Controles importantes a serem considerados:
Projete seu aplicativo para usar efetivamente o espaço em uma tela grande e para ter um layout dinâmico com refluxo automático. Não deixe grandes espaços vazios.
Teste se o aplicativo funciona bem na maioria dos tamanhos de dispositivos. Além de testar o aplicativo em dispositivos reais, você pode usar o simulador do Microsoft Visual Studio para aplicativos da Windows Store a fim de simular a execução do aplicativo em diferentes tamanhos de tela físicas, resoluções e orientações.
Especifique um tamanho mínimo para todos os input fields. Os tamanhos mínimos garantem que os campos de entrada não desapareçam quando o usuário redimensiona a janela.
Teste se os campos de entrada do seu aplicativo não ficam obstruídos pelo teclado virtual.
Tome cuidado ao utilizar o posicionamento absoluto; se usado inadequadamente, ele impede que sua interface do usuário responda a mudanças no tamanho e na orientação da janela. Em vez de codificar seu layout, utilize posições computadas no tempo de execução para layout de sua interface de usuário.
Crie designs para diferentes densidades de pixel. Para saber mais, veja Diretrizes de dimensionamento para densidade de pixel.

Somente aplicativos da Windows Store

Certifique-se de que seu aplicativo funciona em qualquer largura, até um mínimo padrão de 500 pixels. Consulte Guidelines for narrow layouts para obter recomendações específicas.
Se o seu aplicativo funcionar bem em tamanhos menores e você quiser incentivar os usuários a manter seu aplicativo na tela, você pode dar suporte a uma largura mínima não padrão de 320 pixels.
Garanta que os usuários possam continuar suas tarefas, quando redimensionam aplicativos. Por exemplo, é possível manter a página atual do aplicativo e o estado de barras de rolagem, seleção e foco.
Botões de Suporte em todos os tamanhos de tela. Verifique se submenus e painéis são dimensionados adequadamente.

Observação No Windows 8, os usuários podem redimensionar aplicativos para somente três estados de exibição: tela inteira, exibição ajustada e preenchimento de tela. No Windows 8.1, os usuários podem redimensionar os aplicativos para qualquer largura, desde tela inteira até a largura mínima.

Diretrizes de uso adicional

Suporte automático para mudanças na orientação

Os usuários podem girar seus telefones, tablets e monitores. O Windows gerencia tanto orientações em retrato quanto em paisagem automaticamente, desde que seu aplicativo não esteja utilizando um layout fixo. Você só precisa considerar como a largura do aplicativo afeta seu layout.

Consulte a seção layout fixo abaixo para mais informações sobre quando pode ser apropriado privar-se de um layout flexível.

Layouts de paisagem e de retrato

Comportamento do aplicativo redimensionado (somente para aplicativos da Windows Store)

Se o usuário tiver vários aplicativos na tela, observe essas interações exclusivas de interface do usuário:

Se o usuário invocar botões, esses botões serão aplicados ao último aplicativo usado pelo usuário, independentemente do tamanho do aplicativo ou da posição dele na tela.
Entre um aplicativo e outro na tela, há uma alça. Os usuários redimensionam as janelas deslizando a alça. A alça também mostra o aplicativo que tem o foco.
Se o usuário captura a alça entre aplicativos e tenta redimensionar um deles para uma largura menor do que o mínimo estabelecido, o aplicativo sai da tela.
Se o usuário gira um dispositivo ou monitor enquanto vários aplicativos estão na tela, os aplicativos não mudam a orientação.

Layouts fixos

A maioria dos aplicativos pode utilizar um layout dinâmico que se adapta a mudanças no tamanho e resolução da tela, além de realizar refluxo de conteúdo automaticamente. Mas em alguns casos, seu aplicativo pode exigir um layout fixo. Aplicativos que não são focados em conteúdo ou que não dependem da integridade dos gráficos, como aplicativos de jogos, precisam utilizar layouts fixos (absolutos). O Windows adequa esses aplicativos com uma abordagem de "dimensionar para ajustar" que é criada na plataforma.

Se você determinar que o aplicativo precisa de um layout fixo que não se adaptará automaticamente a diferentes tamanhos de tela, é possível usar uma abordagem de dimensionar para ajustar para que o layout se adapte a diferentes tamanhos de tela, como mostrado nas imagens a seguir.

Dimensionar para ajustar um jogo de layout fixo

Para implementar a abordagem dimensionar para ajustar, faça o seguinte:

Projete seu layout para a resolução de linha de base, por exemplo, 1366x768 pixels (computador/tablet) ou 384x640 pixels (telefone). Esse será o layout que será dimensionado para telas grandes.
Coloque o conteúdo fixo dentro de um controle ViewBox (ViewBox in JavaScript and HTML ou Viewbox in C#/VB/C++ and XAML). O controle ViewBox dimensiona um layout fixo para se ajustar à tela.
Verifique se o controle ViewBox está dimensionado para 100% de largura e altura.
Defina as propriedades de tamanho fixo do ViewBox com os tamanhos de pixel fixos de seu layout (por exemplo, 1366x768 ou 384x640).
Escolha uma cor para o formato letterbox. Os controles fixos não são alterados dinamicamente em resposta às alterações da taxa de proporção ou do tamanho de tela, então a técnica de dimensionar para ajustar centraliza e muda automaticamente o conteúdo de seu aplicativo para o formato letterbox (na horizontal ou na vertical). A cor do layout do aplicativo de nível superior determina a cor das barras de formato letterbox. Nós recomendamos escolher uma cor escura como preto que se misture com o hardware, uma cor neutra como cinza que pareça intencional ou uma cor que combine com a cor do conteúdo de seu aplicativo.
Forneça vetores ou material em alta resolução. A técnica dimensionar para ajustar dimensiona o seu aplicativo para tamanhos com variação de até 180% (para Windows) ou 280% (para Windows Phone) do tamanho do design para o seu aplicativo em um monitor grande de desktop. Recursos em vetor como SVG (Scalable Vector Graphics), XAML (Extensible Application Markup Language) ou primitivos de design dimensionam sem dimensionar artefatos ou desfocar. Se materiais de aspecto quadriculado (como imagens bitmap) forem necessários, forneça materiais MRT.

As seguintes imagens demonstram como imagens dimensionada (direita) distorcem ao serem aumentadas em tamanho comparadas às imagens em vetor (esquerda).
Não posicione controles adaptativos em um controle ViewBox.