Jak zaprojektować tryb ciemny: przewodnik 2021 dla projektantów aplikacji mobilnych

Przyciemnij światła, zrelaksuj oczy i oszczędzaj energię. Tryb ciemny to jeden z największych trendów w projektowaniu, a światowej klasy marki, takie jak WhatsApp, Instagram, Google, Facebook i Apple, już wskoczyły do ​​pociągu projektowania trybu ciemnego.

Oficjalna premiera Androida 10 i iOS 13 przyniosła ciemny interfejs użytkownika w centrum uwagi. Zarówno Apple, jak i Google od roku poświęcają swoje zasoby i uwagę trybowi ciemnemu.

Jeśli zrobisz to poprawnie, korzyści płynące z trybu ciemnego są bezprecedensowe. Można je łatwiej odczytać w słabym świetle. Zmniejszają zmęczenie oczu. Mogą w wysokim stopniu wyeliminować zużycie baterii, w oparciu o ekran.

Przygotowanie Dark Theme do aplikacji staje się obowiązkiem każdej firmy projektującej aplikacje mobilne. Niemniej jednak nie można ignorować wyzwań związanych z projektowaniem aplikacji w trybie ciemnym. Nie można po prostu ponownie użyć kolorów lub odwrócić kolorów. Jeśli to zrobisz, uzyskasz biegunowe przeciwieństwo tego, czego potrzebujesz.

Nieprawidłowo zaprojektowany tryb ciemny powoduje zmęczenie oczu i utrudnia czytanie przy słabym oświetleniu. Niska jasność tego motywu stwarza poczucie bezpieczeństwa w ciemnym otoczeniu. W rezultacie podczas tworzenia ponurych motywów upewnij się, że są przyjemne, wyważone i czytelne.

W tym artykule przyjrzymy się, jak projektanci aplikacji mobilnych mogą rozpocząć dostarczanie użytkownikom interfejsu w trybie ciemnym.

Jak zaprojektować ciemny motyw dla aplikacji na Androida?

Google zapewnia obszerną obsługę dokumentacji , która pomaga projektantom w zrozumieniu, jak projektować ciemne motywy dla aplikacji na Androida .

Gigant technologiczny ustanowił cztery zasady, które definiują interfejs użytkownika ciemnego motywu i dają punkt wyjścia do opracowania projektu aplikacji w trybie ciemnym –

1. Szary kontra czarny

Pierwszą rzeczą, którą możesz zauważyć, jest to, że domyślne tło dla aplikacji w ciemnym motywie nie jest czarne, ale ciemnoszare: #121212.

Toczy się wiele dyskusji na temat tego, dlaczego wybraliśmy szarość zamiast czerni, zwłaszcza że platforma w Androidzie 10 używa czarnego tła. Jest to w dużej mierze kompromis między użytecznością a oszczędnością energii.

Użycie czystego czarnego koloru #000000 jako tła na platformie pozwala aplikacjom systemowym i powierzchniom zużywać jak najmniej energii, gdy są otwarte na wyświetlaczach OLED. Te powierzchnie systemowe wydają się być dość proste, zazwyczaj zawierają tylko tekst i proste ikony, więc aby walczyć z problemami z kontrastem, możemy dostosować kolory tekstu i ikon do własnych potrzeb.

Jednak w aplikacjach Twoje powierzchnie mogą zawierać wszystko: złożone kolorowe animacje wektorowe, jasne obrazy, kontrastujące powierzchnie marki i wiele więcej. Umieszczenie ich na czystym czarnym tle oznacza, że ​​uzyskany kontrast jest znacznie wyższy, co może zwiększyć zmęczenie oczu. Dlatego rozwiązaniem jest użycie jasnego lub szarego tła.

2. Dbałość o szczegóły w kolorze z akcentami

Podczas definiowania schematu kolorów dla ciemnego interfejsu użytkownika Google zaleca stosowanie ograniczonych akcentów kolorystycznych w ciemnych interfejsach motywu, więc większość miejsca jest poświęcona ciemnym powierzchniom. Ponadto zachowanie ciemnego tła sprawia, że ​​zdjęcia są głębsze i tworzą przyjemny dla oka kontrast z akcentem kolorystycznym. Pomocne może być użycie dzielonych kolorów dopełniających . Schemat posiada jeden kolor dominujący oraz dwa kolory sąsiadujące z dopełnieniem koloru dominującego. W ten sposób zapewnia wymagany kontrast bez napięcia uzupełniającego schematu kolorów.

