Интерфейс HVAC для промышленного контроллера

Привет! Меня зовут Георгий, я дизайнер. В основном я занимаюсь промышленным дизайном, но иногда заказчики просят сделать для них что-то другое.

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

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

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

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

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

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

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

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

Кое-какие приемы подсматриваем в авиаприборах, собираем мнемосхему, смотрим ее в максимальной нагрузке, и как она будет выглядеть 90% времени работы.

Утверждаем общий стиль и переходим к проработке остальных экранов. Наиболее интересен экран задачи установок. Мы перебрали несколько вариантов — пикер мобильного телефона, ввод числа с клавиатуры и так далее. И решили, что круто сделать сенсорный диммер для грубого задавания числа, и кнопки «+» и «-» для более точного.

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

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

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

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

0
25 комментариев
Написать комментарий...
Mark Levinson

Хорошо что взялся за дизайн такой непростой системы! Но тебе есть ещё чему поучиться в сфере граф дизайна и UX/UI. Успехов!

Ответить
Развернуть ветку
Serge Sokolov

"..что интерфейсами мобильных телефонов занимается ... А вот хороших ... интерфейсов, предназначенных для управления инженерными системами..." Интерфейсы мобильных телефонов это Android и iOS. А здесь-то что, я не понял. Ресурсов контроллера вроде маловато для такой роскоши, а если это общий пульт с Виндой, то как-бы не очень понятно в чем прорыв.  

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Serge Sokolov

Cortex это просто ядро ARM. То есть ARM может быть и на процессорах, куда заливают Linux,  и на контроллерах где на паре сотен килобайт ничего кроме RTOS не разместишь. И ни с какой графикой это конечно. А Linux не может работать в реальном времени. Снимать данные. С датчиков. То есть конечно что-то можно навертеть, но это не будет real-time. И собственных ADC у процессора нет. 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Serge Sokolov

А ну тогда все в порядке. за дело взялся специалист. Как так у вас в Техасе? Больше не стреляют? 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Paul Koval

Ищем промышленного дизайнера в разработку модульной системы для специалистов транспорта. Если интересно пиши.

Ответить
Развернуть ветку
Георгий Лефтар
Автор

Интересно. Давайте общаться почтой?

Моя: [email protected]

Ответить
Развернуть ветку
Konstantin Smolenskii

Спасибо за статью и подробные картинки. Всегда интересно что там «за монитором и веб дизайном». Через такие статьи многие должны принять тот факт что дизайн, это интеллектуальный труд. От которого может зависеть серьезный продукт. Это уже «Дизайн инженерия» получается.

Ответить
Развернуть ветку
Ilya ZLodei

Хоть комментов и немного, все равно отличный пост. Много хорошего дизайна не бывает. Особенно в России 

Ответить
Развернуть ветку
Art.Spark

частный промышленный заказ.

жаль для населения ничего подобного нет

Ответить
Развернуть ветку
Top rating

например? Вам мало гос сайтов, которые приводят в приятный вид? А как же дизайн Госуслуг? Сайт почты России?

Ответить
Развернуть ветку
Art.Spark

я про управляемую автоматику.

а моду упрекать человека, не имея оснований, бросай.

Ответить
Развернуть ветку
Top rating

не так понял значит. Я так и не понял, что для населения должно быть в качестве примера.

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

Ответить
Развернуть ветку
Art.Spark

конструктор общего назначения, который можно недорого купить и просто собрать и настроить.

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

Ответить
Развернуть ветку
Pavel Voronkov

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

Ответить
Развернуть ветку
Георгий Лефтар
Автор

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

Ответить
Развернуть ветку
Artem Gruzdev

Очень красиво!

Ответить
Развернуть ветку
Genrih Grigoryan

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

Ответить
Развернуть ветку
Георгий Лефтар
Автор

Край экрана это черное поле. А серая рамка вокруг просто стекло. Общий габарит обусловлен конструктивными особенностями прибора.

Ответить
Развернуть ветку
Сергей Пипкин

Достойный интерфейс. Сами занимаемся эксплуатацией и обслуживанием вентиляции. Все понятно и удобно выглядит. Мы сейчас разрабатываем онлайн платформу для отслеживания состояния систем и ее отдельных элементов. Если интересно посотрудничать - [email protected] Будем рады найти общие интересы. 

Ответить
Развернуть ветку
Александр Фудин

Из статьи не понял ЦА этого устройства.

Если ЦА это конечные потребители (поставить у себя дома), то сходу новичку очень много всего непонятного. особенно пиктограммы, это получается мне перед тем как им пользоваться нужно еще и инструкцию изучать (ну хоть сертификацию не проходить и то ладно) - это так себе uses cases.

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

В общем много непонятно, но однозначно большой плюс за работу. Так или иначе это крутой опыт.

Ответить
Развернуть ветку
Anton Kulikov

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

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

На скрине, где 6 турбин, почему две красные, другие с восклицательным знаком, иконки мелкие. 

А в чём это отрисовано? Поподробнее о подходе разработки было бы интересно почитать. 

Скриншоты в статье очень печальные, либо vc пожало, либо исходники такие. 

Ответить
Развернуть ветку
Ray Jey

Прекрасный интерфейс, его линии потрясающие 🤤🖤

Ответить
Развернуть ветку
22 комментария
Раскрывать всегда