Espaçamento, grid e ritmo visual em UI mobile

Por que espaçamento é uma “feature” de usabilidade

Em UI mobile, espaçamento não é só estética: ele controla leitura (o olho encontra blocos e entende a estrutura) e toque (o dedo precisa de área e respiro para não errar). Quando o espaçamento é consistente, a interface parece “calma” e previsível; quando varia sem regra, surgem saltos visuais: elementos que parecem desalinhados, seções que “gritam” sem motivo e componentes que mudam de tamanho aparente de uma tela para outra.

Pense no espaçamento como um sistema com três objetivos práticos:

• Separar o que é diferente (seções, grupos, ações).
• Agrupar o que pertence junto (label + campo, item + descrição).
• Guiar o olhar e o dedo (fluxo vertical claro e áreas clicáveis confortáveis).

Vocabulário essencial: margens, gutters, padding e gaps

Margens (margins)

Espaço fora de um elemento, usado para afastá-lo de outros elementos ou das bordas da tela. Ex.: distância entre um card e o próximo.

Padding

Espaço dentro do componente, entre o conteúdo e a borda. Ex.: respiro interno de um botão ou card.

Gutters

Espaço entre colunas de um grid. Em mobile, mesmo quando você usa uma única coluna, o conceito aparece como “respiro lateral” e separação entre blocos alinhados.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

Gaps (espaçamento entre itens)

Distância entre elementos de uma lista, entre ícone e texto, entre linhas de um formulário, etc. Em layouts modernos, você costuma controlar isso como uma variável (ex.: gap: 8).

Grid em mobile: estrutura para consistência

Um grid é uma malha invisível que ajuda a alinhar componentes e manter ritmos. Em mobile, o mais comum é trabalhar com:

• 1 coluna para conteúdo principal (listas, formulários, textos).
• 2 colunas para cards pequenos, atalhos, galerias.
• Grid de 4 ou 8 colunas como base interna (mesmo que você não “mostre” colunas, elas ajudam a definir larguras e alinhamentos).

Regras práticas de grid (sem “matemática demais”)

• Defina margens laterais fixas (ex.: 16 ou 24) para a maioria das telas. Isso cria um “trilho” consistente.
• Use gutters constantes quando houver colunas (ex.: 8 ou 12).
• Alinhe bordas: títulos, campos, cards e listas devem começar e terminar nos mesmos eixos sempre que possível.

Exemplo de configuração simples e comum:

• Margem lateral: 16
• Gutter (quando houver 2 colunas): 8
• Espaçamento vertical entre seções: 24

Escala de espaçamento: pare de “inventar números”

Uma escala de espaçamento é um conjunto pequeno de valores permitidos. Em vez de usar 7, 9, 13, 18 “porque parece bom”, você escolhe uma escala e aplica em tudo. Isso reduz inconsistências e acelera decisões.

Escala recomendada (exemplo)

Uma escala bem prática para mobile:

• 4: microajustes (ícone-texto, separação mínima)
• 8: espaçamento padrão entre elementos próximos
• 12: separação moderada (subgrupos)
• 16: separação padrão de blocos e margens laterais
• 24: separação entre seções
• 32 (opcional): respiro grande (telas com poucos elementos)

Você pode usar uma escala baseada em 4 (4, 8, 12, 16, 24, 32) porque ela se adapta bem a densidades diferentes e é fácil de manter.

Como escolher qual valor usar (heurística rápida)

Ritmo visual: repetição que o usuário “sente”

Ritmo visual é a repetição consistente de espaçamentos e alinhamentos ao longo da tela. Em mobile, o ritmo mais importante costuma ser o ritmo vertical (de cima para baixo), porque a navegação é majoritariamente por scroll.

Como o ritmo aparece na prática

• Listas: cada item tem a mesma altura e o mesmo padding interno; separadores (ou espaços) repetem o mesmo valor.
• Formulários: distância entre campos é constante; grupos têm separação maior.
• Cards: padding interno igual em todos; distância entre cards igual.

Quando você quebra o ritmo sem intenção (ex.: um item da lista com padding 10 e outro com 16), o usuário percebe como “algo está torto”, mesmo sem saber explicar.

Consistência entre componentes e telas (evitando “saltos”)

“Saltos” visuais acontecem quando o mesmo tipo de componente muda de espaçamento dependendo da tela, ou quando telas do mesmo fluxo usam margens diferentes. Para evitar:

1) Defina tokens de espaçamento

Mesmo que você não use um design system completo, crie nomes para os valores e use sempre:

space-1 = 4
space-2 = 8
space-3 = 12
space-4 = 16
space-5 = 24
space-6 = 32

