Diretrizes de dimensionamento de acordo com a densidade de pixels

Applies to Windows and Windows Phone

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

Tópicos relacionados

Para designers
Escolhendo as imagens do seu aplicativo (Windows Store)
Tamanhos de imagem de bloco
Interações de design por toque
Diretrizes para suportar múltiplos tamanhos de tela
Guidelines for thumbnails
Para desenvolvedores (HTML)
Guia de início rápido: usando recursos de arquivo ou imagem
recurso de mídia de resolução
DisplayInformation
ResolutionScale
RawPixelsPerViewPixel
Diretrizes para suportar múltiplos tamanhos de tela
Para desenvolvedores (XAML)
Guia de início rápido: usando recursos de arquivo ou imagem
DisplayInformation
ResolutionScale
RawPixelsPerViewPixel
Diretrizes para suportar múltiplos tamanhos de tela
Exemplo
Dimensionamento de acordo com exemplo de DPI

 

 

Mostrar:
© 2014 Microsoft