Найти в Дзене

Ухожу из маркетинга в UX/UI! Как я нарисовал интерфейс приложения для местного завода, с нулём знаний в дизайне?

"Сложилось устойчивое мнение в обществе про рабочих на заводах, так вот, я один из тех рабочих, который в корни поменял вектор своего направления. Могу сказать, что на некоторых предприятиях, работают действительно талантливые ребята, ну и производства – основа экономики. Поэтому стоит поменять своё отношение к рабочим людям, ну это так лирическое отступление." Скоро всё будет, но сначала порекомендую забрать гайд "Как написать 58 SEO-текстов за 2 часа?" в ТГ-канале в закрепе. Там ещё мемы и очень полезная информация про Digital-маркетинг. Начнём! Чтобы немного погрузить вас в контекст, расскажу про деятельность комбината. Горно-обогатительный комбинат – это целый комплекс производств, которые вытаскивают из под земли руду, доставляют её, дробят, обогащают, смешивают и т.д. Не буду называть конкретное производство, они это сильно не любят. Есть такое оборудование, называется ВЕЛЬЦ-ПЕЧЬ. Огромная труба, 4,5м диаметр, длина от 30м до, наверное, бесконечности, самую длинную видел 170м. А
Оглавление
"Сложилось устойчивое мнение в обществе про рабочих на заводах, так вот, я один из тех рабочих, который в корни поменял вектор своего направления. Могу сказать, что на некоторых предприятиях, работают действительно талантливые ребята, ну и производства – основа экономики. Поэтому стоит поменять своё отношение к рабочим людям, ну это так лирическое отступление."

Скоро всё будет, но сначала порекомендую забрать гайд "Как написать 58 SEO-текстов за 2 часа?" в ТГ-канале в закрепе. Там ещё мемы и очень полезная информация про Digital-маркетинг.

Начнём!

Горно-обогатительный комбинат

Чтобы немного погрузить вас в контекст, расскажу про деятельность комбината. Горно-обогатительный комбинат – это целый комплекс производств, которые вытаскивают из под земли руду, доставляют её, дробят, обогащают, смешивают и т.д. Не буду называть конкретное производство, они это сильно не любят.

Что-то похожее
Что-то похожее

Есть такое оборудование, называется ВЕЛЬЦ-ПЕЧЬ. Огромная труба, 4,5м диаметр, длина от 30м до, наверное, бесконечности, самую длинную видел 170м. Автор данного материала, работал на одной из таких, причем как-раз таки самой длинной.

Вращающаяся печь, которая выдаёт 30т обожженой руды в час
Вращающаяся печь, которая выдаёт 30т обожженой руды в час

Труба эта предназначена для термической обработки различного рода руды. В настоящее время, такие остались на цементных производствах, для других материалов используются более технологичные печи.

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

Цифровизация началась ещё в начале 2000-х, но ввиду локальных разработок и отсутствия острой потребности затянулась.

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

Как я туда попал?

Встретился с главным инженером электронщиком (моим хорошим товарищем), в ходе диалога рассказал, что разрабатывается новое ПО, с блоком управления через программу, отчетами и т.д.

-4

Проблема - некому отрисовать нормальный интерфейс, ребята крутые технари и разработчики, но в дизайн никак не умеют. Состоялся диалог:

- Ты же вроде там что-то рисуешь?
- Рисую то не, так картинки собираю из готовых элементов.
- Может ты нам интерфейс нарисуешь?
- Да не, ты что, там вообще своя отдельная сфера…
- Ну, всяко разно лучше получится чем мы в паинте накидаем
*И тут я подумал, дизайн сайтов я делал, а тут приложение для внутреннего пользования, вай нот?
- Окей, попробую

И понеслась душа в рай.

Как нарисовать интерфейс приложения для Windows?

С интерфейсом десктопных приложений я ни разу в своей жизни не работал, сначала даже идей не было как это сделать. Дизайн сайтов делал, красивый Лэндос сделать - пожалуйста. А вот какие условия есть для десктопных приложений, было решительно ни ясно.

