Интерфейс HVAC для промышленного контроллера
Привет! Меня зовут Георгий, я дизайнер. В основном я занимаюсь промышленным дизайном, но иногда заказчики просят сделать для них что-то другое.
Хочу рассказать об одном из последних, важных для меня кейсов — разработке интерфейса для промышленного контроллера.
На тот момент я работал в компании Segnetics, и мне было поручено разработать дизайн интерфейса управления системой вентиляции. Так сложилось, что интерфейсами мобильных телефонов занимается большое количество профессионалов. А вот хороших специализированных интерфейсов, предназначенных для управления инженерными системами не так уж много.
Почему-то принято считать, что в этой отрасли дизайн не нужен, а если инженер не может разобраться в системе, то это, скорее, говорит о его квалификации, а не о том, что интерфейс плохо проработан.
Мы начали с того, что подробно изучили и смоделировали, как и где будет использоваться наша панель. Часто это полутемные технические помещения, расположение на щитах или установках, что не всегда комфортно для использования. Поняв это, стали искать аналоги и способы решения схожих задач.
Мы перебрали много интерфейсов: медицинские приборы, автомобили, управление системами производства и так далее. И решили, что нам нравится стиль интерфейсов современных авиационных приборов, главное достоинство которых состоит в том, что летчик должен максимально быстро считывать только важную информацию, очищенную от визуального шума. Этот принцип мы заложили в основу всего будущего интерфейса и перешли к рисованию.
На начальном этапе мы эскизно разместили основные блоки в натуральный размер экрана и залили программу в контроллер, чтобы проверить области нажатия элементов, логику переходов.
Утвердив компоновку перешли к эскизному поиску. Мы перебрали большое количество вариантов эскизов и стилей. Примерно поняли, что хотим, решили попробовать более детальную проработку, но небольшого фрагмента. Флэт? Скевоморфизм? Может быть взять стиль чертежной графики?
Постепенно находим тот образ, который нас устраивает, и начинаем проработку. Основной экран, с которым будет взаимодействовать оператор — мнемосхема. На ней должны быть отображены важные параметры притока и вытяжки, статусы и состояния устройств в системе.
Кое-какие приемы подсматриваем в авиаприборах, собираем мнемосхему, смотрим ее в максимальной нагрузке, и как она будет выглядеть 90% времени работы.
Утверждаем общий стиль и переходим к проработке остальных экранов. Наиболее интересен экран задачи установок. Мы перебрали несколько вариантов — пикер мобильного телефона, ввод числа с клавиатуры и так далее. И решили, что круто сделать сенсорный диммер для грубого задавания числа, и кнопки «+» и «-» для более точного.
Тут я бы хотел сказать большое спасибо программистам Segnetics, которые заставили плавно крутиться колесо настройки и приятно отыгрывать во время его остановки. Оно правда получилось очень кайфовым.
Прорабатываем все экраны и анимируем устройства, состояния. Аварии, заморозки, обрывы ремня, то как надувается и сдувается «лифчик» фильтра, во время запуска и остановки системы. Как наполняются прогресс-бары.
Следующим этапом мы адаптировали интерфейс панели управления для использования в другом контроллере. Добавили функцию создания расписания, изменили основной экран, так как данный контроллер может управлять только конкретной установкой, в то время как панель поддерживает управление несколькими системами.
Для меня это был полезный опыт разработки сложной инженерной системы, нужно было увязать множество факторов, исключив коллизии. Я понял, что мне интересно делать дизайн для подобных систем, и что нет ни одной отрасли, в которой дизайнерских подход был бы неприменим. Сейчас я работаю над медицинской системой, но об этом расскажу в другой раз. Открыт для сотрудничества и буду признателен за конструктивную критику.
Хорошо что взялся за дизайн такой непростой системы! Но тебе есть ещё чему поучиться в сфере граф дизайна и UX/UI. Успехов!
"..что интерфейсами мобильных телефонов занимается ... А вот хороших ... интерфейсов, предназначенных для управления инженерными системами..." Интерфейсы мобильных телефонов это Android и iOS. А здесь-то что, я не понял. Ресурсов контроллера вроде маловато для такой роскоши, а если это общий пульт с Виндой, то как-бы не очень понятно в чем прорыв.
Комментарий недоступен
Cortex это просто ядро ARM. То есть ARM может быть и на процессорах, куда заливают Linux, и на контроллерах где на паре сотен килобайт ничего кроме RTOS не разместишь. И ни с какой графикой это конечно. А Linux не может работать в реальном времени. Снимать данные. С датчиков. То есть конечно что-то можно навертеть, но это не будет real-time. И собственных ADC у процессора нет.
Комментарий недоступен
А ну тогда все в порядке. за дело взялся специалист. Как так у вас в Техасе? Больше не стреляют?
Комментарий недоступен
Ищем промышленного дизайнера в разработку модульной системы для специалистов транспорта. Если интересно пиши.
Интересно. Давайте общаться почтой?
Моя: [email protected]
Спасибо за статью и подробные картинки. Всегда интересно что там «за монитором и веб дизайном». Через такие статьи многие должны принять тот факт что дизайн, это интеллектуальный труд. От которого может зависеть серьезный продукт. Это уже «Дизайн инженерия» получается.
Хоть комментов и немного, все равно отличный пост. Много хорошего дизайна не бывает. Особенно в России
частный промышленный заказ.
жаль для населения ничего подобного нет
например? Вам мало гос сайтов, которые приводят в приятный вид? А как же дизайн Госуслуг? Сайт почты России?
я про управляемую автоматику.
а моду упрекать человека, не имея оснований, бросай.
не так понял значит. Я так и не понял, что для населения должно быть в качестве примера.
Максимум, что приходит в голову это терминалы в мед учреждениях и в налоговой.
конструктор общего назначения, который можно недорого купить и просто собрать и настроить.
Можно например использовать для этого старый андроид телефон (для интерфейса и програмирования логики), и подключать к нему блок управляемых разьемов.
Подход к реализации очень хороший, но вот управление на тач устройстве немного не доработано, если в системе несколько устройств, можно было бы управлять параметрами всех с одного экрана, тут как я понял нужно в каждое заходить.
Со всеми можно сделать глобальные действия-запустить, остановить, просмотреть данные температуры и т.д. А вот уже мнемосхему и показатели остальных датчиков только внутри.
Очень красиво!
А расскажите пожалуйста, почему было принято решение сделать такой большой отступ от краев экрана? Первое что мне пришло в голову - можно было бы увеличить полезную, информационную область, чтобы оператору было удобнее взаимодействовать с системой.
Край экрана это черное поле. А серая рамка вокруг просто стекло. Общий габарит обусловлен конструктивными особенностями прибора.
Достойный интерфейс. Сами занимаемся эксплуатацией и обслуживанием вентиляции. Все понятно и удобно выглядит. Мы сейчас разрабатываем онлайн платформу для отслеживания состояния систем и ее отдельных элементов. Если интересно посотрудничать - [email protected] Будем рады найти общие интересы.
Из статьи не понял ЦА этого устройства.
Если ЦА это конечные потребители (поставить у себя дома), то сходу новичку очень много всего непонятного. особенно пиктограммы, это получается мне перед тем как им пользоваться нужно еще и инструкцию изучать (ну хоть сертификацию не проходить и то ладно) - это так себе uses cases.
Ну, а если это устройство для управления системой вентиляции на промышленном объекте - тогда все эти рамочки, стеклышки и тд вообще нафиг не нужны.
В общем много непонятно, но однозначно большой плюс за работу. Так или иначе это крутой опыт.
Интересная задачка, задумка хорошая, но реализация средняя, доработать всегда есть что и вопросом по интерфейсу много.
Почему пожар так вяло отражён, там бы всю панель не мешало красным подсветить, а у вас как-то спокойной, горим ну и ладно)
На скрине, где 6 турбин, почему две красные, другие с восклицательным знаком, иконки мелкие.
А в чём это отрисовано? Поподробнее о подходе разработки было бы интересно почитать.
Скриншоты в статье очень печальные, либо vc пожало, либо исходники такие.
Прекрасный интерфейс, его линии потрясающие 🤤🖤