Projektowanie ciemnej kolorystyki odnosi się do stylu i podejścia do tworzenia projektu wizualnego, które opiera się na zastosowaniu głębokich, bogatych schematów kolorystycznych, zwykle z przewagą ciemnych odcieni. Ten styl projektowania stał się popularny w ostatnich latach i może być stosowany w różnych dziedzinach, w tym w projektowaniu stron internetowych, projektowaniu graficznym, projektowaniu wnętrz i innych.

Przyciemnij światła, zrelaksuj oczy i oszczędzaj energię. Tryb ciemny jest jednym z najpopularniejszych trendy projektowe, a światowej klasy marki, takie jak WhatsApp, Instagram, Google, Facebook i Apple, wsiadły już do pociągu projektowania w trybie ciemnym.

Przyjrzyjmy się, co robią te najlepsze marki i jak możesz dodać interfejs użytkownika w trybie ciemnym do swoich własnych projektów. Dowiesz się o plusy i minusy tryb ciemny i podstawowe najlepsze praktyki tworzenia trybu ciemnego, aby mieć pewność, że projekty Twojej witryny i aplikacji będą wyglądać i działać idealnie.

Drukowane materiały marketingowe

Co to jest tryb ciemny? Projekt w ciemnych kolorach

Tryb ciemny to interfejs użytkownika (UI), który wykorzystuje ciemny kolor tła jako główny kolor kolor - zazwyczaj czarny lub odcień szarości. Jest to całkowite przeciwieństwo standardowego białego interfejsu użytkownika, z którego projektanci korzystali od dziesięcioleci. W odpowiedzi na wydłużony czas korzystania z ekranu programiści odkryli, że interfejsy z ciemnymi motywami pomagają zmniejszyć zmęczenie oczu, szczególnie w warunkach słabego oświetlenia lub w nocy. Mniejsze zmęczenie oczu oznaczało mniej bólów głowy i lepsze doświadczenie w pracy.

Projekt aplikacji Instagram w trybie ciemnym Projekt w ciemnych kolorach

Interfejs trybu ciemnego na Instagramie

 

WhatsApp na temat projektowania aplikacji komputerowych w trybie ciemnym Projektuj w ciemnych kolorach

WhatsApp w trybie ciemnym na pulpicie za pośrednictwem aplikacji What's App

Projekt aplikacji w trybie ciemnym Google Fit

Interfejs użytkownika Google Fit w trybie ciemnym

 

Ale tryb ciemny nie jest niczym nowym.

Opracowanie plakatu. 5 zasad

Pamiętasz zielony kod komputerowy spadający na czarne tło w Matrixie? Był to ukłon w stronę oryginalnego trybu ciemnego: oldschoolowych monochromatycznych monitorów wczesnych komputerów.

Wczesny komputer domowy z zielonym tekstem na czarnym tle

Wczesne komputery domowe z zielonym tekstem na czarnym tle miały tryb ciemny OG.

 

Ten klasyczny, ciemny wygląd wyszedł z mody w latach 80. na rzecz czarnego tekstu na białym tle, imitującego atrament na papierze. Projekt w ciemnych kolorach

Co to jest reklama wideo? Definicja, rodzaje i trendy

Była to norma przez prawie trzydzieści lat, aż do powrotu trybu ciemnego w Windows Phone 7 w 2010 roku. Po tym, jak Google potwierdził, że tryb ciemny oszczędza baterię, dodał tę funkcję do swojego systemu operacyjnego Android w 2018 roku. Rok później Apple wprowadził tryb ciemny na iOS i iPadOS.

Tryb ciemny i tryb jasny w projekcie aplikacji iOS 13

Tryb ciemny w iOS 13

Plusy korzystania z trybu ciemnego. Projekt w ciemnych kolorach

Tryb ciemny jest nie tylko mniej męczący dla oczu (jeśli zostanie wykonany prawidłowo), ale także oszczędza baterię, a nawet może być zdrowszy. Przyjrzyjmy się praktycznym zaletom trybu ciemnego w porównaniu z trybem jasnym.

Zmniejsza zmęczenie oczu

Nie powinieneś czuć swoich oczu. Ale każdy, kto długo analizuje dane ekranowe, wie, że po pewnym czasie zaczynasz to robić. Zespół widzenia komputerowego (CVS) obejmuje ból oczu, niewyraźne widzenie, podwójne widzenie, bóle głowy, ból szyi/pleców i inne. Jeśli chodzi o wykresy i wykresy, tryb ciemny może dosłownie pomóc zmniejszyć ból.

Projekt aplikacji w trybie ciemnym Projekt w ciemnych kolorach

To zielone logo dobrze komponuje się z projektem aplikacji z ciemnym motywem.

 

Zwiększa widoczność przy słabym oświetleniu

Jeśli śpisz i ktoś włączy jasne światło, poczujesz ból głowy. Ta sama zasada dotyczy osób, które pracują przed ekranem komputera późno w nocy lub wcześnie rano. Tryb ciemny zmniejsza to odblaski i ułatwia przeglądanie treści w warunkach słabego oświetlenia.

