Tamanhos de ecrã e pontos de interrupção

As aplicações Windows funcionam numa grande variedade de dispositivos, desde tablets e portáteis a computadores de secretária, grandes monitores e televisores. Em vez de otimizar a sua interface para todos os tamanhos de ecrã, desenhe algumas categorias de largura-chave chamadas pontos de interrupção:

  • Pequeno (menor que 640px)
  • Médio (641px a 1007px)
  • Grande (1008px ou maior)

Tip

Quando desenhas para pontos de interrupção específicos, desenha para a quantidade de espaço disponível para a tua aplicação (a janela da aplicação), não para o tamanho físico do ecrã. Quando a sua aplicação corre em ecrã completo, a janela da aplicação corresponde ao tamanho do ecrã. Quando isso não acontece, a janela é mais pequena do que o ecrã.

Breakpoints

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

Pontos de interrupção de design responsivo

Classe de tamanho Breakpoints Tamanho típico do ecrã Dispositivos Tamanhos das janelas
Pequeno até 640px 20" a 65" Televisores 480x854, 540x960
Medium 641 - 1007px 7" a 12" Tablets 960x540
Grande 1008px e acima 13" e acima PCs, Portáteis, Surface Hub 1024x640, 1366x768, 1920x1080

Porque é que as televisões são consideradas "pequenas"?

A maioria das TVs é fisicamente grande (40 a 65 polegadas é comum) e tem resoluções elevadas (HD ou 4K). No entanto, desenhar para uma TV 1080p que se vê a 3 metros de distância é diferente de desenhar para um monitor 1080p na sua secretária. Quando se considera a distância de visualização, os 1080 píxeis da TV são mais como um monitor de 540 píxeis, muito mais próximo.

O sistema de píxeis eficaz do XAML contabiliza automaticamente a distância de visualização. Quando especificas um tamanho para um controlo ou um intervalo de pontos de interrupção, usas píxeis efetivos . Por exemplo, se criar código responsivo para 1080 pixels ou mais, um monitor 1080p usa esse código, mas uma TV 1080p não — porque, embora a TV tenha 1080 píxeis físicos, tem apenas 540 píxeis efetivos. Isto torna o design para uma TV semelhante a desenhar para um ecrã pequeno.

Píxeis efetivos e fator de escala

O XAML ajusta automaticamente os elementos da interface para que sejam legíveis e fáceis de interagir em todos os dispositivos e tamanhos de ecrã.

Quando a sua aplicação corre num dispositivo, o sistema utiliza um algoritmo para normalizar a forma como os elementos da interface são exibidos no ecrã. Este algoritmo de escalonamento tem em conta a distância de visualização e a densidade do ecrã (píxeis por polegada) para otimizar o tamanho percebido em vez do tamanho físico. O algoritmo garante que uma fonte de 24 px num ecrã grande a 3 metros de distância é tão legível como uma fonte de 24 px num ecrã pequeno a poucos centímetros de distância.

Diagrama que mostra como o conteúdo é escalado de forma diferente em dispositivos a diferentes distâncias de visualização.

Quando desenhas a tua aplicação XAML, desenhas em pixels efetivos, não em píxeis físicos reais. Os píxeis efetivos (epx) são uma unidade virtual de medida usada para expressar as dimensões e o espaçamento do layout, independentemente da densidade do ecrã. (Nas nossas diretrizes, epx, ep e px são usados de forma intercambiável.)

Podes ignorar a densidade de píxeis e a resolução real do ecrã quando desenhas. Em vez disso, conceba para a resolução efetiva (a resolução em píxeis efetivos) para determinada classe de tamanho.

Tip

Ao criar maquetas de ecrã em programas de edição de imagem, define a resolução para 72 DPI e define as dimensões da imagem para a resolução efetiva da classe de tamanho a que se destina.

Múltiplos de quatro

Uma imagem de 4 px redimensionada para várias dimensões sem píxeis fracionários.

Os tamanhos, margens e posições dos elementos da interface devem estar sempre em múltiplos de 4 epx nas suas aplicações XAML.

O XAML adapta-se a uma gama de dispositivos com patamares de escala de 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% e 400%. A unidade base é 4 porque pode ser dimensionada para estes patamares, resultando num número inteiro (por exemplo, 4 × 125% = 5, 4 × 150% = 6). A utilização de múltiplos de quatro alinha todos os elementos da IU a píxeis inteiros e garante contornos nítidos e bem definidos. (O texto não tem este requisito; o texto pode ter qualquer tamanho e posição.)

  • Last updated on