Definindo o layout de uma página de aplicativo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Você pode usar o padrão de layout descrito aqui para definir os elementos da interface do usuário do layout em suas páginas de aplicativo. Seguir um padrão constante para margens, cabeçalhos de páginas, largura de medianizes e outros elementos mantém a unidade dos aplicativos e ajuda os usuários a compreender as manipulações no sistema com facilidade.

A interface do usuário no Windows 8 tenta manter uma silhueta consistente em todos os seus aplicativos. A principal característica da silhueta são margens amplas nas bordas superior, inferior e esquerda. Essas margens ajudam os usuários a compreender a direção do movimento panorâmico horizontal do conteúdo.

Veja esses recursos em ação como parte da nossa série Recursos do aplicativo, do começo ao fim: Interface do usuário de aplicativo da Windows Store, do início ao fim

Usando o sistema de grade

Antes de falarmos sobre a silhueta do Windows 8, falaremos um pouco sobre o uso do sistema de grade do Windows 8. O sistema de grade é uma ferramenta de design que ajuda a proporcionar unidade visual em aplicativos diferentes, fornecendo ao mesmo tempo uma estrutura para variação e mantendo o interesse do usuário. O sistema de grade é incorporado aos modelos do desenvolvedor e projetamos nossos controles e coleções com o sistema de grade em mente.

A grade é composta por unidades e subunidades. A medida básica é a unidade. Uma unidade é igual a 20 × 20 pixels. Cada unidade é dividida em subunidades de 5 × 5 pixels. Há 16 subunidades por unidade quadrada. A imagem a seguir mostra a grade no canto superior esquerdo de uma tela. A imagem está ampliada para mostrar pixels, subunidades e unidades.

Cabeçalho da página

A base do cabeçalho da página deve ser 5 unidades, ou 100 pixels do topo. A margem esquerda do cabeçalho da página tem 6 unidades, ou 120 pixels. O cabeçalho da página do Windows 8 é o Conjunto Estilístico SegoeUI 20, leve. Para obter mais informações sobre Conjuntos Estilísticos, consulte as diretrizes e lista de verificação para texto e tipografia.

Observação  No Windows 8.1 Update, os usuários podem mover o mouse para a borda superior da tela para revelar uma barra de títulos. Os usuários também podem mover o mouse para a borda inferior da tela para revelar a barra de tarefas da área de trabalho. Quando o usuário move o mouse para longe de uma das bordas, a barra de títulos e a barra de tarefas ficam ocultas. Os usuários não podem revelar a barra de títulos ou a barra de tarefas por toque. Quando exibidas, a barra de títulos e a barra de tarefas podem ocultar a interface do usuário de seu aplicativo ou elementos de comando, portanto, considere isso quando definir a posição dos elementos no layout de seu aplicativo.

Região de conteúdo

A região de conteúdo tem uma margem superior de 7 unidades, ou 140 pixels. A margem esquerda tem 6 unidades, ou 120 pixels. A margem inferior é flexível. Para movimento panorâmico horizontal do conteúdo, ela não deve ter mais do que 6,5 unidades (130 pixels) nem menos do que 2,5 unidades (50 pixels). Para movimento panorâmico vertical do conteúdo, as margens superior e esquerdas continuam as mesmas. Não há especificações para a margem inferior, pois o conteúdo rola para fora da tela.

Valores de preenchimento horizontal

O preenchimento horizontal entre itens de conteúdo varia dependendo dos itens. Itens com bordas fixas (como imagens e blocos do usuário) têm 2 subunidades (ou 10 pixels) de preenchimento entre o bloco e o texto que o acompanha. As listas têm 2 unidades (ou 40 pixels) de preenchimento entre colunas. Os itens com bordas fixas têm 2 subunidades (ou 10 pixels) de preenchimento entre colunas.

Valores de preenchimento vertical

O preenchimento vertical entre itens de conteúdo também varia dependendo dos tipos de itens. As listas de blocos e texto têm 1 unidade (ou 20 pixels) de preenchimento vertical entre itens em uma linha. Os objetos com bordas fixas têm 2 subunidades (ou 10 pixels) de preenchimento entre itens em uma coluna.

Preenchimento horizontal entre grupos

O preenchimento entre grupos tem 4 unidades, ou 80 pixels. Esse preenchimento é amplo, proporcionando separação suficiente para permitir a distinção fácil entre um grupo e o seguinte quando o usuário realiza movimentos panorâmicos.

Tópicos relacionados

Diretrizes de experiência do usuário para layout e dimensionamento

Diretrizes e lista de verificação de texto e tipografia