3. Oszczędzaj żywotność baterii

Ciemne motywy zmniejszają luminancję emitowaną przez ekrany urządzeń, zachowując jednocześnie minimalne współczynniki kontrastu kolorów. Pomagają poprawić ergonomię wzroku, zmniejszając zmęczenie oczu, dostosowując jasność do aktualnych warunków oświetleniowych i ułatwiając korzystanie z ekranu w ciemnym otoczeniu – a wszystko to przy jednoczesnym oszczędzaniu energii baterii. Urządzenia z ekranami OLED korzystają z możliwości wyłączenia czarnych pikseli o dowolnej porze dnia lub ograniczenia użycia jasnych pikseli.

4. Wybór kombinacji kolorów zgodnych z ułatwieniami dostępu

Zadbaj o zwykłych użytkowników ciemnego motywu (takich jak osoby niedowidzące), spełniając standardy kontrastu kolorów ułatwień dostępu .

W wytycznych Google Material Design dla ciemnego schematu kolorów i trybu ogólnego poprawiono różne właściwości —

Elewacja: w procesie projektowania ciemnego motywu komponenty zachowują te same domyślne komponenty cienia i poziomy elewacji, jak w przypadku jasnego motywu. To co różni, to oświetlenie powierzchni poziomów elewacji.

Im wyższa wysokość powierzchni, tym jaśniejsza będzie powierzchnia. Lekkość podkreślona została poprzez zastosowanie półprzezroczystych nakładek. Nakładki umożliwiają również rozróżnienie komponentów i zobaczenie cieni.

Dostępność i kontrast: tło w projekcie interfejsu użytkownika z ciemnym motywem powinno być wystarczająco ciemne, aby pokazać biały tekst. Muszą używać kontrastu co najmniej 15,8:1 między tłem a tekstem. W ten sposób zapewnisz, że tekst podstawowy spełnia standard AA WCAG 4,5:5:1 po dodaniu do powierzchni na najwyższej wysokości.

Kolory: Projektanci powinni skupić się na wykorzystaniu kolorów nienasyconych, ponieważ zwiększają one czytelność. Wybór kolorów podstawowych i dodatkowych musi również zależeć od rozważenia zarówno jasnych, jak i ciemnych motywów interfejsu użytkownika.

Jasny tekst na ciemnym tle: kiedy jasny tekst pojawia się na ciemnym tle, musi mieć następujące poziomy krycia:

• Wyeksponowany tekst ma nieprzezroczystość 87%
• Tekst ze średnim wyróżnieniem i tekst podpowiedzi mają krycie 60%
• Wyłączony tekst ma krycie 38%

Stany: Stany informują o stanie elementów interaktywnych dla układów lub komponentów ciemnego motywu za pomocą nakładek. W ciemnym motywie stany muszą używać tych samych wartości nakładki, co domyślny jasny motyw. Istnieją dwa kontenery, które dziedziczą nakładki stanu: Surface i Primary .

Pojemniki Surface, które używają koloru Surface, muszą nałożyć nakładkę, która odpowiada kolorowi tekstu lub ikony. W przypadku pojemników powierzchniowych, które używają koloru podstawowego, nakładka stanu musi być biała.

Jak zaprojektować aplikację na iOS w trybie ciemnym?

W trybie ciemnym firma Apple zmieniła znaczenie stylów i kolorów interfejsu użytkownika w systemie iOS. Przyjrzyjmy się zmianom, które wprowadził Apple , aby pomóc Ci w projektowaniu trybu ciemnego na iOS 13.

Kolory semantyczne

Firma Apple wprowadziła semantyczne kolory dla powszechnie używanych składników interfejsu użytkownika, aby zrównoważyć odczucia i wygląd aplikacji na iOS zarówno w trybie jasnym, jak i ciemnym. Te kolory nie mają najlepszej wartości RGB; zamiast tego bezpośrednio zmieniają styl interfejsu iOS. Co więcej, w trybie ciemnym te semantyczne odcienie pomagają radzić sobie z kolorem i tekstem nakładki.

Kolory systemowe

