Kolor

Podstawą strategii kolorystycznej systemu Android Automotive jest idea „budowania na czerni”. Oparcie kolorów interfejsu na czerni zapewnia bardziej spójne wrażenia użytkownika, bez drastycznych zmian między motywem dziennym i nocnym.

Czarny kolor zapewnia również lepsze dopasowanie do elementów wyposażenia, ponieważ ciemne materiały są często stosowane we wnętrzach samochodów i deskach rozdzielczych.

Krótki przegląd wskazówek (TL;DR)

  • Wybierz kolor od czarnego, aby dostosować go do jazdy zarówno w dzień, jak i w nocy
  • Zachowaj współczynnik kontrastu co najmniej 4,5:1 między tłem a ikonami lub tekstem.
  • Używaj kolorów minimalnie, ale celowo
  • Pokaż wysokość za pomocą skali szarości
  • Użyj przezroczystości i nieprzezroczystości, aby skupić uwagę wizualną

Palety i gradienty

Ciemny motyw interfejsu systemu Android Automotive opiera się na palecie odcieni szarości. W idealnym przypadku wszelkie dodatkowe kolory powinny mieć mniejszą intensywność, podobnie jak w ciemnych wariantach kolorów z palet Material Design.

W tej sekcji znajdują się informacje o palecie i kryciu, a także wykresy przedstawiające wartości skali szarości dla poziomów wysokości skojarzonych z każdym komponentem.

ikona objaśnienia
Projektowanie materiałów
Użycie kolorów i palety

Paleta odcieni szarości systemu operacyjnego Android Automotive

Paleta odcieni szarości systemu Android Automotive OS jest wykorzystywana do wyświetlania elementów takich jak tekst i ikony. Została ona zaprojektowana tak, aby uwzględniać specyficzne wymagania środowiska jazdy.

Paleta ta musi być na tyle różnorodna, aby:

  • Omów wszystkie różne przypadki użycia interfejsu użytkownika z ciemnym motywem
  • Zapewnij wystarczający zakres, aby zdefiniować hierarchię poprzez różnice tonalne
paleta kolorów Grayscle
Ta paleta odcieni szarości jest główną paletą kolorów systemu Android Automotive OS, obsługującą ciemny motyw interfejsu.

Różnice tonalne tworzą iluzję głębi nawet na prawdziwie czarnych tłach, gdzie cienie są niewidoczne. Aby zapewnić wystarczające różnice tonalne, paleta szarości systemu Android Automotive zawiera średnie odcienie szarości. Szarości Material Design, począwszy od Grey 900, zbyt szybko zbliżają się do jaśniejszych kolorów; kolor o dwa stopnie jaśniejszy to Grey 700, który jest zbyt jasny w kontekście samochodowym.

Wykres wysokości komponentów
Ten wykres przedstawia poziomy wysokości, na których znajdują się różne komponenty. Każdy poziom wysokości ma przypisaną wartość szarości.
Poziomy wysokości w skali szarości w trybie dziennym i nocnym
Na tym wykresie przedstawiono wartości szarości związane z różnymi poziomami wysokości w trybie dziennym i nocnym.

Kolor akcentowy

Oprócz palety odcieni szarości stanowiącej rdzeń interfejsu systemu Android Automotive OS, oszczędnie można stosować inne kolory, na przykład do zaznaczania ostrości.

Obecnie system Android Automotive ma jeden oficjalny kolor akcentowy – odcień niebieskiego, określany w bibliotece wsparcia jako „car accent”. Aby zwiększyć nasycenie i intensywność, ten niebieski został nieznacznie przesunięty w stosunku do standardowego niebieskiego Google. Dzięki temu kolory lepiej komponują się z ciemną powierzchnią.

Przykład niebieskiego koloru akcentowego samochodu
Niebieski „akcent samochodowy” w systemie Android Automotive OS jest bardziej nasycony niż standardowy niebieski Google i został zaprojektowany tak, aby dobrze komponował się z ciemnym interfejsem zarówno podczas jazdy w dzień, jak i w nocy.

Wykresy wartości krycia

Przezroczystość nadaje poczucie głębi i wzmacnia przestrzenny model Material Design. Aby efektywnie wykorzystać przezroczystość, wybierz ciemne lub białe wartości krycia w zależności od zastosowania.

Ciemne wartości krycia

Najczęstszym zastosowaniem ciemnych wartości krycia jest tworzenie nakładek.

Wartości krycia czerni dla nakładek

Wartości nieprzezroczystości bieli

Te wartości są najczęściej używane w tekście. Są szczególnie skuteczne, gdy tło jest kolorowe. Użycie jednolitej szarości na ciemnym, kolorowym tle wygląda zbyt mętnie.

