Aplicação da percepção visual humana ao design de ícones; uma continuação do artigo sobre efeitos ópticos

Você também pode ler este artigo em chinês .

1. Use a grade ótica

Um ícone de interface geralmente pode ser inscrito em um dos formatos básicos: um retângulo de paisagem, um retângulo de retrato, um retângulo diagonal, um círculo, um triângulo ou um quadrado. O desfoque mostra que eles têm peso visual semelhante, pois se transformam mais ou menos nos mesmos blobs.

Dependendo da forma geral do ícone, inscreva-o em um quadro correspondente da grade ótica. Por exemplo, os ícones quadrados são mais compactos do que os triangulares ou alongados.

Quanto mais compacto for um ícone, menos espaço ele precisa. Quanto mais bordas nítidas ou pequenos detalhes um ícone tiver, mais espaço na prancheta ele deverá ocupar.

Cuidado para não se tornar escravo da sua rede. É para ajudar, não para restringir. Se um ícone for visualmente melhor com alguns elementos salientes, deixe-os sobressair.

2. Cuide da grade de pixels

Para tornar os ícones nítidos em telas não retina, atenha-se à grade de pixels e dê preferência a bordas de 2 pixels para ícones de linha. As bordas centralizadas de 2 pixels geralmente fornecem espessura suficiente e silhuetas nítidas.

Se você escolher bordas de 1 pixel para ícones, elas devem ser externas ou internas, mas não centralizadas.

As bordas de 1 pixel centralizadas tornam um ícone desfocado na escala de 100%, embora pareça nítido se você aumentar o zoom.

Defina os pontos inicial e final das diagonais seguindo a grade de pixels. Diagonais com ângulos de 45°, 30° e 60° parecem mais nítidas do que diagonais com ângulos irregulares como 13,7° ou 81°. Milhões de pessoas usam dispositivos com telas de baixa resolução hoje em dia, é por isso que a nitidez dos ícones ainda é importante.

3. Mantenha um certo nível de detalhe

É melhor começar um conjunto de ícones a partir do ícone mais complexo. Ele definirá o nível de detalhe e ajudará a criar ícones com o mesmo peso visual.

Quando os ícones possuem diferentes níveis de detalhamento, os mais detalhados atraem mais a atenção do usuário e parecem visualmente mais pesados.

4. Controle o tamanho mínimo da folga

O espaço entre os elementos vizinhos de um ícone não deve ser muito pequeno ou inconsistente em todo o conjunto. Defina o espaço mínimo e mantenha-o em todos os lugares para evitar que o contorno “grude”.

Para ícones de linha, é bom deixar o espaço mínimo igual à espessura da linha. As linhas devem ser distintamente separadas ou conectadas com precisão, nunca quase conectadas.

5. Remova as peças repetidas

Nos conjuntos de ícones, você pode ter detalhes repetidos. Livre-se deles para focar a atenção do espectador no que há de diferente. Quanto menos ruído visual você vê, mais clara é a sua compreensão. Se os usuários já perceberam com o que trabalham, não há necessidade de repetir isso novamente. Por exemplo, evitar ícones baseados em envelopes não fará as pessoas pensarem que este não é um aplicativo de e-mail.

Esta regra também diz respeito a várias decorações — molduras, planos de fundo — em torno de um ícone. Se não ajudam a ler um ícone, atrapalham a leitura de um ícone.

6. Siga um estilo escolhido

Não misture volume de exibição com representação frontal em um conjunto de ícones. A consistência de estilo ajudará os usuários a reconhecer ícones e entender que eles têm igual importância ou estado.

O mesmo princípio funciona com ícones de linha e ícones preenchidos. Se você misturá-los, as pessoas podem pensar que eles têm importância ou status diferentes. Claro, a menos que você queira isso deliberadamente. Por exemplo, um ícone preenchido é para o comando de tecla e os ícones de linha são para outros comandos.

É bom ter duas variantes de cada ícone nas interfaces. Um ícone de linha — para o estado desativado ou regular. Um ícone preenchido — para o estado clicado.

7. Utilize um sistema de dimensionamento baseado em 2

A grade de 8 pixels e o layout de 12 colunas são usados ​​para muitas interfaces como mais flexíveis em comparação com o dimensionamento baseado em decimal. 12 pode ser dividido por 2, 3, 4 e 6. Portanto, as áreas de ícone de 24 ou 48 pixels se tornaram padrão. Esses ícones podem ser dimensionados se um tamanho maior for necessário.

8. Mantenha as silhuetas limpas e precisas

O perfeccionismo não é o objetivo: ninguém precisa de linhas perfeitas em pixels por causa de linhas perfeitas em pixels. No entanto, isso é importante para a renderização adequada e não distorcida do ícone no produto final. Tenha em mente o número mínimo necessário de âncoras de forma e a ausência de lacunas entre os elementos adjacentes.

E os irritantes tamanhos “8.999 px” ou “100.001 px”? Se as âncoras de forma estiverem localizadas com precisão, as bordas dos ícones parecerão nítidas. Além disso, você não corre o risco de obter âncoras e lacunas excessivas ao mesclar formas.

9. Limpe os SVGs

Muitos editores de interface, como o Sketch, produzem SVGs com artefatos desnecessários — grupos excessivos, camadas de cores e máscaras de corte. Vamos ver. No Sketch, tudo parece bom.

Abra este SVG em um editor diferente (por exemplo, Adobe Illustrator). Você notará camadas vazias, grupos desnecessários e, às vezes, máscaras de corte. Todas essas coisas podem causar problemas quando os desenvolvedores de front-end convertem ícones em uma fonte de ícone ou usam SVG em uma página da web.

Você pode remover esta lixeira e salvar o arquivo.

Você verá que o Sketch SVG ( picture.svg ) e o Illustrator SVG editado ( picture_new.svg ) têm visualizações diferentes em seu visualizador de arquivos. A propósito, é possível se livrar do lixo em um editor de código. Se você sabe como é o código SVG, tente excluir strings de dados desnecessárias diretamente.

10. Ícones ≠ varinha mágica

Claro, todas essas recomendações não são leis inquebráveis. Sinta-se à vontade para ignorá-los se souber o que faz. Aqui estão pelo menos dois casos em que, na minha opinião, ícones geométricos estritos não serão a melhor escolha.

• Comandos de interface do usuário não típicos. Se você deseja que as pessoas entendam uma ação mais complexa do que “Salvar”, “Enviar” ou “Arquivar”, um ícone pode não ser a melhor escolha. Mesmo que você consiga encontrar uma boa metáfora, diferentes usuários não interpretarão as imagens da mesma maneira.
• Mascotes e ilustrações. Se sua interface tiver um mascote ou telas de integração ilustradas, esses tipos de gráficos devem ser emocionais e transmitir a voz da marca. Não sei como um designer pode retratar um personagem com uma escolha limitada de formas simples e uma grade.

• Se você achou este artigo útil, sinta-se à vontade para me pagar um café ☕
• Aqui está uma publicação com todos os meus artigos de design no Medium.
• Vamos nos conectar no Linkedin e no Twitter .
• Deixe-me uma nota se quiser que eu apresente este ou outro tópico relacionado ao design em uma conferência ou encontro.
• Entediado com artigos de design “como fazer”? Confira meu outro blog onde falo sobre arquitetura negligenciada .