Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Зачем
Вдохновившись статьёй моего друга про печальность интерфейсов в промышленном секторе (АРМ), я решил сделать свою версию того же самого, но с немного другим уклоном.
В том посте были комментарии из серии «всё везде регламентировано, раз так сделано — значит умные люди подумали», но если в условном Газпроме за АРМ наблюдает инженер или техник, который отличает на схеме трехходовой клапан от обратного, то в гражданских системах часто за этим следят те же диспетчера, что следят за пожаркой, диспетчеризацией лифтов и прочих систем, диспетчера часто меняются, новые могут не знать чего то, а для того же ТЦ быстрота фиксации и ликвидации аварии могут спасти много денег.
Этим я хотел показать, что удобно и красиво вовсе не значит анимации на каждый переход + тени и градиенты. Ну Хабр тому доказательство, как бы.
Процесс
ТЗ от воображаемого заказчика:
Переделать мнемосхему, чтобы она была понятнее
Не менять аварии и кнопки - будем считать, что на АРМе можно будет заменить иконку лампочки с одной на другую
Все названия должны остаться, сокращений и переименований не должно быть.
Разрешение экрана остается как на картинке
Процент занимаемого мнемосхемой места также нельзя уменьшать
Я возьму рандомную мнемосхему из интернета и пошагово покажу, как минимальными усилиями можно привести в порядок интерфейс, чтобы он стал приятнее для глаз и удобнее для эксплуатации.
Я не ставлю задачу переработать интерфейс и сделать его "идеальным", тем более это невозможно, у каждого свои вкусы, свое виденье и вообще все фломастеры разные. А вот убрать очевидные косяки и причесать можно.
Иду по тому же пути, беру ту же схему и пробую уложиться в 2 часа времени.
Это не то, чтобы самая ужасная схема, тут как минимум все понятно, так еще и достаточно читаемо, так что её можно спасти
Первым делом делю схемы на зоны по смыслам и каждую зону кропаю в отдельные картинки, чтобы их можно было двигать
Переставляю ОЧЕНЬ ГРУБО то что было на картинке, собираю в блоки связанные по смыслу, нужно понять влезет ли (а то может зря я так начал)
Итого 3 блока: Аварии, Управление, Мнемосхема.
Беру уже чистый frame и его разбиваю на 3 части
Далее иду перерисовывать саму мнемосхему ЦТП, т. к. у неё в правой нижней части скученность, а в левой части много пустоты. Перерисовываю.
Ремарка: это - не принципиальная схема ЦТП, где должны быть отображены все задвижки и вся арматура, это - визуализация для оператора, которая не обязана быть калькой с ФСА(схема где датчики указаны).
Немного перемещаю элементы, выделяю контуры визуально, делая их похожими, убираю скученность справа.
Добавляю насосы и датчики, в целом мнемосхема сама готова, остался этап полировки, но прошло уже 1ч 23мин и я срочно убегаю делать остальное, чтобы хоть как то уложиться.
В начале я разделил разбросанные блоки с кнопками на 4 группы: Управление, Температура ЦО, Температура ГВС и Панель управления, где я не знаю что находится, потому оставил как было.
Нижнюю панель разбиваю на 4 маленьких панельки и переношу туда все кнопки, используя уже свои размеры (они не меньше оригинальных, я проверил специально)
Рассчитываю сколько мне нужно строк для Панели аварий и предупреждений справа, начинаю её собирать, но время уже выходит. Всё.
Но воображаемый заказчик - это лучший заказчик, то он входит в мое положение и дает мне ещё полчаса.
Трачу еще 15 минут на доделку блока с авариями.
Ещё 15 минут - на полировку того, что ну совсем не стоит так оставлять: Опечатки в названиях датчиков и пропущенную кнопку Подтвердить аварию.
Выводы
Я не успел за 2 часа
Я не использовал никаких сложных элементов, вроде теней, градиентов, даже жирный шрифт
Получилось, конечно на мой вкус, куда чище, аварии считываются легче, кнопки понятно что делают и к тому же, оставлено место для возможного дооснащения
P.S.
Через пару дней вернулся, и решил всё же добавить рюшечек дисигнера.
Вроде приятно получилось.
