1. Wprowadzenie
Ostatnia aktualizacja: 05/11/22
System kolorów Material 3 tworzy schematy kolorów ułatwiające dostęp za pomocą dynamicznego algorytmu kolorów. Co to jednak oznacza w przypadku kolorów? Jak nowy system kolorów Material Design tworzy schemat kolorów zgodny z zasadami dostępności i jakie narzędzia w tym pomagają?
Czego się nauczysz
- Jak kolor wpływa na ułatwienia dostępu i wytyczne dotyczące kontrastu.
- Jak narzędzia mogą pomóc w tworzeniu dostępnego schematu kolorów, wprowadzaniu zmian i sprawdzaniu kontrastu.
Wymagania wstępne
W tym laboratorium wykorzystamy podstawowe koncepcje projektowania.
- Znajomość bieżących schematów kolorów i ról w Androidzie.
- Znajomość Fignmy.
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 laboratorium, 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 Projektowanie z użyciem kolorów ułatwiających dostęp lub wyszukaj go w Figma Community. 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 znajdziesz podstawowe koncepcje dotyczące danej sekcji, a następnie ćwiczenia. Sekcje i ćwiczenia są ze sobą powiązane i należy je wykonywać po kolei.
W tym ćwiczeniu znajdziesz szczegółowe wyjaśnienia tych pojęć i ćwiczenia. Zapoznaj się z tym ćwiczeniem w Codelabs, aby dowiedzieć się więcej o nowych funkcjach Material You.
Na tablicy Intro znajdują się przyciski, które łączą tablice w odpowiedniej kolejności. Aby otworzyć link, kliknij przycisk.
Instalowanie wtyczki Figma
To ćwiczenie w dużej mierze opiera się 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. Kolor i ułatwienia dostępu
Ułatwienia dostępu to jedyny sposób na projektowanie dla wszystkich, który zapewnia, że tworzone przez Ciebie usługi będą dostępne dla jak najszerszego grona odbiorców.
„Czy widzę kolor na ekranie?” to tylko pierwsze pytanie, które należy wziąć pod uwagę podczas projektowania z użyciem kolorów. Ludzie widzą kolory na różne sposoby w zależności od ostrości wzroku.
W przypadku daltonizmu może to oznaczać sprawdzanie kombinacji kolorów, aby elementy interfejsu nie zlewały się ze sobą.
Chociaż krycie i waga nie są dosłownym odcieniem koloru, mają silny wpływ wizualny na to, jak jest on postrzegany.
Niska nieprzezroczystość tworzy jaśniejszy kolor, który może sprawić, że tekst będzie nieczytelny. Na przykład osoba z krótkowzrocznością będzie miała problem z odczytaniem tekstu ustawionego na 30% nieprzezroczystości z rozsądnej odległości.
Używaj krycia z rozwagą i nigdy poniżej sugerowanych wytycznych.
Podobny efekt można uzyskać, stosując cieńsze czcionki na ciemniejszych tłach. W druku użycie bardzo cienkiej czcionki może spowodować „rozlanie” atramentu, co utrudni czytanie tekstu. Nasze oczy tworzą ten efekt również na ekranach, próbując wypełnić przestrzeń.
Cienkie litery na ciemnym tle wywołują efekt klaustrofobii.
Czytelność a czytelność. W tym laboratorium będziemy odnosić się do czytelności tekstu. Czytelność określa, jak łatwo jest zobaczyć tekst, a czytelność – jak łatwo jest go zrozumieć.
4. Kontrast kolorów
Wytyczne dotyczące ułatwień dostępu to spójna lista kontrolna opracowana przez ekspertów, która pomaga projektantom i programistom tworzyć produkty niewykluczające. WCAG to standard, do którego odnosi się ten moduł.
Kontrast kolorów to różnica między luminancją elementów pierwszego planu i tła przedstawiona w formacie współczynnika. To kryterium stosunku jest oceniane. Pomiar kontrastu między tekstem na przycisku a jego kontenerem może pomóc określić, czy tekst będzie czytelny.
Przykład z nieodpowiednim kontrastem kolorów.
Wytyczne dotyczące kontrastu kolorów są podzielone na tekst i elementy nietekstowe, a każda z tych kategorii 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 |
Elementy inne niż tekst
AA | |
Elementy nietekstowe (elementy graficzne) | 3:1 |
Sprawdźmy kontrast i zobaczmy, jak go ręcznie poprawić.
- W Figma znajdź kolory w elementach interfejsu. Zaczynając od dużego tekstu (#C0BEC5), znajduje się on na tle w kolorze (#F5F5FF). Jeśli użyjesz sprawdzania kontrastu online i wpiszesz te kolory jako kolor pierwszego planu i tła, okaże się, że nie spełniają one żadnych wymagań.
- Tekst jest zbyt jasny w stosunku do koloru tła. Wciąż korzystając z narzędzia online do sprawdzania kontrastu, dostosuj kolor pierwszego planu za pomocą selektora kolorów, aż osiągnie on poziom AAA.
- Wróć do Figmy i zastosuj nowy kolor spełniający wymagania do dużego tekstu.
- Postępuj tak samo w przypadku tekstu głównego i przycisków. Sprawdź kolor tekstu i tła w każdym przypadku.
- ,Aby zastosować ten sam proces do ikon, użyj wyniku w sekcji Obiekty graficzne i komponenty interfejsu użytkownika**.**
- Przenieś nowy kolor do Figmy dla każdego elementu. Wszystkie elementy powinny teraz spełniać wymagania dotyczące kontrastu.
Przykład z odpowiednim kontrastem kolorów.
Prawdopodobnie był to długi proces, a wyniki mogły stworzyć mniej harmonijną paletę kolorów. W tym właśnie mogą pomóc narzędzia.
5. Zbudowane z luminancji
Nowy system dynamicznych kolorów w Material Design jest oparty na luminancji, a nie na barwie. Oznacza to, że jeśli usuniemy odcień i chromatyczność, będziemy mogli zobaczyć kontrast w odcieniach.
Po wyodrębnieniu koloru powstaje 5 przesuniętych kolorów podstawowych, z których generowane są palety tonalne. Paleta tonalna składa się z 13 odcieni, w tym bieli i czerni. Wartość odcienia 100 odpowiada maksymalnej jasności i daje kolor biały. Każda wartość odcienia z zakresu 0–100 wyraża ilość światła w danym kolorze.
System palet tonalnych ma kluczowe znaczenie dla zapewnienia domyślnej dostępności każdego schematu kolorów.
Łączenie kolorów na podstawie tonacji, a nie wartości szesnastkowej lub odcienia, to jeden z kluczowych systemów, które sprawiają, że każdy kolor jest dostępny. Produkty korzystające z dynamicznych kolorów spełniają wymagania, ponieważ kombinacje algorytmiczne, z którymi może mieć do czynienia użytkownik, są zaprojektowane tak, aby spełniać standardy dostępności.
Elementy o podobnej luminancji nie mają odpowiedniego kontrastu, aby były czytelne, natomiast elementy o różnych wartościach luminancji są bardziej rozróżnialne.
Dynamiczne kolory Material You 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.
6. Tworzenie motywu z ułatwieniami dostępu
Kreator motywów generuje tokeny Material Design jako style Figmy, co pozwala wizualizować dynamiczne kolory i tworzyć motywy niestandardowe. Odbywa się to zgodnie z systemem kolorów Material 3, aby zapewnić generowanie kolorów ułatwiających dostęp w schemacie kolorów.
- W oknie modalnym wtyczki kliknij Niestandardowe. Spowoduje to przełączenie motywu na motyw niestandardowy. Motyw Material jest już wygenerowany, ale w razie potrzeby możesz utworzyć nowy motyw. Więcej informacji znajdziesz w artykule wizualizacja dynamicznego koloru.
- Następnie ustaw kolor klucza podstawowego. Kolorem podstawowym może być główny kolor marki lub najczęściej używany podstawowy kolor uzupełniający. Kliknij kolor oznaczony jako Podstawowy, aby otworzyć selektor kolorów i wybrać kolor. Kolor podstawowy jest używany jako kolor źródłowy, podobnie jak w ustawieniu dynamicznym.
Dodawanie kolorów do MTB.
- Pozostałe kolory klawiszy są wypełniane na podstawie koloru podstawowego. Oznacza to, że nie musisz dodawać dodatkowych kolorów, jeśli ich nie potrzebujesz. Opcjonalnie dodaj kolor dodatkowy i trzeci.
- Schemat kolorów pokazuje kluczowe kolory zinterpretowane na podstawie kolorów wejściowych, wygenerowane palety tonalne i wynikowe schematy kolorów z rolami kolorów. Dostępne są zarówno jasne, jak i ciemne schematy kolorów.
- W module znajdziesz przykładowy interfejs, w którym możesz zobaczyć zastosowany schemat kolorów. Po wybraniu komponentu interfejsu aplikacji kliknij zamień w ramach wtyczki.
Schemat kolorów z połączonym podglądem.
W przypadku tych ćwiczeń narzędzie Material Theme Builder wygenerowało już wymagane tokeny w pliku Figma.
7. Sprawdzanie kontrastu za pomocą Kreatora motywów Material
To świetnie, ale rozumiemy, że możesz chcieć ręcznie zaktualizować niektóre z tych stylów, używając innych kolorów. Kreator motywów Material zawiera wbudowane sprawdzanie kontrastu kolorów podstawowych schematu, które pomaga w podejmowaniu tych decyzji.
- Tokeny są tworzone jako style, więc możemy też ustawić wartość wygenerowanego koloru. W stylach Figmy rozwiń menu do koloru podstawowego bieżącego motywu i po prawej stronie kliknij ikonę Edytuj styl.
- Zaktualizuj kolor podstawowy we właściwościach. Znajduje to odzwierciedlenie w kolorach wyjściowych i interfejsie aplikacji. Ten kolor nie został wygenerowany przez algorytm kolorów, więc nie możemy zagwarantować jego dostępności.
- W menu wtyczki kliknij Sprawdź kontrast, a następnie ponownie otwórz okno Edytuj styl dla koloru podstawowego. Sprawdza kontrast i wyświetla jego ocenę.
Okno stylu kontrastu w Figmie.
8. Gratulacje
Świetnie! Ułatwienia dostępu powinny być kluczowym elementem procesu, a dzięki Material Design i kreatorowi motywów Material jest to jeszcze łatwiejsze.
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