1. Wprowadzenie
Ostatnia aktualizacja: 11.05.2022 r.
System kolorów Material 3 tworzy łatwo dostępne schematy kolorów dzięki dynamicznemu algorytmowi kolorów. Co jednak oznacza ułatwienia dostępu dla kolorów? W jaki sposób nowy system kolorów w Material Design tworzy łatwo dostępny schemat kolorów i jakie narzędzia mogą w tym pomóc?
Czego się nauczysz
- Jak kolor jest powiązany z wytycznymi dotyczącymi ułatwień dostępu i kontrastu.
- Jak narzędzia pomagają utworzyć łatwiejszy schemat kolorów, edytować i sprawdzać kontrast.
Wymagania wstępne
W tym module skupimy się na podstawowych koncepcjach projektowych.
- Znajomość schematów kolorów i ról dostępnych obecnie na Androidzie
- Wiedza o Figmie
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 Projektowanie z dostępnymi kolorami lub wyszukaj „Projektowanie z dostępnymi kolorami” w Społeczności 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. Kolor i ułatwienia dostępu
Ułatwienia dostępu to jedyny sposób, aby projektować produkty dla wszystkich. Dzięki temu Twoje produkty są dostępne dla jak najszerszego grona odbiorców.
„Czy widzę kolor na ekranie?”. jest tylko pierwszym aspektem, który należy wziąć pod uwagę przy projektowaniu z użyciem kolorów. Użytkownicy postrzegają kolor na różne sposoby w zależności od ich ostrości wzroku.
Daltonizm może oznaczać sprawdzanie różnych kombinacji kolorów, aby elementy interfejsu nie mieszały się ze sobą.
Choć przezroczystość i waga nie muszą stanowić dosłownego odcienia koloru, mają one potężny wpływ wizualny na jego postrzeganie.
Niska przezroczystość powoduje, że kolor jest jaśniejszy, przez co tekst może stać się nieczytelny. Na przykład osoba niewidoma może mieć problem z odczytem z odpowiedniej odległości tekstu, którego przezroczystość jest ustawiona na 30%.
Przezroczystość należy używać z rozwagą i nigdy nie podlega zalecanym ustawieniom.
Podobny efekt ma grubość czcionki, ponieważ w przypadku ciemniejszych tła ma on ciemniejszy grubość czcionki. W druku użycie bardzo cienkiej czcionki umożliwia rozlanie tuszu tworząc klaustrofobiczny tekst. W ten sposób dzieje się to również w przypadku ekranów, starając się wypełnić przestrzeń.
Cienki tekst na ciemnym tle wywołuje efekt klaustrofobiczny.
Czytelność a czytelność. W tym module będziemy sprawdzać czytelność tekstu. Czytelność określa, jak łatwo jest ją zauważyć, a czytelność określa, jak łatwo jest zrozumieć treść.
4. Kontrast kolorów
Opracowaliśmy wytyczne dotyczące ułatwień dostępu, aby dać projektantom i deweloperom spójną listę kontrolną stworzoną przez ekspertów, która pozwoli nam mieć pewność, że przestrzegamy sprawdzonych metod tworzenia produktów promujących integrację społeczną. WCAG to standardowy standard, do którego odnosi się ten moduł.
Kontrast kolorów to różnica między luminancją elementów na pierwszym planie i w tle w postaci formatu. Ten współczynnik przedstawia ocenę. Pomiar kontrastu między powiedzeniem, tekstem na przycisku a jego kontenerem pomaga określić, czy tekst będzie czytelny.
Przykład z błędnym kontrastem kolorów.
Wskazówki dotyczące kontrastu kolorów są podzielone na tekst i materiały nietekstowe. Każdy z nich ma własny zestaw ocen.
Tekst
AA | AAA | |
Duży tekst | 3:1 | 4,5:1 |
Zwykły tekst (treść) | 4,5:1 | 7:1 |
Nietekstowa
AA | |
Nietekst (elementy graficzne) | 3:1 |
Sprawdźmy kontrast i zobaczmy, jak to naprawić.
- W aplikacji Figma znajdź kolory elementów interfejsu. Jego tekst zaczyna się od dużego tekstu (#C0BEC5) i ma kolor tła (#F5F5FF). Wpisanie tych kolorów na pierwszym planie i w tle za pomocą narzędzia do sprawdzania kontrastu online spowoduje odrzucenie wszystkich ocen.
- Tekst jest za jasny w stosunku do koloru tła. Pozostając w narzędziu do sprawdzania kontrastu online, dostosuj kolor pierwszego planu za pomocą selektora kolorów, aby był ciemniejszy i minął AAA.
- Wróć do Figmy i zastosuj nowy przejścia kolor do dużego tekstu.
- Wykonaj te same czynności w przypadku tekstu głównego i przycisków, pamiętając, aby w każdym z nich sprawdzić kolor tekstu i tła.
- Ten sam proces możesz zastosować do ikon w sekcji Obiekty graficzne i komponenty interfejsu użytkownika.**
- Nadaj Figmie nowy kolor dla każdego elementu. Wszystkie elementy powinny teraz uzyskiwać ocenę kontrastu.
Przykład z przekazywanym kontrastem kolorów.
Pewnie wydawało się to długim procesem, a efekty mogły sprawić, że paleta kolorów będzie mniej harmonijna. Pomocne mogą być tu odpowiednie narzędzia.
5. Lampa z jasnością
W nowym, dynamicznym systemie kolorów w interfejsie Material Design luminacja opiera się na luminancji, a nie barwie. Oznacza to, że gdyby usunąć barwę i przebarwienie, moglibyśmy zobaczyć kontrast przez odcienie.
Po wyodrębnieniu koloru otrzymujemy 5 przesuniętych kolorów kluczowych, na podstawie których generowane są palety tonalne. Paleta tonalna składa się z 13 odcieni, w tym bieli i czerni. Wartość tonu wynosząca 100 jest równoznaczna z maksymalnym pojęciem światła, a efektem jest biel. Każda wartość tonu od 0 do 100 wyraża ilość światła w kolorze.
System palet tonalnych jest centralnym elementem, który pozwala domyślnie udostępnić każdy schemat kolorów.
Łączenie kolorów na podstawie tonacji, a nie wartości szesnastkowej czy barwy, to jeden z kluczowych systemów, które umożliwiają dostęp do wszystkich kolorów. Produkty z dynamicznymi kolorami będą spełniać wymagania, ponieważ kombinacje algorytmów, które może zobaczyć użytkownik, są zaprojektowane tak, by spełniały standardy ułatwień dostępu.
Elementy o podobnej luminancji nie mają odpowiedniego kontrastu, co przekłada się na czytelność, a elementy o różnych wartościach luminancji są lepiej widoczne.
Dynamiczny kolor Material You powstał z myślą o pracy w nieprzewidywalnych kontekstach. Poziomy luminancji są kluczowym atrybutem umożliwiającym skuteczne łączenie kolorów, nawet jeśli zespół ds. produktu nie testował każdej kombinacji kolorów. Pozwalają one zarządzać współczynnikami kontrastu w różnych kontekstach oglądania.
6. Tworzenie motywu z ułatwieniami dostępu
Kreator motywów generuje tokeny Material Design jako style Figma, co pozwala wizualizować dynamiczne kolory i tworzyć własny motyw. Odbywa się to zgodnie z systemem kolorów Material 3, aby mieć pewność, że do schematu kolorów zostaną wygenerowane łatwo dostępne kolory.
- W oknie modalnym wtyczki kliknij Niestandardowy. Spowoduje to przełączenie motywu na motyw niestandardowy. Motyw Material Design został już wygenerowany, ale jeśli chcesz, możesz utworzyć nowy. Więcej informacji znajdziesz w artykule o wizualizowaniu dynamicznych kolorów.
- Następnie ustaw kolor klucza podstawowego. Może to być główny kolor Twojej marki lub najczęściej używany kolor uzupełniający. Kliknij kolor z etykietą Podstawowy, aby otworzyć selektor kolorów i wybrać kolor. Jest używany jako kolor źródłowy, podobnie jak kolor źródłowy w ustawieniu dynamicznym.
Dodaj kolory do sekcji MTB.
- Pozostałe kolory są wypełniane na podstawie koloru podstawowego. Oznacza to, że nie ma potrzeby dodawania kolorów, gdy ich nie potrzebujesz. Opcjonalnie dodaj kolor drugorzędny i trzeciorzędny.
- Schemat kolorów pokazuje kolory kluczowe zinterpretowane na podstawie kolorów wejściowych, wygenerowane palety tonalne i wynikowe schematy kolorów z rolami kolorów. Dostępne są zarówno schematy jasne, jak i ciemne.
- W module dostępny jest przykładowy interfejs użytkownika, który pozwala zobaczyć zastosowany schemat kolorów. Po wybraniu komponentu UI aplikacji kliknij swap (swap) we wtyczce.
Schemat kolorów z połączoną makietą.
W przypadku tych ćwiczeń wymagane tokeny w pliku Figma zostały już wygenerowane przez Material Theme Builder.
7. Sprawdzanie kontrastu w Material Theme Builder
To świetnie, ale rozumiemy, że zechcesz ręcznie zmienić niektóre z tych stylów na inne kolory. Material Theme Builder ma wbudowaną funkcję sprawdzania kontrastu kolorów podstawowych, która pomaga w podejmowaniu takich decyzji.
- Tokeny są tworzone jako style, więc możemy również ustawić wartość wygenerowanego koloru. W sekcji Style Figma przełącz w dół na kolor główny bieżącego motywu i kliknij ikonę Edytuj styl po prawej stronie.
- Zaktualizuj kolor podstawowy we właściwościach. Jest to odzwierciedlone w danych wyjściowych kolorów i interfejsie aplikacji. Algorytm kolorów nie wygenerował tego koloru, więc nie możemy zagwarantować dostępności.
- W menu wtyczki kliknij Check Contrast (Sprawdź kontrast), a następnie ponownie otwórz okno modalne Edytuj styl podstawowy. Spowoduje to sprawdzenie kontrastu i wyświetlenie oceny.
Kontrast w oknie stylu Figma.
8. Gratulacje
Fantastycznie! Ułatwienia dostępu powinny być kluczowym elementem procesu, a dzięki interfejsowi Material Design i Material Theme Builder jest to jeszcze łatwiejsze.
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.