Цвет на очках

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

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

Цветовая гамма

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

Элементы конструкции следует закрепить в нижней части рамы.

Акцентные цвета можно использовать для выделения одного цвета в ограниченном объеме.

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

Настройте цвет

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

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

Элементы конструкции следует закрепить в нижней части рамы.

Оптимизированные фирменные и семантические цвета.

Цвета, обозначающие бренд, действия или системные оповещения, должны быть следующими:

  • Достаточно яркий, чтобы был читаемым
  • Достаточно насыщенный, чтобы его можно было различить как цвет.

Узнайте больше о теме оформления Jetpack Compose Glimmer .

Потребление электроэнергии

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

Элементы конструкции следует закрепить в нижней части рамы.

Учитывайте контраст между всеми фоновыми изображениями, с которыми столкнутся ваши пользователи.
Слишком низкий контраст элементов пользовательского интерфейса на разных фонах может вызывать напряжение глаз и ухудшать читаемость.
Для обеспечения достаточного контраста на каждом фоне необходимо, чтобы разница в контрасте между цветами переднего и заднего плана составляла 70 (7:1). Проверить это можно, установив для ваших проектов режим наложения «Экран».
Используйте ненасыщенные цвета.
Не используйте слишком насыщенные цвета. Они могут отображаться некорректно и ухудшать читаемость.

Следует избегать поверхностей, изготовленных на заказ.

Элементы конструкции следует закрепить в нижней части рамы.

Темные цвета контейнеров

Контейнеры, как правило, должны быть ориентированы на отображение находящегося внутри них контента, не отвлекая внимания:

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

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

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

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

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

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