Albo o czym należy pamiętać tworząc tryb ciemny dla aplikacji lub strony internetowej
Rok 2018 pokazał, że ciemne tryby są już w drodze. Teraz, gdy mamy już połowę 2019 roku, możemy śmiało powiedzieć: oni są tutaj i są wszędzie.
Zacznijmy od tego, że tryb ciemny nie jest wcale nową koncepcją. Jest używany już dość długo. I dawno temu, właściwie przez długi czas, była to jedyna rzecz, której używali: monitory były typu „zielony na czarnym”, ale tylko dlatego, że wewnętrzna powłoka luminescencyjna emitowała zielonkawy blask pod wpływem promieniowania .
Jednak nawet po wprowadzeniu kolorowych monitorów tryb ciemny nadal istniał. Dlaczego tak jest?
Istnieją dwa główne powody, dla których dziś co druga osoba spieszy się z dodaniem ciemnego motywu do swojej aplikacji. Po pierwsze: komputery są wszędzie. Gdziekolwiek spojrzymy, jest jakiś ekran. Z naszych urządzeń mobilnych korzystamy od rana do późnej nocy. Obecność trybu ciemnego zmniejsza zmęczenie oczu, gdy leżysz w łóżku przed pójściem spać „ostatnim razem” przeglądając kanały społecznościowe. sieci. (Jeśli jesteś podobny do mnie, „ostatni raz” może oznaczać 3-godzinny zwój . Tryb ciemny? Tak proszę! )
Kolejnym powodem są nowe technologie produkcji wyświetlaczy. Flagowe modele dużych firm – Apple, Google, Samsung, Huawei – wszystkie wyposażone są w ekrany OLED, które w odróżnieniu od wyświetlaczy LCD nie wymagają podświetlenia. To naprawdę dobra wiadomość dla Twojej baterii. Wyobraź sobie, że oglądasz na swoim telefonie obraz czarnego kwadratu; w przypadku wyświetlacza LCD podświetlenie oświetli cały ekran, nawet jeśli jego większość jest czarna. Jednak podczas oglądania tego samego obrazu na wyświetlaczu OLED piksele tworzące czarny kwadrat są po prostu wyłączone. Oznacza to, że w ogóle nie zużywają energii.
Tego typu wyświetlacze sprawiają, że tryby ciemne są znacznie ciekawsze. Korzystając z ciemnego interfejsu, możesz znacznie wydłużyć żywotność baterii swojego urządzenia. . Tryby ciemne oczywiście idą w parze ze zmianami w interfejsie użytkownika, więc odświeżmy naszą wiedzę!
Tryby ciemne 101
Po pierwsze: „ciemny” to nie to samo, co „czarny”. Nie próbuj zastępować białego tła czarnym, bo uniemożliwi to użycie cieni. Taki projekt będzie super płaski (w złym tego słowa znaczeniu).
Należy pamiętać o podstawowych zasadach cieniowania/oświetlenia. Obiekty znajdujące się wyżej powinny być jaśniejsze w cieniu, symulując rzeczywiste oświetlenie i cieniowanie. Ułatwia to rozróżnienie poszczególnych komponentów i ich hierarchii.
Dwa identyczne szare kwadraty z cieniem, jeden na 100% czarnym tle, drugi na #121212. W miarę unoszenia się obiekt staje się jaśniejszym odcieniem szarości.
W przypadku ciemnego motywu nadal możesz pracować ze zwykłym kolorem podstawowym, o ile kontrast jest odpowiedni. Wyjaśnijmy na przykładzie.
W tym interfejsie główną akcją jest duży niebieski przycisk na dolnym pasku. Nie ma problemu z kontrastem przy przełączaniu między trybem jasnym i ciemnym, przycisk nadal przyciąga wzrok, ikona jest wyraźna i ogólnie wszystko jest w porządku.
Kiedy ten sam kolor zostanie użyty na różne sposoby, na przykład w tekście, pojawią się problemy. Spróbuj użyć (znacznie) mniej nasyconego odcienia głównego koloru lub poszukaj innych sposobów na włączenie kolorów marki do interfejsu.
Po lewej: Czerwień na czarnym wygląda źle. Po prawej: zmniejsz nasycenie i wszystko będzie wyglądać dobrze. - około. tłumaczenie
To samo dotyczy wszelkich innych mocnych kolorów, których mogłeś użyć, takich jak kolory ostrzegawcze lub kolory błędów. Google używa w swoich plikach 40% białej warstwy nałożonej na domyślny kolor błędu przy przejściu do trybu ciemnego. Jest to całkiem dobry punkt wyjścia, ponieważ poprawi poziom kontrastu, aby odpowiadał standardom AA. Oczywiście zawsze możesz zmienić ustawienia według własnego uznania, ale pamiętaj o sprawdzeniu poziomu kontrastu. Nawiasem mówiąc, przydatnym narzędziem do tego celu jest wtyczka Sketch - , który pokazuje dokładnie, jaki jest kontrast między 2 warstwami.
A co z tekstem?
Tutaj wszystko jest proste: nic nie powinno być w 100% czarne i w 100% białe i odwrotnie. Biały odbija fale świetlne o wszystkich długościach fal, czarny pochłania. Jeśli umieścisz tekst w 100% biały na 100% czarnym tle, litery będą odbijać światło, rozmazywać się i staną się mniej czytelne, co negatywnie wpłynie na czytelność.
To samo dotyczy 100% białego tła, które odbija zbyt dużo światła, aby w pełni skupić się na słowach. Spróbuj nieco złagodzić biały kolor, użyj jasnoszarego tła i tekstu na czarnym tle. Zmniejszy to zmęczenie oczu, zapobiegając
Tryb ciemny jest już dostępny i nie zniknie
Ilość czasu, jaki spędzamy przed ekranami stale rośnie, a każdego dnia w naszym życiu, od momentu przebudzenia aż do zaśnięcia, pojawiają się nowe ekrany. To dość nowe zjawisko, nasze oczy nie są jeszcze przyzwyczajone do wydłużenia czasu przed ekranem w późnych godzinach wieczornych. Tutaj wkracza tryb ciemny. Wierzymy, że wraz z wprowadzeniem tej funkcji w macOS i Material Design (i najprawdopodobniej w iOS) prędzej czy później stanie się ona domyślną funkcją we wszystkich aplikacjach, zarówno mobilnych, jak i stacjonarnych. I lepiej być na to przygotowanym!
Jedynym powodem, dla którego nie należy wdrażać trybu ciemnego, jest absolutna 100% pewność, że z aplikacji korzysta się wyłącznie przy jasnym świetle dziennym. To jednak nie zdarza się często.
Warto wspomnieć o kilku rzeczach, które będą wymagały szczególnej uwagi przy wdrażaniu trybu ciemnego, poza podsumowanymi wcześniej podstawowymi zasadami.
Pod względem dostępności tryb ciemny nie jest najwygodniejszy, ponieważ kontrast jest generalnie niższy, co z kolei wcale nie poprawia czytelności.
Ale wyobraź sobie, że szykujesz się do snu, bardzo chcesz spać, ale tuż przed zaśnięciem przypominasz sobie, że musisz wysłać komuś bardzo ważną wiadomość, która nie może poczekać nawet jednej nocy. Łapiesz za telefon, włączasz go i AAAAAAA... jasne tło Twojego iMessage nie pozwoli Ci zasnąć przez kolejne 3 godziny. Chociaż jasny tekst na ciemnym tle nie jest uważany za najbardziej dostępny, posiadanie trybu ciemnego w tej sekundzie byłoby zwiększyć wygodę o milion. Wszystko zależy od sytuacji, w jakiej w danym momencie znajduje się użytkownik.
Dlatego myślimy automatyczny tryb ciemny taki fajny pomysł. Włącza się wieczorem i wyłącza rano. Użytkownik nie musi nawet o tym myśleć, co jest bardzo wygodne. Twitter wykonał świetną robotę, ustawiając tryb ciemny. Ponadto mają zarówno tryb ciemny, jak i jeszcze ciemniejszy tryb dla wszystkich tych ekranów OLED, oszczędzając baterię i wszystko, co z tym związane. Należy tutaj pamiętać: daj użytkownikowi możliwość ręcznego przełączania, kiedy tylko chce: nie ma nic gorszego niż automatyczna zmiana interfejsu bez możliwości ponownego przełączenia.
Twitter ma automatyczny tryb ciemny, który włącza się wieczorem i wyłącza rano.
Także opracowując temat warto mieć na uwadze, że niektórych rzeczy po prostu nie da się przyciemnić.
Weź edytor tekstu, taki jak Pages. Możesz przyciemnić interfejs, ale sam arkusz będzie zawsze biały, imitując prawdziwą kartkę papieru.
Strony z włączonym trybem ciemnym
To samo dotyczy wszystkich typów edytorów do tworzenia treści, takich jak Sketch czy Illustrator. Chociaż interfejs można przyciemnić, obszar roboczy, z którym pracujesz, będzie zawsze domyślnie biały.
Szkicuj w trybie ciemnym, zachowując jasny, biały obszar roboczy.
Wierzymy, że niezależnie od aplikacji, tryby ciemne będą natywne dla używanego systemu operacyjnego, co oznacza, że najlepiej przygotować się na przyszłość. będzie ciemno.
Jeśli chcesz dowiedzieć się więcej na temat tworzenia ciemnych interfejsów użytkownika, koniecznie zapoznaj się z wytycznymi , to było nasze główne źródło informacji w przypadku tego artykułu.
Źródło: www.habr.com