Espaçamento / Grade Sistema de projeto

Mantenha o ritmo do layout consistente conforme o conteúdo e as telas mudam.

7 verificações · 2 grupos de conteúdo

Conteúdo do checklist

Progresso da revisão

Estrutura e significado

Compare as informações e a apresentação no contexto de uso.

Use um conjunto de distância comumEscolha níveis de distância regulares em vez de ajustar cada ponto arbitrariamente.Distinguir o espaçamento dentro de um elemento do espaçamento entre seções da página.Exemplo Etiquetas e caixas de entrada estão próximas; Os dois grupos de configurações apresentam uma lacuna maior.Nomeado de acordo com o propósitoUse variáveis para preenchimento de elementos, espaçamento de lista e margens de página.Separe o preenchimento dentro do componente do espaçamento do layout entre regiões; o mesmo valor numérico não significa a mesma função.Travas de coluna e calhaIndique como dividir as colunas, o espaço entre as colunas e a margem externa em cada nível de largura.Especifique o número de colunas, o espaço entre colunas e a margem externa em cada tamanho; O conteúdo real deve caber na grade em vez de apenas no padrão do bloco de cores.Altere o layout de acordo com o conteúdoDefina um ponto de transição quando o conteúdo começar a ficar lotado e mantenha as regras de compartilhamento.Defina pontos de mudança de layout quando o conteúdo precisar, não apenas pelo nome do dispositivo; verifique as larguras entre dois pontos especificados.

Interação e usabilidade

Experimente a operação, altere o status e continue trabalhando.

Tenha densidade apropriada ao contextoSe apropriadoSe o modo compacto for suportado, o texto, as áreas de toque e os pontos de foco ainda serão legíveis.O modo compacto ainda deve preservar a área interativa e a legibilidade; Reduza a quantidade de decoração antes de dimensionar botões ou texto.Compare o eixo de alinhamentoVerifique se os títulos, caixas de entrada e ações têm as mesmas guias da intenção.Experimente conteúdo longo e zoomVerifique se há rótulos longos, várias linhas e amplie o texto antes de finalizar a grade.Experimente rótulos longos, múltiplas colunas, traduções longas e grandes níveis de zoom; Erros de malha geralmente aparecem nesses casos antes dos dados de amostra.

O progresso é salvo automaticamente neste navegador.

ORIENTAÇÕES

Como revisar

Use um conjunto de distância comum

Distinguir o espaçamento dentro de um elemento do espaçamento entre seções da página.

EXEMPLOS

Exemplos de uso

Use um conjunto de distância comum

Etiquetas e caixas de entrada estão próximas; Os dois grupos de configurações apresentam uma lacuna maior.

Espaçamento / Grade Sistema de projeto

Estrutura e significado

Interação e usabilidade

Como revisar

Use um conjunto de distância comum

Exemplos de uso

Use um conjunto de distância comum

Encontrar um checklist

Nenhum checklist encontrado