Noções básicas de design de conteúdo para aplicativos do Windows

  • Artigo

Este artigo fornece algumas dicas e exemplos práticos para ajudar você a criar o conteúdo do seu aplicativo: A lógica de espaçamento do Windows, usando a rampa de tipo para demonstrar hierarquia, listas e grades e como agrupar controles.

Espaçamento e medianizes

O uso de espaçamento e medianizes de tamanho consistente agrupa semanticamente uma experiência em componentes separados. Esses valores mapeiam nossa lógica de canto arredondado e juntos ajudam a criar um layout coeso e utilizável.

Dois botões separados por 8 pixels.

8epx entre botões

Um botão e um submenu separados por 8 pixels.

8epx entre botões e menus suspensos

Um controle e um cabeçalho separados por 8 pixels.

8epx entre o controle e o cabeçalho

Um controle e um rótulo separados por 12 pixels

12epx entre o controle e o rótulo

Duas áreas de conteúdo separadas por 12 pixels.

12epx entre áreas de conteúdo

Uma superfície contendo texto com medianizes de 12 pixels em ambos os lados.

16epx entre o texto de superfície e a borda

Texto + hierarquia

Nossa rampa de tipos (link) foi projetada para fornecer uma variedade de tamanhos que podem ajudar a comunicar a hierarquia em um aplicativo.

Um exemplo de texto usando estilos de título, subtítulo e corpo quando há espaço adequado.

Usando Título, Legenda e Corpo com espaçamento de 12epx.

Um exemplo de uso de Corpo forte em vez de Título em um espaço confinado.

Ao diferenciar um título em um espaço de interface do usuário confinado, use “Body Strong” para o título sem qualquer espaçamento adicional entre blocos de texto.

Um exemplo de uso do estilo Legenda em um espaço confinado.

Use o tamanho da legenda para espaços muito confinados em que texto é necessário, como botões de comando.

Listas e grades

Há vários estilos de lista e grade que podem ser criados. Veja a seguir uma variedade de composições usadas no Windows.

Uma lista de exemplo com itens de lista de vários elementos.

Para listas de várias linhas, use Corpo e Legenda da rampa de tipo e ícones de 32epx.

Use “Body Strong” para cabeçalhos de seção.

Um exemplo de listas horizontais.

Ao usar ícones ou elementos de imagem de pessoa para itens de grade, use Texto de legenda alinhado ao centro.

Uma lista de exemplo contendo itens de lista grandes.

Use o estilo Corpo para o texto principal e alinhe à esquerda da imagem se a lista tiver elementos gráficos grandes com texto.

Usando controles

Alguns exemplos de como controles podem se relacionar entre si em configurações comuns.

Um exemplo de um expansor com controles filho.

Exemplos que mostram como usar um controle de expansão (link) com estilos de lista e controles comuns. Controles devem ser alinhados à direita com 16epx entre o botão de controlee expansor.

Um exemplo de como os controles dentro de um expansor são alinhados.

Este exemplo mostra o alinhamento de controles quando colocados dentro do expansor. Recue os controles a 48epx.