En hel del webbapplikationer har börjat använda gråskalaikoner (svart), till exempel Github, nya Google Analytics osv. Även applikationer som Firefox 4, Chrome , IE9, iTunes, Mac OS, har tappat färgglada ikoner.

Vad är resonemanget bakom övergången från de färgglada ikonerna till gråskaliga / svartvita ikoner?

Exempel:

Uppdatering: Det verkar som om Apple först introducerade det i Aqua under Designa ikoner för verktygsfältkontroller i rektangulär stil :

Ikoner som ser bra ut i verktygsfältkontroller i rektangulär stil är strömlinjeformade, svarta bilder som förmedlar mening genom konturer och konturer, inte interna detaljer. Eftersom dina ikoner ska återge utseendet på de befintliga Mac OS X-bilderna i verktygsfältkontroller i rektangulär stil, använd de system tillhandahållna mallbilderna som en guide. Tänk på följande när du utformar en ikon för en verktygsfältkontroll i rektangulär stil:

  • Gör konturen skarp och tydlig
  • Använd ett rakt perspektiv
  • Använd helt svart och några gråtoner för att föreslå dimensionalitet
  • Använd anti-aliasing
  • Se till att bilden är visuellt centrerad i kontrollen (notera att visuellt centrerad kanske inte är densamma som matematiskt centrerad)

Ikoner för verktygsfältkontroller i regelbunden storlek bör inte mäta mer än 19 x 19 pixlar.

Kommentarer

  • Kan du ge en bild av vad du pratar om? Jag tittade bara på Google Analytics och såg ' inte något som du säger.
  • Ledsen för det. Uppdaterat inlägget med två länkar! Här är några fler: Firefox 4 mozilla.com/en-US/firefox/features Chrome (titta bakåt / framåt / hem / favoriter) google.com/chrome Itunes apple.com/itunes/what-is/player.html
  • Bra fråga och tack för uppdateringen. +1 och en annan +1 klipper du och klistrar in uppdateringen i ett nytt svar. 🙂

Svar

Jag tror att denna trend kom samman med tanken på att separera innehåll och presentation. Ikoner är en del av krom / ui och bör inte vara för iögonfallande för att inte tävla med själva innehållet.

En annan anledning kan vara att det är lättare att uppmärksamma ett element när det är bara en med en färgstark ikon och allt annat är gråskala. Till exempel en grön inloggningshänglåsikon i kombination med gråskalemenyikoner. Att göra något pop-out i en grupp färgglada element tar mycket mer skicklighet och tid som du måste tänka på mycket mer än bara färg (som inte längre spelar den primära rollen för att locka användarens uppmärksamhet).

Kommentarer

  • Exakt vad jag skulle säga. Google Chrome är ett perfekt exempel på att det var designat för att komma ur vägen. Den övre stapeln, knapparna, ikonerna är alla svartvita och kondenserade snyggt. Så Chrome UI stjäl inte ' t för mycket uppmärksamhet från den webbsida du ' försöker titta på. Och jag ' har märkt att Microsoft har en liknande filosofi med IE9.
  • Den del som gör mig rasande (med tanke på Microsoft ' s senaste tillkännagivande blogs.msdn.com/b/visualstudio/archive/2012/02/23/… ) är att detta bara fungerar för vissa typer av användargränssnitt, särskilt de som inte ' t har hundra knappar, trädvyer och paneler över hela gränssnittet. När kommer UI-designers att inse att detta bara är en mycket specifik designmetafor och inte någon cool modestil? Färgade ikoner fungerar när det finns många ikoner att se.

Svar

  • De ser ofta bra ut , oavsett layout, så att du kan behålla dem om layouten ändras.
  • Du kan kombinera ikoner från olika källor (Substantivprojektet, symbolteckensnitt, befintliga ikoner som används på plattformar som iPhone, etc.) eftersom de mest liknar varandra.
  • Det är lätt att göra själv.

Personligen tycker jag att det i allmänhet är en dålig trend. Våra hjärnor bearbetar färg på ett noggrant sätt (innan vi ens medvetet ser det); vi är riktigt bra på uppgifter som ”hitta den röda ikonen i en lista med färgade ikoner.” Vi är inte så bra på en uppgift som ”hitta ikonen som ser ut som en liten lastbil i en lista med svarta ikoner.” Att göra alla ikoner i samma färg gör det svårare att använda din produkt.

Det finns naturligtvis undantag.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *