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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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