Редактор уставок

О проекте

Сервис, позволяющий:

Создавать уставки (границы норм по свойствам);
Контролировать превышение уставок: отклонение от нормы — цветовая индикация, сигнализация;
Квитировать события по отклонениям.

Пользователи:
Диспетчеры, начальники цехов

Моя роль

Сбор и анализ требований;
Проработка и отрисовка страниц сервиса;
Разработка интуитивно понятной навигации, чтобы пользователи могли легко просматривать и редактировать данные;
Обеспечение корректного отображения интерфейса на десктопных экранах различной ширины: от 1280px до 1920px по ширине;
Согласование макетов;
Передача макетов разработчикам;
Дизайн-ревью.

Потребности и решения

Потребность

Пользователь хочет иметь возможность быстро вносить изменения значений границ , чтобы:

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

Решение

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

Потребность

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

Решение

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

Потребность

Кроме контролируемого свойства к уставке привязываются 2 технических свойства (они вторичны для пользователя). Так же в будущем возможно добавление еще данных. Но для этих свойств и данных совсем нет места в таблице.

Решение

Возможность открыть правую панель подробностей с расширенной информацией, которая содержит все 3 свойства. При добавлении новых данных они успешно поместятся в этой панели.

Потребность

Все свойства хранятся в системе в виде многоуровневой иерархии объектов и связанных с ними свойств. Необходимо создать удобный интерфейс поиска и выбора необходимых свойств.

Решение

Разделил объекты и свойства на 2 дерева с возможностью поиска объектов. В отличии от иерархии объектов в иерархии свойств уровней обычно не больше 2, поэтому правая область меньше по ширине. Так же количество свойств обычно не более 3, поэтому поиск по свойствам отсутствует.

Потребность

Необходима возможность быстрого включения/выключения контроля по колонкам таблицы. При этом решение не должно утяжелять интерфейс.

Решение

Добавил меню действий и иконку вызова в ячейки шапки.

Темная тема

Для быстрого переключения на темную тему используются переменные цветов заложенные в дизайн-системе.

Затрачено на дизайн

90+ часов

Спроектировано

80+ фреймов