Lub co warto pamiętać przy projektowaniu ciemnego motywu aplikacji lub strony internetowej
Rok 2018 pokazał: ciemne motywy są na horyzoncie. Teraz, gdy jesteśmy już w połowie 2019 roku, możemy z pewnością powiedzieć: są tutaj i są wszędzie.
Zacznijmy od tego, że ciemny motyw to wcale nie nowa koncepcja. Używano go już od dawna. Kiedyś w rzeczywistości używano go tylko: monitory były typu «zielono-na-czarnym», ale tylko dlatego, że luminofor wewnątrz emitował zielonkawe światło pod wpływem promieniowania.
Ale nawet po wprowadzeniu kolorowych monitorów ciemny motyw nadal żył. Dlaczego tak się stało?
Są dwa główne powody, które wyjaśniają, dlaczego dziś każdy drugi spieszy się, aby dodać ciemny motyw do swojej aplikacji. Przede wszystkim: komputery są wszędzie. Dokąd byśmy nie spojrzeli, wszędzie znajduje się jakiś ekran. Używamy naszych urządzeń mobilnych od rana do późnej nocy. Posiadanie ciemnego motywu zmniejsza obciążenie dla oczu, gdy w łóżku przed snem przeglądamy po raz «ostatni» strumień w mediach społecznościowych. (Jeśli jesteś podobny do mnie, to «ostatni raz» może oznaczać 3-godzinną przewrót) . Ciemny motyw? No cóż, bądźcie łaskawi! )
Jeszcze jeden powód to nowe technologie produkcji wyświetlaczy. Flagowe modele dużych firm — Apple, Google, Samsung, Huawei — wszystkie wyposażone są w ekrany OLED, które, w przeciwieństwie do ekranów LCD, nie wymagają podświetlenia. I to naprawdę dobra wiadomość dla twojej baterii. Wyobraź sobie, że przeglądasz obraz czarnego kwadratu na swoim telefonie; w przypadku wyświetlacza LCD podświetlenie oświetli cały ekran, mimo że jego znaczna część jest czarna. Ale podczas przeglądania tego samego obrazu na wyświetlaczu OLED, piksele, z których składa się czarny kwadrat, po prostu się wyłączają. A więc w ogóle nie pobierają energii.
Te typy wyświetlaczy czynią ciemne motywy znacznie bardziej interesującymi. Korzystając z ciemnego interfejsu, możesz znacznie wydłużyć czas pracy na baterii swojego urządzenia. . Oczywiście ciemne motywy idą w parze ze zmianami interfejsu, więc odświeżmy naszą wiedzę!
Ciemne motywy 101
Przede wszystkim: „ciemny” nie jest równy „czarnemu”. Nie próbuj zamieniać białego tła na czarne, ponieważ uniemożliwi to użycie cieni. Taki design będzie super płaski (w złym sensie).
Ważne jest, aby mieć na uwadze podstawowe zasady cieniowania/oświetlenia. Obiekty, które są bardziej uniesione, powinny być jaśniejsze w cieniu, imituując rzeczywiste oświetlenie i cieniowanie. Dzięki temu łatwiej jest rozróżnić różne komponenty i ich hierarchię.
Dwa identyczne szare kwadraty z cieniem, jeden na 100% czarnym tle, a drugi na #121212. Podczas unoszenia obiekt nabiera jaśniejszego odcienia szarości.
W ciemnej tematyce można nadal pracować z Twoim zwykłym głównym kolorem, jeśli kontrast jest w porządku. Wyjaśnimy na przykładzie.
W tym interfejsie główną akcją jest duży niebieski przycisk na dolnym pasku. Nie ma problemu z punktu widzenia kontrastu przy przełączaniu między jasnym a ciemnym trybem, przycisk wciąż przyciąga uwagę, ikona jest wyraźna, ogólnie wszystko świetnie.
Kiedy ten sam kolor jest używany w różny sposób, na przykład w tekście — będą problemy. Spróbuj użyć (dużo) mniej nasyconego odcienia głównego koloru lub znajdź inne sposoby wprowadzenia kolorów marki do interfejsu.
Po lewej: czerwony na czarnym wygląda źle. Po prawej: zmniejszamy nasycenie — i wszystko staje się dobrze. — przyp. tłum.
To samo dotyczy wszystkich innych nasyconych kolorów, które mogłeś używać, jak na przykład kolory ostrzeżeń lub błędów. Google używa 40% białego overlayu na kolor domyślnego błędu w swoich przy przełączaniu na tryb ciemny. To całkiem dobry punkt wyjścia, ponieważ poprawi poziomy kontrastu do spełnienia standardów AA. Oczywiście możesz zawsze zmieniać ustawienia według własnego uznania, ale nie zapomnij sprawdzać poziomów kontrastu. Przy okazji, użytecznym narzędziem do tego celu jest wtyczka do Sketch — , która dokładnie pokazuje, ile kontrastu jest między 2 warstwami.
A co z tekstem?
Tutaj wszystko jest proste: nic nie powinno być w 100% czarne ani w 100% białe. Biały odbija fale świetlne wszystkich długości, a czarny je pochłania. Jeśli umieścimy 100% biały tekst na 100% czarnym tle, litery będą odbijać światło, rozmywać się i stawać się mniej czytelne, co negatywnie wpłynie na ich percepcję.
To samo dotyczy 100% białego tła, które odbija zbyt dużo światła, by można było w pełni skupić się na słowach. Spróbuj trochę złagodzić biały kolor, użyj jasnoszarego tła i tekstów na czarnych tłach. To zmniejszy obciążenie dla oczu, zapobiegając
Tryb ciemny tutaj nie zamierza odejść.
Czas, który spędzamy przed ekranami, rośnie w nieskończoność, a każdego dnia nowe ekrany pojawiają się w naszym życiu, od momentu przebudzenia do momentu zaśnięcia. To dość nowe zjawisko, nasze oczy jeszcze nie przyzwyczaiły się do tak wydłużonego czasu spędzanego przed ekranem późno wieczorem. W tym momencie tryb ciemny wkracza do akcji. Po wprowadzeniu tej funkcji w macOS i Material Design (i prawdopodobnie w iOS) uważamy, że prędzej czy później stanie się ona domyślną we wszystkich aplikacjach, zarówno mobilnych, jak i desktopowych. I lepiej być na to gotowym!
Jedynym powodem, dla którego nie wdraża się trybu ciemnego, jest to, że jesteś absolutnie pewny, że twoja aplikacja jest używana wyłącznie przy jasnym, dziennym świetle. Tego typu sytuacje zdarzają się rzadko.
Warto wspomnieć o kilku rzeczach, które będą wymagały szczególnej uwagi przy wdrażaniu trybu ciemnego, poza podstawowymi zasadami podsumowanymi wcześniej.
Z perspektywy dostępności, tryb ciemny nie jest najwygodniejszy, ponieważ kontrast jest w ogóle niższy, co z kolei nie poprawia czytelności.
Ale wyobraź sobie, że przygotowujesz się do snu, bardzo chcesz spać, ale tuż przed tym, jak zasniesz, przypomniałeś sobie, że musisz wysłać komuś super ważną wiadomość, która nie może czekać nawet jedną noc. Bierzesz telefon, włączasz go i AAAAAAA… jasne tło twojego iMessage nie pozwoli ci zasnąć jeszcze przez trzy godziny. Podczas gdy jasny tekst na ciemnym tle nie jest uważany za maksymalnie dostępny, posiadanie trybu ciemnego w tej chwili zwiększyłoby wygodę o milion. Wszystko zależy od sytuacji, w jakiej użytkownik się znajduje.
Dlatego uważamy, że automatyczny tryb ciemny to świetny pomysł. Włącza się wieczorem i wyłącza rano. Użytkownik nawet nie musi o tym myśleć, co jest niezwykle wygodne. Twitter doskonale poradził sobie z ustawieniami trybu ciemnego. Ponadto, mają oni zarówno zwykły tryb ciemny, jak i jeszcze ciemniejszy tryb dla wszystkich tych ekranów OLED, oszczędzających baterię i wszystkie związane z tym aspekty. Ważne jest, by dać użytkownikowi możliwość ręcznego przełączania, kiedy tylko zechce: nie ma nic gorszego niż automatyczna zmiana interfejsu bez możliwości powrotu.
Twitter ma automatyczny tryb ciemny, który włącza się wieczorem i wyłącza rano.
Podczas opracowywania tematu warto mieć na uwadze, że niektóre rzeczy po prostu nie mogą być ciemne.
Na przykład, weźmy edytor tekstu, taki jak Pages. Można zrobić interfejs ciemnym, ale sama karta zawsze będzie biała, imitując prawdziwą kartkę papieru.
Pages włączonym w trybie ciemnym
To samo dotyczy wszystkich rodzajów edytorów do tworzenia treści, takich jak Sketch czy Illustrator. Choć interfejs można uczynić ciemnym, panel roboczy, z którym pracujesz, zawsze będzie domyślnie biały.
Sketch w trybie ciemnym z wciąż jasnym białym panelem roboczym.
Dlatego niezależnie od aplikacji, uważamy, że tryby ciemne staną się natywne dla używanego systemu operacyjnego, co oznacza, że warto wcześniej przygotować się na przyszłość, będzie ciemny.
Jeśli chcesz dowiedzieć się więcej o projektowaniu ciemnych interfejsów, koniecznie zapoznaj się z wytycznymi , to było nasze główne źródło informacji do tego artykułu.
Źródło: habr.com
