Цвет

Android Auto размещает весь контент на черном фоне, чтобы создать более единообразный пользовательский интерфейс с одинаковыми цветами в дневных и ночных темах.

Черный фон обычно лучше всего работает внутри автомобилей, поскольку автопроизводители часто используют темные материалы и цвета для салонов автомобилей, приборных панелей и пользовательского интерфейса.

С одного взгляда

  • Используйте черный фон для поддержки как дневного, так и ночного вождения
  • Поддерживайте коэффициент контрастности не менее 4,5: 1 между фоном и значками или текстом.
  • Используйте цвет минимально и целенаправленно
  • Показать высоту, используя разные оттенки серого
  • Используйте прозрачность и непрозрачность, чтобы направлять визуальный фокус

Палитры и градиенты

Темная тема для Android Auto использует цветовую палитру в оттенках серого. Любые дополнительные цвета, добавленные в ваш пользовательский интерфейс, должны быть приглушены по интенсивности, подобно более темным цветовым вариантам из цветовых палитр Material Design .

значок выноски
Материальный дизайн
Использование цвета и палитры

Палитра оттенков серого в Android Auto

Используя цветовую палитру оттенков серого Android Auto, вы можете применить цвет ко всем элементам, включая текст и значки.

Эта палитра предназначена для:

  • Отражайте уровень иерархии каждого элемента пользовательского интерфейса с помощью предоставленного диапазона оттенков.
  • Устранение всех вариантов использования пользовательского интерфейса темной темы.
серая цветовая палитра
Эта палитра оттенков серого является стандартной цветовой палитрой Android Auto, поддерживающей темную тему интерфейса.

В Android Auto ощущение глубины выражается с помощью различных оттенков серого. Каждый оттенок представляет различный уровень возвышения, где компоненты с более темными оттенками (например, компонент списка) имеют меньшую высоту, чем компоненты с более светлыми оттенками (например, плавающие кнопки действий).

Все компоненты отображаются на истинно черном фоне, где тени не видны. Чтобы обеспечить достаточный контраст между этими компонентами, палитра оттенков серого Android Auto содержит широкий диапазон оттенков серого. Это более постепенная прогрессия серого, чем базовая цветовая палитра Material Design, поскольку оттенки Material ниже Grey 900 слишком яркие для автоматического контекста.

Диаграмма высот компонентов
Каждый базовый уровень высоты для различных компонентов связан с уникальным значением серого.
Уровни высоты в градациях серого в дневном и ночном режимах
На этой диаграмме показаны значения серого, связанные с различными уровнями высоты для дневного и ночного режима.

Акцентный цвет

В дополнение к палитре оттенков серого в Android Auto можно экономно использовать акцентный цвет, например, для привлечения внимания пользователя.

В настоящее время в Android Auto есть один официальный акцентный цвет — оттенок синего, который в библиотеке поддержки называется «автомобильный акцент». Этот синий имеет повышенную насыщенность и яркость по сравнению со стандартным синим цветом Google для лучшей видимости на темной поверхности пользовательского интерфейса.

Пример синего акцента автомобиля
Синий цвет «автомобильный акцент» в Android Auto более насыщенный, чем стандартный синий цвет Google, и разработан, чтобы хорошо работать в интерфейсе с темной тематикой как днем, так и ночью за рулем.

Диаграммы непрозрачности

Пространственная модель Material Design полагается на различную степень непрозрачности, чтобы передать ощущение глубины в пользовательском интерфейсе. Чтобы использовать его эффективно, выберите уровень непрозрачности в зависимости от вашего варианта использования.

Темные значения непрозрачности

Наиболее распространенным вариантом использования полупрозрачных темных поверхностей является холст (также известный как «наложение»).

Значения непрозрачности черного для наложений

Значения непрозрачности белого

Полупрозрачные белые значения в основном используются для текста, особенно когда фон цветной, вместо сплошного серого.

Значения непрозрачности белого для текста

Примеры использования непрозрачности в сетках и текстовых иерархиях см. в разделе Руководство и примеры .


Контраст

Соответствующий цветовой контраст помогает водителям быстро интерпретировать информацию и принимать решения.