Wartości krycia bieli dla tekstu

Przykłady wykorzystania krycia w siatkach i hierarchiach tekstu można znaleźć w Poradniku i przykładach .

Kontrast

Aby spełnić podstawowe wytyczne bezpieczeństwa systemu Android Automotive, współczynnik kontrastu między tłem a ikonami lub tekstem powinien wynosić co najmniej 4,5:1. Szczegółowe informacje na temat wpływu współczynników kontrastu na poszczególne elementy interfejsu użytkownika w samochodach można znaleźć w artykule Ułatwianie czytania treści .

Kontrast do

Do

Upewnij się, że dla wszystkich czytelnych i użytecznych treści współczynnik kontrastu wynosi co najmniej 4,5:1.
Kontrast nie

Nie

Nie pozwól, aby kontrast spadł poniżej 4,5:1, co mogłoby zmniejszyć bezpieczeństwo kierowcy

Wskazówki i przykłady

Ciemny interfejs użytkownika systemu Android Automotive jest przejrzysty i prosty, z minimalną ilością kolorów. Oprócz stosowania odpowiednich kolorów, odcieni i wartości krycia dla elementów interfejsu (patrz Palety i gradienty ), ważne jest, aby każde użycie kolorów i gradientów miało określony cel.

W tej sekcji znajdziesz wskazówki i przykłady stosowania przezroczystości, krycia i koloru, aby osiągnąć różnorodne cele. Cele te obejmują:

  • Przyciemniające tła
  • Utrzymywanie spójności
  • Ustalenie hierarchii wizualnej, która kieruje uwagę użytkownika na najważniejsze działania.
  • Rozróżnianie jednostek na liście

Zaciemnianie tła za pomocą zasłon

Pełnoekranowe scrimy (nakładki) służą do zakrywania tła za elementami zakłócającymi, takimi jak okna dialogowe wymagające od użytkownika podjęcia działania. Częściowe scrimy służą do zwracania uwagi na przejścia między elementami, takimi jak powiadomienia.

Pełny trening w trybie dziennym
Pełna symulacja (za kartą dialogową) w trybie dziennym
Pełny ekran w trybie nocnym
Pełny scrim (za kartą dialogową) w trybie nocnym
Częściowy scrim w trybie dziennym
Częściowy scrim (za powiadomieniem) w trybie dziennym
Częściowy scrim w trybie nocnym
Częściowy ekran (za powiadomieniem) w trybie nocnym

Zachowanie spójności kolorów

Kolor to potężny sygnał wzmacniający pamięć i rozpoznawanie. Wykorzystaj go, aby stworzyć spójne doświadczenie na każdym ekranie.

Wizualne rozpoznawanie kolorów

Do

Zachowaj ciągłość wizualną, stosując ten sam kolor dla elementu w wielu widokach, np. zielony kolor używany tutaj w widokach nawigacji krok po kroku
Ciągłość wizualna kolorów

Do

Użyj koloru, aby wizualnie połączyć powiązane elementy i funkcje, na przykład czerwone wezwania do działania pokazane tutaj
Trwały kolor akcentujący aplikacji

Do

Użyj dominującego koloru okładki albumu lub koloru przypisanego do aplikacji w powiązanych elementach jako trwałego elementu wizualnego. W tym przypadku okrąg wokół przycisku pauzy jest zaakcentowany zielenią Spotify.
Ograniczenie użycia kolorów

Nie

Nie używaj różnych kolorów do arbitralnego rozróżniania powtarzających się elementów na jednym ekranie. Zachowaj ostrożność, używając kolorów, które nie dodają wartości – tak jak w przypadku kolorowych konturów wokół kart podsumowania, które powielają kolor ikony aplikacji.

Ustalanie hierarchii wizualnej

Użyj wartości krycia bieli, aby stworzyć spójną i mocną hierarchię wizualną. Wartości krycia 88, 72 i 56 zapewniają wystarczający kontrast, aby spełnić wymagania dotyczące dostępności, jednocześnie tworząc komfortowe środowisko do czytania na ciemnym tle. Użyj krycia 96% dla wszystkich odcieni bieli w trybie nocnym.

Przykład krycia i kontrastu w celu zachowania hierarchii wizualnej

Do

Użyj różnych wartości krycia i kontrastu, aby zachować hierarchię wizualną.
Ograniczenie krycia i kontrastu

Nie

Nie nadużywaj wartości pełnego krycia lub kontrastu, stosując je do zbyt wielu elementów. Kontrast wartości krycia jest potrzebny do odróżnienia informacji podstawowych od drugorzędnych.