Тёмная тема в промышленных системах: почему её нельзя просто перекрасить
В промышленных системах тёмная тема может быть не просто дополнительной настройкой интерфейса, а важным инструментом для комфортной и безопасной работы. В MES-системах операторы круглосуточно отслеживают состояние оборудования, ход операций, перемещение продукции и отклонения от плана. Поэтому оформление экрана напрямую влияет на то, насколько быстро пользователь заметит критически важную информацию.
Команда ИТ «Северстали» столкнулась с этой задачей при внедрении MES-системы на Череповецком металлургическом комбинате. В операторских установлено несколько мониторов, а условия освещения могут сильно различаться: одни экраны находятся в полумраке, другие подвергаются воздействию яркого света или бликов. При длительной работе слишком яркий интерфейс способен усиливать дискомфорт и отвлекать внимание.
В рамках проекта разработчики и дизайнеры адаптировали под тёмную тему дизайн-систему, включающую более 40 компонентов и их состояний. Работа продолжается: специалисты тестируют решения на реальных экранах, собирают обратную связь и дорабатывают интерфейс.
Почему тёмную тему нельзя получить инверсией цветов
Простая замена белого фона на чёрный, а чёрного текста на белый не подходит для плотных промышленных интерфейсов. В MES много таблиц, статусов и числовых показателей, поэтому важно учитывать не только видимость отдельных элементов, но и то, как пользователь перемещает взгляд между ними.
Глубокий чёрный фон в сочетании с очень светлым текстом может создавать ореол вокруг символов, особенно на старых или некачественных мониторах. Если дополнительно сделать яркими границы ячеек и все элементы управления, экран становится перегруженным, а таблицы начинают рябить. Задача тёмной темы заключается не в перекрашивании интерфейса, а в сохранении читаемости, управляемости и понятной иерархии.
Контраст, статусы и таблицы
В промышленном интерфейсе контраст нужно распределять выборочно. Основной текст должен оставаться хорошо читаемым, вторичный — не конкурировать с данными, а границы таблиц — помогать ориентироваться, не превращаясь в самостоятельный визуальный узор. Акцентные элементы должны быть заметнее обычных, а критические состояния — выделяться сильнее предупреждений.
Отдельной задачей стала адаптация статусных цветов. В MES красный обычно обозначает критическую ошибку, зелёный — нормальное состояние, жёлтый — предупреждение. На тёмном фоне привычные оттенки меняются: красный может выглядеть чрезмерно агрессивно, жёлтый — слишком ярко светиться, а зелёный — терять выразительность. Поэтому команда проверяла палитру для каждой темы, стремясь сохранить не конкретные цвета, а узнаваемость состояний.
Таблицы потребовали отдельной проработки. В них отображаются партии, операции, параметры и результаты контроля, а значит, пользователь должен быстро различать строки, статусы и доступные действия. Дизайнеры настраивали границы ячеек, состояния строк, теги, выделение при наведении, активные строки и статусные ячейки внутри выбранной области. Слишком слабые границы разрушали структуру, а слишком яркие создавали лишний шум.
Принципы проектирования тёмной темы
Вместо чистого белого и чистого чёрного команда использовала более мягкие оттенки. Для каждого типа текста, поверхности и состояния подбирались отдельные значения, после чего проверялся их контраст. Для текста ориентиром служило минимальное соотношение 4,5:1, однако формальное соответствие требованиям не заменяет проверки интерфейса на реальных мониторах: визуально перегруженная таблица может оставаться неудобной даже при корректных числовых показателях.
Палитру также сделали менее насыщенной. Яркие цвета на тёмном фоне могут восприниматься как светящиеся и быстрее утомлять зрение, поэтому нейтральные оттенки используются для фонов, границ и теней. Цвет в интерфейсе сохраняет информационную функцию и появляется там, где нужно обозначить состояние оборудования, предупреждение, успешное выполнение операции или ошибку.
При этом логика работы системы и структура экранов не меняются. Пользователь, переключаясь со светлой темы на тёмную, видит знакомые элементы и продолжает выполнять привычные сценарии без переобучения. Более светлые оттенки применяются для активных элементов и акцентов, а более тёмные — для фонов и вторичных блоков, чтобы поддерживать визуальную иерархию.
Основой подхода стала дизайн-система с централизованными компонентами, цветами и состояниями. Для элементов используются токены — переменные, значения которых меняются в зависимости от выбранной темы. Благодаря этому обновления распространяются на все экраны и компоненты, где применяются соответствующие токены. Такой подход позволяет масштабировать систему на новые модули и производственные продукты, не превращая тёмную тему в набор вручную перекрашенных экранов.
Опыт проектирования показывает, что тёмная тема для MES — это прежде всего работа с вниманием пользователя. Она должна снижать визуальную нагрузку, помогать быстро находить отклонения и при этом сохранять привычную логику интерфейса. Поэтому её разработка требует тестирования компонентов, состояний и цветовых сочетаний как единой системы, а не разовой замены фона.
