Зачем
Вдохновившись статьёй моего друга про печальность интерфейсов в промышленном секторе (АРМ), я решил сделать свою версию того же самого, но с немного другим уклоном.
В том посте были комментарии из серии «всё везде регламентировано, раз так сделано — значит умные люди подумали», но если в условном Газпроме за АРМ наблюдает инженер или техник, который отличает на схеме трехходовой клапан от обратного, то в гражданских системах часто за этим следят те же диспетчера, что следят за пожаркой, диспетчеризацией лифтов и прочих систем, диспетчера часто меняются, новые могут не знать чего то, а для того же ТЦ быстрота фиксации и ликвидации аварии могут спасти много денег.
Этим я хотел показать, что удобно и красиво вовсе не значит анимации на каждый переход + тени и градиенты. Ну Хабр тому доказательство, как бы.
Процесс
ТЗ от воображаемого заказчика:
Переделать мнемосхему, чтобы она была понятнее
Не менять аварии и кнопки - будем считать, что на АРМе можно будет заменить иконку лампочки с одной на другую
Все названия должны остаться, сокращений и переименований не должно быть.
Разрешение экрана остается как на картинке
Процент занимаемого мнемосхемой места также нельзя уменьшать
Я возьму рандомную мнемосхему из интернета и пошагово покажу, как минимальными усилиями можно привести в порядок интерфейс, чтобы он стал приятнее для глаз и удобнее для эксплуатации.
Я не ставлю задачу переработать интерфейс и сделать его "идеальным", тем более это невозможно, у каждого свои вкусы, свое виденье и вообще все фломастеры разные. А вот убрать очевидные косяки и причесать можно.
Иду по тому же пути, беру ту же схему и пробую уложиться в 2 часа времени.
Это не то, чтобы самая ужасная схема, тут как минимум все понятно, так еще и достаточно читаемо, так что её можно спасти
Первым делом делю схемы на зоны по смыслам и каждую зону кропаю в отдельные картинки, чтобы их можно было двигать
Переставляю ОЧЕНЬ ГРУБО то что было на картинке, собираю в блоки связанные по смыслу, нужно понять влезет ли (а то может зря я так начал)
Итого 3 блока: Аварии, Управление, Мнемосхема.
Беру уже чистый frame и его разбиваю на 3 части
Далее иду перерисовывать саму мнемосхему ЦТП, т. к. у неё в правой нижней части скученность, а в левой части много пустоты. Перерисовываю.
Ремарка: это - не принципиальная схема ЦТП, где должны быть отображены все задвижки и вся арматура, это - визуализация для оператора, которая не обязана быть калькой с ФСА(схема где датчики указаны).
Немного перемещаю элементы, выделяю контуры визуально, делая их похожими, убираю скученность справа.
Добавляю насосы и датчики, в целом мнемосхема сама готова, остался этап полировки, но прошло уже 1ч 23мин и я срочно убегаю делать остальное, чтобы хоть как то уложиться.
В начале я разделил разбросанные блоки с кнопками на 4 группы: Управление, Температура ЦО, Температура ГВС и Панель управления, где я не знаю что находится, потому оставил как было.
Нижнюю панель разбиваю на 4 маленьких панельки и переношу туда все кнопки, используя уже свои размеры (они не меньше оригинальных, я проверил специально)
Рассчитываю сколько мне нужно строк для Панели аварий и предупреждений справа, начинаю её собирать, но время уже выходит. Всё.
Но воображаемый заказчик - это лучший заказчик, то он входит в мое положение и дает мне ещё полчаса.
Трачу еще 15 минут на доделку блока с авариями.
Ещё 15 минут - на полировку того, что ну совсем не стоит так оставлять: Опечатки в названиях датчиков и пропущенную кнопку Подтвердить аварию.
Выводы
Я не успел за 2 часа
Я не использовал никаких сложных элементов, вроде теней, градиентов, даже жирный шрифт
Получилось, конечно на мой вкус, куда чище, аварии считываются легче, кнопки понятно что делают и к тому же, оставлено место для возможного дооснащения
P.S.
Через пару дней вернулся, и решил всё же добавить рюшечек дисигнера.
Вроде приятно получилось.
Комментарии (21)
NooneAtAll3
22.08.2023 20:55Я не разбираюсь, поэтому вопрос идиота
"Клапан Открыт 0%", но у клапана 3 соединения
0% это в нижний отвод в другую трубу? или наоборот 0% дальше по трубе, все в "слив"
Yukr
22.08.2023 20:55Хорошая статья!
@ NooneAtAll3. Это похоже на клапан регулировки давления: если 0% - с давлением всё ОК, поток идёт "слева" "направо", если надо понизить давление в системе - открываем клапан на Х%, давление сбрасывается, поток идёт частично "вниз".
FriedCoconut Автор
22.08.2023 20:55Открыт 100% - это когда закрывается отвод вниз и идет поступление подающего теплоносителя на 100%, Открыт 0% - закрывается левый отвод и циркуляция идет по малому контуру - из обратки сразу в подачу без смешивания с горячей водой из котельной.
"Открыт 0%" звучит странно, потому на версиях, которые уже не в формате "2 часа", а побольше у меня там просто процент стоит и подписано, что это клапан
Gustychg
22.08.2023 20:55Клапан трехходовой, в данном случае смесительный. При 0% в данном случае работает циркуляция, подмес горячей воды слева не происходит. При 100 открытии не будет циркуляции, на насосы будет поступать только горячая вода слева. В промежуточных я думаю все понятно, регулируется процент подмеса.
Siemargl
22.08.2023 20:55Очень мелко, а оператору может быть и 60 лет и некогда приглядываться. Кроме того что панелька отображения может быть промышленной и размером 7-10"
Панель аварий нужна только при авариях, потому лучше отдельным экраном. На основной схеме достаточно подсветки аварийного агрегата и 1-2 строки сообщений
unclemike
22.08.2023 20:55+1Речь, как я понимаю, идёт об АРМ (верхний уровень), а не о панели управления на месте.
Тут дело, скорее всего, в самом "заказе" — переделать быстро, получить красоту: изначально всё было на одном "листе", поэтому структура и не изменилась.
FriedCoconut Автор
22.08.2023 20:55Именно, я в ТЗ изначально прописал, что я не собираюсь переделать "как надо", я беру конкретный пример со всеми его ограничениями, и просто причесываю в течение пары часов. Панели аварий не было на исходной - я её и не делал.
Vorchun
22.08.2023 20:55+3Раунд!
Такие штуки надо смотреть на реальном экране. От этого много зависит. Также не понятно как может меняться количество элементов со временем. Если все зафиксировано - это одна, если нажно "немного на вырост" - это другое.
В целом, нравятся такие батлы на Хабре )
dzmitry_li
22.08.2023 20:55+2Хотел покритиковать, но сделано вполне неплохо.
Из моих наблюдений - в промышленности (и в подобных диспетчерских) надо делать две версии мнемосхем!:
* первую с яркими цветами, анимацией, и прочей вырвиглазностью - для картинки всяким проверяющих и для СМИ, показать что, дескать, не фигнёй на работе маются!
* вторую версию для аппаратчиков, диспетчеров, работников - которые всегда работают с оборудованием - с неконтрастными ёмкостями, трубопроводами, надписями, и чётко читаемыми показаниями и состояниями приборов, что бы беглый взгляд сразу же увидел ненормальное состояние процесса.Увы, но чаще встречается только первый вариант.
Итоговая картинка - чуть не дотягивает до идеала, но намного лучше встречающегося.
FriedCoconut Автор
22.08.2023 20:55Спасибо, интересная мысль насчет контрастности, почему то я не думал в таком ракурсе, иногда делал светлую/темную для удобства, но специфика софта не всегда позволяет нормально менять цвет текста и прочих встроенных штук
DanilaX
22.08.2023 20:55А какая CКАДА использовалась , или это самописное по . Просто обычно скада система обладает ограниченным числом библиотечных элементов что накладывает свой отпечаток на красоты визуализации
FriedCoconut Автор
22.08.2023 20:55те скады, которые мне известны позволяют делать индикаторы в виде картинок, а кнопки прозрачными - большего чаще всего мне и не нужно. Вот с панелями да, там проблем хватает
suprunchuk
22.08.2023 20:55+1Круто!! Спасибо за идею! Теперь я себе тоже что-то похожее сделал.
9982th
22.08.2023 20:55Если это конечный результат, то вы сделали что-то совершенно непохожее. В статье, и до, и после переделки — мнемосхемы, а у вас — сложенные в кучки наборы индикаторов. Это, разумеется, проще нарисовать, но работа с подобны интерфейсом — заметно большая фоновая когнитивная нагрузка, чем мнемосхема.
Стоило бы взять из документации максимально упрощенную схему агрегата и расположить все эти индикаторы и концевики там, где они должны находиться на машине, опционально приправив символами верхнего/нижнего или открытого/закрытого положения. Если какой-то элемент красиво не нарисовать — оставить как есть кружки с подписью, но обязательно в правильном месте.Посмотрите, как выглядит визуализация датчиков положения какого-то крана. Имея полноценный цветной дисплей высокого разрешения вы можете добиться гораздо лучшего результата.
magiccigam
22.08.2023 20:55+1Мы используем при разработке мнемосхем подходы ситуационного восприятия (situation awareness). У Rockwell есть даже библиотека элементов с подробным описанием принципов.
Комментарии:
1. По нашему опыту и отзывам пользователей цвет динамических значений лучше сделать цветом, который отличается от цвета основного текста и но не бросается в глаза (у нас темно-синий).
2. Помимо этого мы не используем яркие цвета, в вашем случае потоки (красный, синий) сильно отвлекают их можно следать не такими жирными и яркими.
3. В случае аварии и предупреждения используется красный и желтый цвета, зеленый не используется впринципе.
4. Подложку делаем не контрастную - серый цвет.
5. Признаки вкл-выкл светло-серый / темно-серый. Если это нормально, то цвета не должны отвлекать оператора.
Изначально производство сильно сопротивлялось, но теперь поняли все плюсы и поддерживают такой подход. Основной плюс, оператор за доли секунды видит где проблема, т.к. в нормальном состоянии его ничего не отвлекает, а в случае аварии цвет сразу бросается в глаза.FriedCoconut Автор
22.08.2023 20:55вроде и в исходной контрастность значений хорошая
да, еще снизил яркость, с горящей аварией читалось не так как хотелось бы
Не вижу зазорным использовать неяркий зеленый для обозначения того же ДПД
Можно и с серой, но тогда весь серый текст придется делать темнее и контрастность чуть сместится
Признаки вкл/выкл оборудования думаю зеленым обводку делать, ну что-то такое, или анимацией
dcs_pls
22.08.2023 20:55Стало значительно лучше, появилась системность. По своему опыту могу дать несколько бесполезных советов:
Согласен с коллегой что если фон мнемосхемы светлый то лучше серый.
Не понятно почему у труб некоторые прямые углы скругленные, а некоторые нет.
Обычно слева мнемосхемы входной поток, справа выходной.
Подскажите, а мнемосимволы (насосы, задвижки, аналоги) анимируются? Например задвижка открыта, закрыта, в проме, авария и т.д.
FriedCoconut Автор
22.08.2023 20:55Спасибо, тк это проект чисто для демонстрации, то варианты анимации я не прорабатывал, но в обычных проекта работающий насос конечно анимирован, остальное - зависит желания выпендриться, тк функционально не имеет смысла: можно сделать в задвижке несколько кадров визуализации её штока, но смысл если проценты написаны. Где были задвижки с заполняющимся кругом, как прогресс бар.
скругленные трубы просто проморгал, тут еще есть что править:
там два Т11 трубопровода)
Аварии насосов надо в отдельную подгруппу либо вообще лучше разделить аварии по контурам
это всё надо прорабатывать, макетировать и очень много времени занимает разработка типовых элементов так, чтобы планируемое количество уместилось и не превратилось в кашу
aakumykov
Потрясающе красиво и функционально.