1. Wprowadzenie
Ostatnia aktualizacja: 21.09.2021 r.
Aplikacje mogą przyjmować różne kolory ze schematów podstawowych, kolorów dynamicznych generowanych przez użytkowników lub kolorów marki.
Przygotuj się do nowych, dynamicznych funkcji kolorystycznych wprowadzonych w Material You. W tym module utworzysz dynamiczne palety kolorów, aby poznać działanie systemu kolorów, poznać koncepcje tworzenia dostępnych palet kolorów oraz metody wizualizacji aplikacji za pomocą dynamicznych kolorów za pomocą najnowszych narzędzi do projektowania.
Czego się nauczysz
- Nowości w interfejsie Material Design
- Jak zastosować w aplikacji kolor wygenerowany przez użytkownika
- Pomocne narzędzia
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
Czego potrzebujesz
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 Wizualizacja dynamicznego koloru w aplikacji za pomocą interfejsu Material Design lub wyszukaj „Wizualizacja dynamicznego koloru 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
Rozejrzyj się po pliku. Zwróć uwagę, że plik jest autonomiczny, zaczynając od wprowadzenia. Każda sekcja jest podzielona na rząd połączonych ze sobą arkuszy roboczych wraz z podstawowymi pojęciami dotyczącymi sekcji, a następnie ćwiczeniami. Sekcje i ćwiczenia są od siebie uzależnione, więc należy wykonywać je po kolei.
Dzięki tym ćwiczeniom w Codelabs dowiesz się więcej o tych pojęciach i ćwiczeniach. Jeśli chcesz dowiedzieć się więcej o nowych funkcjach Material You, zapoznaj się z ćwiczeniami z programowania.
Począwszy od obszaru roboczego Wprowadzenie, tutaj znajdują się przyciski, które łączą projekty w odpowiedniej kolejności. 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 hasło „Material Theme Builder” w społeczności Figma.
3. Pojęcia związane z kolorami
Co to jest kolor dynamiczny?
Dzięki Material You kolory są jeszcze bardziej spersonalizowane. Dynamiczne wyodrębnianie kolorów znacznie zwiększa zakres dostępnych kolorów.
Dynamiczny kolor to kluczowy element Material You, w którym algorytm pobiera z tapety użytkownika niestandardowe kolory do zastosowania w aplikacjach i interfejsie systemu.
Luminancja
Dynamiczne kolory działają w nieprzewidywalnych kontekstach. Poziomy luminancji są kluczowym atrybutem umożliwiającym skuteczne łączenie kolorów, który umożliwia zarządzanie współczynnikami kontrastu w różnych kontekstach oglądania, nawet jeśli zespół ds. produktu nie testuje każdej konkretnej kombinacji kolorów.
Elementy o podobnej luminancji nie mają odpowiedniego kontrastu, aby zapewnić czytelność, a elementy o różnych wartościach luminancji będą lepiej rozróżniane.
Palety tonalne
Paleta tonalna to tłumaczenie jednego odcienia (dynamicznie wyodrębnionego koloru) w zakres powiązanych odcieni. Tłumaczenie koloru na trzynaście odcieni umożliwia zastosowanie grupy zakresów tonalnych zwanych paletą tonalną, którą można zastosować w różnych kontekstach – od poszczególnych elementów wewnątrz komponentu po całe motywy aplikacji.
Kolor przekształcony na zakres tonalny.
4. Wyodrębniam kolory
Materiał wyjściowy do schematu
Zobaczmy, jak działają dynamiczne kolory w Material Theme Builder.
- Otwórz Material Theme Builder. Po wybraniu dynamicznego upuść obraz lub wybierz go w przeglądarce plików. Zwróć uwagę, że kolor ziarna jest aktualizowany na podstawie zdjęcia.
- Wartości kolorów są wyodrębniane z tapety i przypisywane do typu który określa, jak kolor będzie się kojarzył z innymi kolorami w schemacie. Te „kluczowe kolory” (po prawej) zostały zaktualizowane tak, aby odzwierciedlały te wartości.
- Następnie są one przekształcane w palety tonalne oparte na luminancji, gdzie powstaje 5 zakresów kolorów – od jasnego do ciemnego. Palety tonalne są odpowiednio oznaczone w wynikach kolorów.
- Spośród 5 zakresów tonalnych określone tony (na podstawie luminancji) są przypisane do wstępnie zdefiniowanych ról, które składają się na schemat. Kolory są mapowane na schemat za pomocą tokenów projektu.
Role kolorów trzeciorzędnych zostały utworzone z zakresu trzeciorzędnego i zmapowane na komponenty.
5. Motywy i tokeny
Tokeny projektowe zapewniają elastyczność i spójność w obrębie produktu, ponieważ umożliwiają projektantom na przykład przypisanie roli koloru elementu w interfejsie, a nie określonej wartości. Tokeny stanowią pomost między przypisaną rolą elementu a wybraną wartością koloru dla roli. Dzięki wprowadzeniu dynamicznego koloru projektowanie pod kątem jego roli, a nie konkretnego koloru.
Motywy zawierają tokeny Material Design zarówno dla koloru, jak i typu, dzięki czemu projekty i kod mają jedno źródło prawdy reprezentujące punkt odniesienia, a także palety kolorów wygenerowane przez użytkowników i wartości niestandardowe.
W Figmie wtyczka generuje tokeny jako style, co oznacza, że jeśli używasz wygenerowanych stylów, będziesz używać tokenów MD.
Kolory w palecie tonalnej są mapowane na jasny lub ciemny schemat za pomocą tokenów projektu.
System mapowania przypisuje ton każdemu elementowi w komponencie.
Skonfiguruj tokeny
Aby zastosować dynamiczne kolory do projektów, musimy ustawić wzorcowy wzór na tokeny w istniejącym motywie materiałowym.
- Ustawmy wszystkie tokeny (style Figma) w układzie po prawej stronie, aby użyć tego motywu. Aby to zrobić, wybierz ramkę układu i kliknij zamień. Zobaczysz, że prefiks stylu zostanie zaktualizowany w wybranych kolorach.
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 modelu przyjmują dynamiczny kolor wyodrębniony z obrazu.
- Kliknij przycisk losowania. Spowoduje to ekstrapolację koloru wyjściowego w losowy sposób, a nie na wyodrębnianie obrazu z obrazu. To kolejny sposób na szybkie sprawdzenie, jak dynamiczne kolory mogą wpływać na makiety projektowe.
Kliknięcie przycisku losowego pozwala wybrać losowy kolor materiału wyjściowego.
Otwarcie wtyczki bez motywu spowoduje wyświetlenie ekranu konfiguracji. Rozpocznij generuje domyślny motyw „material-theme”, w formie grupy stylu figma, aby połączyć ją ze swoimi makietami lub użyć pakietu Material Design.
6. Stosuję do UI
Udostępnione układy zostały utworzone za pomocą pakietu Material Design Kit, który wykorzystuje tokeny Material Design, ale jest kilka elementów niestandardowych, których nie ma na mapie.
- Wybierz karty artykułu. W wypełnieniu wybierz styl (ikona z 4 kropkami) na material-theme/surface. (możesz też wyszukać platformę).
- W podobny sposób wybierz typ na kartach i ustaw on-surface, a pola wyboru jako główne.
Style Figma użyte na kartach projektu.
Następnie utworzymy dodatkowe makiety, aby przetestować pozostałe schematy.
Tworzenie motywów i powtarzanie ich
Połączyliśmy już makietkę w celu wizualizacji dynamicznych kolorów, ale możemy też utworzyć wiele motywów i zamienić je na osobne makiety, aby zwizualizować zakres dynamicznych kolorów jednocześnie.
- W oknie wtyczki kliknij menu i wybierz Dodaj nowy motyw.
- Nadaj motywowi unikalną nazwę i kliknij Utwórz motyw. Spowoduje to również wygenerowanie nowych diagramów kolorów dla każdego utworzonego motywu.
Dodawanie nowego motywu za pomocą menu.
- Dodaj obraz lub pomieszaj kolor ziarna.
- W oknie modalnym wtyczki wybierz podgląd (komponent interfejsu aplikacji) i kliknij zamień. Spowoduje to zaktualizowanie wartości stylu do bieżącego motywu widocznego w menu.
- Zduplikuj (CMD + D) wersję testową.
Kliknij „Zamień”, aby zaktualizować połączony motyw używany w wybranym projekcie.
- Powtórz kroki 1–5.
Masz teraz wiele projektów z różnymi dynamicznymi wersjami kolorów.
7. Gratulacje
Świetna robota z nauką i stosowaniem dynamicznych kolorów! Material Theme Builder ułatwia tworzenie kolorów w stylu Material Design, ponieważ umożliwia wizualizację kolorów dynamicznych, tworzenie motywów niestandardowych i eksportowanie ich do kodu.
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.