Ten artykuł został napisany przez Kevina George'a.
Tryb ciemny to jeden z najszybciej rozwijających się trendów w projektowaniu stron internetowych w ostatnich latach. Teraz nie jest to już tylko trend - to najlepsza praktyka.
wiadomość sponsorowana
Obecnie ludzie wolą korzystać z aplikacji WhatsApp, Instagram, Facebook, Twitter, Slack i poczty elektronicznej w trybie przyciemnionym. Apple i Google przejęły inicjatywę i uczyniły ciemne motywy fundamentalną częścią swoich interfejsów użytkownika. Zintegrowały one tryb ciemny w swoich najnowszych aktualizacjach systemów operacyjnych, odpowiednio iOS 13 i Android 10.
Wskaźnik przyjęcia tego trendu jest bardzo wysoki. W listopadzie 2019 roku firma Polar podała, że 95% osób woli korzystać z trybu ciemnego.
W marcu 2020 roku Android Authority ujawnił, że 91,8% użytkowników preferuje tryb ciemny wszędzie tam, gdzie jest on dostępny.
Jeśli chodzi o użytkowników Apple, 7,5% osób korzysta z trybu ciemnego w aplikacji Apple Mail.
wiadomość sponsorowana
37% przeszło na tryb ciemny w systemie iOS.
Co to jest tryb ciemny?
Zasadniczo tryb ciemny to inwersja kolorów, w wyniku której tło jest ciemniejsze, a czcionki, elementy wizualne i ikony jaśniejsze.
Wprowadzenie trybu ciemnego jest związane z coraz dłuższym czasem spędzanym przez użytkowników na ekranie. Programiści wymyślili ten motyw, aby ograniczyć ryzyko spędzania zbyt dużej ilości czasu przed urządzeniami cyfrowymi.
Zalety trybu ciemnego
Tryb ciemny ma kilka zalet dla przeciętnego użytkownika:
- Łatwiejsze czytanie w ciemności. Podczas pracy w pomieszczeniu o słabym oświetleniu łatwiej jest czytać jaśniejszy tekst na ciemnoszarym tle.
- Zmniejsza zmęczenie oczu. Tryb ciemny pomaga zmniejszyć zmęczenie oczu spowodowane jasnym, białym światłem.
- W większości przypadków tryb ciemny sprawia, że treść jest bardziej dostępna dla czytelników z wadami wzroku. Nic dziwnego, że programiści wolą wpisywać swoje kody na ciemnym tle.
- Korzyść dla baterii. Tryb ciemny pomaga oszczędzać baterie urządzeń.
- Mniej przeszkadza innym. Jeśli pracujesz o północy, a obok Ciebie ktoś śpi, tryb ciemny może być dla tej osoby mniej przeszkadzający.
- Zapobiega migrenom. Pacjenci cierpiący na fotofobię powinni przełączyć się na tryb ciemny, ponieważ pomaga on zapobiegać migrenie.
- Lepsze UX w rozrywce. Ciemne motywy sprawdzają się szczególnie dobrze w interfejsach użytkownika związanych z rozrywką, takich jak telewizory Smart TV, konsole do gier i aplikacje mobilne z reklamami telewizyjnymi. Te motywy przenoszą wrażenia użytkownika na wyższy poziom, zapewniając głęboki efekt wizualny promosów, zwiastunów lub pokazów filmowych.
przekaz sponsorowany
Zobacz, jak Netflix wykorzystał możliwości trybu ciemnego na swojej stronie internetowej.
Wady trybu ciemnego
Wraz z dobrymi rzeczami przychodzą złe, więc może się zrobić niezły bałagan, jeśli zaprojektowałeś swoje elementy wizualne nie pamiętając o kompatybilności z trybem ciemnym.
Oto kilka innych wad korzystania z trybu ciemnego:
- Tryb ciemny spowalnia renderowanie. Jeśli nie zaprojektujesz kompatybilnej wersji swojej strony internetowej, wiadomości e-mail lub aplikacji, doprowadzi to do uszkodzenia układu i ogólnie nieprzyjemnego UX, gdy odbiorcy będą korzystać z trybu ciemnego na swoich urządzeniach.
- Tryb ciemny może zmniejszyć więź emocjonalną. Jeśli jesteś marką, której celem jest wywoływanie określonych emocji, tryb ciemny może być dla Ciebie problemem. Ciemne kolory mogą utrudnić odwiedzającym nawiązanie osobistej więzi z treścią. Na przykład firmy zajmujące się zdrowiem i odnową biologiczną nie będą pasowały do ciemnych motywów.
- Tryb ciemny daje poczucie zmniejszenia przestrzeni. Tak jak ciemne ściany w pokojach mogą wywoływać uczucie klaustrofobii, tak samo ciemny tryb na urządzeniach może wywoływać podobne odczucia.
Dos i Don't projektowania zapewniającego kompatybilność z trybem ciemnym
1. Przestrzegaj standardów kontrastu kolorów
Twój tekst powinien być czytelny dla osób korzystających z trybu ciemnego. Według Google Material Design, ciemne powierzchnie i w 100% biały tekst muszą mieć minimalny poziom kontrastu 15,8:1.
Przyjrzyj się poniższej ilustracji. Trzecia sekcja jest znacznie bardziej czytelna niż pierwsza i druga. Pokazuje to, że kontrast kolorów staje się jeszcze ważniejszy, gdy projektujesz dla trybu ciemnego.
Narzędzia do sprawdzania kontrastu kolorów
- WebAIM Color Contrast Checker
- Współczynnik kontrastu
- Tanaguru Contrast Finder
- Paleta kolorów A11y
- ColorBox
- Kontrast: aplikacja dla macOS
- Przystępne kolory marki
- Przegląd kolorów
- Colorblindly
- Colorable
- Kontroler kontrastu przycisków
Oprócz tego istnieją narzędzia takie jak Sim Daltonism i NoCoffee Visual Simulator, które pomagają projektantom wizualizować kolory tak, jak widziałyby je osoby z różnymi rodzajami problemów ze wzrokiem, w tym ze ślepotą barw.
2. Twórz głębię w obrazach
Ważne jest, aby zrozumieć, że o ile w trybie jasnym można z łatwością stosować efekty cieni, to w trybie ciemnym ta koncepcja nie ma zastosowania. Użytkownicy nie będą mogli zobaczyć cieni na ciemnym tle.
Poniżej znajduje się obrazek, który to demonstruje:
Aby uniknąć takich błędów, projektanci powinni oświetlać powierzchnię każdego poziomu. Do reprezentowania podwyższonych powierzchni i elementów należy używać nakładek. Wraz ze wzrostem wysokości powierzchnia staje się jaśniejsza.
3. Nie stosuj czystej czerni w tle
wiadomość sponsorowana
Tryb ciemny nie musi oznaczać, że za białym tekstem lub ikonami musi stać czysto czarne tło. Tak wysoki kontrast może być męczący dla oczu.
Dlatego zamiast prawdziwej czerni należy używać ciemnoszarego tła (kod heksadecymalny 121212). Poza tym, że ciemnoszare powierzchnie są mniej męczące dla oczu, ułatwiają rozróżnianie cieni i przedstawiają szeroki zakres wysokości, głębi i kolorów.
4. Nie używaj nasyconych kolorów na ciemnych tłach
Nasycone kolory są bardziej atrakcyjne wizualnie, gdy są stosowane na jasnych tłach. Jednak te same kolory powodują efekt wibracji na ciemnych powierzchniach, co utrudnia ich odczytanie. Używaj nienasyconych kolorów podstawowych, które pogłębią kontrast na ciemnych powierzchniach.
Źródło obrazu: roadwarriorcreative.com
Jako najlepszą praktykę zaleca się stosowanie kolorów w zakresie 200-50, ponieważ zwiększają one czytelność w trybie ciemnym.
Spójrz na poniższy zrzut ekranu, aby zorientować się, jakich pastelowych kolorów możesz użyć, aby uzyskać zgodność z trybem ciemnym.
Źródło obrazu: material.io
5. Używaj kolorów "włączonych" dla tekstu
Kolory, które są wyświetlane na górze komponentów i kluczowych powierzchniach, są określane jako kolory "na". Zazwyczaj te kolory są używane do tekstu. Domyślnym kolorem "włączonym" w ciemnym motywie jest czysta biel. Jednak, jak wspomniano w poprzednim punkcie, kolory te powodują wizualne wibracje na ciemnych tłach. Dlatego zaleca się stosowanie ciemniejszego koloru białego.
Należy również pamiętać, że jasny tekst na ciemnym tle będzie wydawał się bardziej pogrubiony w porównaniu z ciemnym tekstem na jasnym tle. W związku z tym w trybie ciemnym należy używać czcionek o mniejszej gramaturze.
6. Weź pod uwagę osobowość i emocjonalny wydźwięk Twojej marki
Wielu projektantów pomija ten aspekt, jeśli chodzi o kompatybilność z trybem ciemnym. Próbują oni odtworzyć ten sam emocjonalny wydźwięk poprzez ciemny motyw. Nie jest to zalecane, ponieważ ludzie będą postrzegać kolory inaczej w zależności od tła.
Dlatego w ustawieniach trybu ciemnego nie będzie można wywołać tych samych emocji, co w trybie jasnym. Zamiast tego można wykorzystać tę okazję do stworzenia tożsamości produktu.
7. Dodaj biały kontur wokół logo i ikon
Aby Twoje logo wyróżniało się na ciemnym tle, dodaj wokół niego biały kontur.
Ta sama sztuczka dotyczy również ikon.
8. Używaj przezroczystych obrazów w formacie PNG
Aby zapewnić kompatybilność z trybem ciemnym, zawsze używaj przezroczystych obrazów w formacie PNG. Powodem tego jest fakt, że takie obrazy przejmują kolory tła przy odwróceniu. W rezultacie obraz będzie dobrze wyglądał zarówno w trybie ciemnym, jak i jasnym.
9. Dobrze przycinaj obrazy
Jeśli nie możesz używać przezroczystych obrazów, upewnij się, że odpowiednio je wykadrowałeś. Spójrz na poniższy obrazek.
Jeśli obraz jest przycięty zbyt blisko logo lub obrazu, nie będzie dobrze wyglądał w trybie ciemnym.
10. Nie należy łączyć kolorów tła i obrazów
Kolory tła zmienią się po przejściu z trybu jasnego na ciemny, ale obrazy nie ulegną zmianie. Dlatego projektanci nie powinni łączyć kolorów tła i obrazów, jeśli chcą, aby ich projekt był kompatybilny z trybem ciemnym.
Projektowanie emaili dla trybu ciemnego
Omówiliśmy 10 ogólnych zaleceń dotyczących projektowania z myślą o kompatybilności z trybem ciemnym. Ale co z projektowaniem wiadomości e-mail, które użytkownicy będą oglądać w trybie ciemnym?
Tryb ciemny został po raz pierwszy wprowadzony do poczty elektronicznej we wrześniu 2018 roku, gdy firma Apple zaktualizowała swoje 15. wydanie desktopowego systemu operacyjnego, macOS Mojave. Rok później Gmail wprowadził tryb ciemny dla urządzeń z systemami Android i iOS, a także dla aplikacji iOS Mail.
Apple Mail jest na tyle hojny, że pozwala projektantom i programistom budować e-maile zarówno dla trybów jasnych, jak i ciemnych za pomocą CSS. Programiści mogą zmieniać kolory czcionek, elementy wizualne, ikony i tła za pomocą znaczników meta HTML, celu CSS i zaktualizowanych właściwości.
Entuzjaści poczty elektronicznej mają nadzieję, że takie dostosowanie będzie wkrótce obsługiwane przez wszystkie popularne klienty poczty elektronicznej.
Jak widać w poniższej tabeli, każdy klient poczty e-mail inaczej traktuje wiadomości e-mail w trybie przyciemnionym.
Rendering wiadomości e-mail w trybie przyciemnionym
W trybie ciemnym renderowanie wiadomości e-mail staje się jeszcze większym wyzwaniem.
Oto, jak dobrze zaprojektowana wiadomość e-mail będzie wyglądać w trybie przyciemnionym.
Oto trzy sposoby renderowania wiadomości e-mail w trybie przyciemnionym przez różne klienty poczty e-mail.
Tradycyjni klienci poczty e-mail
Subskrybenci, którzy korzystają z Twojego emaila na komputerze, stronie internetowej lub tradycyjnym, mobilnym kliencie pocztowym, nie zobaczą żadnych zmian w emailu, nawet jeśli tryb ciemny jest włączony.
Na przykład, ten email od Grammarly będzie wyświetlany dokładnie tak samo jak ten, nawet w trybie ciemnym.
Outlook
Wiadomości e-mail przeglądane za pomocą programu Outlook będą miały częściową inwersję kolorów, gdy zostaną otwarte w trybie ciemnym. Jasne tła staną się ciemne, a ciemny tekst będzie jaśniejszy. Pozostałe elementy wiadomości e-mail nie będą wykazywać żadnych zmian.
Oto jak będzie wyglądać wiadomość e-mail w trybie ciemnym w Outlooku.
Źródło obrazu: litmus.com
Windows
W systemie Windows wszystkie kolory są odwrócone, gdy wiadomość e-mail jest wyświetlana w trybie ciemnym. Może to stanowić problem, jeśli wysłałeś wiadomość e-mail z ciemnym motywem. Po przejściu do trybu ciemnego w systemie Windows wiadomość stanie się jasna.
Oto jak będzie wyglądać wiadomość e-mail w trybie ciemnym w systemie Windows.
Źródło obrazu: litmus.com
Te inwersje kolorów nie powodują żadnych problemów z renderowaniem, ponieważ elementy projektu są zsynchronizowane z trybem ciemnym.
Jeśli jednak nie zastosujesz się do najlepszych praktyk trybu ciemnego, które omówiliśmy powyżej, Twój email będzie wyświetlany z uszkodzonym układem, jak pokazano poniżej.
Dostarczalność wiadomości e-mail w trybie ciemnym
Jeśli wiadomość e-mail nie została zaprojektowana tak, aby dobrze wyświetlała się w trybie przyciemnionym, spowoduje to uruchomienie filtrów antyspamowych i negatywnie wpłynie na Twoją reputację jako nadawcy.
Z punktu widzenia subskrybenta, wiadomość e-mail o złym wyglądzie zniechęci go. Mogą oni unikać otwierania wiadomości, a nawet zrezygnować z subskrypcji i oznaczyć ją jako spam.
W rezultacie, emaile nie zaprojektowane z myślą o trybie ciemnym będą miały wpływ na wskaźnik dostarczalności, a Ty nie będziesz w stanie skutecznie dotrzeć do swojej grupy docelowej.
ZAWSZE testuj swoje e-maile
Z każdym dniem pojawiają się nowe rozwiązania w świecie klientów poczty elektronicznej. Dlatego zawsze musisz testować swoje e-maile, aby mieć całkowitą pewność, że są one dobrze renderowane na różnych klientach poczty, urządzeniach i ustawieniach wyświetlania.
Litmus i Email on Acid to dwa z najpopularniejszych narzędzi, które pomogą Ci przetestować Twoje e-maile pod kątem kompatybilności z trybem ciemnym oraz ogólnego renderowania. Poza tym, do testowania wiadomości e-mail można również użyć prawdziwych urządzeń.
Podsumowanie
W najbliższych dniach tryb ciemny będzie zyskiwał na popularności. Jeśli jesteś projektantem graficznym, który chce być na bieżąco z najnowszymi trendami, projektowanie w trybie ciemnym jest właściwym rozwiązaniem.
Powyższe wskazówki z pewnością pozwolą Ci zaprojektować następną stronę internetową, aplikację mobilną lub wiadomość e-mail w taki sposób, aby tryb ciemny zapewniał jak najlepsze wrażenia.
Źródło obrazu: Czym jest tryb ciemny w poczcie e-mail i jak go włączyć w klientach poczty e-mail
_
O autorze: Kevin George jest szefem działu marketingu w Email Uplers, jednej z najszybciej rozwijających się firm zajmujących się projektowaniem i kodowaniem niestandardowych wiadomości e-mail. Na swoim blogu chętnie dzieli się swoimi spostrzeżeniami i przemyśleniami na temat najlepszych praktyk email marketingowych.
.