1. Wprowadzenie
Ostatnia aktualizacja: 18 kwietnia 2022 r.
Aplikacje mogą przyjmować różne kolory ze schematów podstawowych, kolorów dynamicznych generowanych przez użytkowników lub kolorów marki.
W poprzednim Laboratorium Material You pisaliśmy o tym, jak wizualizować dynamiczne kolory w modelach projektowych, ale można też wykorzystać motywy Material Design, aby dostosować aplikację za pomocą kolorów swojej marki. Zastosowanie nowego systemu kolorów w połączeniu z kolorami Twojej marki pozwoli Ci stworzyć dostępny schemat kolorów, który mógłby przyjmować bardziej dynamiczne funkcje.
Czego się nauczysz
- Jak utworzyć motyw niestandardowy za pomocą kreatora motywów Material Design.
- Zastosowanie motywu niestandardowego do makiet projektowych.
- Możliwość łączenia kolorów dynamicznych i niestandardowych.
Wymagania wstępne
W tym module będziemy rozwijać podstawowe koncepcje projektowe.
- Znajomość podstawowych koncepcji projektowania: palet kolorów
- Wiedza o aktualnych schematach kolorów i rolach na Androidzie
- Wiedza o figmie
- Opcjonalnie: wizualizowanie dynamicznych kolorów w ćwiczeniach z programowania aplikacji
Czego potrzebujesz
- Konto Figma
- Plik Figma Designlab
- Wtyczka Figma Material Theme Builder
2. Rozpocznij
Konfiguracja
Aby rozpocząć, musisz uzyskać dostęp do pliku Designlab Figma. Wszystko, czego potrzebujesz na potrzeby modułu, znajdziesz w pliku Figma. Możesz pobrać i zaimportować plik lub zduplikować go od społeczności Figma.
Najpierw zaloguj się w Figma lub utwórz konto.
Duplikat od społeczności Figma
Otwórz plik Dostosowywanie materiału lub wyszukaj dynamiczne kolory w aplikacji za pomocą interfejsu Material Design na stronie Społeczność Figma. W prawym górnym rogu kliknij Duplikuj, aby skopiować plik do plików.
Układ pliku
Przeglądając plik, zwróć uwagę na to, że zawiera on własny element, zaczynając od wprowadzenia. Każda sekcja jest podzielona na rząd połączonych ze sobą obszarów roboczych wraz z podstawowymi pojęciami dotyczącymi sekcji oraz ćwiczeniami. Sekcje i ćwiczenia są od siebie uzależnione i należy je wykonywać po kolei.
Dzięki tym ćwiczeniom w Codelabs poznasz te pojęcia i ćwiczenia. Przeczytaj ćwiczenia z programowania, aby dowiedzieć się więcej o nowych funkcjach Material You.
Począwszy od obszaru roboczego Intro (Wprowadzenie): znajdują się przyciski, które łączą obszary robocze po kolei. Aby otworzyć link, kliknij przycisk.
Zainstaluj wtyczkę Figma
To ćwiczenie w Codelabs wymaga nowej wtyczki Figma do generowania dynamicznych schematów kolorów i tokenów. Zainstaluj wtyczkę Figma bezpośrednio ze strony społeczności Figma lub wyszukaj „Material Theme Builder” w społeczności Figma.
3. Schemat kolorów Material
Najpierw omówienie zastosowania kolorów w Material oraz sposób działania nowego systemu kolorów.
Kolor jest używany do wyrażania stylu i określania znaczenia, niezależnie od tego, czy znaczenie ma osobisty charakter, jest związane z marką czy znaczeniem semantycznym. System kolorów uwzględnia zmienność dynamicznie zmieniających się schematów kolorów, które pojawiają się wraz ze zmianami danych wejściowych użytkownika. Logika zależności tonalnych oraz zmian barw i barwności stanowi podstawę do elastycznego stosowania kolorów.
Przestrzeń kolorów pozwala wygenerować dostępne schematy jasnych i ciemnych kolorów wyodrębnionych z koloru źródłowego przez wygenerowanie 5 głównych kolorów, a następnie palet tonalnych z wybranymi etapami tonacji.
Ta technika przełączania kolorów zapewnia nie tylko przystępny schemat kolorów, ale też metody tworzenia schematów marki, które są dostępne i spójne ze schematami kolorów generowanymi przez użytkowników.
Schematy kolorów są generowane z 5 głównych kolorów do palet tonalnych w celu tworzenia łatwo dostępnych schematów.
Motyw marki
M3 obsługuje systematyczne stosowanie parametrów niestandardowych, aby ułatwić definiowanie i utrzymywanie stylów, które przekazują markę.
Schemat niestandardowy to schemat kolorów, który nie pochodzi z tapety na urządzeniu użytkownika, ale z producenta aplikacji. System kolorów M3 i schematy niestandardowe stanowią podstawę do stosowania dynamicznych kolorów w aplikacjach.
Schemat niestandardowy wypełnia lukę między M2 i M3, aby ułatwić migrację przez skonfigurowanie niezbędnych tokenów (boksów z kolorami) i stworzenie bardziej marki.
Dodawanie kolorów marki do Material Theme Builder
4. Schemat kolorów: kolory uzupełniające
Podstawą schematu kolorów jest zestaw 5 głównych kolorów, które indywidualnie są powiązane z osobnymi paletami tonalnymi z 13 tonami. Konkretne odcienie z każdej palety tonalnej są przypisywane do ról kolorów w całym interfejsie. Zacznijmy od otwarcia wtyczki Material Theme Builder i skonfigurowania pierwszego koloru uzupełniającego: Primary (Główny).
Podanie tylko wartości podstawowej spowoduje, że będzie ona używana jako źródło do wygenerowania całego schematu kolorów.
- W oknie wtyczki kliknij Custom (Niestandardowe). Spowoduje to przełączenie motywu na motyw niestandardowy. W tym module użyjemy wygenerowanego motywu Material-theme, ale jeśli chcesz, możesz utworzyć nowy motyw. Więcej informacji znajdziesz w artykule o wizualizowaniu dynamicznych kolorów.
- Następnie ustawimy kolor klucza podstawowego. Może to być główny kolor marki lub najczęściej używany kolor uzupełniający. Pozostałe kolory kluczowe zostaną wypełnione na podstawie koloru podstawowego. Oznacza to, że nie ma potrzeby dodawania kolorów, jeśli ich nie potrzebujesz.
5. Utwórz pozostałą część motywu
Kolor podstawowy jest używany do generowania motywu, ale możesz użyć kolorów uzupełniających, które są powiązane z kolorem głównym marki.
- W oknie modalnym wtyczki dodaj kolor dodatkowy, klikając studnie koloru dodatkowego. Role dodatkowe są używane w przypadku mniej widocznych komponentów w interfejsie, co zwiększa możliwości wyrażenia koloru. Kolor dodatkowy zostanie zaktualizowany w schemacie kolorów i interfejsie aplikacji.
- Zrób to samo z trybem trzeciorzędnym. Role trzeciorzędne pozwalają kontrastować ze sobą akcenty, aby zrównoważyć kolory podstawowe i dodatkowe lub zwrócić uwagę na element. Trzecia rola koloru jest przeznaczona dla twórców według własnego uznania i ma na celu wzmocnienie szerszej ekspresji kolorów w produktach.
- Teraz w miejscach i tłach oraz tekstach i ikonach są używane neutralne, neutralne role.
Podaj wartości drugorzędne, trzeciorzędne i neutralne, aby w pełni dostosować schemat kolorów.
Kolory marki zostaną uwzględnione w podstawowym schemacie kolorów, aby dopasować je do przestrzeni kolorów M3, być w pełni dostępne, a także eksportować i wdrażać je jako motyw w kodzie.
6. Stosuję motyw
Role Tokeny
Każdy kolor uzupełniający (podstawowy, dodatkowy i trzeciwy) jest dostępny w grupie 4 zgodnych kolorów w różnych odcieniach, które służą do parowania, określania uwydatnienia i ekspresji wizualnej. Grupa składa się z koloru uzupełniającego, koloru, kontenera i kontenera.
Role neutralne są używane w przypadku platform i tła oraz tekstu i ikon z dużą wyróżnieniem.
Tokeny projektowe reprezentują niewielkie, powtarzające się decyzje projektowe, które składają się na styl wizualny systemu projektowania. Tokeny zastępują wartości statyczne (np. kody szesnastkowe koloru) zrozumiałymi nazwami. Tokeny projektowe w istotny sposób łączą wybrane przez Ciebie style, bez których nie byłoby jasne.
Wtyczka Figma tworzy tokeny i podaje własne kolory źródłowe w postaci stylów Figma, aby łączyć się z istniejącymi makietami, wskazówkami dotyczącymi promowania marki, a nawet systemami projektowymi.
Tokeny projektowe tworzą wspólny język pomiędzy rolami kolorów i implementacją.
Hierarchia kolorów
Stosując role kolorów do swoich podglądów, weź pod uwagę kolejność elementów, czyli ich hierarchię. Pomoże to przypisać kolory marki do odpowiednich ról, a także zmapować je w interfejsie. Zazwyczaj bardziej nasycone lub skupione kolory w pierwszej kolejności przyciągną uwagę użytkownika, dlatego rola koloru podstawowego jest mapowana na komponenty, które bardziej skupiają się na wezwaniu do działania. Podczas gdy Material Theme Builder używa systemu kolorów M3 do generowania odpowiednich kolorów, dodanie kolorów drugorzędnych lub trzeciorzędnych o wyższym nasyceniu skutkuje kolorami, które przyćmieją barwy podstawowe. Aby przypisać role dotyczące kolorów, weź pod uwagę kolejność, w jakiej użytkownicy mają korzystać z interfejsu i treści. Nie przy wszystkich komponentach należy wybrać opcję Główne.
Jednolity nasycony kolor przyciąga największą uwagę.
7. Zmień na motyw
Aby zastosować utworzony motyw niestandardowy do swoich projektów, musimy wykorzystać wzory do tokenów w istniejącym motywie materiałowym.
Komponenty Material Design mają wstępnie przypisane role, które działają automatycznie z narzędziem Material Theme Builder.
Przełącz się na motyw z okna modalnego Material Theme Builder.
- Ustawmy wszystkie tokeny (style Figma) w układzie po prawej stronie, aby użyć tego motywu. W tym celu wybierz ramkę układu i kliknij Zamień. Zobaczysz, że prefiks stylu zostanie zaktualizowany w wybranych kolorach.
- Nie wszystko zostało zaktualizowane? Komponenty niestandardowe, takie jak wskazówki dotyczące pielęgnacji roślin, muszą najpierw zastosować styl Figma. Po wybraniu kontenera napiwków kliknij ikonę z 4 kropkami, aby przypisać styl, a następnie wybierz trzeci kontener. Zrób to samo z zawartością karty ze wskazówkami dotyczącymi pielęgnacji, ale przypisz kontener trzeciorzędny. Małe etykiety na liście to również komponenty niestandardowe, ale wrócimy do nich później.
- Komponenty Material Design używają domyślnych mapowań, ale możesz eksperymentować z przypisaniami stylów, które najlepiej pasują do interfejsu użytkownika. Poświęć chwilę, aby pobawić się różnymi hierarchiami kolorów i swoją marką.
(W pliku eksportu kodu znajduje się tylko motyw. jeśli współpracujesz z inżynierem, udostępnij symulacje do przekazywania mapowań tokenów, ponieważ nie zostaną one uwzględnione w eksporcie).
Otwarcie wtyczki bez motywu spowoduje wyświetlenie ekranu konfiguracji. Rozpocznij generuje domyślny motyw „material-theme”, w ramach grupy stylów Figma, aby nawiązać do makiet lub wykorzystać zestaw Material Design.
8. Rozszerzenie wykraczające poza podstawowy schemat
Masz teraz motyw kolorystyczny powiązany z marką i zmapowany na komponenty i przykładowy projekt, ale możesz też potrzebować dodatkowych kolorów. Pomocny jest wówczas rozszerzony schemat, który umożliwia dodanie niestandardowych kolorów.
Mogą to być kolory semantyczne, specyficzne dla marki, a nawet dla produktów, które muszą mieć przypisane role i przesunąć je przez algorytm kolorów, lub pozostawić te, które zostały wprowadzone.
Rozszerzony schemat kolorów umożliwia łączenie dynamicznych (generowanych przez użytkowników) kolorów z kolorami Twojej marki. Pozwól, aby schemat podstawowy miał spersonalizowany wpływ na użytkownika, podczas gdy kolory marki są ustawione w schemacie rozszerzonym. Oznacza to, że elementy interfejsu mogą być bardziej spersonalizowane dla użytkowników, a kolory Twojej marki mogą przyczynić się do skuteczniejszego docierania do użytkowników w aplikacji.
Schemat podstawowy można rozszerzyć o niestandardowe kolory. 
9. Przedłużenie dostosowywanie
Rozszerzanie schematu o kolory niestandardowe umożliwia dodanie kolorów, takich jak semantyczne, lub dodatkowe kolory związane z marką.
Schemat niestandardowy z dodanymi niestandardowymi kolorami.
- W oknie modalnym wtyczki pod kluczowymi kolorami kliknij Add a Color (Dodaj kolor).
- Bieżący motyw zostanie zaktualizowany o nowy wiersz Niestandardowy 0. Zaktualizuj ten kolor, klikając pole koloru i wybierając nowy kolor.
- Te rozszerzone kolory można znaleźć jako styl w ramach stylów tylko do odczytu jako Custom0. Obowiązuje ich paleta tonalna i schemat. Zmapuj niektóre etykiety z listy na nowy kolor, wybierając tło etykiety i przypiszmy jedną z ról dodanego koloru (kontener „on-custom0”).
Ustawiam kolor niestandardowy w wybranych kolorach.
- Material Theme Builder automatycznie generuje kolory jako Custom#. Aby zmienić nazwę dodanego koloru niestandardowego, rozwiń grupę stylów motywu w panelu stylu (pojawi się to, jeśli nic nie zostanie zaznaczone). Następnie w podgrupie źródłowej wyszukaj Niestandardowy 0. Zmiana nazwy źródła w tym miejscu spowoduje zmianę nazwy koloru w oknie modalnym wtyczki.
Niestandardowe style kolorów znajdziesz w panelu Style.
- W podobny sposób można usunąć dodany kolor, klikając prawym przyciskiem myszy i usuwając styl. Po następnym otwarciu wtyczki dodany kolor zostanie usunięty. Zmiana nazwy lub usunięcie może nie zostać odzwierciedlone na diagramie kolorów.
10. Gratulacje
Udało Ci się nauczyć, jak utworzyć niestandardowy motyw kolorystyczny za pomocą narzędzia Material Theme Builder, zastosować go do makiet projektowych i dodać go do schematu kolorów. Nowy system kolorów Material 3 zapewnia przystępny, elastyczny i spójny kolor w projektach. Chętnie zobaczymy, jak je wykorzystasz.
Jeśli masz pytania, w każdej chwili możesz je nam zadać, korzystając z konta @MaterialDesign na Twitterze.
Więcej filmów i samouczków o projektowaniu znajdziesz na stronie youtube.com/MaterialDesign.