Эта страница переведена с помощью Cloud Translation API.

Цвет

В основе цветовой стратегии Android Automotive OS лежит идея «начинать с черного». Использование черного цвета в качестве основы для цветов интерфейса обеспечивает более единообразный пользовательский опыт без резких переходов между дневной и ночной темами.

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

Краткое руководство (TL;DR)

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

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

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

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

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

Материальный дизайн

Использование цвета и цветовые палитры

Палитра оттенков серого операционной системы Android Automotive

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

Эта палитра должна быть достаточно разнообразной, чтобы:

Рассмотреть все возможные варианты использования темной темы интерфейса.
Обеспечьте достаточный диапазон для определения иерархии посредством тональных различий.

палитра серых оттенков — Эта палитра в оттенках серого является основной цветовой палитрой операционной системы Android Automotive и поддерживает темную тему интерфейса.

Различия в тонах создают иллюзию глубины даже на истинно чёрном фоне, где тени незаметны. Для обеспечения достаточных тональных различий палитра оттенков серого в Android Automotive OS включает средне-серые тона. Серые тона Material Design, начиная с Grey 900, слишком быстро приближаются к более ярким цветам; цвет на два тона светлее — это Grey 700, который слишком яркий для автомобильного контекста.

Схема расположения компонентов — На этом графике показаны уровни высоты, на которых расположены различные компоненты. Каждому уровню высоты соответствует определенный оттенок серого.

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

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

Помимо палитры оттенков серого, лежащей в основе интерфейса Android Automotive OS, другие цвета могут использоваться экономно, например, для выделения фокуса.

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

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

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

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

Значения темной непрозрачности

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

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

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

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

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

Контраст

Для соответствия основным требованиям безопасности Android Automotive OS, коэффициент контрастности между фоном и значками или текстом должен составлять не менее 4,5:1. Подробную информацию о том, как коэффициенты контрастности применяются к конкретным элементам автомобильного пользовательского интерфейса, см. в разделе «Обеспечение удобства чтения контента» .

Контраст не нужен — Не допускайте снижения контрастности ниже 4,5:1, так как это снижает безопасность водителя.

Рекомендации и примеры

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

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

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

Затенение фона с помощью рассеивателей.

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

Полная тренировочная игра в дневном режиме — Полная прозрачность (за диалоговой карточкой) в дневном режиме.

Полная съемка в ночном режиме — Полная прозрачность (за диалоговой карточкой) в ночном режиме.

Частичная тренировочная игра в дневном режиме — Частичная ширма (за уведомлением) в дневном режиме

Частичная широкая съемка в ночном режиме — Частичная затемнение (за уведомлением) в ночном режиме

Поддержание единообразия цвета.

Цвет — мощный инструмент для укрепления памяти и узнавания. Используйте его для создания целостного восприятия информации на разных экранах.

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

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

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

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

Установление визуальной иерархии

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

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

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

Цвет Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.