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

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Георгий Лефтар", "author_type": "self", "tags": [], "comments": 24, "likes": 44, "favorites": 45, "is_advertisement": false, "subsite_label": "design", "id": 84080, "is_wide": true, "is_ugc": true, "date": "Sat, 21 Sep 2019 14:36:20 +0300", "is_special": false }
0
{ "id": 84080, "author_id": 359745, "diff_limit": 1000, "urls": {"diff":"\/comments\/84080\/get","add":"\/comments\/84080\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/84080"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
24 комментария
Популярные
По порядку
Написать комментарий...
5

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

Ответить
3

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

Ответить
0

А здесь Линукс на процессоре, что-нибудь типа Cortex-A9. О прорывах речи не идёт, просто нормальный современный продукт.

Ответить
0

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

Ответить
0

Дружище, не надо меня учить :) я это все и так знаю. Как и то, что эта штука работает на Линуксе и проце от TI.

Ответить
0

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

Ответить
0

Кстати, если вам интересно, тот вот что я вспомнил: https://www.segnetics.com/trim-5. В разделе характеристики можно посмотреть.

Ответить
1

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

Ответить
1

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

Моя: design@leftar.ru

Ответить
1

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

Ответить
1

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

Ответить
0

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

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

Ответить
0

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

Ответить
4

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

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

Ответить
2

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

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

Ответить
0

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

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

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

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

Ответить
0

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

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

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

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

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }