Тёмная тема в промышленных системах – не тренд, а необходимость

Как мы проектировали тёмную тему для MES-системы металлургического предприятия и почему промышленный интерфейс нельзя просто перекрасить в чёрный.

Меня зовут Наталья Гирина, я продуктовый дизайнер в ИТ-команде «Северстали» и участвую в разработке и внедрении MES-систем для промышленного производства.

В этой статье я расскажу о нашем опыте проработки тёмной темы для MES-системы, внедрённой на Череповецком металлургическом комбинате, а именно:

• почему мы занялись тёмной темой;

• что оказалось сложнее всего;

• принципы проектирования тёмной темы.

Почему мы занялись тёмной темой

В обычном веб-продукте тёмная тема часто воспринимается как персонализация или дополнительная визуальная функция. Но MES – не офисное приложение.

MES расшифровывается как Manufacturing Execution System – система оперативного управления производством. Если говорить проще, это интерфейс, в котором видно, что происходит на производстве прямо сейчас: какие операции выполняются, в каком состоянии находится оборудование, где находится продукция и есть ли отклонения от плана.

Поэтому к условиям работы с MES особые требования. Система работает в пыльной, шумной и жаркой производственной среде. Операторы управляют процессами круглосуточно, в том числе ночью. В диспетчерских установлены несколько мониторов, а освещение может быть неравномерным: часть экранов иногда находится в полумраке, часть – под прямым светом или бликами.

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

Мы столкнулись с этим при внедрении MES-системы на металлургическом заводе. Пользователи подтвердили, что тёмная тема нужна, и мы решили адаптировать под неё дизайн-систему, которая включает более 40 компонентов и их состояний.

Сейчас мы находимся в процессе тестирования, доработки и сбора обратной связи. В этой статье расскажу, какие проблемы обнаружились при работе над тёмной темой, какие решения мы приняли и как перевели их в дизайн-систему.

Что оказалось сложнее всего

Перейдём к тем самым нюансам, с которыми мы столкнулись при проработке тёмной темы для MES-системы.

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

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

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

Нюанс 2. Контраст нужно распределять
Интуитивно кажется, что чем выше контраст, тем лучше интерфейс. Для промышленного экрана это не всегда так. Если сделать контрастными текст, границы, иконки, кнопки и все состояния одновременно, взгляд перестаёт понимать, что важно.

Мы стремились к избирательному контрасту:

• основной текст должен уверенно читаться;

• вторичный текст не должен конкурировать с данными;

• границы таблиц должны помогать ориентироваться, но не становиться самостоятельным рисунком;

• акцентные элементы должны быть заметнее обычных;

• критические состояния должны выделяться сильнее предупреждений.

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

Нюанс 3. Статусы требуют переработки
В MES цвет передаёт смысл. Красный означает критическую ошибку, зелёный – нормальное состояние, жёлтый – предупреждение. Но на тёмном фоне привычные цвета ведут себя иначе.

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

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

Нюанс 4. Таблицы должны сохранять структуру
Таблицы – один из основных рабочих инструментов MES: в них отображаются партии, операции, параметры и результаты контроля.

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

Поэтому мы отдельно прорабатывали:

• границы ячеек;

• цвета строк в разных состояниях;

• цвета тегов;

• статусные ячейки внутри выбранной строки;

• панель действий над таблицей.

Эти наблюдения легли в основу принципов, которыми мы руководствовались дальше.

Принципы проектирования тёмной темы

Мы встроили тёмную тему в общий системный подход. Использование привычных паттернов и чёткой семантики облегчает адаптацию пользователей. И это не только про сейчас, но и про будущее масштабирование системы без хаоса.

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

Мы не использовали чисто белый (#FFFFFF) и чисто чёрный (#000000), потому что это может вызывать усталость глаз.

Для каждого типа текста, поверхности и состояния подбирались отдельные оттенки. И отдельно проверялся контраст.

Для текста мы ориентировались на минимальное соотношение контраста 4,5:1, а для нетекстовых элементов и компонентов учитывали отдельные требования к контрасту. При этом числовой показатель не заменяет проверки интерфейса на реальном экране: таблица может формально соответствовать требованиям и при этом оставаться визуально перегруженной.

Принцип 2. Адаптация цветов и оттенков
Мы пересобрали палитру для тёмной темы, чтобы сделать её более гармоничной. В тёмной теме нет насыщенных цветов, т. к. они могут «светиться» на тёмном фоне и утомлять зрение. Нейтральные оттенки для фонов, границ и теней обеспечивают комфорт для глаз.

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

Принцип 4. Визуальная иерархия
Мы подобрали оттенки так, чтобы легко считывалась иерархия элементов и текста на экране. Более светлые оттенки использовали для акцентов и активных элементов, более тёмные – для фонов и вторичных блоков.

Принцип 5. Паттерны, структура и плотность экрана – те же, что и для светлой темы
Мы шли от потребности сохранить для пользователя стабильность, чтобы, зайдя на экран в тёмной теме, он увидел все те же привычные ему элементы, которые работают так, как он привык в светлой теме. Рабочие сценарии также остались прежними.

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

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

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

Из отдельных элементов складываются компоненты дизайн-системы. И здесь, помимо состояний, проработаны размеры и варианты отображения – всё, что может пригодиться на разных экранах и, как в нашем случае, в разных системах (потому что наша дизайн-система предназначена для проектирования разных производственных систем).

Изменения на уровне системы распространяются на все экраны и компоненты, где используются соответствующие токены.

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