Use uma linguagem visual consistente
Os nomes dos ícones devem descrever a figura; O significado operacional está na etiqueta de controle.
Ícone Sistema de projeto
Mantenha o ícone reconhecível e significativo em qualquer tamanho.
Conteúdo do checklist
Progresso da revisão
01
Estrutura e significado
Compare as informações e a apresentação no contexto de uso.
02
Interação e usabilidade
Experimente a operação, altere o status e continue trabalhando.
03
Complete a experiência
Verifique se há detalhes que são fáceis de perder ao colocar o design em uso.
O progresso é salvo automaticamente neste navegador.
ORIENTAÇÕES
Como revisar
EXEMPLOS
Exemplos de uso
Use uma linguagem visual consistente
A mesma imagem de “lixo” é rotulada como “Excluir rascunho” ou “Excluir membro” de acordo com o contexto.
Variantes e casos de uso
Estilo dos ícones
Usar um sistema consistente de traços ou formas para ícones com a mesma função na mesma tela.
Comparar ícones novos e antigos no mesmo tamanho: espessura e espaço livre devem ser uniformes.
Exemplo E-mail, vídeo e documentos usam o mesmo conjunto de SVG com traços de 1,6 px.
Tamanho e área de interação
Separar o tamanho do desenho da área de clique; ícones pequenos ainda precisam de uma área de toque adequada.
Testar um ícone de 16 px em um botão móvel: não deve ser necessário tocar exatamente no traço.
Exemplo Um ícone de 18 px fica no centro de uma área de clique de 44 px.
Nomes conforme o significado
Nomear pela função clara, sem exigir que o significado seja adivinhado pelo desenho.
O leitor de tela deve anunciar a ação; ícones decorativos não repetem o rótulo.
Exemplo O botão de sino tem o nome Abrir notificações; ícones ao lado do texto ficam ocultos da árvore de acessibilidade.
Notificações
Conta
Buscar