Używaj kolorów, aby wyrazić styl i przekazać znaczenie. Ustawienie kolorów aplikacji może mieć kluczowe znaczenie dla personalizacji, określenia celu semantycznego i oczywiście tożsamości marki.
Wnioski
- Aby zapewnić dostępność:
- Sprawdź kontrast kolorów i unikaj łączenia kolorów o podobnych odcieniach.
- Pamiętaj, że czerwony i zielony to częste kolory, ale nie są one dostępne dla użytkowników z pewnymi rodzajami dyschromatopsji.
- Używaj kolorów w przemyślany sposób: aplikacje mogą być żywe i wyraziste, ale stosuj ograniczoną paletę kolorów. Rozszerzenie schematu o zbyt wiele kolorów semantycznych może być mylące, a zbyt duża liczba kolorów dekoracyjnych może przytłoczyć.
- Kolory mogą mieć wzory, więc powtarzaj już ustalone wzory kolorów. Jeśli używasz w aplikacji kolorów semantycznych, stosuj je konsekwentnie.
- Aby aplikacja działała dobrze w różnych kontekstach, utwórz jasną i ciemną kolorystykę (a najlepiej kontrastowe motywy).
- Przypisz kolory za pomocą tokenów, aby wskazać rolę koloru elementu, zamiast korzystania z zakodowanej wartości.
- Kolory mogą pochodzić z różnych źródeł dynamicznych i statycznych, ale nie należy łączyć zbyt wielu w tym samym widoku.
- Korzystając z dynamicznego koloru treści, staraj się nie pobierać kolorów z wielu elementów treści.
Przestrzeń kolorów na Androidzie
Aby właściwie zrozumieć, jak Android stosuje kolory w interfejsie, musisz najpierw wiedzieć, jak kolory są wyświetlane na urządzeniu.
Sposób wyświetlania kolorów na urządzeniu
Aplikacja jest wyświetlana na ekranie z podświetleniem, który wykorzystuje kolor cyfrowy i przestrzega określonych modeli i reguł, które pomagają naszym oczom postrzegać kolor. Kolor cyfrowy to kolor addytywny, tworzony przez „dodawanie” lub mieszanie różnych świateł w celu uzyskania pełnego spektrum kolorów. Sposób, w jaki ludzie postrzegają kolory na różnych ekranach, może się znacznie różnić w zależności od kalibracji kolorów urządzenia, typu ekranu, ustawień i przestrzeni barw.
Podczas projektowania aplikacji należy pamiętać, że ze względu na te czynniki użyte kolory mogą się różnić, nie wspominając już o indywidualnych sposobach postrzegania kolorów przez poszczególnych użytkowników.
Przestrzeń kolorów
Przestrzeń kolorów to organizacja kolorów, która wykorzystuje model kolorów. RGB to model kolorów addytywny, który tworzy widmo kolorów za pomocą czerwonego, zielonego i niebieskiego, podczas gdy CMYK, który jest używany do drukowania, jest modelem subtraktywnym. Z tego powodu projektanci interaktywnych aplikacji zwykle wybierają kolory w modelu RGB lub podobnym.
Material 3 (M3) wprowadził nową przestrzeń kolorów HCT, która wykorzystuje barwę, chromatyczność i ton do definiowania kolorów, które są poprawne z perspektywy percepcji w porównaniu z innymi modelami, takimi jak HSL.
Więcej informacji o nauce o kolorach i rozwoju HCT znajdziesz w artykule Nauka o kolorach i projektowaniu.
Barwa, nasycenie i ton
HCT umożliwia bardziej spersonalizowane i elastyczne wykorzystanie kolorów, które pozostają w ramach parametrów systemu. Model HCT odwzorowuje kolory za pomocą odcienia, nasycenia i odcienia:
- Barwa: barwa jest analogiczna do przymiotnika, którego użytkownik może użyć do opisania koloru, na przykład „czerwony” lub „fioletowy”. Wartość HCT odcienia waha się od 0 do 360.
- Chroma: chroma określa nasycanie koloru, od neutralnej szarości do pełnej intensywności. W przestrzeni kolorów HCT chroma ma maksymalną wartość około 120.
- Odcień: odcień to luminancja, czyli jasność koloru. HCT używa tonów do tworzenia kontrastu. Kolory o tej samej wartości odcienia nie są dostępne w pewnych kontekstach ułatwień dostępu. Barwy o niższych wartościach są ciemniejsze, a barwy o wyższych wartościach są jaśniejsze.
Proces systemu kolorów
Kolory M3 są tworzone na podstawie modelu HCT, aby uzyskać harmonijne schematy kolorów, które są łatwe do odczytania, oraz ułatwiać dynamiczne funkcje kolorów. System kolorów M3 zaczyna się od koloru źródłowego. Ten kolor źródłowy jest przekształcany w 5 kluczowych kolorów: podstawowy, dodatkowy, trzeciorzędowy, neutralny i wariant neutralny. Te 5 kluczowych kolorów tworzy palety tonalne złożone z tonalnych przyrostów każdego kluczowego koloru.
Jeśli przypiszesz kolor kluczowy ręcznie, zapamiętaj jego chromatyczność i ton, ponieważ ton koloru może nie być wartością tonalną roli koloru.
System kolorów M3 korzysta z biblioteki Material Color Utilities (MCU), która zawiera biblioteki kolorów z algorytmami i narzędziami ułatwiającymi tworzenie motywów i schematów kolorów w aplikacji.
W tym filmie wyjaśniamy, jak powstają schematy kolorów.
Ograniczenia dotyczące kolorów
Ograniczenia kolorów to fizyczne ograniczenia kolorów, które mogą wynikać z fizyki, naszych biologicznych ograniczeń wizualnych lub ograniczeń renderowania kolorów na ekranie. Na przykład niektóre odcienie nie mogą występować w połączeniu z określonymi wartościami chromatycznymi lub tonami. Ograniczenia dotyczące kolorów powodują, że nie można użyć kolorów takich jak jasny niebieski czy jasny czerwony. Mapowanie kolorów odcieni musi być spójne dla wszystkich wartości odcieni.
Poprzedni rysunek przedstawia 3 różne wykresy mapowania tonacji dla wartości odcienia H105, H25 i H285.
Wykres 1 – odcień 105 (żółty). Wskazuje dostępność koloru. Chroma i Tone działają jak wykres. Żółty odcień ma ograniczoną chromatyczność w przypadku niektórych odcieni na wykresie, a w przypadku niższych odcieni nie ma szerokiej gamy barw.
Wykres 2 – odcień 25 (czerwony). Zawiera więcej opcji kolorystycznych niż odcień 105 (żółty). Na tej mapie tonów punkt o największej intensywności koloru znajduje się na niższym poziomie tonów.
Wykres 3 – odcień 285 (niebieski). Pokazuje, że najwyższa nasycenie koloru występuje przy jeszcze ciemniejszym odcieniu. Z drugiej strony, przy jaśniejszych tonach chroma jest słabsza.
Schemat kolorów
Schemat kolorów to zestaw akcentów i powierzchni pochodzących z określonych odcieni i przypisanych do ról kolorów, które są następnie mapowane na elementy i komponenty interfejsu użytkownika. Role kolorów odnoszą się do ich zastosowania, a nie odcienia. Na przykład na kolor podstawowy, a nie na niebieski.
Schematy kolorów są zaprojektowane tak, aby były harmonijne, zapewniały czytelny tekst i odróżniały od siebie elementy interfejsu oraz powierzchnie. Pary kolorów ról (składające się z ról kontenera i ról w kontenerze) mają wartości tonalne, które zapewniają kontrast ułatwiający dostępność.
Tworzone są schematy jasne i ciemne, które mają przypisane konkretne odcienie.
System kolorów Material Design i schematy niestandardowe stanowią punkt wyjścia do dostosowywania kolorów.
Dowiedz się więcej o systemie kolorów M3.
Aby dostosować schemat kolorów, skorzystaj z interfejsu użytkownika Androida.
Stosowanie kolorów w interfejsie użytkownika
Kolor interfejsu składa się z kolorów akcentowych, semantycznych i powierzchniowych.
- Kolory akcentowe to kolory podstawowe, które zwykle należą do palety kolorów marki Android.
- Kolory semantyczne (lub kolory niestandardowe w Material 3) to kolory o konkretnym znaczeniu.
- Kolory powierzchni to dowolne neutralne kolory pochodne używane jako kolory tła.
Kolor uzupełniający
Kolory akcentów zwykle najlepiej oddają charakter interfejsu, niezależnie od tego, czy chodzi o branding, wyróżnianie działań, wyrażanie siebie czy użytkownika.
Każdy kolor akcentu (główny, dodatkowy i trzeciorzędowy) jest dostarczany w grupie od 4 do 8 kompatybilnych kolorów o różnych odcieniach, które można łączyć, aby nadać akcenty i wyrazistość.
Kolory dynamiczne
Kolory akcentów można definiować na podstawie źródeł dynamicznych.
Od Androida 12 (poziom interfejsu API 31) dynamiczny kolor pozwala systemowi wyodrębnić kolor źródłowy z tapety użytkownika lub treści w aplikacji, np. zasobu keyartu. Dynamiczny kolor wykorzystuje algorytmy i procesy MCU do tworzenia schematów oraz ich implementacji przy minimalnym nakładzie pracy. Aby zastosować dynamiczne kolory w aplikacji, przeczytaj artykuł Włączanie użytkownikom możliwości personalizacji kolorów w aplikacji.
Aby zapoznać się z kolorami dynamicznymi, wypróbuj laboratorium kodu Wizualizacja kolorów dynamicznych.
Statyczny
Schemat statyczny to schemat, który ma wartości niezmienne (lub względnie niezmienne). Typowym sposobem tworzenia schematu stałego jest użycie kolorów marki, które dopasowują kolory podstawowe, dodatkowe i terciarne do głównej palety kolorów marki.
Nawet jeśli używasz koloru dynamicznego, zdecydowanie zalecamy utworzenie schematu stałego jako opcji zastępczej, jeśli kolor dynamiczny jest niedostępny na urządzeniu użytkownika. W przeciwnym razie system używa podstawowego fioletowego schematu kolorów.
Korzystając z Kreatora motywów Material, możesz zastosować algorytm kolorów MCU, aby wygenerować statyczny, niestandardowy motyw. W efekcie otrzymujesz wybrane przez siebie kolory, które są zgodne z tokenami systemu kolorów M3 i harmonijnymi zasadami ułatwień dostępu.
Nadal możesz utworzyć w pełni niestandardowy schemat statyczny. Aby to zrobić, przypisz różne wartości do stylów kolorów (color.kt lub color.xml) albo wyeksportuj plik motywu z Material Theme Builder do Figmy po zaktualizowaniu właściwości stylów w Figmie.
Wykorzystanie
Komponenty Material mają przypisane domyślne role kolorów, ale możesz używać tokenów kolorów w interfejsie i elementach niestandardowych. Używaj wszystkich kolorów akcentów z uwagą, biorąc pod uwagę, że ludzkie oko jest szczególnie przyciągane do żywych kolorów.
Podobnie jak w przypadku typu system stosuje kolory w hierarchii, przypisując kolor podstawowy i odpowiednie role do kluczowych wezwań do działania. Zalecamy, aby główne role pełniły komponenty takie jak przyciski skrótów.
Wybierając kolor podstawowy, warto przypisać kolor podstawowy marki. Możesz też wybrać kolor, który będzie reprezentować elementy interaktywne, dzięki czemu kolory Twojej marki będą używane oszczędniej. Drugorzędne i trzeciorzędne kolory są dalej w hierarchii wyróżnienia.
Efekt przesycenia może spowodować użycie tylko podstawowych kolorów: podstawowego, dodatkowego lub trzeciorzędnego. Aby ułatwić sobie tworzenie hierarchii kolorów, zastosuj schematy kolorów, aby uwzględnić mniej żywe kolory kontenerów i zarysować role.
Aby zapewnić większą wygodę użytkowników, użyj bardziej żywych kolorów podstawowych, aby oznaczyć działania o większym znaczeniu w hierarchii wizualnej aplikacji. Na pierwszym z tych obrazów przycisk szybkiego dostępu ma stonowany kolor o tym samym odcieniu i chromatyzmie co nawigacja, dzięki czemu się z nią stapia. Drugi obraz przedstawia przycisk FAB, który przyciąga uwagę żywym kolorem podstawowym.
Aby zapoznać się z dynamiczną kolorystyką, wypróbuj laboratorium kodu dotyczące dostosowywania koloru Material.
Kolor semantyczny
Kolory semantyczne to kolory, które mają przypisane określone znaczenia. Na przykład kolor Błąd jest kolorem semantycznym.
Zachowaj spójność w znaczeniu kolorów – jeśli wprowadzisz jakiś wzór, powtarzaj go w całej aplikacji. Jeśli na przykład użyjesz koloru różowego, aby wskazać funkcję dotyczącą członkostwa, używaj tego koloru we wszystkich przypadkach tej funkcji.
W tym przykładzie aplikacja używa koloru czerwonego do wskazania błędu w jednym polu tekstowym, a fioletowego w drugim. Takie rozwiązanie może wprowadzać w błąd podczas przeglądania treści.
Chociaż schemat kolorów Material zawiera kolor błędu, dodatkowe kolory semantyczne są tworzone za pomocą kolorów niestandardowych, aby rozszerzyć schemat kolorów. Dowiedz się więcej o kolorach niestandardowych.
Harmonizacja umożliwia dopasowanie dynamicznych kolorów generowanych przez użytkowników do niestandardowych kolorów w aplikacji, aby tworzyć bardziej harmonijne palety kolorów.
Kolory powierzchni
Kolory powierzchni są przeznaczone do elementów tła, takich jak komponenty, kontenery, arkusze i panele, i reprezentują większość kolorów aplikacji. Nie bój się wykorzystać całej powierzchni; ludzkie oko potrzebuje przestrzeni, aby się zrelaksować. Powierzchnie pomagają też zawierać treści i kierować czytelnika.
M3 wprowadziło pojęcie powierzchni tonalnych, co oznacza, że wszystkie kolory pochodzą z palet tonalnych. Tonacje nadają głębi i zwiększają kontrast, co ułatwia dostępność. Więcej informacji o rolach w interfejsie znajdziesz w wskazówkach dotyczących ról w interfejsie M3.
Ułatwienia dostępu i kolor
Ludzie postrzegają kolory na różne sposoby w zależności od ostrości wzroku. Ponieważ niektórzy użytkownicy są daltonikami, musisz sprawdzić kombinacje kolorów, aby upewnić się, że elementy interfejsu nie zlewają się ze sobą. Chociaż przezroczystość i waga mogą nie być dosłownym odcieniem koloru, mają duży wpływ na to, jak użytkownicy postrzegają kolor.
Kontrast kolorów to różnica między luminancją elementów pierwszego planu i tła, przedstawiona w formacie współczynnika. Te kryteria są podawane w procentach. Na przykład pomiar kontrastu między tekstem na przycisku a jego kontenerem pomaga określić czytelność tekstu. Wytyczne dotyczące kontrastu kolorów są podzielone na tekst i elementy nietekstowe, a każda z nich ma własny zestaw stopni. Więcej informacji znajdziesz w artykule Projektowanie z uwzględnieniem ułatwień dostępu – kolory.
Kolor nie może być jedynym elementem umożliwiającym wykonanie danej czynności. Użyj przycisku komponentu, zmień grubość czcionki lub dodaj ikonę, aby poinformować użytkownika, że może wchodzić w interakcję z elementem.
Wdrażanie koloru
Tokeny to małe zmienne semantyczne reprezentujące dane projektowe. Można je powtarzać. Zastępują one wartości statyczne, takie jak szesnastkowe kody kolorów, nazwami, które są łatwe do zrozumienia. Aby przypisać kolor elementowi, użyj tokenów zamiast zakodowanych na stałe wartości kolorów.
Aby zobaczyć przykłady mapowania ról kolorów, otwórz przykład Figmy na Androida.
Wartości kolorów są ustawiane w pliku kolorów color.kt za pomocą Compose (lub color.xml za pomocą widoków). Te kolory ustawione jako style są częścią motywu. Więcej informacji znajdziesz w artykule Projektowanie motywów na urządzenia mobilne z Androidem.
Aby ustawić wartości kolorów na Androidzie, użyj kodu szesnastkowego, który reprezentuje RGB w 6-cyfrowym formacie. Aby określić przezroczystość, dodaj wartość na początku, aby uzyskać 8-cyfrowy kod.
Korzystanie z Kreatora motywów Material:
Za pomocą narzędzia Material Theme Builder (MTB) możesz tworzyć niestandardowe jasne i ciemne schematy kolorów.
MTB umożliwia wizualizację kolorów dynamicznych, generowanie tokenów Material Design oraz dostosowywanie schematów kolorów.
Schemat kolorów można w pełni dostosować, aktualizując właściwości stylu w panelu inspektora Figma. Zmodyfikowane wartości są eksportowane.
