Leftar Apr 5 2020 at 15:48

Дизайн интерфейса для промышленного контроллера

4 min

13K

Industrial Programming*Design

From sandbox

+18

Comments 24

lelik363 Apr 5 2020 at 16:59

Красиво.
Freelance?

Leftar Apr 5 2020 at 18:25

Спасибо!
Yes.

Gigatrop Apr 5 2020 at 18:26

На нескольких изображениях увидел градиенты и слабые отличия серых тонов. Представьте, что я устал и глаза под конец дня мутные. Слабое отличие тонов напрягает — нужно приноровиться глазами. А градиенты и тени под плашками делают дизайн старым или излишне выпуклым, что выбивается из общего стиля, как-будто вы не определились. Ещё иконки должны иметь общую толщину или вес. И когда плашку какую-то активируете, то лучше изменять её фон, а не делать яркую рамку. Потому что рамка менее контрастна издалека и выглядит менее уверенно.

Leftar Apr 5 2020 at 18:26

Спасибо за советы.

Gigatrop Apr 5 2020 at 18:34

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

osmanpasha Apr 5 2020 at 18:28

А как ваш дизайн из фигмы воплощался на реальном железе? Какой это язык программирования, фреймворк?

Leftar Apr 5 2020 at 18:36

Это надо уточнить у моего программиста, если честно, я так глубоко не лезу в его кухню.

osmanpasha Apr 5 2020 at 19:18

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

Leftar Apr 5 2020 at 19:21

В Фигме все элементы имеют код, координаты и css стили. Там для программистов прям есть отдельная вкладка, где можно смотреть свойства любого элемента.
Кроме того, элементы могут быть в СВГ, так что вам будет довольно просто с ними работать. Вообще есть много статей на тему Фигма для программистов и там все рассказано

Leftar Apr 5 2020 at 19:28

Но, это если он вам нарисует в Фигме или в Скетче. А может же в Фотошопе, тогда все по старинке.

osmanpasha Apr 5 2020 at 19:53

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

Leftar Apr 5 2020 at 20:33

Да, программисту надо будет написать, чтобы поведение было как задумано. Но можно договориться о какой-либо готовой дизайн-системе и рисовать макет, используя готовые компоненты. Как правило, все эти системы интегрируются с Фигмой\скетчем. Но есть свои минусы — как и все готовое и универсальное имеют в себе кучу лишнего для конкретной ситуации.

osmanpasha Apr 5 2020 at 21:17

Понятно, спасибо. А о каких "дизайн-системах" речь? Можете пример привести?

Leftar Apr 5 2020 at 21:39

Например, Carbon Design System или React Bootstrap или Ant Design

osmanpasha Apr 6 2020 at 05:37

Мда. Короче, проблема в том, что все это ориентировано на веб-приложения, и как это интегрировать, например, в qt — большой вопрос.

osmanpasha Apr 5 2020 at 18:42

И ещё вопрос — это все как-то пересекается с "классическим" программированием интерфейсов промышленной автоматики — для панелей к ПЛК от всяких сименсов? Изучали, как и зачем все в той области делается?

Leftar Apr 5 2020 at 18:51

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

Affdey Apr 5 2020 at 20:40

Довольно симпатично и стильно.
Сам занимаюсь промышленными ПЛК и дизайном панелек. Некоторые замечания:
— Низковата контрастность. серое на чёрном может быть не видно.
— Где 6 вентиляторов. Если белые — работают, серые — не работают, то белые должны быть зелёные. Что обозначает отсутствие рамки на одном красном вентиляторе? Рекомендуется добавить краткую информацию в виде текста, а не только значков.
— Разные физ. величины лучше разным цветом или по-другому отличать. Давление и температура у вас одним синим цветом. Законы Мёрфи помните?
— Круговая шкала на разных экранах начинается в разных местах. это плохо смотрится. То начало с 12 часов, то с 7ч. Лучше сделать как на крутилке — с 7часов. или с 6ч если надо полный круг показать.

Leftar Apr 5 2020 at 20:46

Благодарю за советы!

shnegs Apr 6 2020 at 08:59

Белые не обязательно должны быть зелёными. см. вебинары wonderware.

Siemargl Apr 5 2020 at 22:45

Не соврать бы, но кажется есть рекомендация не более 10 точек внимания на экран.

little-brother Apr 6 2020 at 10:00

По схеме вентиляции: если не подписать элементы, то служба эксплуатации может и не разобраться. Иногда нужно спускаться на этот «уровень» и понять, что там зачастую работают мужики лет под 60, которым красивые иконки ничего не говорят.

Affdey Apr 6 2020 at 23:45

Служба эксплуатации теплосети, ха. Когда тебе ракетостроители говорят — мы в этом ничего не понимаем, верните нам два вентиля!

saege5b Apr 11 2020 at 00:06

Я бы у крутилки с влажностью, метку сделал поинтенсивней-пожирней, с расчётом что на экран будут смотреть под углом.
И плюс-минус сделал максимальной площади, треугольниками по бокам крутилки.

Желательно предусмотреть блокировку экрана при многоточечном касани и при слишком быстрых касаниях (скажем, защитный интервал 1 — 1.5 сек).

И рассмотреть интерфейс под большими(малыми) углами к экрану. Элементы ввода должны идентифицироваться даже при оптических искажения.

Было бы замечательно отдельно отмечать изменённые параметры и ждать подтверждения действия.

Show the best of all time