Allan Day
aday@gnome.org
Jakub Steiner

This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.

Selecionando e criando ícones.
Georges Neto
georges.stavracas@gmail.com 2014,
Rafael Fontenelle
rafaelff@gnome.org 2017-2021

# Ícones e obras de arte

Os ícones são um elemento básico nas interfaces do usuário. Eles também formam uma parte fundamental das identidades do aplicativo. Esta página fornece uma visão geral do uso do ícone. Ela também descreve quais ícones estão disponíveis na plataforma GNOME, apresenta recursos para a criação de novos ícones e inclui algumas diretrizes gerais sobre o uso de ícones nas interfaces do usuário.

# Estilos de ícones

Dois estilos de ícone são usados no GNOME 3: ícones coloridos ou simbólicos.

Os ícones coloridos (full-color, em inglês) são cheios cores e detalhados, e são otimizados para tamanhos maiores. Eles são definidos como SVGs de 128×128px e são mais nítidos quando ampliados em múltiplos de 128 (como 256×256 e 512×512). O design dos ícones coloridos também permite que eles sejam renderizados com nitidez em 64×64px e 32×32px, mas é não é aconselhável torná-los menores.

Os ícones simbólicos são simples e monocromáticos e foram projetados para funcionar bem em tamanhos menores. Eles são definidos como SVGs de 16✕16px e podem ser dimensionados para múltiplos de 16 (como 32✕32, 64✕64, 128✕128). Os ícones simbólicos geralmente têm uma cor neutra, embora sua cor possa ser alterada programaticamente.

# Usos para ícones

Os ícones de aplicativos são o tipo mais proeminente de ícones. Cada aplicativo deve ter seu próprio ícone de aplicativo exclusivo e bonito: é a face do aplicativo e o primeiro elemento visual que um usuário vê ao procurar novos aplicativos.

Ícones de aplicativos usam o estilo colorido. É recomendado que os aplicativos também forneçam uma versão simbólica de seu ícone, que é usado para o recurso de acessibilidade de alto contraste, bem como em contextos em que é necessário um ícone de baixa resolução legível.

Os ícones da interface do usuário geralmente usam o estilo simbólico e esse é o estilo de ícone principal usado nos controles da interface do usuário. O exemplo mais comum e óbvio de uso de ícones simbólicos está nos botões.

Além dos ícones de aplicativos, o estilo de ícone colorido também pode ser usado nos casos em que os ícones são exibidos em tamanhos grandes e se destinam a ser o foco de atenção. Os ícones de arquivos e pastas em um gerenciador de arquivos são um bom exemplo disso.

# Ícones padrão e criando seus próprios

O GNOME fornece um conjunto de ícones padrão, que podem ser usados por aplicativos. Isso pode ser acessado diretamente pelo GTK. Nomes de ícones seguem a especificação de ícones do Freedesktop. Versões simbólicas de ícones têm o nome terminando com `-symbolic`, como `open-menu-symbolic`.

As diretrizes de design de ícones fornecem mais detalhes sobre como criar seus próprios ícones, incluindo ícones de aplicativos.

# Usando ícones em sua interface de usuário

Os ícones são um elemento comum da interface do usuário e têm algumas vantagens práticas sobre os rótulos de texto (como menores). Ao mesmo tempo, o uso excessivo de ícones pode gerar confusão e uma experiência ruim para o usuário. Da mesma forma, o uso de ícones inadequados pode muitas vezes dificultar o uso de uma interface.

Portanto, use somente ícones cujo significado seja comumente reconhecido. Se um ícone comumente reconhecido não estiver disponível, talvez seja melhor usar um rótulo de texto. Normalmente, a convenção estabelece quais ícones são geralmente reconhecidos. Esse conjunto de ícones é bem pequeno e inclui ícones padrão, como pesquisa, menu, encaminhamento, retrocesso e compartilhamento. Se você estiver em dúvida, use apenas ícones que são frequentemente usados em outros aplicativos.

Outras coisas para considerar quando estiver usando ícones:

Pense quais ícones serão significativos no contexto específico de sua aplicação – os usuários de ferramentas especializadas geralmente estarão familiarizados com símbolos específicos do domínio.

Lembre-se de que alguns ícones só são úteis ao lado de outros ícones do mesmo tipo. Por exemplo, um ícone de mídia para “parar” é simplesmente um quadrado e pode não ser identificado como um ícone de parada sem outros controles de mídia (como reproduzir, pausar ou ignorar) sendo visíveis por perto. Da mesma forma, o ícone para remover um item de uma lista é um símbolo de subtração (p.ex., uma única linha) e não será reconhecível sem um ícone de “mais” correspondente.