Tamanhos de tela e pontos de interrupção

Windows aplicativos são executados em uma ampla gama de dispositivos, desde tablets e laptops até desktops, monitores grandes e TVs. Em vez de otimizar a interface do usuário para cada tamanho de tela, projete com base em algumas categorias principais de largura chamadas pontos de quebra:

  • 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), não o tamanho da tela física. Quando seu aplicativo é executado em tela inteira, a janela do aplicativo corresponde ao tamanho da tela. Quando isso não acontece, a janela é menor 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 480x854, 540x960
Médio 641 - 1007px 7" a 12" Tablets 960 x 540
Grande 1008px e acima 13" e acima Computadores, Laptops, Hub Surface 1.024 x 640, 1.366 x 768, 1.920 x 1.080

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

A maioria das TVs é fisicamente grande (40 a 65 polegadas é comum) e tem altas resoluções (HD ou 4K). No entanto, projetar para uma TV de 1080p visualizada a cerca de 3 metros de distância é diferente de projetar para um monitor de 1080p sobre a sua mesa. Quando você contabiliza a distância de exibição, os 1080 pixels da TV são mais como um monitor de 540 pixels que é muito mais próximo.

O sistema de pixels efetivos do XAML leva em conta a distância de visualização automaticamente. Ao especificar um tamanho para um controle ou um intervalo de pontos de interrupção, você usa pixels efetivos . Por exemplo, se você criar um código responsivo para 1080 pixels ou mais, um monitor de 1080p usará esse código, mas uma TV 1080p não — porque embora a TV tenha 1.080 pixels físicos, ela tem apenas 540 pixels efetivos. Isso torna a criação de uma TV semelhante à criação de uma tela pequena.

Pixels efetivos e fator de escala

O XAML ajusta 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, o sistema usa um algoritmo para normalizar como os elementos da interface do usuário são exibidos na tela. Esse algoritmo de dimensionamento leva em conta a distância de exibição e a densidade da tela (pixels por polegada) para otimizar o tamanho percebido em vez do tamanho físico. O algoritmo garante que uma fonte de 24 px em uma tela grande a 3 metros de distância seja tão legível quanto uma fonte de 24 px em uma tela pequena a poucos centímetros de distância.

Diagrama mostrando como o conteúdo é dimensionado de forma diferente em dispositivos a diferentes distâncias de exibição.

Ao projetar seu aplicativo XAML, você projeta pixels efetivos, não pixels físicos reais. Pixels efetivos (epx) são uma unidade virtual de medida usada para expressar dimensões de layout e espaçamento, independentemente da densidade da tela. (Em nossas diretrizes, epx, ep e px são usados de forma intercambiável.)

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

Dica

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

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.

A XAML é dimensionada em uma variedade de dispositivos com níveis de ajuste de dimensionamento de 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% e 400%. A unidade base é 4 porque é dimensionada para esses planaltos como um número inteiro (por exemplo, 4 × 125% = 5, 4 × 150% = 6). O uso de múltiplos de quatro alinha todos os elementos da interface do usuário com pixels inteiros e garante bordas nítidas e bem definidas. (O texto não tem esse requisito; o texto pode ter qualquer tamanho e posição.)

  • Last updated on