Diretrizes de dimensionamento de acordo com a densidade de pixels

Artigo
05/15/2015

Aplicativos do Tempo de Execução do Windows (que executam no Windows, Windows Phone, ou em ambos) são automaticamente dimensionados para garantir legibilidade consistente e funcionalidade, independentemente da densidade de pixels de uma tela. Siga estas orientações para preservar a qualidade da interface do usuário de seu aplicativo quando ele for dimensionado para dispositivos com diferentes densidades de pixel.

Observação Essas diretrizes não se aplicam a aplicativos do Windows Phone que usam Silverlight. Para obter orientação específica do Silverlight, veja Multi-resolution apps for Windows Phone 8.

Diferença em densidade de pixels entre um slate HD e um padrão

Descrição

Sem dimensionamento, os tamanho físicos dos objetos na tela ficam menores já que a densidade de pixels de um dispositivo aumenta. Quando os elementos da interface do usuário ficam pequenos demais para serem tocados e o texto pequeno demais para ser lido, o Windows dimensiona o seu aplicativo automaticamente com base nos seguintes platôs de dimensionamento:

Aplicativos da Windows Store:

1,0 (100%, nenhuma escala é aplicada)
1,4 (140% de colocação em escala)
1,8 (180% de colocação em escala)

Aplicativos da Loja do Windows Phone:

1,0 (100%, sem escala)
1,4 (140% de colocação em escala)
2,4 (240% de colocação em escala)

O Windows determina qual opção de escala vai ser usada com base no tamanho da tela física, na resolução de tela, no DPI da tela e no fator forma. Se as especificações da tela seguirem determinado limite, o Windows usará a próxima opção maior de escala. Você pode usar ResolutionScale (Windows) ou RawPixelsPerViewPixel (Windows Phone) para determinar o fator de escala.

Seu aplicativo será dimensionado automaticamente pelo sistema, mas para garantir que sua interface de usuário fique nítida e funcional, independentemente da densidade de pixels de um dispositivo, siga essas diretrizes para preparar seu aplicativo para dimensionamento.

O que fazer e o que não fazer

Use gráficos de vetor dimensionáveis. O Windows dimensiona esses formatos automaticamente, sem artefatos percebíveis. Para aplicativos em JavaScript, use SVG. Você pode usar gráficos definidos por XAML em aplicativos em C#, C++ ou Visual Basic.
Use o carregamento de recursos para imagens bitmap no pacote do aplicativo e forneça uma imagem separada para cada fator de escala. Inclua o fator de escala no nome de seu arquivo de imagem (por exemplo, Assets\Square7070Logo.scale-100.png). Observe que o Windows carrega a imagem certa para a escala atual automaticamente. O artigo Exemplo de dimensionamento de acordo com o DPI mostra como usar o carregamento de recursos para imagens.

Para requisitos de imagem relacionados à certificação de aplicativos, veja Escolhendo as imagens do seu aplicativo. Para ver detalhes sobre convenções de nomenclatura, veja Guia de início rápido: usando recursos de arquivo ou imagem (aplicativos da Windows Store em JavaScript e HTML) ou Guia de início rápido: usando recursos de arquivo ou imagem (aplicativos da Windows Store em C#/VB/C++ e XAML).
Quando criar seus ativos para diferentes platôs de dimensionamento:
- Não projete imagens bitmap em 100% e dimensione-as manualmente para mais. Mesmo se você usar um programa de imagem de alta qualidade, provavelmente você terá resultados desfocados.
- Lembre-se de que dimensionar para menos uma imagem grande de alta resolução nem sempre produzirá resultados nítidos e limpos. No entanto, se o vetor original não estiver disponível, dimensionar manualmente para menos um arquivo de resolução superior é melhor do que dimensionar de um arquivo de baixa resolução.
Se o seu aplicativo carregar imagens no tempo de execução usando código (por exemplo, se você usar o DirectX, e não XAML ou HTML para criar a interface do usuário), use ResolutionScale (Windows) ou RawPixelsPerViewPixel (Windows Phone) para determinar a escala e carregar manualmente as imagens com base na porcentagem da escala.
Use as APIs Thumbnail para imagens do sistema de arquivos. As APIs de miniatura otimizam o desempenho armazenando em cache versões menores da imagem para uso de miniaturas. Veja Acessando o sistema de arquivos eficientemente para ter mais detalhes.
Especifique a largura e a altura das imagens, em vez de usar o dimensionamento automático de imagens, para evitar que os layouts sejam alterados ao carregar imagens maiores.
Use unidades de grade e subunidades tipográficas. Use os tamanhos definidos de grade tipográfica de 20px para unidades de grade principais e de 5px para unidades de grade secundárias, de modo a garantir que não haja distorção nos pixeis dos layouts devido ao arredondamento de pixels. O arredondamento de pixels não ocorrerá em unidades dimensionadas divisíveis por 5px.
Use a consulta de mídia de resolução para imagens remotas da Web. Se o seu aplicativo for em JavaScript e você tiver uma imagem remota da Web, use o recurso de mídia de resolução @media CSS com a propriedade background-image para substituir as imagens no tempo de execução.
Não use imagens que não estejam dimensionadas para múltiplos de 5px. Unidades que não forem múltiplas de 5px poderão experienciar uma distorção de pixels quando dimensionadas em 140%, 180% e 240%.