Diretrizes de dimensionamento de telas (aplicativos da Windows Store)
Este tópico descreve as práticas recomendadas para projetar e criar um layout para o seu aplicativo da Windows Store que possa ser dimensionado para os diferentes tamanhos de telas com suporte no Windows 8.
O Windows 8 funciona em diversos tamanhos de tela: de telas pequenas de tablet, telas médias de laptops até telas grandes de desktop ou de computadores all-in-one. Aplicativos da Windows Store podem ser executados em qualquer tamanho de tela suportado pelo Windows 8. No geral, telas grandes também têm resoluções maiores. O resultado é que nessas telas grandes há uma área visível maior para o seu aplicativo aproveitar.
Os termos a seguir são usados neste documento.
| Term | Description |
|---|---|
Tamanho da tela |
O tamanho físico da tela, em polegadas. Normalmente medido pela diagonal. |
Resolução da tela |
O número de pixels que a tela suporta, nos tamanhos horizontal e vertical. Por exemplo: 1366x768. |
Taxa de proporção |
O formato da tela na proporção da largura e altura. Por exemplo: 16:9. |
Tamanho da tela
O maior impacto que o tamanho da tela causa em aplicativos da Windows Store está na resolução da tela. Em telas grandes, há uma resolução maior e, por tanto, mais espaço disponível ou estado real da tela para o seu aplicativo. Os usuários esperam ver mais conteúdo e funcionalidades em telas grandes.
Lidar com o estado real da tela depende da análise do desenvolvedor e do designer do aplicativo. Como o aplicativo aparecerá em telas grandes é definido pelos parâmetros escolhidos para o layout na fase de design e desenvolvimento.
A plataforma, os controles e os modelos foram projetados para se adaptar a diferentes tamanhos de tela. Grande parte do layout do seu aplicativo será dimensionado com pouco esforço ou código adicional; algumas considerações têm de ser feitas para criar um layout de nível superior: as regiões do conteúdo, a navegação do aplicativo e os comandos para garantir que sejam inseridos de maneira previsível e intuitiva em telas maiores.
A seguinte imagem demonstra quão espaçadas as regiões vazias podem ficar por não ter sido criado um layout adaptável para telas grandes.
.png "Uma grande região vazia causada por um layout inflexível.")
Resoluções mínimas de tela
Há duas resoluções de tela principais que seu aplicativo deve permitir:
- A resolução mínima na qual os aplicativos da Windows Store são executados é de 1024x768.
- A resolução mínima necessária para compatibilidade com todos os recursos do Windows 8 (inclusive multitarefa com ajuste) é de 1366x768. Para saber mais sobre os modos de exibição ajustados, veja Diretrizes de modos de exibição de preenchimento e ajustados.
Os aplicativos da Windows Store não podem ser executados em resoluções de 1024x600 ou de 1280x720.
A seguinte tabela apresenta as práticas recomendadas para as resoluções de tela principais.
| Prática | Descrição |
|---|---|
Design para uma resolução mínima de 1024 x 768. |
Essa prática oferece os seguintes benefícios:
|
Projete para uma resolução otimizada de 1366 x 768. |
Essa prática oferece os seguintes benefícios:
|
Projetando para telas grandes
Ao projetar um aplicativo para telas grandes, você deve considerar como o layout, a estética, as proporções e os controles do aplicativo devem ser aplicados a uma área maior. Além disso, qualquer aplicativo pode ter qualquer número de layouts de complexidade variada. Cada layout pode ser considerado individualmente para telas grandes.
A seguinte tabela apresenta as práticas recomendadas para telas grandes.
| Prática | Descrição |
|---|---|
Preencher a tela |
Essa prática oferece o benefício de uma experiência de usuário que é tão imersiva quanto possível independente ao tamanho da tela. Os aplicativos devem parecer que preenchem a tela ao máximo com suas capacidades e parecerem cuidadosamente projetadas para diversos tamanhos de tela. Os usuários que compram monitores maiores esperam que seus aplicativos continuem parecendo bons em telas maiores e preencham a tela com mais conteúdo, onde isso for possível. |
Determine se o seu layout deve ser fixo ou adaptável. |
Há duas técnicas que podem ser usadas para criar um aplicativo dimensionável para diferentes tamanhos de tela. A escolha depende da complexidade do layout e as situações de uso. |
Layout fixo
Um layout fixo é mais comumente visto em jogos ou aplicativos similares a jogos que são compostos principalmente por imagens bitmap. Muitas vezes, esses tipos de layouts possuem uma quantidade fixa de conteúdo (por exemplo, um tabuleiro), onde não é possível mostrar mais conteúdos ou não é possível adicionar mais valores. Esses layout não podem, ou não irão, se mudar ou se adaptar dinamicamente a diferentes tamanhos de tela por terem sido projetados com valores fixos de pixels. O Windows 8 adequa esses aplicativos com uma abordagem de "dimensionar para ajustar" que é criada na plataforma.
.jpg "Layout fixo em diferentes tamanhos de tela")
Layout fixo: Dimensionar para Ajustar
Se você determinar que o aplicativo precisa de um layout fixo que não pode se adaptar a diferentes tamanhos de tela, é possível usar uma abordagem de dimensionar para ajustar para que o layout se adapte a diferentes tamanhos de tela, como mostrado na imagem a seguir.
.png "Dimensionar para ajustar para layout fixo")
A seguinte tabela apresenta as práticas recomendadas para os aplicativos que usam a funcionalidade de dimensionar para ajustar.
| Prática | Descrição |
|---|---|
Iniciar com as resoluções base. |
Ao projetar um layout fixo, inicie projetando o seu layout para as resoluções de linha de base: 1024 x 768 e 1366 x 768. Esse será o layout que será dimensionado para telas grandes. |
Coloque o conteúdo fixo com um controle da ViewBox. |
O controle da ViewBox dimensiona um layout fixo para se ajustar à tela. |
Evite colocar controles adaptáveis (como a AppBar) na ViewBox. |
Esses controles adaptam-se automaticamente a diferentes tamanhos de tela. |
Defina o estilo e cor da letterbox. |
Os layouts fixos de aplicativos não são alterados dinamicamente em resposta às alterações da taxa de proporção ou do tamanho de tela, então a técnica de dimensionar para ajustar centralizará e criará a letterbox (horizontalmente ou verticalmente) do conteúdo do seu aplicativo automaticamente. Definir um estilo e cor da letterbox que complemente o aplicativo ou o hardware pode oferecer uma ótima experiência. A cor da letterbox é definida pela cor da tela de fundo do seu aplicativo de layout superior. Nós recomendamos a escolha de uma cor escura como preto que irá se misturar com o hardware, uma cor neutra como cinza que pareça intencional ou uma cor que combine com a cor do conteúdo do seu aplicativo. |
Forneça vetores ou material em alta resolução. |
A técnica dimensionar para ajustar dimensiona o seu aplicativo para tamanhos com variação de até 200% do tamanho do design para o seu aplicativo em um monitor grande de desktop. Recursos em vetor como Scalable Vector Graphics (SVG), XAMLExtensible Application Markup Language (XAML) ou primitivos de design dimensionam sem dimensionar artefatos ou desfocar. Se materiais de aspecto quadriculado (como imagens bitmap) forem necessários, forneça imagens que são duas vezes maiores que o tamanho do design, assim elas poderão ser reduzidas ao invés de aumentadas. As seguintes imagens demonstram como imagens dimensionada (direita) distorcem ao serem aumentadas em tamanho comparadas às imagens em vetor (esquerda).
|
.png "Redimensionando imagens dimensionadas e em vetor")
Layout adaptável
Layouts adaptáveis são mais comumente vistos no consumo de conteúdo, gerenciamento e criação de aplicativos. Esses layouts são criados mais frequentemente de elementos proporcionais definidos com uma delineação superior. Por exemplo, um aplicativo leitor de notícias possui um cabeçalho, um rodapé e uma região de conteúdo no centro. Esses layouts mudam dinamicamente e adaptam-se a diferentes tamanhos de tela, trazendo mais conteúdo e preenchendo dinamicamente o espaço conforme as regras do layout. O Windows 8 se adequa a esses aplicativo com técnicas de layout adaptável, discutidas de forma mais aprofundada abaixo.
.jpg "Layout adaptável em diferentes tamanhos de tela")
Layout adaptável: gerenciar o espaço
Se você determinar que o layout do seu aplicativo pode suportar um layout adaptável para adequar-se a diferentes tamanhos de tela, use as seguintes análises para determinar como o aplicativo fará uso de todo o espaço disponível da tela.
A seguinte tabela apresenta as práticas recomendadas para os aplicativos que usam um layout adaptável.
| Prática | Descrição |
|---|---|
Determine como cada região adaptável usará o espaço disponível. |
Para cada célula que você identificar como sendo adaptável na direção horizontal e vertical, determine como o layout do aplicativo usará esse espaço em uma tela grande. |
Determine a delineação do layout superior. |
Essa delineação deve descrever o que as regiões superiores do aplicativo são. A delineação deve incluir onde o cabeçalho, a navegação e as regiões de conteúdo estão. A seguinte imagem demonstra uma delineação superior.
|
Determine quais partes do layout são fixas e quais são adaptáveis. |
Para cada célula do traçado de nível superior, determine a célula deverá se dimensionar na horizontal e na vertical quando o aplicativo for exibido em diferentes tamanhos. Essa descrição da delineação superior e o comportamento de dimensionamento podem ser usados para definir os parâmetros para um GridLayout.
|
Determine quais tamanhos cada região adaptável irá adaptar. |
Para cada célula que você identificar como sendo adaptável na direção horizontal e vertical, determine como o layout do aplicativo usará esse espaço em telas grandes. |
Determine como seu aplicativo usará o espaço nos tamanhos adaptáveis. |
Após ter determinado como cada região do seu aplicativo se adapta a diferentes tamanhos, a etapa seguinte é considerar como o aplicativo fará uso do espaço. Existem muitas técnicas que o seu aplicativo pode usar e combinar para usar o espaço; todas as quais são suportadas pela plataforma e controles do Windows 8. |
Certifique-se de que a largura e a altura de todas exibições da coleção estão dimensionadas em 100%. |
Um controle de ListView preenche automaticamente o espaço disponível com mais itens.
|
Use o Layout com várias colunas para o texto, onde for adequado. |
O Layout com várias colunas adiciona colunas automaticamente para uma melhor legibilidade e fluidez do conteúdo para preencher o espaço disponível.
|
Use uma canvas para imagens, onde for adequado. |
Uma canvas se expande automaticamente para preencher o espaço disponível.
|
Mostre mais espaço em branco. |
Mantenha a quantidade de conteúdo do aplicativo mostrado ao compensar com espaços em branco extras.
|
Mostre mais o aplicativo. |
Mostre mais do conteúdo do aplicativo. Dependendo de como será o novo fluxo de seu conteúdo, você também poderá mostrar mais espaços em branco —ou não.
|
.png "Design da delineação superior")
.png "Especificação da delineação")
.png "Uma coleção é exibida em uma tela menor e uma tela maior.")
.png "Um layout de várias colunas é exibido em uma tela menor e uma tela maior.")
.png "Uma área é exibida em uma tela menor e uma tela maior.")
.png "layouts de dois blocos com espaço em branco")
.png "Layouts de dois blocos")
Testando o layout do seu aplicativo
É importante testar os aplicativos em diferentes tamanhos de tela. Nós descobrimos que a maioria das pessoas não tem muitos dispositivos à sua disposição, então construímos um suporte para testar os aplicativos em telas diferentes em ferramentas como o Visual Studio 11. Oferecendo o Windows Simulator, que permite que os desenvolvedores executem seus aplicativos em diversos de tamanhos de telas, e densidades de pixels, como mostrado na imagem a seguir.
.png "Windows Simulator no Visual Studio 11")
O Blend para Microsoft Visual Studio 2012 para Windows 8, mostrado na imagem a seguir, oferece um menu de plataforma que permite aos desenvolvedores projetar dinamicamente um aplicativo em diferentes tamanhos de tela e densidades de pixels. A tela do Blend é atualizada dinamicamente com base na opção de tela escolhida no menu de plataforma.
.png "Menu da plataforma do Blend com uma variedade de opções de tamanho de tela")
Related topics
Build date: 7/2/2013