Firma Apple wprowadziła dziewięć predefiniowanych kolorów systemowych , które wspierają ciemny wygląd całego systemu i dynamikę. W związku z tym kolory te modyfikują się do wybranych stylów interfejsu.

Żywość i efekty rozmycia

Wraz z iOS 13 firma Apple wprowadziła 4 efekty rozmycia i 8 efektów jaskrawości, które automatycznie dostosowują się do stylu interfejsu iOS.

Oto efekty rozmycia w trybie ciemnym i jasnym:

Firma Apple wprowadziła również 4 efekty jaskrawości w zestawie typografii w trybie ciemnym iOS , 3 w nakładce i 1 dla separatora. Tutaj są:

Symbole SF

Firma Apple w swoich wytycznych dotyczących interfejsu ludzkiego oferuje zbiór ponad 1500 symboli dla programistów i projektantów produktów do wykorzystania w ich aplikacjach. Automatycznie wyglądają niesamowicie w trybie ciemnym, ponieważ zostały zoptymalizowane zarówno pod kątem jasnego, jak i ciemnego interfejsu użytkownika.

Wskazówki dotyczące efektywnego projektowania ciemnych motywów aplikacji mobilnej

Tryb ciemny to jedna z najbardziej pożądanych funkcji w ciągu ostatnich kilku lat. Zarówno Apple, jak i Google sprawiły, że ciemny motyw stał się istotną częścią interfejsu użytkownika. Zmniejszona luminancja w trybie ciemnym zapewnia bezpieczeństwo w ciemnym otoczeniu i może zminimalizować zmęczenie oczu.

Istnieją pewne procesy, które muszą działać poprawnie podczas tworzenia interfejsu użytkownika w trybie ciemnym. W końcu chcesz, aby Twój produkt był niesamowity, prawda? Zaznaczmy wszystkie pola, aby uzyskać listę kontrolną sprawdzonych metod projektowania trybu ciemnego dla aplikacji.

1. Unikaj czystego czarnego koloru!

Ciemny motyw nie może zawierać białego tekstu na czarnym tle. W rzeczywistości patrzenie na ekran o wysokim kontraście może być trudne.

Po dodaniu trybu ciemnego do aplikacji najbezpieczniej jest używać ciemnoszarego jako podstawowego koloru składników trybu ciemnego , ponieważ zmniejsza to zmęczenie oczu, a także znacznie łatwiej jest patrzeć na cienie na szarej powierzchni w porównaniu z czarnym .

2. Unikaj używania nasyconych kolorów w ciemnych motywach

Nasycone kolory, które świetnie prezentują się na jasnych powierzchniach, mogą wibrować na ciemnym tle, przez co tekst jest niezwykle trudny do odczytania.

Powinieneś używać jasnych tonów, ponieważ są one lepiej czytelne i nie sprawiają, że interfejs użytkownika jest niepotrzebnie wyrazisty, co oszczędza niepotrzebne zmęczenie oczu.

3. Rozważ emocjonalną stronę projektu swojej aplikacji

Kiedy projektujesz ciemny motyw dla swojej aplikacji, prawdopodobnie musisz dążyć do przetłumaczenia tego samego emocjonalnego odczucia projektu jasnego motywu również na ciemny motyw.

Ale nie jest to mądre. Ponieważ ostatecznie różne kolory wywołują różne emocje. W rezultacie kolory w trybie ciemnym będą wywoływać inne wrażenie. Dlatego konieczne jest znalezienie wspólnej płaszczyzny emocjonalnej dla obu tematycznych interfejsów użytkownika.

4. Przetestuj projekt w obu wyglądach

Podobnie jak użytkownicy przełączaliby się między obydwoma interfejsami motywów o różnych porach dnia, konieczne jest przetestowanie aplikacji dwa razy dziennie, aby zobaczyć, jak działa w różnych warunkach oświetleniowych. I aby upewnić się, że spełnia Twoje kryteria.

5. Włącz tryb ciemny do animacji i ilustracji

Jeśli Twoja aplikacja zawiera animacje lub ciężkie elementy graficzne, będziesz musiał przygotować się na ich przyjęcie również w ciemnym motywie. Jeśli ilustracja zawiera temat i tło, dobrze byłoby całkowicie zgasić kolory tła, aby utrzymać uwagę na obiekcie.

6. Spełnij standardy kontrastu kolorów dostępności

