Kolor okularów

Kolor uwzględnia wyświetlacz, otoczenie i procesy poznawcze. Kolory na okularach są wyświetlane w bardzo precyzyjnej palecie, która obsługuje wyświetlacze addytywne i optymalizuje komfort wizualny. Kolor na okularach powinien być używany z rozsądkiem, aby harmonizować z rzeczywistością, wskazywać ważne działania, wyświetlać obrazy lub przekazywać znaczenie semantyczne.

Czerń jest przezroczysta na wyświetlaczu optycznym. Pamiętaj o tym podczas projektowania, ponieważ ciemniejszy kolor będzie wyglądał na matowy lub przezroczysty, ale można go też użyć do stworzenia głębi.

Schemat kolorów

Schemat kolorów okularów (zbiór tokenów kolorów lub ról do określania kolorów aplikacji) składa się z 3 ról akcentujących, 4 ról powierzchniowych (lub neutralnych) i ich odpowiedników w kolorze. Role kolorów są podobne do ról w schemacie mobilnym i należy ich używać w ten sam sposób.

Elementy projektu powinny być zakotwiczone u dołu ramki.

Kolory uzupełniające można stosować w przypadku jednego koloru, aby w ograniczonym zakresie podkreślić tekst.

Tak

Większość tekstu powinna być biała. Kolor czcionki może być używany do wyróżniania tekstu.

Nie

Używaj kolorowego tekstu w przypadku wszystkich treści.

Dostosowywanie koloru

Podczas dostosowywania kolorów okularów kluczowe jest minimalne zasłanianie widoku i harmonizacja z rzeczywistym światem. Należy zadbać o czytelność w różnych warunkach oświetleniowych. Starannie skalibruj kolory, aby zrównoważyć jasność i nasycenie, tak aby były od razu rozpoznawalne.

Kolor podstawowy można dostosować, aby używać koloru marki lub głównego koloru interakcji. Zwróć uwagę na kontrast, nasycenie i zużycie energii wybranego koloru.

Elementy projektu powinny być zakotwiczone u dołu ramki.

Zoptymalizowane kolory marki i kolory semantyczne

Kolory reprezentujące markę, działania lub alerty systemowe muszą:

wystarczająco jasny, aby był czytelny;
wystarczająco nasycony, aby można go było rozpoznać jako kolor;

Więcej informacji znajdziesz w motywie Glimmer Jetpack Compose.

Zużycie energii

Niektóre kolory zużywają więcej energii i generują więcej ciepła niż inne. Zielony jest najmniej energochłonny, a niebieski najbardziej, jeśli porównamy kolory o równym odcieniu, jak widać po prawej stronie. Zminimalizuj liczbę pikseli, które są podświetlone. Im jaśniejszy jest ekran, tym bardziej się nagrzewa. Nie wypełniaj ekranu całkowicie białym kolorem, ponieważ może to spowodować ograniczenie temperatury.

Tak

Weź pod uwagę kontrast między wszystkimi tłami, z którymi będą mieli do czynienia użytkownicy.

Nie

mają zbyt mały kontrast w przypadku elementów interfejsu na różnych tłach, co może powodować zmęczenie oczu i utrudniać czytanie;

Aby uzyskać wystarczający kontrast na każdym tle, musisz mieć różnicę kontrastu wynoszącą 70 (7:1) w odcieniu kolorów pierwszego planu i tła. Możesz to sprawdzić, ustawiając tryb mieszania projektów na „Ekran”.

Tak

Używaj odbarwionych kolorów.

Nie

Używaj zbyt nasyconych kolorów. Mogą się wyświetlać nieprawidłowo i utrudniać czytanie.

Należy unikać dostosowanych powierzchni.

Ciemne kolory kontenera

Kontenery powinny koncentrować się na wyświetlaniu zawartych w nich treści, nie rozpraszając uwagi użytkowników:

Aby uzyskać najwyższy kontrast, powierzchnie muszą być czarne.
Kontury powinny być widoczne, ale subtelne

Tak

Używaj ciemnych powierzchni i jasnych treści.

Nie

Używaj jasnych lub wypełnionych powierzchni.

Możesz dostosować kontur, aby dodać branding lub ekspresywny interfejs.

Tak

Użyj kolorów domyślnych. Są one wysoce zoptymalizowane pod kątem wyświetlania na okularach.

Nie

Używaj wielu kolorów konturu.

Ostrzeżenie

Zachowaj ostrożność i dopasuj niestandardowe kolory konturów stanu domyślnego i stanu aktywnego.

Elementy projektu powinny być zakotwiczone u dołu ramki. Dostosowywanie fokusu konturu za pomocą koloru niebieskiego: stan fokusu jest wyróżniony 2 konturami, kolor jest stosowany do warstwy 2, aby dostroić stan fokusu.