родион прохорцев
Все работы

SibEx. Система пиления по поставу

Роль
UX/UI-дизайнер
Команда
PM, UX/UI-дизайнер, 3 разработчика
Платформа
Десктоп → веб
Год
2021–2022

Редизайн системы пиления по поставу для лесопильной линии и её перенос с десктопа на Qt на веб.

Контекст

Проект по редизайну и миграции с Qt 5 (C++) на веб (Node.js и Vue). Система получает данные сканера по каждому бревну, подбирает постав — схему распила на доски — и считает объёмы на входе и выходе линии.

Проблема

Приложение существовало только для Linux Ubuntu.

Интерфейс вызывал дискомфорт при использовании: часть функций была реализована через ввод консольных команд. Из-за этого операторам смен и участков требовалось больше времени на обучение.

Цели

Сохранить все данные и сценарии оператора и при этом:

— вынести состояние линии и оборудования на видное место

— сократить таблицы до того, что нужно для решения, остальное — по запросу

— собрать интерфейс из готовых компонентов, чтобы веб-версию было быстрее разрабатывать

Процесс

Изучение продукта и анализ обратной связи

Составление всех возможных кейсов и состояний интерфейса

Разработка макетов на дизайн-системе Ant Design

Экраны

01

Дашборд лесоцеха

Главный экран смены: что сейчас на линии, связь с оборудованием, итоги и параметры подачи

Задача пользователя

Оператор за секунду понимает, работает ли линия, какое бревно идёт в пилу и всё ли в порядке с оборудованием — не переключаясь между вкладками

Дизайн-решения

  • Потеря связи со сканером и контроллером — красное уведомление над экраном с кнопкой «Переподключить», а не строка в журнале и красная метка в строке состояния
  • Путь бревна шагами: перед сканером → сканер → последнее распиленное. Сбой показан на том шаге, где он случился
  • Итоги смены — три крупные цифры: брёвна на входе, объём брёвен и выход досок с долей от объёма (24,271 / 41,441 = 58,6 %)
  • Параметры линии — отдельная карточка с «Применить» и «Сбросить»: изменения вступают в силу к следующему бревну
Было. Страница поставов
Стало. Справочник поставов: схема распила для каждого диаметра вершины

02

Поставы

Задача пользователя

Технолог подбирает и проверяет постав под диаметр бревна: какие доски и брус выйдут из этой схемы

Дизайн-решения

  • Поиск по названию или ID над списком: нужный постав находится без прокрутки таблицы по диаметрам
  • Над списком сводка «10 поставов · ⌀ 34–46», чтобы видеть охват справочника
Было. 3D-модель
Стало. Абстрактная 3D-модель с ключевыми срезами. Также доступен точный рендер после сканера

03

3D-модель

Задача пользователя

Проверить, как сканер увидел бревно — форму, диаметры по длине и кривизну, — когда раскрой вызывает сомнения

Дизайн-решения

  • Диаметры 328,3 / 348,8 / 400,0 мм из строки мелкого текста стали сечениями «Вершина», «Середина», «Комель» на профиле и кругами в масштабе
  • Сбег посчитан и подписан: 17,1 мм на 1 м = (400,0 − 328,3) / 4,182 м — его не нужно считать в уме
  • Модель связана с историей: «Открыть в истории» ведёт к строке этого бревна
Было. Боковые доски
Стало. Какие доски вписываются в боковые части бревна и сколько объёма они используют

04

Боковые доски

Задача пользователя

Понять, насколько полно используется древесина по бокам бревна, и найти доски, на которых теряется больше всего

Дизайн-решения

  • Английские подписи Full volume, Fit in, Flat, Offset переведены и собраны в одну строку: размер доски, пласть (широкая сторона доски), смещение
  • Использование объёма — полоса с процентом: зелёная от 70 %, жёлтая ниже, слабые доски видны сразу
  • Сверху итоги: левые 86 % (41 216,4 из 47 901,2 см³), правые 77 % (39 142,8 из 50 619,8 см³), лучшая доска 89 %, худшая 61 %
Было. История
Стало. Распиленные за смену брёвна: фильтр по оптимизации и раскрываемая строка

05

История

Задача пользователя

Найти нужное бревно или брёвна без оптимизации и разобрать, почему раскрой вышел таким

Дизайн-решения

  • Из 18 столбцов в таблице остались ключевые; схема постава и объёмы — в раскрываемой строке, а не во всплывающем окне поверх таблицы
  • Вкладки «Все · 12», «Оптимизировано · 9», «Без оптимизации · 3» — проблемные брёвна в один клик
  • Сортировка по времени и постраничный вывод вместо длинной таблицы
  • «Выгрузить» в шапке и переход к 3D-модели из раскрытой строки

06

Настройки боковых досок

Какие сечения боковых досок искать и с какими ограничениями

Задача пользователя

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

Дизайн-решения

  • Состав настроек — гипотеза по данным экрана «Боковые доски»: на экране это отмечено плашкой, его нужно сверить с технологом
  • Каждое сечение — строка с переключателем: выключенная строка приглушена, но остаётся в списке

07

Журнал

Было: консоль. Стало: журнал событий — выдвижная панель поверх любого экрана

Задача пользователя

Разобраться, что случилось с оборудованием, не уходя с текущего экрана

Дизайн-решения

  • Повторы одного сообщения свёрнуты в строку со счётчиком (× 61) вместо длинных строк «+++++»
  • Фильтры «Проблемы», «Подключения», «База» и поиск по сообщениям
  • Записи сгруппированы по времени, проблемы отмечены красным

08

Закончить смену

Было: кнопка закрытия смены. Стало: модальное окно со статистикой за смену и подтверждением действия

Задача пользователя

Закрыть смену осознанно: проверить итоги и не закрыть её случайно при сбое оборудования

Дизайн-решения

  • Кнопка переехала из панели слева в шапку, рядом со статусом смены
  • Перед закрытием — окно с итогами: начало, оператор, брёвна, объём брёвен → досок, выход 58,6 %
  • Если нет связи со сканером или контроллером, окно предупреждает об этом до закрытия

Итоги

Результат

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

  • 3 → 1,5 дняобучение нового оператора смены
  • 8–25 %рост продуктивности операторов, в зависимости от количества узлов производственной цепи
  • −37 %обращений к разработчикам по работе интерфейса

Рефлексия

Готовая дизайн-система ускорила работу, но не заменила знание производства: состав настроек боковых досок остался гипотезой, его нужно сверить с технологом.

Сайт использует cookie для аналитики