Os ícones desempenham um papel importante nas interfaces do usuário: selecionar o ícone correto é, portanto, vital para garantir que seu aplicativo seja utilizável. Um ícone de identificação também é uma parte essencial de qualquer aplicação, e é uma parte crucial da sua identidade.
Há muitas situações em que é necessário decidir entre usar um ícone e um rótulo de texto, particularmente para botões. Os ícones têm a vantagem de serem menores e não exigirem tradução. Ao mesmo tempo, o uso incorreto de um ícone pode tornar sua interface difícil – ou mesmo impossível – de entender.
Use apenas í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.
A convenção estabelece quais ícones serão reconhecidos. Se você está em dúvida, escolha os ícones que são frequentemente usados em outros aplicativos.
Considere 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 (i.e., uma única linha) e não será reconhecível sem um ícone de “mais” correspondente.
O GNOME fornece um conjunto completo de ícones padrão. Estes devem ser usados sempre que apropriado; tente evitar a criação de ícones personalizados, a menos que sejam absolutamente necessários.
Siga a especificação de nomeação de ícone ao selecionar quais ícones usar – o nome do ícone deve refletir o que o ícone pretende comunicar. Isso é importante para quem usa um leitor de tela.
Você pode usar o navegador de ícones do GTK+ para localizar ícones recomendados.
O GNOME 3 fornece dois tipos de ícones: ícones simbólicos coloridos e monocromáticos. As diretrizes contidas neste HIG indicam quando usar cada tipo de ícone. Segue abaixo um guia geral.
Ícones coloridos devem ser usados para:
dispositivos
tipos de arquivo/tipos mime
ícones de aplicativo (lançador)
Todos os outros ícones devem usar o estilo de ícone simbólico. Além disso, ícones simbólicos devem sempre ser usados dentro de:
botões
listas
campos de entrada
quando o fundo é semi-transparente (como a mídia sobreposta ou os controles em tela cheia)
Cada aplicativo deve ter um ícone de aplicativo único e bonito. É o rosto do aplicativo e o primeiro elemento visual que um usuário vê ao navegar por novas aplicações. A página noções básicas de aplicativos inclui detalhes sobre o que é um aplicativo e quando fornecer um ícone de aplicativo.
Como os ícones de aplicativos são apresentados em tamanhos maiores, ícones legados estilizados SVG ou 48x48 px do Tango já não são suficientes (falta de detalhes). É essencial que seu aplicativo tenha um ícone de 256x256 px. Com o advento das telas de alta DPI, recomenda-se uma variante de 512x512 px.
Embora não seja tão crítico, ainda existem áreas onde os ícones de aplicativos são apresentados em um tamanho pequeno. Para manter o ícone nítido e bem definido, uma renderização específica é necessária para tamanhos de 48x48 px, 32x32 px, 24x24 px e 16x16 px. Muitos ícones do GNOME também enviam um tamanho px de 22x22 por motivos legados, mas isso não é necessário.
Para manter a nitidez, muitos detalhes são descartados para as variantes de baixa resolução e um curso de 1px é usado para descrever a silhueta do objeto.
Mais informações sobre como criar um ícone de aplicativo podem ser encontradas abaixo, na seção personalizada de ícones de cores.
Os ícones simbólicos têm uma forma simples e são desenhados dentro de uma grade de 16x16 pixels. Eles são dimensionados e coloridos de forma programada dentro da própria interface do usuário.
Identifique uma única propriedade ao procurar uma metáfora apropriada para um ícone e se concentre no que distingue a ideia que deseja comunicar. Por exemplo, ao descrever uma ação a ser executada em uma imagem, não é necessário repetir a ideia de uma imagem em cada ícone. Em vez disso, concentre-se no que é distinto sobre cada ação (por exemplo: girar, marcar, alinhar).
Evite usar qualquer perspectiva em ícones simbólicos, mantendo uma visão ortogonal simples.
As formas preenchidas geralmente são mais rápidas de serem processadas pelo sistema visual humano do que os contornos.
Os ícones simbólicos são coloridos novamente em tempo de execução para coincidir com o contexto, muito parecido com um texto. Embora existam maneiras de “sombrear” partes de um ícone usando a opacidade ou criando duotone/dithering de padrão, tente evitá-las o máximo possível.
Quando uma metáfora depende do espaço negativo, certifique-se de que funcionará com as cores invertidas. Por exemplo, uma lente de câmera especifica / destaque só funciona se mais claro que a própria lente.
Enquanto os ícones são escaláveis e devem funcionar em qualquer tamanho, o tamanho básico da tela é 16x16 unidades da grade. Você tem toda a tela para preencher, mas observe que um objeto retangular preenchido aparecerá mais forte ou maior quando colocado ao lado de itens que apenas usam traços mais finos. Tente manter o contraste de todo o seu conjunto.
Os ícones coloridos são desenhados e renderizados em uma variedade de tamanhos predefinidos.
A maioria dos ícones pode ser executada melhor usando a perspectiva “na mesa”, como se o observador estivesse de pé na frente do objeto e olhando para baixo sobre ele. Muitos ícones podem ser renderizados com uma simples perspectiva “direta” ou “na prateleira”, com o observador olhando diretamente para o objeto ao nível dos olhos.
Use a paleta de cores Tango ao projetar aplicativos ou ícones de dispositivos coloridos.
Manteiga |
Ameixa |
||
Laranja |
Vermelho escarlate |
||
Chocolate |
Alumínio |
||
Camaleão |
|||
Azul-celeste |
Você é livre para usar tons diferentes dessas cores, dependendo do efeito material desejado. No entanto, essas cores primárias são uma boa linha de base para começar. Todos os principais pacotes gráficos livres vêm com a paleta Tango pré-instalada.
Diretrizes de ícone Tango