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

До того, как открыть редактор и начать работать, стоит уточнить несколько особенностей.

• Я буду делать интерфейс в Figma, но не буду акцентировать внимание на ее инструментах, так как можно использовать любой другой софт, это не имеет большого значения.

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

• Буду придерживаться модульности и "наборности", чтобы было удобно и быстро менять содержание установок.

• Буду стремиться создать универсальную стилистику, чтобы можно было сделать аналогичные окна и других инженерных систем (ИТП, ХЦ, котельная и т.д.)

Шаг 1: сетка

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

Теперь добавим сетку. Ширина колонки будет 100 рх, кол-во колонок 8 штук, отступы между колонками и от краев 40 рх, в сумме получилась ширина 1160 рх. Каждая колонка - это функциональный элемент вентиляционной установки. Я взял с одного объекта довольно большую и насыщенную установку и у меня получилось 7 элементов, восьмую колонку я оставлю для температуры в канале и уставки. Если делать такой интерфейс под совсем загруженную установку, то нужно будет увеличивать ширину на количество колонок кратно 140 рх.

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

Шаг 2: цвета и шрифты

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

Я буду использовать 4 разных начертания: одно для всех подписей, одно для заголовков модулей и два начертания для переменных. Все важные значения я буду делать большего размера для акцентирования на них внимания, остальные переменные будут меньше. Основной шрифт я выбрал Roboto, это продиктовано ограничениями редактора SCADA системы, в нем можно использовать только этот шрифт. Roboto бесплатный, очень популярный шрифт и, кстати, используется в Android, наверное, по этому его и выбрали разработчики scada системы. Заголовки при этом я буду делать другим шрифтом и обращу внимание, что он платный.

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

Шаг 3: добавляем основные элементы

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

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

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

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

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

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

Шаг 4: верхняя строка состояния

В верхней строке я расположу главную информацию о состоянии установки без кнопок управления. Слева большой индикатор работа/стоянка, справа индикатор наличия аварии, размеры индикаторов 100 х 28 рх. Добавил немного меньшего размера индикатор зима/лето размерами 80 х 28 рх. И еще добавлю сюда 2 переменные, но уже текстовые: температуру наружного воздуха и источник управления. Строка получилась довольно емкая и есть еще место для другой информации, например, для названия самой установки. Размер переменных в строке я использую только средний.

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

Шаг 5: мнемосхема

Изначально все мнемосхемы у нас были 3D и с красивыми анимированными иконками, но по ряду причин от 3D отказались полностью. Долгим путем пришли к круглым модулям под каждый элемент установки. Вот тут я писал большую статью с ретроспективой и там можно проследить весь путь.

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

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

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

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

Пример индикации другого состояния установки.

Шаг 6: модули в нижней части

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

Размер модуля 240 х 300 рх с скруглением 12 рх. Высоту сегмента и все окно в целом можно увеличить если не хватает места под вывод информации. Если информацию в модуле нужно отделить по логике, можно использовать горизонтальную линию в 1 рх. Отступы внутри модуля от краев по 20 рх. Кнопки будут одного цвета и в светлом, и в темном интерфейсе. Размер кнопки 200 х 26 рх, скругление 4 рх, тумблер 40 х 20 рх.

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

Шаг 7: темная тема

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

Шаг 8: Сохраняем преемственность

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

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

Я попробовал быстро перенести интерфейс на HMI панель 7 дюймов с 800 х 480 рх разрешением. Верхняя строка стала прямоугольной под экран панели, размеры кружков и содержимое их не изменилось, я просто перенес их, уменьшив отступы между ними. Все нижние модули сжались в строку навигации с кнопками.

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