Espaçamento

O que é?

Os espaçamentos usam de grades de linha de base para ajustar proporções, contêineres e componentes. É usado normalmente para posicionar componentes em uma página de maneira clara, organizada e intuitiva. Refere-se ao espaço entre os elementos da interface do usuário. É medido em incrementos de 8dp. Incrementos de 4dp serão usados único e exclusivamente na criação de alguns componentes que precisam de um espaçamento menor. Mais informações: Sobre espaçamentos e tokens.

Os espaçamentos entre os elementos devem respeitar um sistema de 8 pontos, ou seja a distancia entre um elemento e o tamanho dos containers de elementos devem ser um número de pixels múltiplo de 8.

Anatomia

Abaixo, um demonstrativo dos espaçamentos usados entre elementos nas interfaces, seguindo o regramento dos múltiplos de 8. Mais abaixo, exemplos de uso de cada um deles, conforme surja necessidade.

Hierarquia e espaços em branco

Os elementos que têm mais espaçamento tendem a ser percebidos com mais facilidade, permitem uma boa leitura do conteúdo sem cansar a vista, além de auxiliar na busca de informação na página e atrair o foco.

Ele pode ser usado para dividir seções em uma página ou para ajudar a criar foco em determinados elementos. O espaço em branco ajuda no processamento de informações; muita informação densa pode ser desorientadora ou esmagadora para um usuário. As seções de uma interface do usuário podem ficar densas, mas a página inteira não deve estar cheia; deve haver espaço em branco para deixar os olhos do usuário descansarem.

Aplicação

A imagem abaixo mostra um exemplo de hierarquia e estrutura com base nos espaçamentos. É possível identificá-los na legenda: