Espaçamento e grade no Material: o que a escala decide

A escala de espaçamento responde a uma pergunta simples: quanto espaço fica entre duas coisas. Ela faz isso com uma unidade base única. O Material Design mede o sistema inteiro numa escala de 8dp, em que space100 vale 8dp (em inglês), e esse número único mantém padding, gap e margem comparáveis entre telas. O que o guia não resolve é o layout em si. Ele entrega a escala e a grade, e deixa com você a tela que precisa de mais respiro por motivo editorial. Para esse caso, a saída é registrar a exceção num token próprio.

O que a escala de espaçamento decide

A escala cobre três distâncias e nada além delas: padding dentro de um elemento, gap entre elementos e margem fora de um elemento (em inglês). O padding afasta o conteúdo da borda do contêiner. O gap separa dois elementos lado a lado ou empilhados. A margem segura o elemento longe do pai ou da borda da tela. O guia coloca padding e gap à frente da margem (em inglês), porque margem em elemento filho raramente é uniforme e custa mais tokens para manter alinhada.

A direção também faz parte do sistema. O espaçamento pode ser horizontal, vertical ou preso a uma borda, e o guia nomeia essas bordas como leading, trailing, top e bottom. Leading e trailing trocam de lado em idiomas da direita para a esquerda (em inglês), então a regra funciona nos dois sentidos sem precisar reescrever nada.

Grade, margem e calha

Uma grade é coluna, calha e margem, e a escala aparece primeiro na calha. O NN/g define a grade como colunas, calhas e margens, com a calha separando o conteúdo de colunas diferentes (em inglês). A largura da coluna costuma ser percentual, para acompanhar a tela, enquanto a largura da calha é valor fixo que muda no breakpoint. O NN/g acrescenta uma regra que decide se a grade se sustenta: manter o conteúdo dentro das colunas e deixar a calha vazia (em inglês).

A grade do Material muda a contagem de colunas conforme o breakpoint, e o guia posiciona barras e painéis nela, não num mapa fixo de pixels. A margem é a parte que tem folga. As réguas de margem, nas palavras do guia, vêm com espaço para deixar o layout mais apertado ou mais solto (em inglês). A mesma página lembra que uma grade de fotos pode ocupar a largura toda, enquanto um campo de busca guarda margem maior. A escala permite essa escolha, mas quem decide é você.

Os degraus da escala e o que cada um resolve

O Material define um conjunto linear de valores e deixa o vão entre eles vazio de propósito. A lista de tokens vai de space0 a space900, com space100 valendo 8dp como unidade base (em inglês). Degraus pequenos resolvem as partes internas de um controle. Ali 2dp, 4dp, 6dp e 10dp aparecem como unidades aninhadas (em inglês), para os pares apertados que um múltiplo de oito não nomeia. O meio cobre o trabalho do dia a dia. O exemplo do próprio guia é um contêiner de busca com 8dp de padding vertical, 8dp de gap horizontal e 24dp de margem horizontal (em inglês). O topo da faixa, até space900 em 72dp, separa blocos grandes entre si.

O guia também diz que define só os valores mais recomendados e espera que o produto estenda a escala (em inglês) quando precisa de mais.

Densidade e o que ela cobra do alvo de toque

A densidade ganha espaço de tela, e quem paga é o tamanho do que a pessoa precisa tocar. O guia fixa um piso que não se move: o alvo padrão deve ter no mínimo 48x48 CSS pixels (em inglês), e um componente não deve encolher abaixo disso por padrão. A densidade de componente funciona como escala numerada. Ela começa em 0, o padrão de cada componente, e vai para o negativo conforme o espaço diminui. Um degrau costuma cortar 4dp do padding superior e inferior, ou da altura total (em inglês).

Em dois lugares isso pesa mais. O guia diz para não aumentar a densidade em interfaces feitas em torno de uma tarefa focada, como escolher num menu (em inglês). Diz o mesmo para componentes que avisam a pessoa de uma mudança, como snackbars ou diálogos (em inglês). A densidade também é opcional: a pessoa liga nas configurações, e essas configurações precisam manter o alvo inteiro para a escolha poder ser revertida (em inglês).

Espaçamento e token

Um token de espaçamento é um nome que resolve para um valor, então a decisão é tomada uma vez e reusada. O guia monta a corrente assim: atributos de componente apontam para tokens do sistema, que resolvem para valores finais (em inglês). São os tokens do sistema que substituem o número solto no código. Quando o token certo não existe, o guia manda criar pelo padrão de multiplicador, em que space225 vale 18dp, de 8dp vezes 2,25 (em inglês). Essa é a saída documentada, e é o mesmo movimento para o layout editorial que precisa de mais respiro do que a escala oferece.

O guia também amarra o espaçamento à escala do texto. Com o texto a 200%, o mesmo espaçamento deve ser mantido por padrão (em inglês), porque rótulo maior espremido por gap menor fica mais difícil de ler. O NN/g chega ao mesmo ponto por outro lado e observa que um elemento com mais espaço ao redor é lido como um grupo e chama mais atenção (em inglês).

O erro comum de valor fora da escala

O erro mais comum é o número solto, escolhido para uma tela e depois copiado para as outras. Um padding de 13px ou um gap de 15px fica fora da escala, então nunca vira token, e a tela seguinte inventa um valor vizinho. O NN/g viu o padrão em formulário: quando o espaçamento entre rótulo e campo está errado, a pessoa hesita sobre o que digitar (em inglês). O olho lê proximidade como relação, e um valor que a escala não reconhece quebra essa leitura sem avisar.

O que medir

Três checagens resolvem quase tudo. O alvo de toque primeiro, em 48x48 CSS pixels, porque é o único número com piso de acessibilidade atrás dele. O alinhamento entre blocos depois, já que o olho percebe um bloco fora da linha mais rápido do que um espaçamento alguns pixels menor. O respiro em tela pequena vem por último, e aqui o guia é claro: a quantidade de ar é decisão, não padrão. O NN/g é direto sobre o custo: chama otimizar a interface para o espaço disponível de estratégia central de usabilidade (em inglês) e alerta contra espremer informação em buracos minúsculos (em inglês).

A escala compensa quando a mesma quantidade de espaço significa a mesma coisa em toda tela, e a grade compensa quando as colunas carregam o conteúdo e a calha fica limpa. Nenhuma das duas substitui a decisão sobre o layout à sua frente. Quando uma tela precisa de mais respiro do que a escala permite, nomeie a exceção em um token próprio em vez de largar um número em um arquivo.

Os degraus daqui estendem o post sobre Material Design, o post sobre tipografia no Material, o post sobre tokens e tema do Material e o post sobre produtos de dados densos.