Sistema de cores Sistema de projeto

Use cores que tenham uma função clara e mantenham o significado em cada interface.

8 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.

Determine a paleta de cores de baseDefina níveis de cores compartilhados com nomes e valores gerenciados.Os componentes devem usar cores de acordo com sua função, em vez de escolher diretamente uma tonalidade.Exemplo A variável “texto de erro” é usada para erros de formulário e avisos de falha no envio.Associe cor à funçãoSepare cor de fundo, texto, borda, ação e resposta.Os nomes das cores por função ajudam a alterar a interface em um só lugar; Não deixe que cada elemento escolha sua própria tonalidade base.Existem cores suficientes para o statusVerifique padrão, passe o mouse, clique, foco, selecionado e desativado.Unificar cor de respostaMantenha o mesmo significado para sucessos, avisos, erros e informações em todo o produto.Experimente a mesma condição em todos os fundos usados, tanto claros quanto escuros; Cores de erro que são fáceis de ler em um plano de fundo podem não ser utilizáveis em outro plano de fundo.

Interação e usabilidade

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

Meça os pares de cores usadosCompare texto, ícones e controles com o plano de fundo real, não apenas com a paleta de cores.Grave pares permitidos de texto e plano de fundo para que os desenvolvedores não precisem adivinhar quais cores combinam.Testes claros e escuros de forma independenteDefina valores individuais para cada interface e verifique todos os estados.Teste cada par de cores depois de trocar de skin, em vez de apenas mudar de claro para escuro; Os destaques e as fronteiras precisam de funções próprias.Mantém a identificação intacta e legívelUtilize as cores da marca em locais apropriados; Ajuste o matiz quando o contraste for insuficiente.Se a cor de identificação for difícil de ler, mantenha-a decorativa e use uma cor clara o suficiente para textos ou operações significativas.Não deixe que a cor carregue seu significado sozinhaIncorpore rótulos, formas ou símbolos quando precisar diferenciar dados e status.

O progresso é salvo automaticamente neste navegador.

ORIENTAÇÕES

Como revisar

Determine a paleta de cores de base

Os componentes devem usar cores de acordo com sua função, em vez de escolher diretamente uma tonalidade.

EXEMPLOS

Exemplos de uso

Determine a paleta de cores de base

A variável “texto de erro” é usada para erros de formulário e avisos de falha no envio.

Sistema de cores Sistema de projeto

Estrutura e significado

Interação e usabilidade

Como revisar

Determine a paleta de cores de base

Exemplos de uso

Determine a paleta de cores de base

Encontrar um checklist

Nenhum checklist encontrado