Compartilhar via

Tamanhos de tela e pontos de interrupção

  • Artigo

Os aplicativos do Windows podem ser executados em qualquer dispositivo que execute o Windows, incluindo tablets, desktops, TVs e muito mais. Com um grande número de destinos de dispositivo e tamanhos de tela em todo o ecossistema do Windows, em vez de otimizar sua interface do usuário para cada dispositivo, recomendamos projetar para algumas categorias de largura de chave (também chamadas de "pontos de interrupção"):

  • Pequena (menor que 640 px)
  • Média (641 px a 1.007 px)
  • Grande (1.008 px e maior)

Dica

Ao projetar pontos de interrupção específicos, projete a quantidade de espaço de tela disponível para seu aplicativo (a janela do aplicativo), e não o tamanho da tela. Quando o aplicativo é executado em tela inteira, a janela do aplicativo tem o mesmo tamanho da tela, mas quando o aplicativo não está em tela inteira, a janela é menor do que a tela.

Pontos de interrupção

Esta tabela descreve as diferentes classes de tamanho e pontos de interrupção.

Pontos de interrupção do design dinâmico

Classe de tamanho Pontos de interrupção Tamanho típico da tela Dispositivos Tamanhos de janela
Pequeno até 640px 20" a 65" TVs 320x569, 360x640, 480x854
Médio 641 - 1007px 7" a 12" Tablets 960 x 540
Grande 1008px e acima 13" e acima PCs, Laptops, Surface Hub 1.024 x 640, 1.366 x 768, 1.920 x 1.080

Por que as TVs são consideradas "pequenas"?

Embora a maioria das TVs sejam fisicamente muito grandes (40 a 65 polegadas é comum) e tenham resoluções altas (HD ou 4K), projetar para TVs de 1080p colocadas a 10 pés de distância é diferente de projetar para um monitor de 1080p a um pé distância em sua mesa. Quando você considera a distância, as TVs de 1080 pixels são mais como um monitor de 540 pixels muito mais próximo.

O sistema de pixels efetivo do XAML leva automaticamente em consideração a distância de visualização para você. Ao especificar um tamanho para um controle ou um intervalo de ponto de interrupção, você está realmente usando pixels "efetivos". Por exemplo, se você criar um código responsivo para 1080 pixels ou mais, um monitor 1080 usará esse código, mas uma TV 1080p não - porque, embora uma TV 1080p tenha 1080 pixels físicos, ela tem apenas 540 pixels efetivos. O que torna o design para uma TV semelhante ao design para uma tela pequena.

Pixels efetivos e fator de escala

O XAML ajuda ajustando automaticamente os elementos da interface do usuário para que sejam legíveis e fáceis de interagir em todos os dispositivos e tamanhos de tela.

Quando seu aplicativo é executado em um dispositivo, o sistema usa um algoritmo para normalizar a maneira como os elementos da interface do usuário são exibidos na tela. Esse algoritmo de dimensionamento leva em consideração a distância de visualização e a densidade da tela (pixels por polegada) para otimizar o tamanho percebido (em vez do tamanho físico). O algoritmo de dimensionamento garante que uma fonte de 24 px em uma grande tela de apresentação a 10 pés de distância seja tão legível para o usuário quanto uma fonte de 24 px em uma pequena tela portátil a alguns centímetros de distância.

O conteúdo é dimensionado de forma diferente em diferentes dispositivos com base na distância esperada do usuário da tela do dispositivo

Devido à forma como o sistema de dimensionamento funciona, quando você projeta seu aplicativo XAML, você está projetando em pixels efetivos, não em pixels físicos reais. Pixels efetivos (epx) são uma unidade virtual de medição, e são usados para expressar espaçamento e dimensões de layout, independentemente da densidade de tela. (Em nossas diretrizes, epx, ep e px são intercambiáveis.)

Você pode ignorar a densidade de pixels e a resolução real da tela ao projetar. Em vez disso, projete para a resolução efetiva (a resolução em pixels efetivos) para uma classe de tamanho.

Dica

Ao criar modelos de tela em programas de edição de imagem, defina o DPI como 72 e defina as dimensões da imagem para a resolução efetiva para a classe de tamanho que você está direcionando.

Múltiplos de Quatro

Uma imagem de 4 epx sendo dimensionada para várias dimensões sem pixels fracionários.

Os tamanhos, margens e posições dos elementos da interface do usuário devem estar sempre em múltiplos de 4 epx em seus aplicativos XAML.

O XAML é dimensionado em uma variedade de dispositivos com platôs de dimensionamento de 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% e 400%. A unidade base é 4 porque ela pode ser escalada para esses níveis de ajuste predefinidos como um número inteiro (por exemplo, 4 x 125% = 5; 4 x 150% = 6). O uso de múltiplos de quatro alinha todos os elementos da interface do usuário com pixels inteiros e fazem os elementos da interface do usuário terem bordas nítidas. (Observe que esse requisito não se aplica ao texto; o texto pode ter qualquer tamanho e posição.)