Sporo aplikacji internetowych zaczęło używać ikon w skali szarości (czarnej), na przykład Github, nowy Google Analytics itp. Nawet aplikacje takie jak Firefox 4, Chrome , IE9, iTunes, Mac OS, porzuciły kolorowe ikony.
Jaki jest powód przejścia z kolorowych ikon na ikony w skali szarości / monochromatyczne?
Przykłady:
- Ikona ustawień Google Analytics
- Github (spójrz na przyciski ikon w prawym górnym rogu)
- iTunes 10 przełączył się na ikony monochromatyczne
Aktualizacja: Wygląda na to, że Apple po raz pierwszy wprowadziło go w Aqua w sekcji Projektowanie ikon dla elementów sterujących paska narzędzi w stylu prostokątnym :
Ikony, które dobrze wyglądają w elementach sterujących paska narzędzi w stylu prostokątnym, to uproszczone, czarne obrazy, które przekazują znaczenie poprzez kontury i kontury, a nie wewnętrzne szczegóły. Ponieważ ikony powinny odzwierciedlać wygląd istniejących obrazów systemu Mac OS X wewnątrz elementów sterujących paska narzędzi w stylu prostokątnym, użyj jako przewodnika obrazów szablonów dostarczonych przez system. Projektując ikonę dla prostokątnego elementu sterującego na pasku narzędzi, pamiętaj o następujących kwestiach:
- Postaraj się, aby kontur był ostry i wyraźny.
- Użyj prostej perspektywy
- Użyj pełnej czerni i kilku odcieni szarości, aby zasugerować wymiarowanie
- Użyj wygładzania
- Upewnij się, że obraz jest wizualnie wyśrodkowany w kontrolce (zwróć uwagę, że wizualnie wyśrodkowany może nie być tym samym, co wyśrodkowany matematycznie)
Ikony prostokątnych elementów sterujących paska narzędzi o regularnych rozmiarach nie powinny mieć więcej niż 19 x 19 pikseli.
Komentarze
- Czy możesz przedstawić obraz tego, o czym mówisz? Właśnie spojrzałem na Google Analytics i nie ' nie widzę czegoś podobnego do tego, co mówisz.
- Przepraszamy za to. Zaktualizowałem post dwoma linkami! Oto kilka innych: Firefox 4 mozilla.com/en-US/firefox/features Chrome (spójrz na wstecz / dalej / home / ulubione) google.com/chrome Itunes apple.com/itunes/what-is/player.html
- Dobre pytanie i dzięki za aktualizację. +1 i kolejne +1, które wycinasz i wklejasz aktualizację do nowej odpowiedzi. 🙂
Odpowiedź
Uważam, że ten trend pojawił się wraz z pomysłem oddzielenia treści od prezentacji. Ikony są częścią chrome / ui i nie powinny być zbyt rzucające się w oczy, aby nie konkurować z samą zawartością.
Innym powodem może być to, że łatwiej jest zwrócić uwagę na element, gdy jest to tylko jeden z kolorową ikoną, a wszystko inne jest w skali szarości. Na przykład zielona ikona kłódki w połączeniu z ikonami menu w skali szarości. Tworzenie czegoś wyskakującego w grupie kolorowych elementów wymaga znacznie więcej umiejętności i czasu, niż trzeba myślę o czymś więcej niż tylko o kolorze (który nie odgrywa już głównej roli w przyciąganiu uwagi użytkownika).
Komentarze
- Dokładnie to, co ja chciał powiedzieć. Google Chrome jest doskonałym przykładem, ponieważ został zaprojektowany tak, aby nie przeszkadzał. Górny pasek, przyciski, ikony są monochromatyczne i ładnie skondensowane. Dlatego interfejs użytkownika Chrome nie ' nie przyciąga zbyt wiele uwagi ze strony internetowej, którą ' próbujesz wyświetlić. I ' zauważyłem, że Microsoft ma podobną filozofię co IE9.
- Część, która mnie wścieka (biorąc pod uwagę Microsoft ' blogs.msdn.com/b/visualstudio/archive/2012/02/23/… ) polega na tym, że działa to tylko w przypadku niektórych typów interfejsów użytkownika, szczególnie tych, które ' nie mają setek przycisków, widoków drzew i paneli w całym interfejsie. Kiedy projektanci UI zaczną zdawać sobie sprawę, że to tylko bardzo specyficzna metafora projektu, a nie jakaś fajna moda? Kolorowe ikony działają, gdy jest wiele ikon do wyświetlenia.
Odpowiedź
- Często wyglądają dobrze niezależnie od układu, więc możesz je zachować, jeśli układ się zmieni.
- Możesz łączyć ikony z różnych źródeł (The Noun Project, czcionki symboli, istniejące ikony używane na platformach takich jak iPhone itp.) , ponieważ w większości wyglądają podobnie.
- Łatwo jest zrobić własne.
Osobiście uważam, że to ogólnie zły trend. Nasze mózgi przetwarzają kolory z wyprzedzeniem (zanim nawet świadomie je zobaczymy); „jesteśmy naprawdę dobrzy w zadaniach typu„ znajdź czerwoną ikonę na liście kolorowych ikon ”.„ Nie jesteśmy ”w zadaniach typu„ znajdź ikonę, która wygląda jak mała ciężarówka na liście czarnych ikon ”. Użycie wszystkich ikon w tym samym kolorze utrudnia korzystanie z produktu.
Oczywiście są wyjątki.