Ciemne motywy stają się ostatnio bardzo modne. Wiele z popularnych stron oraz aplikacji jak np. Google czy Apple w ostatnim czasie wdrożyło ciemny motyw do swoich usług. W tym artykule poznasz kilka porad, które przydadzą się podczas projektowania ciemnych interfejsów.
Unikaj czystej czerni
Ciemny motyw nie powinien być na czysto czarnym tle z białym tekstem. Tak wysoki kontrast może być bardzo męczący dla oczu. Bezpieczniej jest używać ciemnoszarego koloru, jako tła.
Ciemnoszare powierzchnie zmniejszają zmęczenie oczu – jasny tekst na ciemnoszarej powierzchni ma mniejszy kontrast.
Dodatkowo na ciemnoszarych powierzchniach łatwiej jest stworzyć głębie, w postaci cieni.
Material design zaleca kolor # 121212 jako ciemny kolor tła dla motywu.
Unikaj używania nasyconych kolorów w ciemnych motywach
Nasycone kolory, które świetnie wyglądają na jasnych powierzchniach, mogą być mało widoczne na ciemnym tle.
By ułatwić ich odczytanie, spróbuj zniwelować nasycenie koloru.
Lepiej jest zwiększyć jaśniejsze tony, jednocześnie nie zwiększając nasycenia. Dzięki temu utrzymasz odpowiedni kontrast, jednocześnie nie powodując zmęczenia dla oczu.
Dla tekstów nie używaj czystej bieli
Domyślne kolory dla tekstu to czysta biel. Jednak czysta biel daje na ciemnym tle bardzo silny kontrast, bijący po oczach.
Dlatego Google Material Design zaleca użycie nieco ciemniejszej bieli:
- Tekst główny/włączony powinien mieć krycie 87%
- Tekst ze średnim wyróżnieniem to krycie na 60%
- Natomiast tekst nieaktywny/wyłączony ma krycie 38%.
Sprawdź grubość fontu
Jasny tekst na ciemnym tle może wydawać się bardziej pogrubiony niż ciemny na jasnym tle. Dlatego sprawdź, czy nie jest on wizualnie zbyt gruby, być może lepiej sprawdzi się lżejszy krój fontu.
Jak wyrazić głębie?
Jak wiadomo na jasnych motywach, chcąc wyrazić głębie elementu, możesz zastosować cień. Im bliższy obiekt, tym szerszy rzuca cień.
Niestety cienie nie działają się na ciemnym motywie – ciężko jest zobaczyć cień na ciemnym tle.
O wiele lepiej jest oświetlić powierzchnię, co pomoże stworzyć hierarchię poziomów. W ciemnych motywach im element bliższy, tym jaśniejsza staje się jego powierzchnia. Jeśli chcesz pokazać bliskość, dodaj jaśniejszej szarości niż tło.
Kolorystyka zgodna z marką
Jeśli tworzysz ciemny motyw na podstawie jaśniejszego i chcesz zachować kolorystykę marki, to uwydatnij kolorem tylko drobne elementy.
Spójrz na tą aplikację, gdzie na podstawie białego motywu stworzono tryb ciemny. Środkowy przykład pokazuje, jak projektant chcąc zachować osobowość marki, zostawił kolorowy nagłówek. Jednak nie wygląda on zbyt atrakcyjnie w przypadku trybu ciemnego.
Dlatego w trzecim przypadku, po prawej, kolor tła została zmieniony na ciemny. Jednocześnie kolor marki został użyty tylko do zaakcentowania elementów.
Jeśli spodobały Ci się porady z tego artykułu, to zapraszam Cię do zapoznania się z naszym ebookiem “przeprojektowani”, gdzie znajdziesz mnóstwo wiedzy z zakresu projektowania Ui/Ux.
