Ícones no UI Design - Como utilizar?

Princípio de Yu Hai - Ícones

Visão geral da seção: Nesta aula, o foco é sobre ícones e como eles podem ajudar na interpretação do usuário para realizar uma ação mais rápida e fácil dentro da interface.

Importância dos ícones

• Os ícones substituem textos e tornam a interface mais limpa e minimalista.

• As pessoas relacionam o mundo real com o mundo digital, por isso os ícones devem fazer essa relação.

• Exemplos de correlação entre o mundo real e digital são: lixeira para excluir, casa para ir à home, lupa para pesquisar.

Dicas para criar ícones eficazes

• Os ícones devem ser minimalistas sem muitos detalhes.

• Dividir em dois grupos: cores informacionais (não clicáveis) e ícones interativos (clicáveis).

• A área de toque no ícone deve ser pensada um pouco maior que o tamanho do objeto.

• Testar tamanhos grandes e pequenos do ícone para ver se ele é utilizável.

• Manter consistência nos arredondamentos dos ícones.

Consistência nos arredondamentos dos ícones

• Decidir se vai usar apenas stroke ou preenchimento com investimento nos arredondamentos dos ícones.

• Manter consistência nos arredondamentos dos ícones quando estiverem desativados ou ativados.

Consistência na Interface

Visão Geral da Seção: Nesta seção, o palestrante discute a importância da consistência na interface do usuário e como alcançá-la.

Importância da Consistência

• A consistência é importante para garantir uma experiência de usuário uniforme.

• Ícones devem ter uma consistência visual para evitar confusão.

• O texto que acompanha os ícones deve ser coerente em termos de tamanho e peso da fonte.

Controle dos Pesos

• É importante controlar o peso das fontes usadas ao lado dos ícones.

• Usar uma tipografia grossa ao lado de um ícone fino não faz sentido.

• Ao aplicar essas práticas, é possível alcançar uma padronização mais efetiva na interface do usuário.