В основе цветовой стратегии Android Automotive OS лежит идея «строить из черного». Использование черного цвета интерфейса обеспечивает более единообразный пользовательский интерфейс без резкого изменения между дневной и ночной темами.
Использование черного цвета также обеспечивает лучшее соответствие фурнитуре, поскольку темные материалы часто используются в салонах автомобилей и на приборных панелях.
Краткое руководство (TL;DR)
Создайте свой выбор цвета от черного для удобства вождения как днем, так и ночью.
Поддерживайте коэффициент контрастности не менее 4,5:1 между фоном и значками или текстом.
Используйте цвет минимально и целенаправленно.
Показать высоту через оттенки серого
Используйте прозрачность и непрозрачность для управления визуальным фокусом.
Палитры и градиенты
Темная тема интерфейса Android Automotive OS основана на палитре оттенков серого. В идеале любые дополнительные цвета должны быть пониженной интенсивности, как в темных вариантах цветов в палитрах Material Design.
Этот раздел включает информацию о палитре и непрозрачности, а также диаграммы, показывающие значения оттенков серого для уровней высоты, связанных с каждым компонентом.
Материальный дизайн
Использование цвета и палитры
Палитра оттенков серого Android Automotive OS
Палитра оттенков серого Android Automotive OS используется для таких элементов, как текст и значки, и разработана с учетом уникальных требований условий вождения.
Эта палитра должна быть достаточно разнообразной, чтобы:
Охватите все варианты использования пользовательского интерфейса темной темы.
Обеспечьте достаточный диапазон для определения иерархии посредством тональных различий.
Эта палитра оттенков серого является основной цветовой палитрой для Android Automotive OS и поддерживает темную тему интерфейса.
Тональные различия создают иллюзию глубины даже на истинно черном фоне, где тени незаметны. Чтобы обеспечить достаточные тональные различия, палитра оттенков серого Android Automotive OS включает средние оттенки серого. Серые цвета Material Design, начиная с Grey 900, слишком быстро приближаются к более ярким цветам; цвет на два шага светлее — серый 700, который слишком яркий для автоматического контекста.
На этой диаграмме показаны уровни высоты, на которых находятся различные компоненты. Каждый уровень высоты имеет связанное с ним значение серого. На этой диаграмме показаны значения серого, связанные с различными уровнями высоты в дневном и ночном режиме.
Акцентный цвет
Помимо палитры оттенков серого, лежащей в основе интерфейса Android Automotive OS, другие цвета можно экономно использовать для таких целей, как рисование фокуса.
В настоящее время ОС Android Automotive имеет один официальный акцентный цвет — оттенок синего, который в библиотеке поддержки называется «автомобильным акцентом». Чтобы увеличить насыщенность и яркость, этот синий цвет немного отличается от стандартного синего цвета Google. Этот сдвиг помогает цветам более комфортно ложиться на темную поверхность.
Синий цвет «автомобильного акцента» в ОС Android Automotive более насыщенный, чем стандартный синий цвет Google, и предназначен для хорошей работы в интерфейсе с темной тематикой как во время дневного, так и ночного вождения.
Диаграммы значений непрозрачности
Прозрачность передает ощущение глубины и усиливает пространственную модель Material Design. Чтобы эффективно использовать прозрачность, выберите значения непрозрачности темного или белого цвета в зависимости от вашего варианта использования.
Значения темной непрозрачности
Наиболее распространенным вариантом использования темных значений непрозрачности является создание холстов (наложений).
Значения непрозрачности белого цвета
Эти значения в основном используются в тексте. Они особенно эффективны, когда фон цветной. Использование сплошного серого цвета на темном цветном фоне выглядит слишком грязно.
Примеры использования непрозрачности в холстах и текстовых иерархиях см. в разделе «Руководства и примеры» .
Контраст
Чтобы соответствовать основным рекомендациям по безопасности Android Automotive OS, коэффициент контрастности между фоном и значками или текстом должен быть не менее 4,5:1. Подробные сведения о том, как коэффициенты контрастности применяются к конкретным элементам автомобильного пользовательского интерфейса, см. в разделе «Удобство чтения контента ».
Делать
Убедитесь, что контрастность соответствует минимальному соотношению 4,5:1 для всего читаемого и полезного контента.
Не
Не допускайте падения контрастности ниже 4,5:1, что снижает безопасность водителя.
Руководство и примеры
Темный пользовательский интерфейс Android Automotive OS чистый и простой, с минимальным использованием цвета. Помимо использования соответствующих цветов, тонов и значений непрозрачности для элементов пользовательского интерфейса (см. Палитры и градиенты ), важно убедиться, что каждое использование цвета и цветовых градиентов имеет цель.
В этом разделе представлены рекомендации и примеры применения прозрачности, непрозрачности и цвета для достижения различных целей. Эти цели включают в себя:
Затемнение фона
Поддержание последовательности
Создание визуальной иерархии, которая привлекает внимание пользователя к основным действиям.
Различение сущностей в списке
Затемнение фона с помощью холстов
Полноэкранные экраны (наложения) используются для скрытия фона за мешающими элементами, такими как диалоги, требующие от пользователей выполнения действия. Частичные экраны используются для привлечения внимания к переходу таких элементов, как уведомления.
Полный экран (за диалоговой карточкой) в дневном режиме Полный экран (за диалоговой карточкой) в ночном режиме
Частичная скрим (за уведомлением) в дневном режиме Частичная скрим (за уведомлением) в ночном режиме
Сохранение однородности цвета
Цвет — мощный сигнал для укрепления памяти и узнавания. Используйте его, чтобы создать целостное впечатление от экрана к экрану.
Делать
Сохраняйте визуальную непрерывность, используя один и тот же цвет для элемента в нескольких представлениях, например зеленый цвет, используемый здесь для пошаговой навигации.
Делать
Используйте цвет для визуального соединения связанных элементов и функций, например красный призыв к действию, показанный здесь.
Делать
Используйте доминирующий цвет обложки альбома или цвет, назначенный приложению для связанных элементов, в качестве постоянного визуального средства. Здесь кружок вокруг кнопки паузы выделен зеленым цветом Spotify.
Не
Не используйте разные цвета, чтобы произвольно различать повторяющиеся компоненты на одном экране. Будьте осторожны при использовании цветов, если они не приносят пользы – как в случае с цветными контурами вокруг сводных карточек, которые дублируют цвет значка приложения.
Создание визуальной иерархии
Используйте значения непрозрачности белого цвета, чтобы создать последовательную и четкую визуальную иерархию. Значения непрозрачности 88, 72 и 56 содержат достаточный контраст для удовлетворения требований доступности и создания комфортной среды для чтения на темном фоне. Используйте непрозрачность 96% для всех белых цветов в ночном режиме.
Делать
Используйте разные значения непрозрачности и контрастности для поддержания визуальной иерархии.
Не
Не злоупотребляйте значениями полной непрозрачности или контрастности, применяя их к слишком большому количеству элементов. Контраст значений непрозрачности необходим для различения первичной и вторичной информации.
[null,null,["Последнее обновление: 2024-10-30 UTC."],[[["The Android Automotive OS color strategy prioritizes a dark theme built from black for consistency and hardware alignment, supporting both day and night driving modes."],["A minimum contrast ratio of 4.5:1 between background and content like icons or text is crucial for readability and safety."],["Color usage should be minimal and purposeful, primarily relying on a grayscale palette with the \"car accent\" blue used sparingly for highlights."],["Transparency and opacity are utilized to create visual hierarchy, guide focus, and obscure backgrounds with scrims."],["Visual consistency is maintained by using color strategically across different screens and elements, reinforcing memory and recognition."]]],[]]
