1. Wprowadzenie
Ostatnia aktualizacja: 05/11/22
System kolorów Material 3 tworzy dostępne schematy kolorów za pomocą algorytmu dynamicznych kolorów. Co jednak oznacza dostępność w przypadku kolorów? Jak nowy system kolorów Material Design tworzy schemat kolorów z ułatwieniami dostępu 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 module wykorzystamy podstawowe koncepcje projektowania.
- Znajomość bieżących schematów kolorów i ról Androida.
- 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 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 Designing with accessible colors 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 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. 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% krycia 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ń.
Cienki krój pisma na ciemnym tle wywołuje efekt klaustrofobii.
Czytelność a czytanie. W tym module będziemy odnosić się do czytelności tekstu. Czytelność określa, jak łatwo jest zobaczyć tekst, a zrozumiałość – 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ę to laboratorium.
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. W dalszym ciągu korzystając z narzędzia do sprawdzania kontrastu online, dostosuj kolor pierwszego planu za pomocą selektora kolorów, aż będzie on ciemniejszy i uzyska ocenę AAA.
- Wróć do Figmy i zastosuj nowy kolor spełniający wymagania do dużego tekstu.
- W przypadku tekstu głównego i przycisków postępuj tak samo. Sprawdź kolor tekstu i tła.
- ,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 mogą Ci 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 dostępnych kolorów 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 makiem.
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 Twojego 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