Tamanhos de tela e pontos de interrupção

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.

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

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, crie para a resolução efetiva (a resolução em pixels efetivos) para 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 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

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