Oszczędza energię baterii

Niektóre gadżety cyfrowe z ekranami OLED mogą wyłączać czarne piksele, gdy nie są używane. Tryb ciemny wykorzystuje zwiększoną liczbę czarnych pikseli, co powoduje, że urządzenie zużywa mniej energii.

Daje ładunek emocjonalny

Wielu użytkowników interfejsu użytkownika w trybie ciemnym wybiera go ze względów energetycznych i zdrowotnych, a nie ze względów estetycznych. Tryb ciemny przypomina im, że robią coś zdrowszego, co zapewnia im dobre samopoczucie — takie jak to, które towarzyszy ładowaniu pojemnika wielokrotnego użytku torba na zakupy lub butelkę wody.

Zapobiega ADD. Projekt w ciemnych kolorach

Cóż... w pewnym sensie. Białe światło i kolory zwykle odwracają Twoją uwagę, utrudniając wykonanie zadania. Interfejs użytkownika w trybie ciemnym może zwiększyć koncentrację, kierując Twoją uwagę na obszary zawartości interfejsu, umożliwiając wyświetlenie tej zawartości i wygaszenie tła.

Wady korzystania z trybu ciemnego

Jak wszystko, tryb ciemny ma swoje wady. Przyjrzyjmy się powodom, dla których ciemny motyw może być niekorzystny dla Twoich celów.

Może osłabiać więź emocjonalną. Projekt w ciemnych kolorach

Jasny kolory mogą wywoływać żywe emocje. Jeśli tego właśnie szukają Twoi widzowie, przyciemnienie kolorów może stworzyć dla nich barierę mentalną. Będzie im trudniej nawiązać emocjonalny związek z mrocznym tematem. Jeśli Twoja marka ma charakter motywacyjny, inspirujący lub duchowy, interfejs użytkownika w trybie ciemnym może być ryzykowny. Choć jasne kolory mogą wywoływać silne emocje, może być odwrotnie. Kim zatem jest Twoja publiczność? Nie spalaj ich, jeśli szukają windy.

Kompresuje przestrzeń

Pokoje z ciemnymi ścianami mogą powodować klaustrofobię. Na urządzeniu tryb ciemny może działać w ten sam sposób. Jeśli chcesz stworzyć wrażenie przestrzeni, ciemny interfejs może sprawić, że przestrzeń będzie wydawać się mniejsza.

Kolory o niskim kontraście mogą być trudne do odczytania. Projekt w ciemnych kolorach

Jeśli nie rozumiesz poprawnie kolorów i kontrastów, kiedy rozwój strony internetowej lub aplikacje z ciemnym motywem, może to spowodować, że tekst będzie trudny do odczytania, dlatego należy o tym pamiętać podczas projektowania poczty e-mail, aplikacji lub witryny internetowej w trybie ciemnym.

Jak korzystać z trybu ciemnego w projektowaniu

Projekt w trybie ciemnym może działać wszędzie. Od aplikacji mobilnych po smartwatche i interfejsy telewizyjne – ten trend w projektowaniu może popchnąć Twoją markę do przodu. Zrób to dobrze, a tryb ciemny może działać jak pogromcy gangów. Jeśli się pomylisz, Twój projekt może natychmiast zniechęcić użytkowników. Oto kilka podstawowych wskazówek dotyczących projektowania ciemnej witryny lub interfejsu aplikacji:

Kiedy używać trybu ciemnego. Projekt w ciemnych kolorach

Wybierz kolory swojej marki

Kiedy istniejąca paleta kolorów marka już kompatybilny z trybem ciemnym, bogowie trybu ciemnego uśmiechają się do ciebie.

Projekt aplikacji w trybie ciemnym

Projekt aplikacji w trybie ciemnym

 

Jeśli czujesz, że musisz zmienić swój branding, aby dopasować go do estetyki, zastanów się dwa razy przed pójściem w ciemno. Podobnie, jeśli Twoja marka potrzebuje szerokiej gamy kolorów, rozważ jaśniejszy interfejs. Pełne spektrum kolorów jest trudne do odczytania na ciemnym tle.

Podkreśl swoją branżę. Projekt w ciemnych kolorach

Interfejs użytkownika w trybie ciemnym jest również przydatny do ulepszania określonych branż. Na przykład marki skupiające się na życiu nocnym i rozrywce idealnie nadają się do trybu ciemnego, ponieważ ich wysoka zawartość energetyczna często łączy się z ciemnym tłem w prawdziwym życiu.

Postaw na minimalizm

Jeśli estetyka Twojego projektu jest już minimalistyczna i ma ograniczoną zawartość, Twoje środowisko nadaje się do trybu ciemnego. W sytuacji, gdy główną treścią jest tekst, ciemny interfejs może utrudniać czytanie. Zazwyczaj tryb ciemny zwiększa bałagan wizualny, czyniąc zagracony ekran jeszcze bardziej chaotycznym.