Задачи были следующие:

  • Окно авторизации. Самая боль, которая мне запомнилась, когда я сам рулил процессом – отсутствие ответственности предыдущего оператора. Процесс обжига очень инертный, твоя ошибка вылезет только спустя 5-6 часов. А ошибок можно наделать очень много, в итоге спрос будет с оператора, у которого что-то идёт не так. График приложения сбрасывался каждые 8 часов;
  • Перенос управления газом и шиберами внутрь приложения. С аналоговых систем перешли на управление микроконтролерами, которые отлично интегрировались в общую систему;
  • Отчеты. Ранее был журнал отчетов, и ты ручкой заполнял показания приборов каждые два часа, решили перевести это в цифру;
  • База знаний. Написать режимы работы, диапазоны, чтобы новому сотруднику было проще адаптироваться, решение классное, раньше с этим были трудности;

При общении с разработчиками, мне сказали: "Просто, рисуй под 1920 на 1024, отдашь макет, мы если что поправим". Но я всё таки сделал отступы по 30px ссылаясь на бороду приложений Windows.

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

Собственно, начал работу с UX/UI кита, показывать не буду, там в основном отступы и пара кнопок. Покажу карту приложения, что вообще должно там быть:

Такая вот карта приложения, совсем небольшая
Такая вот карта приложения, совсем небольшая

Начал с окна авторизации и выбора смены:

Смен всего 4, по логике в каждой смене храниться 6 учетных записей рабочих.
Смен всего 4, по логике в каждой смене храниться 6 учетных записей рабочих.
-7

Каждому присваивается табельный номер, при окончании 12 часовой смены, автоматически сбрасывается учетная запись, и новый сотрудник должен пройти авторизацию. Тут несколько состояний:

Успешно
Успешно
Отказано в доступе
Отказано в доступе

Также было добавлено окно «Уведомлений». Далее мы попадаем в главный рабочий стол:

-10

Не пугайтесь, сейчас всё объясню.

-11

1 – Переключение между разделами «Главная», «Отчет», «База знаний»;

2 – Основная информация авторизованного аккаунта (Табельный номер и ФИО);

3 – Блок управления газом, подачей материала, шиберами, мощностью насоса и подающим сырьём. Далее подробнее объясню, что куда и зачем.

4 – Плашки с показателями;

5 – Схема работы печи, рядом показатели тех мест, которые анализируются;

6 – Переключение экранов показателей по разным печам;

7 – Режимы отображения показателей, в «Упрощенном» режиме выведена основная информация, которая жизнено необходима для режима обжига. В «Расширенном», все показатели печи;

8 – Блок с диагностикой аварий. Ранее также располагался на щите, это различные отсечки при авариях;

Покажу блок управления, на примере «Расход газа», в других в целом всё тоже самое.

-12

1 – Добавить/убавить;

2 – Изменение шага увеличение или уменьшения расхода;

3 – Кнопка которая разворачивает график;

4 – Собственно сам график с показателем расхода газа и как он менялся;

5 – Показывает временной отрезок, также отрезок времени смены;

6 – Дублирует основной показатель, плюс дополнительные показатели;

7 – Ранее была установлена премия за экономию газа, на данный момент её нет, но геймификация это всегда круто);

8 – Подсказка, рекомендуемый режим исходя из температуры и материала;

В целом ничего сложного, зато какая разница между тем что было и новым. Реализации выпадающего списка:

Выбор материала обжига
Выбор материала обжига

Переключение между режима на расширенный:

-14

Окно с подачей отчета:

-15

Выбираем время, печь, материал, забиваем показатели (вроде как реализуют автоматические заполнение) Нажимаем на кнопку «Подать».

Окно с базой знаний:

-16

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

Не забудьте забрать гайд "Как написать 58 SEO-текстов за 2 часа?" в ТГ-канале в закрепе. Всем спасибо!