Wizualizacja dynamicznych kolorów w aplikacji

1. Wprowadzenie

Ostatnia aktualizacja: 21.09.2021

Aplikacje mogą przyjmować różne kolory z podstawowych schematów, dynamicznych kolorów generowanych przez użytkowników lub kolorów marki.

Przygotuj się na nowe funkcje dynamicznych kolorów wprowadzone w Material You. W tym module utworzysz dynamiczne palety kolorów, aby dowiedzieć się, jak działa system kolorów, jakie koncepcje tworzą dostępne palety kolorów oraz jakie metody pomagają wizualizować aplikację z dynamicznymi kolorami przy użyciu najnowszych narzędzi do projektowania.

Czego się nauczysz

Co nowego w kolorach Material Design
Stosowanie w aplikacji kolorów wygenerowanych przez użytkowników
Narzędzia, które pomogą Ci w tym procesie

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

Czego potrzebujesz

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 Figma.

Najpierw zaloguj się w Figmie lub utwórz konto.

Duplikowanie z Figma Community

Otwórz plik Visualizing dynamic color in your app with Material Design lub wyszukaj go w Figma Community. W prawym górnym rogu kliknij Duplikuj, aby skopiować plik do swoich plików.

Układ pliku

Rozejrzyj się po pliku. Zauważysz, że plik jest samodzielny i zaczyna się od wprowadzenia. Każda sekcja jest podzielona na wiersz połączonych ze sobą obszarów roboczych. Zawiera podstawowe koncepcje dotyczące sekcji, a następnie ćwiczenia. Sekcje i ćwiczenia są ze sobą powiązane, więc należy je wykonywać po kolei.

W tym laboratorium kodowania znajdziesz szczegółowe wyjaśnienia tych pojęć i ćwiczenia. Aby dowiedzieć się więcej o nowych funkcjach Material You, przeczytaj artykuł w codelabie.

Na tablicy Intro znajdują się przyciski, które łączą tablice w odpowiedniej kolejności. Aby uzyskać dostęp do linku, 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. Pojęcia związane z kolorami

Czym jest dynamiczny kolor?

Material You to nowe podejście do kolorów, które pozwala na bardziej spersonalizowane wrażenia. Dzięki dynamicznemu identyfikowaniu koloru zakres możliwych wrażeń kolorystycznych jest znacznie szerszy.

Dynamiczne kolory to kluczowy element Material You, w którym algorytm wyodrębnia spersonalizowane kolory z tapety użytkownika, aby zastosować je w aplikacjach i interfejsie systemu.

Luminancja

Dynamiczne kolory zostały zaprojektowane tak, aby działać w nieprzewidywalnych kontekstach. Aby zarządzać współczynnikami kontrastu w różnych kontekstach wyświetlania, kluczowym atrybutem są poziomy luminancji, które umożliwiają prawidłowe łączenie kolorów nawet bez testowania przez zespół ds. produktów każdej konkretnej kombinacji kolorów.

Elementy o podobnej luminancji nie będą miały odpowiedniego kontrastu, aby były czytelne, natomiast elementy o różnych wartościach luminancji będą bardziej rozróżnialne.

Palety tonalne

Paleta tonalna to przekształcenie jednego odcienia (dynamicznie wyodrębnionego koloru) w spektrum powiązanych tonów. Przekształcenie koloru w 13 odcieni umożliwia zastosowanie grupy zakresów tonalnych, zwanej paletą tonalną, w różnych kontekstach – od poszczególnych elementów w komponencie po całe motywy aplikacji.

Kolor przetłumaczony na zakres tonalny.

4. Wyodrębnianie kolorów

Od pomysłu do schematu

Zobaczmy, jak dynamiczne kolory działają w Kreatorze motywów Material.

Otwórz narzędzie Material Theme Builder. Gdy wybierzesz opcję dynamiczny, upuść obraz lub wybierz go w przeglądarce plików. Zauważ, że kolor podstawowy zostanie zaktualizowany na podstawie obrazu.
Wartości kolorów są wyodrębniane z tapety i przypisywany jest im „typ”, który określa, jak kolor będzie powiązany z innymi kolorami w schemacie. Te „kluczowe kolory” (po prawej) zostały zaktualizowane, aby odzwierciedlać te wartości.

Następnie są one przekształcane w palety tonalne oparte na luminancji, co generuje 5 zakresów kolorów z odcieniami od jasnego do ciemnego. Palety tonalne są odpowiednio oznaczone w danych wyjściowych dotyczących kolorów.
Z 5 zakresów tonalnych wybierane są konkretne odcienie (na podstawie luminancji), które są przypisywane do wstępnie zdefiniowanych ról w schemacie. Kolory są mapowane na schemat za pomocą tokenów projektu.