wywoływać emocje

Próbujesz wywołać konkretną reakcję emocjonalną? Lubisz tajemnicę czy mały dramat? Ponieważ słaba widoczność budzi ciekawość i zwiększa napięcie emocjonalne, tryb ciemny może być idealnym narzędziem dla Twojej marki.

ciemny motyw projektowania stron internetowych Projekt w ciemnych kolorach

Ciemny projekt strony internetowej

 

Symbol stanu. Projekt w ciemnych kolorach

Jeśli chcesz stworzyć poczucie statusu, interfejs użytkownika w trybie ciemnym może być skutecznym narzędziem. Ciemniejsze kolory budzą emocje kojarzone z luksusem i bogactwem. Jeśli chcesz zwrócić uwagę na dobrą pracę, rozważ interfejs użytkownika w trybie ciemnym.

Ciemny motyw Projekt strony internetowej dla marki luksusowych zegarków

Elegancki, wysokiej jakości projekt strony internetowej z ciemnym motywem

 

Najlepsze praktyki dotyczące projektowania trybu ciemnego

Istnieją pewne procesy, które muszą działać poprawnie podczas tworzenia interfejsu użytkownika w trybie ciemnym. W końcu chcesz, żeby Twój produkt był niesamowity, prawda? Zaznaczmy wszystkie pola na naszej liście kontrolnej najlepszych praktyk dotyczących trybu ciemnego:

1. Nie idź zbyt ciemno. Projekt w ciemnych kolorach

Wydawcy książek nie używają czystego białego papieru, ponieważ kontrast z czarnym tuszem jest zbyt ostry. Powoduje to mrużenie oczu i może powodować bóle głowy. Podobnie jest z urządzeniami cyfrowymi. Trzymaj się z daleka od czystej czerni. Trudno jest patrzeć na ekran o wysokim kontraście. Dobre kolory trybu ciemnego to odcienie szarości połączone z kolorami nienasyconymi.

Projekt w ciemnych kolorach Projekt mobilnego magazynu cyfrowego w aplikacji Dark Mode

Ciemny projekt aplikacji

 

2. Miej odpowiedni kontrast

Tło w trybie ciemnym musi być wystarczająco ciemne, aby wyświetlić biały tekst. Sugestia firmy Google Material Design polega na użyciu kontrastu tekstu do tła wynoszącego co najmniej 15,8:1.

3. Zmniejsz nasycenie kolorów. Projekt w ciemnych kolorach

Unikaj całkowicie nasyconych kolorów na ciemnym tle. Na ciemnych powierzchniach odcienie często wydają się „wibrować”. Zamiast tego używaj kolorów nienasyconych, takich jak pastele i kolory stonowane – odcienie z dodatkiem szarości i bieli.

Dodatkowo rozważ zmianę palety kolorów swojej marki. Niebieski kolor Twojej firmy może być odczytywany inaczej na czarnym niż na białym. Kolory w trybie ciemnym często wymagają dostosowania, aby uzyskać taki sam efekt, jak w trybie jasnym.

4. Używaj odpowiednich kolorów „włączonych”

Jaki kolor? Ten, który pojawia się na elementach i kluczowych powierzchniach. Do napisów zwykle używa się kolorów „włączonych”. Domyślny kolor interfejsu użytkownika w trybie ciemnym to czysta biel (#FFFFFF). Nie używaj tego. #FFFFFF wydaje się wibrować, gdy jest oglądany na ciemnym tle. Wybierz jasnoszary kolor.

5. Nie przewracaj się. Projekt w ciemnych kolorach

Jeśli przełączysz się z trybu standardowego na tryb ciemny, prawdopodobnie w oryginalnym motywie znajdują się cenne wskazówki wizualne. Nie wystarczy odwrócić kolorów, aby uzyskać ciemny motyw. Być może zamieniasz kolory, które mają cel psychologiczny, w bezsensowne, stonowane kolory. Wybieraj kolor świadomie.

6. Zanurkuj głębiej

Im wyższa warstwa, tym lżejsza powinna być. To stworzy hierarchia wizualna w trybie ciemnym, który przechodzi od najczęściej używanych elementów na wyświetlaczu do najrzadziej używanych.

Wizualna hierarchia trybu ciemnego

Jaśniejsze kolory na górze tworzą wizualną hierarchię

 

7. Doświadczaj i oferuj wolność. Projekt w ciemnych kolorach

Przetestuj zarówno ciemną, jak i jasną wersję swojego projektu. Eksperymentuj z każdym stylem i wprowadzaj odpowiednie zmiany w oparciu o opinie użytkowników. W końcu preferencje ludzi mogą być nieprzewidywalne, więc nie obciążaj użytkowników. Pozwól im przełączyć wyświetlacz z trybu jasnego na tryb ciemny. Daje to użytkownikom kontrolę nad ich doświadczeniami i sprawia, że ​​czują się bardziej spersonalizowani.

 

Twój asystent w firmie reklamowej i poligraficznej ”АЗБУКА«