Цвета на дашборде умного дома: контраст, состояния и ночной режим

Зачем вообще думать о цветах

Условная семья в загородном доме повесила в прихожей планшет с панелью. Первую неделю всё радовало: каждая плитка своего цвета, графики в радужных оттенках. Через месяц выяснилось, что никто не замечает красную плитку протечки — красного на экране было и так много, он стал фоном. Это и есть главный закон: внимание привлекает не яркий цвет, а отличие от окружения.

Базовая палитра

Фон и текст

Начинайте с двух-трёх нейтральных тонов: фон панели, фон плитки, основной текст. Контраст текста и фона должен быть высоким — ориентируйтесь на рекомендации по доступности веб-интерфейсов, где для обычного текста задан минимальный коэффициент контрастности. Проверить его можно любым инструментом проверки контраста, они есть в инструментах разработчика браузера.

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

Акцент

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

Цвета состояний

Большинству панелей хватает трёх-четырёх состояний.

Обратите внимание: «норма» не обязана быть зелёной. Если всё, что в порядке, окрашено зелёным, экран превращается в зелёное поле, и единственная жёлтая плитка теряется в пёстрой картине. Спокойный нейтральный вид для нормы оставляет цвету его главную работу — выделять отклонения.

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

Не только цветом

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

• формой — значок, рамка, жирное начертание;
• словом — «протечка», «нет связи», «внимание»;
• положением — тревожные плитки поднимаются наверх или выводятся отдельной строкой.

Простой тест: переведите скриншот панели в оттенки серого. Если в сером варианте по-прежнему понятно, где беда, палитра работает.

Тёмная тема

Тёмная тема — не инверсия светлой. Чистый чёрный фон с чисто белым текстом утомляет глаза, а насыщенные цвета состояний на тёмном фоне начинают «светиться». Используйте глубокий серый вместо чёрного, слегка приглушённый светлый текст и чуть менее насыщенные цвета состояний. Контраст проверяйте отдельно для каждой темы: цвет, хорошо читаемый на светлом, может провалиться на тёмном.

светлая тема          тёмная тема
фон      #f4f5f4      фон      #1a1d20
плитка   #ffffff      плитка   #23272b
текст    #1f2326      текст    #e4e6e3
внимание #9a5b00      внимание #e0a24a
авария   #b3261e      авария   #f08a80

Значения в примере условные — подберите свои и прогоните через проверку контраста.

Ночной режим настенной панели

Планшет на стене в коридоре ночью работает как источник света. Ночной режим — это не просто тёмная тема:

1. Яркость экрана снижается до минимума, при котором ещё можно разглядеть главное.
2. На экране остаётся минимум: время, пара ключевых значений, тревоги.
3. Цвета приглушаются, из палитры убираются холодные синие тона.
4. Тревожные состояния, наоборот, сохраняют яркость — ради них панель и висит на стене.

Включать режим можно по расписанию или по датчику освещённости в комнате. Подумайте и о том, как разметка меняется вместе с цветами: об этом — в материале про отступы и сетку.

Цвет на графиках и шкалах

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

Шкала заполнения — бак, аккумулятор, наполнение бочки для полива — часто красится градиентом от красного к зелёному. Это выглядит наглядно, но нарушает правило «не только цветом»: при плохом цветовом зрении такой градиент читается как однотонный. Надёжнее держать заливку одного цвета и менять её только в зоне тревоги, а уровень дублировать числом рядом.

Как вводить палитру в уже работающую панель

Перекрашивать всё за один вечер не обязательно. Удобный порядок такой: сначала договоритесь о фоне, тексте и акценте, затем заведите набор состояний и примените его к тревожным датчикам — протечке, дыму, температуре котла. Только после этого переводите на новую палитру всё остальное. Так жильцы сразу получают главную пользу — заметные тревоги, — а остальные изменения проходят без путаницы.

Чек-лист палитры

• Два-три нейтральных тона для фона и текста, контраст проверен.
• Один акцентный цвет для элементов управления, не совпадающий с цветами состояний.
• Три-четыре состояния, одинаковые для всей панели.
• Каждое состояние продублировано значком, словом или положением.
• Скриншот в оттенках серого остаётся понятным.
• Тёмная тема настроена отдельно, контраст проверен в ней заново.
• Для настенной панели есть ночной режим с минимальной яркостью и сохранёнными тревогами.

Типичные ошибки

Радуга ради красоты. Каждая комната своего цвета — и цвет перестаёт что-либо значить.

Красный для «выключено». Выключенный свет — не авария. Используйте для него нейтральный вид, иначе настоящая тревога затеряется.

Зелёный для всего, что в порядке. Экран превращается в зелёный ковёр, и отклонения не видны.

Тёмная тема инверсией. Чистые чёрный и белый плюс кислотные акценты — глазам тяжело, тревоги неотличимы от декора.

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