Для фронта MES у нас на заводе используются мнемосхемы производственных цехов. Мы очень любим их проектировать.

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

Ещё лет пять назад было бы трудно поверить, что такое возможно. У нас был Oracle для отображения состояния оборудования и процессов, применялись таблицы, графики, диаграммы, были даже текстовые описания. Это было низкоэффективно, требовало изрядно времени и усилий для обработки. Потом пришёл MES, и понемногу всё закрутилось. Для MES-интерфейсов потребовался новый подход, т.к. в мире нет унифицированных решений для их разработки.

Чтобы внедрить мнемосхемы на производстве, пришлось изрядно поработать. Но задача была вдохновляющая, и оно того стоило.

Как начиналось

Рисовать разные агрегаты мы начали года с 2020-го, а к идее полноценной разработки мнемосхем пришли в конце 2022 года, когда уже стали очевидны их преимущества. Мнемосхемы наглядны, информативны и помогают лучше понять структуру и логику системы, чем таблицы, графики или диаграммы. На интерфейсе мнемосхем хорошо видна последовательность связей от одного агрегата к другому, и оператору удобно систематизировать происходящее.

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

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

Меня зовут Анна Труфанова, я Head of design НЛМК, и последние два года мы делаем мнемосхемы для каждого цеха на заводе. Представлю своих коллег, с кем мы всё это разрабатываем: Олег Рогов, руководитель отдела Frontend-разработки, Рамазан Нурулаев, ведущий UX-дизайнер, и Александр Голосов, ведущий бизнес-аналитик проектов по сталеплавильному производству. Над этой статьёй мы работали вместе.

Раньше отслеживать информацию было гораздо сложнее. Сегодня все видят всё

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

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

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

Итого, мнемосхемы:

• наглядные;

• информативные;

• логичные;

• удобные;

• лёгкие для восприятия.

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

Главный (и он же единственный) минус мнемосхем

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

На данный момент все схемы цехов собираются вручную, с реальных чертежей и не на самом удобном инструменте.

В общем, быстро стало понятно, что нужна компонентная база, иначе мы разорвёмся

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

У нас появилась дизайн-система НЛМК, которая лежит в оперсорсе и используется для всех продуктов НЛМК, и сторибук для MES — то есть для всего, что касается производственных интерфейсов. В обе системы входят наборы паттернов и устоявшихся схем в Figma и в React. Есть своя палитра, набор компонентов и правил, которые применяются в зависимости от специфики конкретной работы.

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

А потом мы придумали сделать свой no-code конструктор мнемосхем

Хотим, чтобы в результате можно было бы собирать эти самые мнемосхемы «из коробки».

Пока мы видим будущий конструктор как спроектированный в Figma холст, на котором изображены мнемосхемы и движения их компонентов. Figma хороша тем, что позволяет работать с собственным API и писать свои плагины. Мы хотим сделать такой плагин, который будет экспортировать SVG и позиционировать все элементы. У каждого из них в качестве вводных данных будут заданы определённые типы движений, чтобы можно было посмотреть, как едут вагончики, на какие углы смотрят камеры и так далее.

Нам бы хотелось, чтобы была визуализация по мнемосхемам. У нас есть собственная промышленная платформа, которая обходит датчики, отображающие все важные для производства объекты в реальном времени. Мы можем достать оттуда нужные данные и прикрутить их к своим мнемосхемам.

Делать всё это мы планируем путём проставления уникального поля для объекта, допустим, через Data Object Name или Data Object ID. То есть расставить ключи для того элемента, который потом будем анимировать, и по этим ключам в коде смотреть, где именно он находится и какой у него тип действия. Например, у камеры — обзор, у палета — путь вперёд или назад, у шлагбаума — градус, на который он может подняться. То есть разметка будет сопоставляться с отрисованными объектами, чтобы по словарю можно было посмотреть, какие действия им доступны.

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

После этого мы получим фактическую картинку, на которой будут отрисованы все элементы. Управлять действиями на веб-страницах мы будем через JavaScript. Например, нажимать на камеры или другие объекты схемы. А потом ещё можно будет прикрутить к тем же объектам дополнительные сноски и расширить функционал. Ещё хочется сделать доступными все имеющиеся у нас ивенты. Например, drag-anddrop или hover-эффекты, чтобы оператор мог не только визуально через камеру отследить, что происходит с объектом, но ещё и посмотреть какие-то его особенности по клику. Например, кто отвечал за идущий по рельсам вагон, когда тот был в ремонте.

Много разных мнемосхем