Role kolorów trzeciorzędowych utworzone na podstawie trzeciorzędowego zakresu tonalnego i przypisane do komponentów.

5. Motywy i tokeny

Tokeny projektu zapewniają elastyczność i spójność w całym produkcie, umożliwiając projektantom np. przypisywanie roli koloru elementu w interfejsie, a nie ustalonej wartości. Tokeny stanowią pomost między przypisaną rolą elementu a wybraną wartością koloru dla tej roli. Wprowadzenie dynamicznych kolorów sprawia, że ważniejsze jest projektowanie z uwzględnieniem roli koloru, a nie konkretnego koloru.

Motywy zawierają tokeny Material Design dotyczące zarówno koloru, jak i typu, dzięki czemu projekty i kod mają jedno źródło informacji o wartościach podstawowych, a także palety wygenerowane przez użytkownika i wartości niestandardowe.

W Figma wtyczka generuje te tokeny jako style, co oznacza, że jeśli używasz wygenerowanych stylów, używasz tokenów MD.

Kolory w palecie tonalnej są mapowane na jasny lub ciemny schemat za pomocą tokenów projektu.

System mapowania przypisuje ton do każdego elementu w komponencie.

Tokeny konfiguracji

Aby zastosować dynamiczne kolory w projektach, musimy ustawić makietę na tokeny w istniejącym motywie Material Design.

Aby użyć tego motywu, ustawmy wszystkie tokeny (style Figmy) w układzie po prawej stronie. W tym celu wybierz ramkę układu i kliknij zamień. Prefiks stylu zostanie zaktualizowany w kolorach wyboru.

Kliknij Zamień, aby zaktualizować połączony motyw używany w wybranym projekcie.

Teraz upuść obraz lub wybierz go w przeglądarce plików. Wartości makiety przyjmą dynamiczny kolor wyodrębniony z obrazu.
Kliknij przycisk losowania, aby losowo wybrać kolor początkowy, z którego będą wyodrębniane kolory, zamiast wyodrębniać je z obrazu. To kolejny sposób na szybkie sprawdzenie, jak dynamiczne kolory mogą wpłynąć na makiety projektu.

Kliknij przycisk losowania, aby losowo wybrać kolor początkowy.

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.

6. Zgłaszanie się do UI

Podane układy zostały utworzone za pomocą zestawu Material Design Kit, który wykorzystuje tokeny Material Design, ale jest w nich kilka niestandardowych elementów, które nie są mapowane.

Wybierz karty artykułów. Wypełnij, ustaw styl (ikona 4 kropek) na material-theme/surface. (Możesz też wyszukać powierzchnię).
W podobny sposób wybierz typ na kartach i ustaw go na on-surface, a pola wyboru ustaw na podstawowe.

Style Figmy użyte na kartach projektu.

Następnie utworzymy dodatkowe makiety, aby przejść przez pozostałe schematy.

Tworzenie motywów i ich ulepszanie

W pełni połączyliśmy teraz makietę, aby wizualizować dynamiczny kolor, ale możemy też utworzyć wiele motywów i zamienić je na osobne makiety, aby wizualizować jednocześnie różne dynamiczne kolory.

W oknie wtyczki kliknij menu i wybierz „Dodaj nowy motyw”.

Utwórz unikalną nazwę motywu i kliknij Utwórz motyw. Spowoduje to też wygenerowanie nowych diagramów kolorów dla każdego utworzonego motywu.

Dodawanie nowego motywu za pomocą menu.

Dodaj obraz lub przetasuj kolor początkowy.
W oknie modalnym wtyczki wybierz makietę (komponent interfejsu aplikacji) i kliknij zamień. Spowoduje to zaktualizowanie wartości stylu do bieżącego motywu widocznego w menu.
Zduplikuj makietę (CMD + D).

Kliknij Zamień, aby zaktualizować połączony motyw używany w wybranym projekcie.

Powtórz kroki 1–5.

Masz teraz kilka projektów z różnymi wersjami dynamicznych kolorów.

7. Gratulacje

Gratulujemy zdobycia wiedzy o dynamicznych kolorach i jej zastosowania! Narzędzie Material Theme Builder ułatwia korzystanie z kolorów w Material Design, ponieważ wizualizuje dynamiczne kolory, tworzy niestandardowe motywy i eksportuje je do kodu.

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