Минимальный визуальный контраст между передним планом (текст или значки) и фоном (цвета, обложка альбома и т. д.) необходим для удобочитаемости во время вождения. Цвета приложений должны соответствовать требованиям к контрастности обычного текста уровня AA WCAG 2.0 , которые определяют коэффициент контрастности 4,5: 1). Используйте средство проверки контрастности, например WebAIM Color Contrast Checker , чтобы убедиться, что ваши экраны соответствуют требованиям к контрастности.

Дополнительные сведения о том, как коэффициенты контрастности применяются к определенным элементам пользовательского интерфейса, см. в Руководстве по дизайну для вождения .

значок выноски
Дизайн для вождения: сделайте контент легко читаемым
Подробная информация о читаемости, привлекательности и коэффициентах контрастности.
Контраст делать

Делать

Эти значки соответствуют рекомендациям по коэффициенту цветовой контрастности и более разборчивы на фоне.
Контраст не

Не

Эти значки не соответствуют рекомендациям по коэффициенту цветовой контрастности, и их трудно различить на фоне.

Руководство и примеры

Темный пользовательский интерфейс для Android Auto чистый и простой, с минимальным использованием цвета. В дополнение к использованию соответствующих цветов, тонов и значений непрозрачности для элементов пользовательского интерфейса (см. Палитры и градиенты ), каждое использование цвета и различной непрозрачности должно иметь цель.

В этом разделе приведены рекомендации и примеры применения вариаций непрозрачности и цвета для достижения различных целей, в том числе:

  • Затемнение фона
  • Поддержание согласованности
  • Создание визуальной иерархии, которая привлекает внимание пользователя к основным действиям.
  • Различение элементов в списке

Затемнение фона с помощью сетки

Полноэкранные экраны (наложения) используются для покрытия фона, когда высокоприоритетное содержимое появляется на переднем плане, например диалоговое окно, требующее от пользователя выполнения действия. Частичные сетки используются для привлечения внимания к переходу элементов, например, к появлению уведомлений.

Полный экран в дневном режиме
Полный экран (за диалоговой карточкой) в дневном режиме
Полный экран в ночном режиме
Полный экран (за диалоговой картой) в ночном режиме
Частичная сетка в дневном режиме
Частичный экран (за уведомлением) в дневном режиме
Частичная сетка в ночном режиме
Частичный экран (за уведомлением) в ночном режиме

Соблюдение согласованности с цветом

Цвет — это мощный сигнал для усиления связи между ключевыми элементами в пользовательских потоках, например, все элементы, связанные с навигацией, окрашены в зеленый цвет. Такая непрерывность цвета помогает запоминанию и распознаванию того, какие элементы пользовательского интерфейса связаны и как они связаны друг с другом. Вы можете использовать его для создания согласованного опыта от экрана к экрану.

Визуальное распознавание цвета

Делать

Сохраняйте визуальную непрерывность, используя один и тот же цвет для элемента в нескольких представлениях, например зеленый цвет, используемый для этих пошаговых представлений навигации.
Визуальная непрерывность цвета

Делать

Используйте цвет, чтобы визуально соединить связанные элементы и функции, такие как эти красные CTA.
Постоянный цвет акцента приложения

Делать

Используйте доминирующий цвет обложки альбома или цвет, назначенный приложению, для связанных элементов в качестве постоянной визуальной возможности. Этот круг вокруг кнопки паузы выделен зеленым цветом Spotify.
Ограничение на использование цвета

Не

Не используйте разные цвета, чтобы произвольно различать повторяющиеся компоненты на одном экране. Будьте осторожны с использованием цветов, когда они не добавляют ценности — как в случае с этими цветными контурами вокруг сводных карточек, которые дублируют цвет значка приложения.

Создание визуальной иерархии

Последовательную и сильную визуальную иерархию можно создать, раскрасив текст, используя диапазон непрозрачности белого. Значения непрозрачности 88 %, 72 % и 56 % для белого текста содержат достаточно контраста, чтобы соответствовать требованиям доступности, создавая при этом удобную среду для чтения на темном фоне. Используйте непрозрачность 96% для всего белого текста в ночном режиме.

Пример непрозрачности и контрастности для поддержания визуальной иерархии

Делать

Используйте разные значения непрозрачности и контрастности для поддержания визуальной иерархии.
Непрозрачность и ограничение контраста

Не

Не злоупотребляйте полными значениями непрозрачности или контраста, применяя их к слишком большому количеству элементов. Контраст в значениях непрозрачности необходим, чтобы различать первичную и вторичную информацию.