Diverse applicazioni web hanno iniziato a utilizzare icone in scala grigia (nera), ad esempio Github, il nuovo Google Analytics e così via. Anche applicazioni come Firefox 4, Chrome , IE9, iTunes, Mac OS, hanno abbandonato le icone colorate.
Qual è il ragionamento alla base del passaggio dalle icone colorate alle icone in scala di grigi / monocromatiche?
Esempi:
- Icona delle impostazioni di Google Analytics
- Github (guarda i pulsanti delle icone in alto a destra)
- iTunes 10 è passato alle icone monocromatiche
Aggiornamento: sembra che Apple lo abbia introdotto per la prima volta in Aqua con Progettazione di icone per controlli della barra degli strumenti in stile rettangolare :
Le icone che hanno un bellaspetto nei controlli della barra degli strumenti in stile rettangolare sono immagini snelle e nere che trasmettono significato attraverso il contorno e il contorno, non i dettagli interni. Poiché le tue icone dovrebbero riprendere laspetto delle immagini esistenti di Mac OS X allinterno dei controlli della barra degli strumenti in stile rettangolare, usa le immagini modello fornite dal sistema come guida. Durante la progettazione di unicona per un controllo della barra degli strumenti in stile rettangolare, tieni presente i seguenti punti:
- Rendi il contorno nitido e chiaro
- Usa una prospettiva diretta
- Usa il nero completo e alcune sfumature di grigio per suggerire la dimensionalità
- Usa lanti-aliasing
- Assicurati che limmagine sia visivamente centrata nel controllo (nota che visivamente centrato potrebbe non essere uguale a centrato matematicamente)
Le icone per i controlli della barra degli strumenti in stile rettangolare di dimensioni regolari non devono misurare più di 19 x 19 pixel.
Commenti
- Puoi fornire unimmagine di ciò di cui stai parlando? Ho appena guardato Google Analytics e non ' per vedere nulla di simile a quello che stai dicendo.
- Mi dispiace. Aggiornato il post con due link! Eccone alcuni altri: Firefox 4 mozilla.com/it-IT/firefox/features Chrome (guarda indietro / avanti / home / preferiti) google.com/chrome Itunes apple.com/itunes/what-is/player.html
- Bella domanda e grazie per laggiornamento. +1 e un altro +1 che tagli e incolli laggiornamento in una nuova risposta. 🙂
Risposta
Credo che questa tendenza sia venuta insieme allidea di separazione di contenuto e presentazione. Le icone fanno parte di chrome / ui e non dovrebbero essere troppo evidenti per non competere con il contenuto stesso.
Un altro motivo potrebbe essere che è più facile attirare lattenzione su un elemento quando è il solo uno con unicona colorata e tutto il resto è in scala di grigi. Ad esempio, unicona di lucchetto di accesso verde in combinazione con icone di menu in scala di grigi. Fare qualcosa di pop-out in un gruppo di elementi colorati richiede molto più abilità e tempo di quanto devi pensa a molto di più del semplice colore (che non gioca più il ruolo principale nellattirare lattenzione dellutente).
Commenti
- Esattamente quello che ho stava per dire. Google Chrome è un perfetto esempio in quanto è stato progettato per togliersi di mezzo. La barra superiore, i pulsanti e le icone sono tutte monocromatiche e ben condensate. Quindi linterfaccia utente di Chrome ' non ruba troppa attenzione alla pagina web che ' stai cercando di guardare. E ' ho notato che Microsoft ha una filosofia simile con IE9.
- La parte che mi rende furioso (dato che Microsoft ' blogs.msdn.com/b/visualstudio/archive/2012/02/23/… ) è che funziona solo per alcuni tipi di interfacce utente, in particolare quelle che non ' hanno cento pulsanti, viste ad albero e pannelli in tutta linterfaccia. Quando i designer dellinterfaccia utente inizieranno a rendersi conto che questa è solo una metafora di design molto specifica e non una moda cool? Le icone colorate funzionano quando sono presenti molte icone.
Risposta
- Spesso hanno un bellaspetto , indipendentemente dal layout, quindi puoi mantenerli se il layout cambia.
- Puoi combinare icone da diverse fonti (The Noun Project, caratteri di simboli, icone esistenti utilizzate su piattaforme come iPhone, ecc.) , poiché per lo più sembrano simili.
- È facile crearne uno tuo.
Personalmente, penso che sia generalmente una cattiva tendenza. Il nostro cervello elabora il colore in modo preventivo (prima ancora che lo vediamo consapevolmente); “siamo davvero bravi in attività come” trovare licona rossa in un elenco di icone colorate “.” Non siamo così bravi in attività come “trovare licona che assomiglia a un piccolo camion in un elenco di icone nere”. Rendere tutte le icone dello stesso colore rende il tuo prodotto più difficile da usare.
Ci sono delle eccezioni, ovviamente.