Na implementação, isso pode virar constantes, variáveis de tema ou estilos utilitários. O importante é: não criar novos valores sem necessidade.

2) Padronize “contratos” de componentes

Defina regras internas para componentes comuns:

• Botões: padding vertical e horizontal fixos; distância entre ícone e texto fixa (ex.: 8).
• Campos: altura mínima consistente; padding interno consistente; espaçamento entre label e input consistente.
• Cards: padding interno padrão (ex.: 16); gap interno entre título e descrição (ex.: 8).

3) Use as mesmas margens laterais em telas do mesmo app

Se uma tela usa margem lateral 16 e outra usa 20, o usuário sente que o conteúdo “dança” ao navegar. Escolha um padrão (ex.: 16) e só quebre quando houver um motivo claro (ex.: tela de leitura com foco em texto pode usar 24).

Áreas mínimas de toque e separação entre elementos

Espaçamento também é uma barreira contra erros de toque. Duas regras práticas:

1) Tamanho mínimo do alvo de toque

Garanta que botões, ícones clicáveis e itens de lista tenham uma área tocável confortável. Um valor de referência comum é 44–48 px de altura/largura mínima para alvos de toque. Se o ícone visual for menor, aumente o padding ao redor para atingir a área mínima.

2) Separação entre alvos próximos

Quando dois alvos ficam lado a lado (ex.: ícones na barra de ações, botões “Cancelar” e “Salvar”), deixe um espaço que reduza toques acidentais. Como regra inicial:

• 8 de gap mínimo entre alvos
• 12–16 quando a ação é crítica (ex.: excluir) ou quando há risco de confusão

Em listas, prefira itens com altura suficiente e padding vertical consistente para que cada item seja um alvo claro.

Método de auditoria de espaçamento (passo a passo)

Use este método quando uma tela “parece estranha” ou quando você herdou uma UI inconsistente. A ideia é mapear os espaçamentos reais, reduzir a variedade e alinhar tudo a uma escala.

Passo 1 — Capture a tela e marque os espaços

Pegue um screenshot e identifique visualmente:

• Margens laterais (conteúdo até a borda)
• Espaçamentos verticais entre seções
• Gaps entre itens (lista, cards, campos)
• Padding interno de componentes (card, botão, input)

Dica prática: foque primeiro nos 5–10 espaços mais repetidos (os que mais afetam o ritmo).

Passo 2 — Meça e liste os valores encontrados

Crie uma lista com os valores reais. Exemplo típico de tela inconsistente:

• Margem lateral: 14
• Entre título e subtítulo: 6
• Entre campos: 10
• Padding de card: 15
• Entre cards: 18

Passo 3 — Agrupe por “função” (não por número)

Antes de trocar números, classifique cada espaço:

• Micro (dentro do componente: ícone-texto, linhas curtas)
• Padrão (entre elementos relacionados: label-input, itens de lista)
• Seção (entre blocos diferentes: grupos, cards, áreas da tela)

Passo 4 — Converta para a escala (unifique para poucos valores)

Agora substitua por valores da escala (4/8/12/16/24/32), escolhendo o mais próximo que preserve a intenção:

Meta prática: ao final, a tela deve usar poucos valores (idealmente 4 a 6 valores no total), repetidos de forma previsível.

Passo 5 — Verifique alinhamentos e “trilhos”

Depois de unificar números, confira:

• Todos os blocos começam no mesmo eixo esquerdo?
• Cards e listas respeitam a mesma margem lateral?
• Elementos dentro de um card alinham entre si (título, texto, botão)?

Passo 6 — Teste de toque (checagem rápida)

• Todo alvo de toque tem pelo menos 44–48 px de área?
• Há gap suficiente entre alvos próximos?
• Itens de lista são fáceis de tocar sem acertar o vizinho?

Receitas rápidas para telas comuns

Lista de itens (ex.: resultados, mensagens, produtos)

• Margem lateral do conteúdo: 16
• Altura mínima do item: 48 (ou mais, se houver duas linhas)
• Padding interno do item: 12–16
• Gap entre itens (se não houver divisor): 8–12
• Separação entre seções de lista: 24

Formulário (ex.: cadastro, endereço, pagamento)

• Margem lateral: 16
• Label → campo: 8
• Campo → próximo campo: 12–16
• Grupo de campos → próximo grupo: 24
• Botão principal: altura/alvo mínimo 44–48, padding consistente

Cards (ex.: resumo, destaque, conteúdo)

• Padding interno do card: 16
• Gap interno (título → descrição): 8
• Gap entre cards: 12–16
• Se o card for clicável, garanta área tocável confortável e evite colocar múltiplos alvos pequenos muito próximos dentro dele