Vários aplicativos da web começaram a utilizar ícones em escala de cinza (preto), por exemplo Github, novo Google Analytics, etc. Mesmo aplicativos como Firefox 4, Chrome , IE9, iTunes, Mac OS, abandonaram ícones coloridos.
Qual é a razão por trás da mudança dos ícones coloridos para ícones em tons de cinza / monocromáticos?
Exemplos:
- Ícone de configurações do Google Analytics
- Github (observe os botões de ícones no canto superior direito)
- iTunes 10 mudou para ícones monocromáticos
Atualização: parece que a Apple o introduziu no Aqua em Projetando ícones para controles de barra de ferramentas de estilo retangular :
Os ícones que ficam bem em controles retangulares da barra de ferramentas são imagens pretas simplificadas que transmitem significado por meio de contorno e contorno, não detalhes internos. Como seus ícones devem ecoar a aparência das imagens existentes do Mac OS X dentro dos controles retangulares da barra de ferramentas, use as imagens de modelo fornecidas pelo sistema como um guia. Ao projetar um ícone para um controle de barra de ferramentas de estilo retangular, mantenha os seguintes pontos em mente:
- Faça o contorno nítido e claro
- Use uma perspectiva direta
- Use preto total e alguns tons de cinza para sugerir dimensionalidade
- Use anti-aliasing
- Certifique-se de que a imagem esteja visualmente centralizada no controle (observe que visualmente centrado pode não ser o mesmo que centrado matematicamente)
Os ícones para controles da barra de ferramentas de estilo retangular de tamanho regular não devem medir mais do que 19 x 19 pixels.
Comentários
- Você pode fornecer uma imagem do que está falando? Acabei de olhar o Google Analytics e não ' não vejo nada parecido com o que você está dizendo.
- Desculpe por isso. Atualizado o post com dois links! Aqui estão mais alguns: Firefox 4 mozilla.com/en-US/firefox/features Chrome (olhe para trás / para frente / home / favoritos) google.com/chrome Itunes apple.com/itunes/what-is/player.html
- Boa pergunta e obrigado pela atualização. +1 e outro +1 você corta e cola a atualização em uma nova resposta. 🙂
Resposta
Acredito que essa tendência veio junto com a ideia de separação de conteúdo e apresentação. Os ícones fazem parte do chrome / ui e não devem ser muito evidentes para não competir com o conteúdo em si.
Outro motivo pode ser que é mais fácil atrair a atenção para um elemento quando ele é o apenas um com um ícone colorido e todo o resto é em escala de cinza. Por exemplo, um registro verde no ícone de cadeado em combinação com ícones de menu em escala de cinza. Fazer algo aparecer em um grupo de elementos coloridos exige muito mais habilidade e tempo do que você precisa pense em muito mais do que apenas a cor (que não desempenha mais o papel principal em atrair a atenção do usuário).
Comentários
- Exatamente o que eu ia dizer. O Google Chrome é um exemplo perfeito de que foi projetado para sair do caminho. A barra superior, os botões e os ícones são todos monocromáticos e bem condensados. Portanto, a IU do Chrome não ' t rouba muita atenção da página da web que você ' está tentando visualizar. E eu ' notei que a Microsoft tem uma filosofia semelhante ao IE9.
- A parte que me deixa furioso (considerando a Microsoft ' s anúncio mais recente blogs.msdn.com/b/visualstudio/archive/2012/02/23/… ) é que isso só funciona para certos tipos de interfaces de usuário, particularmente aquelas que não ' t têm uma centena de botões, visualizações em árvore e painéis em toda a interface. Quando os designers de IU começarão a perceber que isso é apenas uma metáfora de design muito específica e não uma moda passageira legal? Os ícones coloridos funcionam quando há muitos ícones à vista.
Resposta
- Eles costumam ter uma boa aparência , independentemente do layout, para que você possa mantê-los se o layout mudar.
- Você pode combinar ícones de diferentes fontes (The Noun Project, fontes de símbolo, ícones existentes usados em plataformas como o iPhone, etc.) , já que eles são quase todos semelhantes.
- É fácil fazer o seu próprio.
Pessoalmente, acho que geralmente é uma tendência ruim. Nossos cérebros processam as cores de forma preventiva (antes mesmo de vermos conscientemente); somos realmente bons em tarefas como “encontrar o ícone vermelho em uma lista de ícones coloridos”. Não somos tão bons em tarefas como “encontrar o ícone que parece um pequeno caminhão em uma lista de ícones pretos”. Fazer com que todos os ícones tenham a mesma cor torna seu produto mais difícil de usar.
Existem exceções, é claro.