Как стать автором
Обновить

Комментарии 24

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

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

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

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

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

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

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

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

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

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

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

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

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

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