1. Wprowadzenie
Ostatnia aktualizacja: 18.04.2022
Aplikacje mogą przyjmować różne kolory z podstawowych schematów, dynamicznych kolorów generowanych przez użytkowników lub kolorów marki.
W poprzednim laboratorium kolorów Material You pokazaliśmy, jak wizualizować dynamiczne kolory w makietach projektów. Możesz też użyć motywów Material, aby dostosować aplikację do kolorów swojej marki. Wykorzystanie nowego systemu kolorów z kolorami marki pozwoli Ci stworzyć dostępny schemat kolorów, który może mieć bardziej dynamiczne funkcje.
Czego się nauczysz
- Jak utworzyć motyw niestandardowy za pomocą narzędzia do tworzenia motywów Material.
- Stosowanie motywu niestandardowego do makiet projektu.
- Możliwość łączenia kolorów dynamicznych i spersonalizowanych.
Wymagania wstępne
W tym module będziemy korzystać z podstawowych koncepcji projektowania.
- Znajomość podstawowych koncepcji projektowania: palety kolorów
- Znajomość bieżących schematów kolorów i ról Androida
- Znajomość Figmy
- Opcjonalnie: wizualizacja dynamicznych kolorów w aplikacji – ćwiczenie w Codelabs
Czego potrzebujesz
- Konto Figma
- Plik Figma Designlab
- Wtyczka do Figmy Material Theme Builder
2. Rozpocznij
Konfiguracja
Aby rozpocząć, musisz uzyskać dostęp do pliku Designlab Figma. Wszystko, czego potrzebujesz do tego modułu, znajdziesz w pliku Figma. Możesz pobrać i zaimportować plik lub skopiować go ze społeczności Figmy.
Najpierw zaloguj się w Figmie lub utwórz konto.
Duplikowanie z Figma Community
Otwórz plik Dostosowywanie Material lub wyszukaj w Figma Community artykuł Wizualizacja dynamicznych kolorów w aplikacji za pomocą Material Design. W prawym górnym rogu kliknij Duplikuj, aby skopiować plik do swoich plików.
Układ pliku
Przeglądając plik, zauważysz, że jest on samodzielny i zaczyna się od wprowadzenia. Każda sekcja jest podzielona na wiersz połączonych ze sobą obszarów roboczych, w których znajdują się podstawowe koncepcje dotyczące sekcji, a następnie ćwiczenia. Sekcje i ćwiczenia są ze sobą powiązane i należy je wykonywać po kolei.
W tym laboratorium znajdziesz szczegółowe wyjaśnienia tych pojęć i ćwiczenia. Zapoznaj się z tym przewodnikiem, aby dowiedzieć się więcej o nowych funkcjach Material You.
Na początku znajduje się tablica Intro, na której są przyciski łączące tablice w odpowiedniej kolejności. Aby otworzyć link, kliknij przycisk.
Instalowanie wtyczki Figma
Ten przewodnik opiera się w dużej mierze na nowej wtyczce do Figmy, która generuje dynamiczne schematy kolorów i tokeny. 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 Design
Najpierw omówimy, jak kolor jest używany w Material Design i jak działa nowy system kolorów.
Kolor służy do wyrażania stylu i przekazywania znaczenia, niezależnie od tego, czy jest to znaczenie osobiste dla użytkownika, związane z marką czy semantyczne. System kolorów radzi sobie ze zmiennością dynamicznie zmieniających się schematów kolorów, które powstają w wyniku zmian wprowadzanych przez użytkownika. Logika relacji tonalnych i zmian odcienia oraz nasycenia stanowi podstawę elastycznego stosowania kolorów.
Przestrzeń kolorów umożliwia generowanie dostępnych jasnych i ciemnych schematów kolorów wyodrębnionych z koloru źródłowego przez wygenerowanie 5 kluczowych kolorów, a następnie palet tonalnych, w których wybrane są określone kroki tonalne.
Ta technika zmiany kolorów nie tylko zapewnia dostępny schemat kolorów, ale też umożliwia tworzenie 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 w palety tonalne, aby tworzyć dostępne schematy.
Motyw z marką
M3 obsługuje systematyczne stosowanie parametrów niestandardowych, które pomagają definiować i utrzymywać style komunikujące Twoją markę.
Schemat niestandardowy to schemat kolorów, który nie jest oparty na tapecie urządzenia użytkownika, ale na wyborze twórcy aplikacji. System kolorów M3 i schematy niestandardowe stanowią podstawę dynamicznych kolorów w aplikacjach.
Niestandardowy schemat wypełni lukę między M2 a M3, aby ułatwić migrację, poprzez skonfigurowanie niezbędnych tokenów (miejsc na kolory) i zapewnienie większej spójności z marką.
Dodawanie kolorów marki do kreatora motywów Material
4. Schemat kolorów: kolory uzupełniające
Podstawą schematu kolorów jest zestaw 5 kluczowych kolorów, z których każdy jest powiązany z osobną paletą odcieni zawierającą 13 tonów. Określone odcienie z każdej palety tonalnej są przypisywane do ról kolorów w interfejsie. Zacznijmy od otwarcia wtyczki Material Theme Builder i skonfigurowania pierwszego koloru uzupełniającego: Podstawowy.
Jeśli wpiszesz tylko kolor podstawowy, zostanie on użyty jako źródło do wygenerowania całego schematu kolorów.
- W oknie wtyczki kliknij Niestandardowe. Spowoduje to przełączenie motywu na motyw niestandardowy. W tym ćwiczeniu użyjemy wygenerowanego już motywu material-theme, ale w razie potrzeby możesz też utworzyć nowy motyw. Więcej informacji znajdziesz w artykule Wyświetlanie dynamicznych kolorów.
- Następnie ustawimy kolor klucza podstawowego. Kolorem podstawowym może być główny kolor marki lub podstawowy kolor uzupełniający, który jest najczęściej używany. Pozostałe kolory klawiszy zostaną wypełnione na podstawie koloru podstawowego. Oznacza to, że nie musisz dodawać dodatkowych kolorów, jeśli nie są Ci potrzebne.
5. Tworzenie pozostałej części motywu
Kolor podstawowy jest używany do generowania motywu, ale możesz mieć kolory uzupełniające, które będą wspierać główny kolor marki.
- W oknie modalnym wtyczki dodaj kolor dodatkowy, klikając pole Kolor dodatkowy. Role drugorzędne są używane w przypadku mniej widocznych komponentów interfejsu, co zwiększa możliwości wyrażania kolorów. Kolor dodatkowy zostanie zaktualizowany w schemacie kolorów i interfejsie aplikacji.
- To samo zrób w przypadku opcji Tertiary. Kolory trzeciorzędne służą do kontrastujących akcentów, które mogą równoważyć kolory podstawowe i drugorzędne lub przyciągać uwagę do elementu. Rola koloru dodatkowego jest pozostawiona do uznania producentów i ma na celu wspieranie szerszego zakresu kolorów w produktach.
- Kolory neutralne są teraz używane w przypadku powierzchni i tła, a także tekstu i ikon o wysokim kontraście.
Ustaw kolory drugorzędne, trzeciorzędne i neutralne, aby w pełni dostosować schemat kolorów.
Kolory marki zostaną teraz uwzględnione w podstawowym schemacie kolorów, który został przesunięty, aby pasował do przestrzeni kolorów M3, jest w pełni dostępny i można go wyeksportować oraz zaimplementować w kodzie jako motyw.
6. Stosowanie motywu
Role i tokeny
Każdy kolor uzupełniający (podstawowy, dodatkowy i trzeciorzędny) jest dostępny w grupie 4 kompatybilnych kolorów o różnych odcieniach, które można łączyć, aby podkreślać elementy i wyrażać się wizualnie. Grupa składa się z koloru uzupełniającego, koloru podstawowego, kontenera i koloru w kontenerze.
Neutralne kolory są używane w przypadku powierzchni i tła oraz tekstu i ikon o wysokim kontraście.
Tokeny projektu to małe, powtarzające się decyzje projektowe, które składają się na styl wizualny systemu projektowania. Tokeny zastępują statyczne wartości, takie jak kody szesnastkowe kolorów, nazwami, które same się wyjaśniają. Tokeny projektu w znaczący sposób łączą wybory dotyczące stylu, które w inny sposób nie miałyby jasnego powiązania.
Wtyczka Figma tworzy tokeny i umożliwia wprowadzanie własnych kolorów źródłowych w postaci stylów Figma, aby łączyć się z istniejącymi makietami, przewodnikami po stylu marki, a nawet systemami projektowania.
Tokeny projektu tworzą wspólny język między rolami kolorów a wdrażaniem.
Hierarchia kolorów
Podczas stosowania ról kolorów w makietach weź pod uwagę kolejność ważności lub hierarchię elementów. Ta koncepcja pomoże przypisać kolory marki do odpowiednich ról, a także zmapować je w interfejsie. Zazwyczaj bardziej nasycone lub skoncentrowane kolory przyciągają uwagę użytkownika w pierwszej kolejności, dlatego rola koloru podstawowego jest przypisana do komponentów, które są bardziej skoncentrowane na wezwaniu do działania. Generator motywów Material używa systemu kolorów M3 do generowania odpowiednich kolorów, ale podanie kolorów dodatkowych lub trzeciorzędowych o wyższym nasyceniu spowoduje, że będą one bardziej wyraziste niż kolor podstawowy. Zastanów się, w jakiej kolejności użytkownicy mają wchodzić w interakcję z interfejsem i treściami, aby przypisać role kolorów. Nie wszystkie komponenty powinny używać koloru podstawowego.
Największą uwagę przyciąga jednolity, nasycony kolor.
7. Przełącz na motyw
Aby zastosować utworzony motyw niestandardowy do projektów, musimy ustawić makietę na tokeny w istniejącym motywie materiałowym.
Komponenty Material mają wstępnie przypisane role i automatycznie współpracują z kreatorem motywów Material.
Przełącz na motyw z okna Kreatora motywów Material.
- Aby użyć tego motywu, ustawmy wszystkie tokeny (style Figmy) w układzie po prawej stronie, wybierając ramkę układu i klikając zamianę. Prefiks stylu zostanie zaktualizowany w kolorach wyboru.
- Nie wszystko zostało zaktualizowane? Komponenty niestandardowe, takie jak karta z poradami dotyczącymi pielęgnacji roślin, muszą najpierw zastosować styl Figma. Wybierz kontener z wskazówką dotyczącą pielęgnacji, a następnie kliknij ikonę z 4 kropkami, aby przypisać styl. Wybierz kontener pomocniczy. Zrób to samo z zawartością karty z poradą, ale przypisz jej kontener trzeciorzędny. Małe etykiety na liście to również komponenty niestandardowe, ale wrócimy do nich później.
- Komponenty Material Design korzystają z mapowań domyślnych, ale możesz eksperymentować z przypisywaniem stylów, aby jak najlepiej dopasować je do interfejsu. Poświęć chwilę na eksperymentowanie z różnymi hierarchiami kolorów i sposobami wyrażania marki.
(W pliku eksportu kodu znajduje się tylko motyw. Jeśli współpracujesz z inżynierem, udostępnij mu makiety, aby przekazać mapowania tokenów, ponieważ nie zostaną one uwzględnione w eksportowaniu.
Otwarcie wtyczki bez motywu spowoduje wyświetlenie ekranu konfiguracji, który pomoże Ci zacząć. Kliknięcie „Rozpocznij” spowoduje wygenerowanie domyślnego stylu podstawowego „material-theme” jako grupy stylów Figma, którą możesz połączyć z makietami lub użyć z zestawem Material Design.
8. Rozszerzenie poza podstawowy schemat
Masz teraz motyw kolorystyczny marki przypisany do komponentów i makiety projektu, ale możesz mieć dodatkowe kolory, które należy uwzględnić. W takiej sytuacji przydaje się rozszerzony schemat, który umożliwia dodawanie spersonalizowanych kolorów.
Mogą to być kolory semantyczne, specyficzne dla marki lub nawet dla produktu, którym należy przypisać role i przekształcić je za pomocą algorytmu kolorów lub pozostawić w postaci wpisanej.
Rozszerzony schemat kolorów umożliwia też łączenie dynamicznych (generowanych przez użytkownika) kolorów z kolorami marki. Zezwalaj na spersonalizowany wpływ użytkownika na podstawowy schemat, a kolory marki ustawiaj w schemacie rozszerzonym. Oznacza to, że elementy interfejsu mogą być bardziej spersonalizowane pod kątem użytkowników, a kolory marki mogą mieć większy wpływ na odbiór aplikacji.
Podstawowy schemat można rozszerzyć o spersonalizowane kolory. 
9. Rozszerzanie i dostosowywanie
Rozszerzenie schematu o spersonalizowane kolory umożliwia dodanie kolorów semantycznych lub dodatkowych kolorów marki.
Schemat niestandardowy z dodanymi spersonalizowanymi kolorami.
- W oknie wtyczki pod kluczowymi kolorami kliknij Dodaj kolor.
- Bieżący motyw zostanie zaktualizowany o nowy wiersz Custom0. Aby zaktualizować ten kolor, kliknij pole koloru i wybierz nowy kolor.
- Te rozszerzone kolory znajdziesz jako styl w stylach tylko do odczytu jako Custom0. Obecne są zarówno paleta kolorów, jak i schemat. Przypiszmy niektóre etykiety z listy do nowego koloru, wybierając tło etykiety i przypisując jedną z ról dodanego koloru (on-custom0-container).
Ustawianie koloru niestandardowego w wybranych kolorach.
- Kreator motywów Material automatycznie generuje kolory jako Niestandardowy#. Aby zmienić nazwę dodanego koloru niestandardowego, rozwiń grupę stylów motywu w panelu stylów (pojawi się ona, gdy nic nie jest zaznaczone). Następnie w podgrupie źródła znajdź Custom0. Zmiana nazwy źródła w tym miejscu spowoduje zmianę nazwy koloru w oknie wtyczki.
Niestandardowe style kolorów znajdziesz w panelu stylów.
- Dodany kolor możesz usunąć w podobny sposób, klikając go prawym przyciskiem myszy i usuwając styl. Przy następnym otwarciu wtyczki dodany kolor zostanie usunięty. Zmiana nazwy i usunięcie mogą nie być widoczne na diagramie kolorów.
10. Gratulacje
Świetnie, że udało Ci się dowiedzieć, jak utworzyć niestandardowy motyw kolorystyczny za pomocą narzędzia Material Theme Builder, zastosować go w makietach projektu i dodać do schematu kolorów. Nowy system kolorów Material 3 zapewnia dostępność, elastyczność i spójność kolorów w projektach. Nie możemy się doczekać, aż zobaczysz, jak z nich korzystasz.
Jeśli masz pytania, możesz je zadać w każdej chwili na @MaterialDesign na Twitterze.
Więcej treści i samouczków dotyczących projektowania znajdziesz na youtube.com/MaterialDesign