Android Auto размещает весь контент на черном фоне, чтобы обеспечить более единообразный пользовательский интерфейс, используя одинаковые цвета в дневной и ночной темах.
Черный фон обычно лучше всего работает внутри автомобилей, поскольку автопроизводители часто используют темные материалы и цвета для салона автомобиля, приборных панелей и пользовательского интерфейса.
С одного взгляда
Используйте черный фон для удобства вождения как днем, так и ночью.
Поддерживайте коэффициент контрастности между фоном и значками или текстом не менее 4,5:1.
Используйте цвет минимально и целенаправленно.
Покажите высоту, используя разные оттенки серого.
Используйте прозрачность и непрозрачность для управления визуальным фокусом.
Палитры и градиенты
Темная тема для Android Auto использует цветовую палитру в оттенках серого. Любые дополнительные цвета, добавленные в ваш пользовательский интерфейс, должны быть приглушенными по интенсивности, подобно более темным вариантам цветов из цветовых палитр Material Design .
Материальный дизайн
Использование цвета и палитры
Палитра оттенков серого Android Auto
Используя цветовую палитру оттенков серого Android Auto, вы можете применять цвет ко всем элементам, включая текст и значки.
Эта палитра предназначена для:
Отразите уровень иерархии каждого элемента пользовательского интерфейса с помощью предоставленного диапазона оттенков.
Устранить все случаи использования пользовательского интерфейса темной темы.
В Android Auto ощущение глубины выражается с помощью различных оттенков серого. Каждый оттенок представляет собой отдельный уровень высоты, при этом компоненты с более темными оттенками (например, компонент списка) имеют меньшую высоту, чем компоненты с более светлыми оттенками (например, плавающие кнопки действий).
Все компоненты отображаются на черном фоне, на котором не видны тени. Чтобы обеспечить достаточный контраст между этими компонентами, палитра оттенков серого Android Auto содержит широкий диапазон оттенков серого. Это более постепенное развитие серого, чем в базовой цветовой палитре Material Design, поскольку оттенки Material ниже Grey 900 слишком яркие для автоматического контекста.
Акцентный цвет
В дополнение к палитре оттенков серого Android Auto можно экономно использовать акцентный цвет, например, для привлечения внимания пользователя.
В настоящее время в Android Auto есть один официальный акцентный цвет — оттенок синего, который в библиотеке поддержки называется «автомобильным акцентом». Этот синий цвет имеет повышенную насыщенность и яркость по сравнению со стандартным синим цветом Google для лучшей видимости на темной поверхности пользовательского интерфейса.
Диаграммы непрозрачности
Пространственная модель Material Design опирается на различную степень непрозрачности, чтобы передать ощущение глубины пользовательского интерфейса. Чтобы использовать его эффективно, выберите уровень непрозрачности в зависимости от вашего варианта использования.
Значения темной непрозрачности
Наиболее распространенным вариантом использования полупрозрачных темных поверхностей является холст (также известный как «наложение»).
Значения непрозрачности белого цвета
Полупрозрачные белые значения в основном используются для текста, особенно когда фон цветной, вместо использования сплошного серого цвета.
Примеры использования непрозрачности в холстах и текстовых иерархиях см. в разделе «Руководства и примеры» .
Контраст
Соответствующий цветовой контраст помогает водителям быстро интерпретировать информацию и принимать решения.
Для обеспечения читаемости во время вождения необходим минимальный визуальный контраст между передним планом (текстом или значками) и фоном (цветами, обложкой альбома и т. д.). Цвета приложения должны соответствовать требованиям к контрастности обычного текста WCAG 2.0 Level AA, которые определяют коэффициент контрастности 4,5:1). Используйте средство проверки контрастности, например WebAIM Color Contrast Checker , чтобы убедиться, что ваши экраны соответствуют требованиям контрастности.
Дополнительные сведения о том, как коэффициенты контрастности применяются к конкретным элементам пользовательского интерфейса, см. в разделе «Рекомендации по дизайну для вождения» .
Дизайн для вождения: сделайте контент легко читаемым
Подробная информация о читаемости, видимости и коэффициентах контрастности.
Руководство и примеры
Темный пользовательский интерфейс Android Auto чистый и простой, с минимальным использованием цвета. Помимо использования соответствующих цветов, тонов и значений непрозрачности для элементов пользовательского интерфейса (см. Палитры и градиенты ), каждое использование цвета и различной непрозрачности должно иметь цель.
В этом разделе представлены рекомендации и примеры применения вариантов непрозрачности и цвета для достижения различных целей, в том числе:
Затемнение фона
Поддержание последовательности
Создание визуальной иерархии, которая привлекает внимание пользователя к основным действиям.
Различение элементов в списке
Затемнение фона с помощью холстов
Полноэкранные экраны (наложения) используются для закрытия фона, когда на переднем плане появляется высокоприоритетный контент, например диалог, требующий от пользователя выполнения действия. Частичные экраны используются для привлечения внимания к переходу элементов, например к появлению уведомлений.
Сохранение однородности цвета
Цвет — мощный сигнал для усиления связи между ключевыми элементами в пользовательских потоках, например, все элементы, связанные с навигацией, окрашены в зеленый цвет. Такая непрерывность цвета помогает запоминать и распознавать, какие элементы пользовательского интерфейса связаны и как они связаны друг с другом. Вы можете использовать его для создания последовательного взаимодействия от экрана к экрану.
Создание визуальной иерархии
Последовательную и четкую визуальную иерархию можно создать, раскрасив текст, используя диапазон непрозрачности белого цвета. Значения непрозрачности 88%, 72% и 56% для белого текста содержат достаточный контраст для удовлетворения требований доступности и создания комфортной среды для чтения на темном фоне. Используйте непрозрачность 96% для всего белого текста в ночном режиме.