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 опирается на различную степень непрозрачности, чтобы передать ощущение глубины пользовательского интерфейса. Чтобы использовать его эффективно, выберите уровень непрозрачности в зависимости от вашего варианта использования.
Значения темной непрозрачности
Наиболее распространенным вариантом использования полупрозрачных темных поверхностей является холст (также известный как «наложение»).
Значения непрозрачности белого цвета
Полупрозрачные белые значения в основном используются для текста, особенно когда фон цветной, вместо использования сплошного серого цвета.
Примеры использования непрозрачности в холстах и текстовых иерархиях см. в разделе «Руководства и примеры» .
Контраст
Соответствующий цветовой контраст помогает водителям быстро интерпретировать информацию и принимать решения.
Для обеспечения читаемости во время вождения необходим минимальный визуальный контраст между передним планом (текстом или значками) и фоном (цветами, обложкой альбома и т. д.). Цвета приложения должны соответствовать требованиям к контрастности обычного текста WCAG 2.0 Level AA, которые определяют коэффициент контрастности 4,5:1). Используйте средство проверки контрастности, например WebAIM Color Contrast Checker , чтобы убедиться, что ваши экраны соответствуют требованиям контрастности.
Дополнительные сведения о том, как коэффициенты контрастности применяются к конкретным элементам пользовательского интерфейса, см. в разделе «Рекомендации по дизайну для вождения» .
Дизайн для вождения: сделайте контент легко читаемым
Подробная информация о читаемости, видимости и коэффициентах контрастности.
Делать
Эти значки соответствуют рекомендациям по цветовому контрасту и более разборчивы на фоне.
Не
Эти значки не соответствуют рекомендациям по цветовой контрастности, и их трудно различить на фоне.
Руководство и примеры
Темный пользовательский интерфейс Android Auto чистый и простой, с минимальным использованием цвета. Помимо использования соответствующих цветов, тонов и значений непрозрачности для элементов пользовательского интерфейса (см. Палитры и градиенты ), каждое использование цвета и различной непрозрачности должно иметь цель.
В этом разделе представлены рекомендации и примеры применения вариантов непрозрачности и цвета для достижения различных целей, в том числе:
Затемнение фона
Поддержание последовательности
Создание визуальной иерархии, которая привлекает внимание пользователя к основным действиям.
Различение элементов в списке
Затемнение фона с помощью холстов
Полноэкранные экраны (наложения) используются для закрытия фона, когда на переднем плане появляется высокоприоритетный контент, например диалог, требующий от пользователя выполнения действия. Частичные экраны используются для привлечения внимания к переходу элементов, например к появлению уведомлений.
Полный экран (за диалоговой карточкой) в дневном режиме Полный экран (за диалоговой карточкой) в ночном режиме
Частичная скрим (за уведомлением) в дневном режиме Частичная скрим (за уведомлением) в ночном режиме
Сохранение однородности цвета
Цвет — мощный сигнал для усиления связи между ключевыми элементами в пользовательских потоках, например, все элементы, связанные с навигацией, окрашены в зеленый цвет. Такая непрерывность цвета помогает запоминать и распознавать, какие элементы пользовательского интерфейса связаны и как они связаны друг с другом. Вы можете использовать его для создания последовательного взаимодействия от экрана к экрану.
Делать
Сохраняйте визуальную непрерывность, используя один и тот же цвет для элемента в нескольких представлениях, например зеленый цвет, используемый для представлений пошаговой навигации.
Делать
Используйте цвет, чтобы визуально соединить связанные элементы и функции, например красные призывы к действию.
Делать
Используйте доминирующий цвет обложки альбома или цвет, назначенный приложению для связанных элементов, в качестве постоянного визуального средства. Этот кружок вокруг кнопки паузы выделен зеленым цветом Spotify.
Не
Не используйте разные цвета, чтобы произвольно различать повторяющиеся компоненты на одном экране. Будьте осторожны при использовании цветов, если они не приносят пользы – как в случае с цветными контурами вокруг сводных карточек, которые дублируют цвет значка приложения.
Создание визуальной иерархии
Последовательную и четкую визуальную иерархию можно создать, раскрасив текст, используя диапазон непрозрачности белого цвета. Значения непрозрачности 88%, 72% и 56% для белого текста содержат достаточный контраст для удовлетворения требований доступности и создания комфортной среды для чтения на темном фоне. Используйте непрозрачность 96% для всего белого текста в ночном режиме.
Делать
Используйте разные значения непрозрачности и контрастности для поддержания визуальной иерархии.
Не
Не злоупотребляйте значениями полной непрозрачности или контрастности, применяя их к слишком большому количеству элементов. Контраст значений непрозрачности необходим для различения первичной и вторичной информации.
[null,null,["Последнее обновление: 2024-10-30 UTC."],[[["Android Auto utilizes a dark theme with a black background and muted colors for optimal visibility and consistency in car environments."],["A grayscale color palette with varying shades is employed to indicate elevation and hierarchy of UI elements."],["Minimum contrast ratios of 4.5:1 between foreground and background are essential for legibility and driver safety."],["Color should be used sparingly and purposefully, primarily for accents, maintaining consistency, and establishing visual hierarchy."],["Opacity variations, particularly with white text, are crucial for creating a comfortable reading experience and highlighting key information."]]],[]]
