Ta strona została przetłumaczona przez Cloud Translation API.

Kolor okularów

Kolor uwzględnia wyświetlacz, otoczenie i procesy poznawcze. Kolory na okularach są wyświetlane w wyrafinowanej palecie, która obsługuje wyświetlacze addytywne i optymalizuje komfort wizualny. Kolorów na okularach należy używać z umiarem, aby zachować harmonię 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 powinny być używane 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 ważne jest, aby zapewnić minimalne zasłanianie widoku i harmonizację z rzeczywistym światem, a także czytelność w różnych warunkach oświetleniowych. Obejmuje to staranne kalibrowanie kolorów w celu zrównoważenia jasności i nasycenia, zapewniając czytelność, a jednocześnie zachowując wystarczające nasycenie, aby były od razu rozpoznawalne. Kolor podstawowy można dostosować, aby używać koloru marki lub koloru podstawowej 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;

Zużycie energii

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

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 ekranu dla swoich projektów.

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 treści, które się w nich znajdują, i nie powinny rozpraszać uwagi:

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 aktywnego i domyślnego.

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.