1. Przegląd
Na konferencji Google I/O 2019 zespół Material Design przedstawił wskazówki dotyczące tworzenia ciemnego motywu, który będzie uzupełniać istniejący motyw Material Twojego produktu. Jasne motywy świetnie sprawdzają się podczas czytania długich tekstów i zapewniają lepszy kontrast, ale ciemny motyw o mniejszej luminancji jest bezpieczniejszy w ciemnych pomieszczeniach i może zmniejszać zmęczenie oczu.
W Material ciemne motywy są przeznaczone do używania jako tryb uzupełniający domyślny jasny motyw, zachowując niepowtarzalną tożsamość aplikacji (w tym style kolorów, kształtów, czcionek i wysokości) dzięki subtelnej prezentacji przyjaznej dla oka w nocy.
W tym module pokażemy, jak utworzyć ciemny motyw na podstawie istniejącego motywu Material – przy użyciu jednego z naszych badań nad Material Design.
Będziemy współpracować z Reply, aplikacją do obsługi poczty e-mail zaprojektowaną z myślą o czytelności, intuicyjności i łatwości obsługi. Poznamy tożsamość aplikacji Reply i podejmiemy przemyślane decyzje, aby zachować w niej elementy marki, tworząc jednocześnie motyw, który będzie wygodny w trybie ciemnym.
Rozwiniemy też ten motyw i będziemy używać niestandardowych kolorów interfejsu, które wykraczają poza podstawowy ciemny motyw, aby podkreślić wyjątkowy charakter Odpowiedzi.
Wymagane materiały:
2. Zbierz wymagane pliki.
Zanim zaczniesz, pobierz nasz plik startowy Figmy. Wszystko, czego potrzebujesz do designlabu, znajdziesz w tym pliku.
- Pobierz DarkTheme DesignLab Kit.fig (7,6 MB)
3. Konfigurowanie środowiska
Następnie musisz skonfigurować środowisko projektowe.
Najpierw zaloguj się w Figmie lub utwórz konto.
Po zalogowaniu zaimportuj plik pobrany w poprzednim kroku. Aby to zrobić, znajdź ikonę „import file” (importuj plik) w lewym górnym rogu ekranu plików Figmy i zlokalizuj plik w folderze „Pobrane”.
Poświęć chwilę na zapoznanie się z plikiem. Zawiera jasny motyw, gotową paletę tonalną opartą na marce aplikacji i kopię końcowego ciemnego motywu, który utworzymy.
- W innej karcie otwórz wytyczne dotyczące ciemnych motywów w interfejsie Material Design. Będziemy się do nich odwoływać w całym Designlabie.
4. Poznaj tożsamość produktu
Zanim zaczniemy pracować nad ciemnym motywem w Reply, musimy poznać niektóre cechy marki Reply. Pomoże nam to podejmować świadome decyzje dotyczące motywu, aby tożsamość i marka Reply były spójne zarówno w przypadku motywu jasnego, jak i ciemnego.
Marka Reply kładzie nacisk na komunikację. Aplikacja stawia na funkcjonalność, a nie na elementy projektu, które nie mają praktycznego zastosowania.
Na potrzeby tego warsztatu projektowego najważniejsze elementy ekspresji marki w aplikacji Odpowiedz to kolor, typ i kształt.
Kolor
Motyw kolorystyczny aplikacji Reply wykorzystuje ciemnoniebiesko-szary kolor podstawowy w połączeniu z pomarańczowo-żółtym kolorem dodatkowym.
Kolor dodatkowy jest rzadko używany, więc interfejs Reply jest często monochromatyczny i wykorzystuje różne odcienie koloru podstawowego. Ten subtelny motyw kolorystyczny ułatwia czytanie treści bez rozpraszania uwagi i umożliwia łatwe wyświetlanie awatarów ze zdjęciami.
Drugi kolor aplikacji Reply ma więc ogromny wpływ na jej wygląd, ponieważ podkreśla najważniejsze działania i wyraźnie zaznacza elementy marki w całej aplikacji.
Typ
Reply to aplikacja, która w dużej mierze opiera się na treściach tekstowych i wydajności, dlatego typografia jest kluczowa dla jej tożsamości. Aplikacja korzysta z pełnej skali typograficznej Work Sans, używając różnych stylów, które obejmują 6 wersji grubości tego kroju: Light, Regular, Medium, SemiBold i Bold.
Zbudowanie całej skali typów na podstawie kroju Work Sans zapewnia aplikacji Reply spójną i przewidywalną, ale jednocześnie naturalną i czytelną typografię.
Według projektanta kroju Work Sans, Wei Huang, ta rodzina czcionek jest zoptymalizowana pod kątem wyświetlania na ekranie. Dzięki temu idealnie nadaje się do efektywnego czytania fragmentów tekstu w e-mailach lub innych treściach. Jej luźne nawiązanie do wczesnych grotesków nadaje jej bardziej przyjazny i ludzki charakter, a większy odstęp między znakami ułatwia czytanie.
Kształt
Krój pisma Reply ma subtelny charakter, łącząc okrągłe i ostre elementy w sposób, który podkreśla wydajność i funkcjonalność listy e-mailowej, a jednocześnie nadaje kluczowym działaniom i większym komponentom łagodniejszy charakter.
- Małe komponenty
- Komponenty multimedialne
- Duże komponenty
Małe komponenty, takie jak przyciski i przycisk FAB, są całkowicie zaokrąglone, a średnie komponenty, takie jak karty e-maili i dolny pasek aplikacji, są całkowicie kwadratowe. Duże komponenty, takie jak przełącznik kont i arkusz u dołu, mają lekko zaokrąglone rogi.
Te kształty wzmacniają zrozumienie użytkownika, gdzie znajduje się w aplikacji, jak jest zaprojektowany każdy komponent i jak odnosi się do reszty interfejsu.
5. Praca z kolorem
Znając związek kolorów z wyrażaniem marki przez aplikację Odpowiedź w domyślnym jasnym motywie, możemy wprowadzić świadome zmiany w palecie kolorów, aby uzyskać użyteczny i wyrazisty ciemny motyw.
W Material systemy kolorów są oparte na paletach tonalnych. Palety te wykorzystują kolory marki do tworzenia zestawu harmonijnych wariantów, które razem tworzą kompleksowy system kolorów stosowany w aplikacji, zapewniający styl i czytelność.
W pliku Figma znajdziesz podstawowe i dodatkowe palety kolorów Reply. Jasne strzałki nad każdą paletą wskazują wartości używane w jasnym motywie aplikacji Odpowiedź, a ciemne strzałki wskazują warianty, których będziemy używać w ciemnym motywie.
Podczas tworzenia ciemnego motywu za pomocą Material wybierane są jaśniejsze warianty, dzięki czemu system kolorów może zachować wyrazistość i odpowiedni kontrast bez powodowania zmęczenia oczu. Bardziej nasycone kolory „wibrują” na ciemniejszym tle, co utrudnia czytanie. Jaśniejsze odcienie zapewniają też większą elastyczność w zakresie zmiany koloru podniesionych powierzchni, co omówimy za chwilę.
6. Dostosowywanie kolorów powierzchni
Teraz, gdy znamy już palety tonalne Reply i kolory, których będziemy używać w motywie ciemnym, możemy zacząć dostosowywać wartości kolorów w naszym modelu.
W ciemnych motywach Material Design najniższa warstwa interfejsu jest zwykle ciemnoszara i ma wartość szesnastkową #121212.
- W pliku Figma znajdź obszar roboczy o nazwie „Reply Starter” i wybierz warstwę o nazwie „Background”.
- W panelu inspektora po prawej stronie ekranu w sekcji „Wypełnienie” ustaw wartość koloru na 121212 i naciśnij Enter.
- Obszar roboczy powinien wyglądać tak:
W monochromatycznym widoku skrzynki odbiorczej w aplikacji Odpowiedz karty e-maili mają nieco jaśniejszy kolor niż tło, więc w motywie ciemnym powinniśmy zastosować ten sam zabieg, aby zachować wizualną hierarchię skrzynki odbiorczej.
- Na tym samym obszarze roboczym rozwiń grupę o nazwie „Email cards” i wybierz wszystkie warstwy o nazwie „Email card”.
- Tak jak wcześniej wybierz wartość Wypełnienie w panelu inspektora. Ustaw wartość 121212 i naciśnij Enter.
- Teraz wybierz tylko warstwy o nazwie „Nakładka na kartę e-mail”. Te warstwy pozwolą nam utworzyć nakładkę, która odróżni karty e-maili od tła.
- Nadaj warstwom wypełnienie w kolorze FFFFFF i ustaw 2% przezroczystości.
Po przyciemnieniu kart e-maili tekst jest nieczytelny. Następnie zajmiemy się kolorami tekstu.
7. Dostosowywanie kolorów tekstu
Aby zrozumieć kolory tekstu w ciemnych motywach, warto wiedzieć, jak kolor jest stosowany do tekstu w szerszym systemie Material Design.
Komponenty Material Design definiują pojęcie „kolorów na”, które są tak nazywane, ponieważ pojawiają się „na” komponentach i kluczowych powierzchniach, które używają kolorów podstawowego, dodatkowego, powierzchni, tła lub błędu. Kolory „włączone” są używane głównie w przypadku tekstu, aby zapewnić jego czytelność na tych powierzchniach.
Domyślne kolory „włączone” w Material Design to biały (#FFFFFF) i czarny (#000000). Ciemny kolor „włączony” nie będzie dobrze widoczny na przyciemnionych powierzchniach, dlatego użyjemy białego.
System ustalania hierarchii tekstu za pomocą tego koloru „włączonego” jest prosty. Tekst o wysokim kontraście ma przezroczystość 87%, tekst o średnim kontraście – 60%, a tekst wyłączony – 38%.
Tekst o wysokim priorytecie nie jest czysto biały, ponieważ, jak wspomnieliśmy w kroku 5, kolor #FFFFFF – jasny kolor – „wibrowałby” wizualnie na ciemnym tle. Poza tym czysty tekst w kolorze #FFFFFF na ciemnym tle może pogorszyć czytelność, ponieważ światło z tego tekstu wydaje się rozmywać na ciemnym tle.
Mając to na uwadze, naprawmy kolory tekstu w naszym motywie ciemnym.
- Cały tekst w naszym układzie początkowym jest zgrupowany, co ułatwia dostęp. Znajdź grupę o nazwie Tekst w skrzynce odbiorczej i rozwiń ją, aby wyświetlić wszystkie warstwy, z których się składa.
- Zaznacz wszystkie warstwy, przed którymi znajduje się ciąg znaków „Hi -". Są to wszystkie elementy tekstowe w naszym układzie, które mają wysoki poziom ważności.
- W panelu inspektora ustaw wypełnienie na FFFFFF z przezroczystością 87%.
- Wróć do grupy Inbox text i zaznacz wszystkie warstwy, przed którymi znajduje się „Med -”.
- W panelu inspektora ustaw Wypełnienie na FFFFFF z przezroczystością 60%.
8. Dostosowywanie kolorów komponentów
W ciemnych motywach opartych na Material podniesione powierzchnie i komponenty są kolorowane za pomocą nakładek. Im wyżej znajduje się powierzchnia, tym mocniejsza i jaśniejsza staje się nakładka. Jest to sposób na przekazywanie informacji o wzniesieniu i hierarchii, gdy tło jest zbyt ciemne, aby wiarygodnie przedstawić ciemne cienie.
Dolny pasek aplikacji
W przypadku dolnego paska aplikacji w Reply, który znajduje się powyżej reszty interfejsu Odebranych, zastosujemy subtelną nakładkę.
- Na liście warstw znajdź grupę Bottom app bar (Dolny pasek aplikacji) i rozwiń ją, aby wyświetlić jej warstwy składowe.
- W tej grupie znajdź warstwę o nazwie Surface i ustaw jej wartość Wypełnienie na 121212.
- Znajdź warstwę powyżej o nazwie Nakładka na powierzchnię i ustaw dla niej Wypełnienie o wartości FFFFFF i nieprzezroczystości 12%.
Pływający przycisk polecenia
Następnie zastosujemy nowy kolor do przycisku FAB. Aby to zrobić, wróć do palet tonalnych, które widzieliśmy wcześniej, i skopiuj wartość 700 koloru dodatkowego aplikacji Reply.
Opcjonalnie w przypadku małych, ale ważnych komponentów w aplikacji możesz wybrać nieco bardziej nasycony kolor, o ile zachowuje on odpowiedni kontrast z kolorami tła. Omówimy tę opcję w dalszej części.
- Na liście warstw znajdź grupę o nazwie FAB i rozwiń ją, aby zobaczyć jej części składowe.
- Znajdź i wybierz warstwę Powierzchnia. Ustaw wypełnienie na FCC13B.
Wybrane karty
Możesz zauważyć, że ten sam wyrazisty pomarańczowo-żółty kolor pojawia się też w rogu wybranych kart e-maili w skrzynce odbiorczej Reply. To kolejny moment silnie związany z marką, ale nie pasuje on do komponentów, powierzchni ani tekstu.
W takich sytuacjach najlepiej zacząć od drugiego koloru wariantu (w tym przypadku #FFFBE6) i cofać się, aby znaleźć coś, co jest odpowiednio wyraziste, ale nie odwraca uwagi od funkcjonalnej estetyki Odpowiedz. W przypadku odpowiedzi możemy użyć standardowego wariantu dodatkowego.
- Wybierz warstwę o nazwie Earmark i ustaw jej wypełnienie na FFF5A0.
9. Jeszcze więcej możliwości: niestandardowe powierzchnie
Jak już wspomnieliśmy, pływający przycisk działania w aplikacji Odpowiedź to element o dużym znaczeniu, który jest też silnie związany z marką. Z tego powodu możemy zdecydować się na zachowanie jego koloru w ciemnym motywie aplikacji Odpowiedź, używając oryginalnego koloru dodatkowego tej aplikacji.
- Na liście warstw znajdź grupę o nazwie FAB i rozwiń ją, aby zobaczyć jej części składowe.
- Znajdź i wybierz warstwę Powierzchnia. Przywróć kolor wypełnienia F9AA33.
Możemy też przywrócić główny kolor aplikacji Reply jako niestandardowy kolor powierzchni dla dolnego paska aplikacji i kart e-maili. Aby to zrobić, wystarczy zmienić nakładkę, aby używała ciemnego koloru podstawowego wskazanego w palecie tonalnej, do której się odwołujemy.
- Na liście warstw znajdź grupę Bottom app bar (Dolny pasek aplikacji) i rozwiń ją, aby wyświetlić jej warstwy składowe.
- Znajdź warstwę o nazwie Nakładka na powierzchnię i nadaj jej nową wartość Wypełnienie: 344955 z nieprzezroczystością 48%. Dzięki temu kolor marki będzie bardziej wyrazisty, a kontrast pozostanie odpowiedni.
- Na liście warstw znajdź warstwy o nazwie Email card overlay i zaznacz je wszystkie.
- Ustaw wypełnienie na ADC0CB z kryciem 4%.
10. Podsumowanie
W Materialu ciemne motywy są przemyślanym i celowym rozszerzeniem unikalnej tożsamości produktu, która jest wyrażona w jasnym motywie. Wystarczyło wprowadzić proste zmiany w kolorach i sposobie przedstawiania wysokości, aby utworzyć pierwszy ciemny motyw Material. Gratulacje!
Potraktuj kroki w tym laboratorium projektowym jako ramy do zrozumienia i zdefiniowania własnego motywu ciemnego produktu. Zawsze pamiętaj o właściwościach i celach swojej marki i produktu.
Więcej wskazówek dotyczących ciemnego motywu znajdziesz w specyfikacji Material Design dla ciemnych motywów.
Jeśli masz pytania, możesz je zadać w każdej chwili, używając @MaterialDesign na Twitterze.
Więcej treści i samouczków dotyczących projektowania znajdziesz na kanale Google Design w YouTube.