Tamanhos de tela e pontos de interrupção

Os aplicativos do Windows podem ser executados em qualquer dispositivo que execute o Windows, que inclui 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.

Classe Size	Pontos de interrupção	Tamanho típico da tela	Dispositivos	Tamanhos de janela
Small	até 640px	20" a 65"	Televisões	320x569, 360x640, 480x854
Médio	641 - 1007px	7" a 12"	Tablets	960 x 540
Grande	1008px e para cima	13" e para cima	Computadores, 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 da XAML leva automaticamente em conta a distância de exibiçã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 de 1080p não será -- porque embora uma TV de 1080p tenha 1080 pixels físicos, ela tem apenas 540 pixels efetivos. O que torna o design de 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 eles sejam legíveis e fáceis de interagir em todos os dispositivos e tamanhos de tela.

Quando seu aplicativo é executado em um dispositivo da plataforma Windows, o sistema usa um algoritmo para normalizar a forma como os os elementos da interface do usuário são exibidos na tela. Esse algoritmo de dimensionamento leva em conta 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 no Surface Hub a aproximadamente 3 m de distância seja tão legível para o usuário quanto uma fonte de 24 px no telefone com tela de 5 polegadas a alguns centímetros de distância.

Por causa de como o sistema de dimensionamento funciona, quando você projeta seu aplicativo XAML, você está projetando em pixels eficazes, 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 de tela real ao projetar. Crie o projeto para obter a resolução efetiva (a resolução em pixels efetivos) de uma classe de tamanho (para obter detalhes, consulte o artigo Tamanhos de tela e pontos de interrupção).

Dica

Ao criar modelos de tela em programas de edição de imagens, defina o DPI para 72 e defina as dimensões da imagem para a resolução efetiva da classe de tamanho pretendida.

Múltiplos de quatro

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

O XAML é dimensionado em uma variedade de dispositivos com escalas 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.)