Есть общие диспетчерские схемы, есть верхнеуровневые, есть схемы в разрезе цеха и так далее. Все они пока выглядят немного по-разному, нет строгого единого стиля, потому что над ними работали не только мы, их параллельно внедряли сразу несколько команд, и каждая подстраивала всё немного по-своему. У каждого решения есть свои плюсы и минусы. Некоторые сделаны приятней для восприятия с дизайнерской точки зрения. А некоторые — чётко кастомизированы под запросы конкретных спецов из конкретного цеха. В этом деле самое главное разобраться, как будет удобнее рабочим на местах. Например, смотреть на изображение, хотя бы отдалённо напоминающее исходный объект, лучше, чем на безликие квадратики.

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

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

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

Планируем также разработать мнемосхемы для карьеров. На них мы сначала увидим, как на карьер приезжает БелАЗ, как и на каких весах его взвешивают. Дальше посмотрим, как он проходит через считыватель, какой у него вес, как он спускается, какое количество груза увозит. И сколько таких БелАЗов в день успело побывать на карьере.

Мнемосхемы могут быть внешними и внутренними. То есть мы можем сделать их для колеи, по которой идёт состав, или для процесса погрузки/разгрузки вагонов, а можем — для процессов, которые происходят внутри помещений. Но самое крутое, что мы из одной мнемосхемы можем проваливаться в следующую, чтобы рассмотреть подробности конкретного объекта, например мнемосхему склада или чего-то ещё.

Сделать хороший дизайн, близкий к реальности, оказалось весьма непросто

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

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

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

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

В основном мы изображаем мнемосхемы в проекции «вид сверху», а некоторые объекты на них — сбоку и в разрезе. И тут возникает вопрос, как реалистично отобразить, допустим, краны, которые подъезжают к конвертору, если сначала они показаны на виде сверху, сам конвертер отрисован уже боком, т.к. очень важно отслеживать, что куда льётся. Этот момент мы даже отдельно утверждали и согласовывали — всё ли там совпадает с реальностью и понятно ли оно отображено.

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

Кроме того, мы экспериментируем с 3D-изображением. Получаются очень крутые картинки с хорошей детализацией. Но тут бывают всякие косяки. Один раз у нас, например, попросили сделать 3D-печь. Мы спроектировали, и получилось очень красиво. Но когда эту печь приклеили к мнемосхеме и в неё начали заезжать ковши, внезапно оказалось, что внутри этой классной и красивой детализированной печи всё смешалось в лютую кашу. Пришлось делать её прозрачнее, чтобы было видно, что вообще происходит.

Мнемосхемы упрощают управление техпроцессами

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

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

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

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

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

Красота мнемосхемы имеет значение

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

Основная вводная по внешнему виду у нас была в том, что компоненты должны соответствовать текущему визуалу дизайн-системы и не выбиваться из общей стилистики. Но, кроме того, конечно, нам важно было, чтобы нашим пользователям хорошо было видно, где притаилась ошибка, где есть опасность, где какой важный объект находится и т.д. И при этом нужно было учесть, что человек может сидеть метрах в пяти от монитора. Так что мы, выбирая цвета и шрифты, руководствуемся именно такими соображениями.

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

Самой непростой для Олега и его команды задачей было перевести этот красивый дизайн в код и сделать так, чтобы объекты на мнемосхеме начали двигаться. Потому что просто изобразить — это одно. И совсем другое — совместить данные, которые пришли с бэка. Отследить по приборам, что палет сдвинулся, а потом удостовериться, что он действительно сдвинулся в реальности. Всё, что мы делаем, это просто огромная SVG с огромным количеством элементов, и самый простой вариант — просто разделить это на небольшие компоненты. Затем их аккуратно нужно расположить на SVG-сцене, где происходит основное движение, и только потом позиционировать по идентификатору каждый маленький объект относительно мнемосхемы.

Экспериментируем с 3D

Не могли мы пройти и мимо 3D-моделирования — изучали зарубежный опыт, рисовали макеты некоторых узлов и агрегатов. Такие модели — это красиво. Их можно приближать, удалять, крутить во все стороны и ставить нужный ракурс. С их помощью можно передавать больше информации, детальнее отслеживать процессы агрегатов.

Есть у них один минус для сегодняшних реалий большого производства: 3D-модели много весят и требуют мощных компьютеров. У современных компьютеров производительности недостаточно для наших задач (и я не про наши заводские компьютеры — а про все).

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

Поэтому мы пока тестируем и экспериментируем с 3D. Например, у нас получилась классная модель доменной печи в разрезе. Мы ещё к ней анимацию эффектную прикрутили.

Немного помечтаем о будущем

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

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