Layout
Posição, espaçamento e alinhamento carregam hierarquia antes mesmo de uma palavra ser lida. Este skill constrói essa estrutura e a testa sob estresse: redimensione, traduza, espelhe para RTL.
Escreva cada correção no sistema de estilos do projeto. Os números abaixo são pontos de partida para interfaces sem um sistema de densidade estabelecido; onde um se aplicar, use-o como escrito, em vez de um substituto familiar. Mantenha o cromo de plataforma intencional, ferramentas profissionais compactas e tokens do projeto onde eles ainda passarem nos testes de estresse.
Áreas de toque e comportamento de foco pertencem a better-accessibility. Raio, sombras e animação pertencem a better-ui. Comprimento de linha e espaçamento de texto pertencem a better-typography.
Agrupe com espaço, não com linhas
Agrupe primeiro com espaço, depois com formas de fundo, por último com linhas separadoras e apenas onde o espaço sozinho não consegue carregar a estrutura. O espaçamento entre grupos deve ser no mínimo 2× o espaçamento dentro de um grupo (8px intra-grupo para 16px+ inter-grupo), ou o agrupamento será lido como ruído. As arestas de alinhamento e a ordenação por importância estão em grouping-and-alignment.md.
Mantenha controles distintos do conteúdo
Dê a cada elemento interativo uma forma de fundo, uma borda ou uma zona de posicionamento consistente. Um controle estilizado como o texto estático ao lado não é lido como um controle.
Alinhe a arestas compartilhadas
Escolha arestas de alinhamento e mantenha-se fiel a elas; cada aresta solta é lida como ruído. Use um degrau de espaçamento do projeto por nível de subordinação, onde 16px é um padrão útil.
Use propriedades lógicas para layout dependente de direção: padding-inline-start, margin-inline-end. Reserve left e right físicos para geometria genuinamente física.
Ordene por importância
O conteúdo mais importante fica próximo ao topo e à borda de início. A ordem de leitura flui de cima para baixo, da borda de início para a borda de fim. Pense em início e fim, não em esquerda e direita.
Dê dicas sobre conteúdo oculto
A divulgação progressiva precisa de um indicador visível. Use a dica estabelecida do projeto, ou deixe o próximo item espiar 16–32px além da borda de rolagem, ou mostre um controle de divulgação. Conteúdo oculto sem nenhuma dica pode muito bem não existir.
Espaço de respiro entre alvos
Sem um sistema de densidade estabelecido, comece com 12px entre controles com borda ou preenchimento adjacentes e 24px ao redor de controles sem borda, apenas com texto e ícone. Layouts compactos podem usar menos, desde que as áreas de toque do better-accessibility não se sobreponham e os controles permaneçam distintos. As margens de layout e receitas de ponto de quebra estão em spacing-and-adaptivity.md.
Recue botões das bordas
Em layouts de conteúdo, mantenha botões de largura total dentro das margens do layout com um raio visível, começando perto de 16px inline no celular. Ações de borda a borda funcionam quando seguem o cromo de plataforma estabelecido, levam em conta áreas seguras e permanecem distinguíveis da IU do sistema.
Conteúdo vaza, controles flutuam
Fundos e mídia se estendem até as bordas da janela de visualização. Controles e texto permanecem dentro das margens do layout e áreas seguras (env(safe-area-inset-*)). O cromo fixo flutua acima da camada de conteúdo, em vez de bloqueá-la.
Mantenha a estrutura até quebrar
Os pontos de quebra vêm do conteúdo, não de predefinições de dispositivo. Mantenha o layout expandido enquanto ele realmente couber e colapse tarde. Prefira consultas de contêiner para adaptação em nível de componente e teste os tamanhos menor e maior primeiro.
Planeje crescimento e corte
Strings traduzidas crescem, e as curtas crescem proporcionalmente mais, então um rótulo de botão de uma palavra é a coisa mais arriscada na tela. Não coloque largura ou altura fixa em um contêiner de texto e deixe as linhas quebrarem. Teste com pseudo-localização e uma localidade representativa, em vez de orçar uma porcentagem.
Nunca estacione uma ação crítica onde redimensionar ou rolar a corte. Mantenha-a no fluxo normal ou em cromo estável adequado ao produto.
Antes de finalizar
| Erro | Correção |
|---|---|
margin-left / padding-right em um layout localizável | margin-inline-start / padding-inline-end |
| Botão de layout de conteúdo toca a borda da janela de visualização | Recue dentro das margens do projeto; mantenha o cromo de plataforma intencional |
| Pontos de quebra em 768/1024 porque são os padrões | Quebre onde o conteúdo realmente para de caber |
| Contêiner de texto com largura fixa dimensionado para um idioma | max-width e quebra; teste pseudo-localização |
| Ação primária na parte inferior propensa a corte de um painel | Posicionamento fixo ou cromo estável com preenchimento de área segura |
Relatórios
Severidade. HIGH bloqueia conteúdo ou uma ação em uma janela de visualização suportada. MEDIUM prejudica hierarquia, ordem de leitura ou adaptabilidade. LOW é polimento de alinhamento ou espaçamento isolado.
Verificação. Sem navegador: propriedades lógicas no lugar de físicas, consultas de contêiner e mídia contra a lista de janelas de visualização suportadas e ordem do DOM contra a ordem de leitura pretendida. Com um: cada largura suportada, zoom de 200% e o espelho RTL. Relate cada verificação que você não pôde executar como Não verificado.
Formato. Agrupe as descobertas sob o princípio que cada uma viola, ordenadas por severidade, uma linha por causa raiz listando cada local onde aparece:
| Severidade | Local | Antes | Depois | Por que |
|---|
Local é caminho/para/arquivo:linha. Por que nomeia o princípio e o impacto no usuário.
Termine com Bloqueio quando qualquer HIGH permanecer, Aprovar caso contrário, deixando o restante na tabela como trabalho a fazer. Nunca Aprovar cobertura que você não inspecionou. Sem nada a relatar, declare "Nenhuma descoberta de layout acionável" e relate a verificação.