Upewnij się, że Twoje treści pozostają czytelne w trybie ciemnym. Ciemne powierzchnie motywu muszą być wystarczająco ciemne, aby można było wyświetlić biały tekst. Google Material Design zaleca stosowanie kontrastu co najmniej 15,8:1 między tekstem a tłem. Użyj narzędzi kontrastu kolorów, aby przetestować współczynnik kontrastu.

7. Nie odwracaj się

Jeśli przechodzisz z trybu standardowego do trybu ciemnego, oryginalny motyw może dostarczać przydatnych sygnałów wizualnych. Aby stworzyć ciemny motyw, nie odwracaj po prostu kolorów. Możesz przekształcać kolory o znaczeniu psychologicznym w pozbawione znaczenia, nijakie tony. Podejmij świadomą decyzję dotyczącą kolorów, których używasz.

8. Używaj właściwych kolorów „włączonych”

„Włączone” kolory znajdują się na górze kluczowych powierzchni i elementów. Zwykle są używane do tekstu. W przypadku ciemnego motywu domyślny kolor „włączony” to czysta biel. Ale ma jasny kolor i wizualnie wibruje na ciemnym tle. Z tego powodu Google Material Design sugeruje użycie nieco ciemniejszej bieli.

• Wyłączony tekst wykorzystuje ciemność 38%.
• Przy 60% wykonywany jest tekst o średnim nacisku.
• Tekst z dużym naciskiem musi mieć zaciemnienie 87%.

9. Wejdź głęboko

Im wyższa warstwa, tym powinna być lżejsza. Stworzy to wizualną hierarchię w trybie ciemnym, która przechodzi od najczęściej używanych elementów na ekranie do najmniejszego.

Dzięki temu wiesz już wszystko, co trzeba wiedzieć o projektowaniu wersji aplikacji w trybie ciemnym. Następnym wykonalnym krokiem jest rozmowa z zespołem ekspertów, którzy zaimplementowali interfejs użytkownika w aplikacjach. Powinieneś to postrzegać jako sposób na zbliżenie się do celu, jakim jest oferowanie zdrowych wrażeń użytkownikom końcowym.

Zawijanie

Dzięki temu wiesz już wszystko, co trzeba wiedzieć o projektowaniu wersji aplikacji w trybie ciemnym. Projekt aplikacji w trybie ciemnym to rewolucja, która dopiero się rozkręca. Oznacza to, że to idealny czas, aby pogrążyć się w ciemności i stać się kreatywnym. Następnym wykonalnym krokiem jest rozmowa z zespołem ekspertów ds. interfejsu użytkownika, którzy zaimplementowali interfejs użytkownika w aplikacjach, i uzyskanie rzeczywistego wglądu w znaczenie projektowania interfejsu użytkownika w tworzeniu aplikacji . Powinieneś to postrzegać jako sposób na zbliżenie się do celu, jakim jest oferowanie zdrowych wrażeń użytkownikom końcowym.

Chcesz dowiedzieć się więcej o projektowaniu aplikacji w trybie ciemnym? Skontaktuj się z ekspertami w zakresie tworzenia aplikacji .

Często zadawane pytania dotyczące projektowania aplikacji trybu ciemnego

1. Czy tryb ciemny jest lepszy dla oka?

Tak. Konstrukcja aplikacji w trybie ciemnym zapobiega zmęczeniu i wysuszeniu oczu przy długotrwałym korzystaniu z telefonu komórkowego. Brak kontrastów ułatwia użytkownikom przewijanie aplikacji w ciemności.

2. Jak projektujesz dla trybu ciemnego?

Chociaż zarówno Apple, jak i Google mają swoją dokumentację wyjaśniającą proces projektowania aplikacji z ciemnym motywem, istnieje kilka wskazówek, które należy wziąć pod uwagę. Niektóre z nich to: unikaj jednolitego czarnego koloru, pamiętaj o emocjonalnym aspekcie używania czarnego koloru, spójrz na przejściową różnicę między projektowaniem aplikacji w trybie białym i ciemnym.

3. Czy jest coś równie niezdrowego w trybie ciemnym?

Tak, są przypadki, w których tryb ciemny może wyrządzić więcej szkody niż pożytku. Mogą powodować efekt zamglenia, a gdy nie przywiązuje się dostatecznej uwagi do stylu kontrastu, mogą w ogromnym stopniu męczyć oczy.