Разработка UX/UI и frontend
для сервиса управления договорными типами Autodesk Revit
О проекте
Проект связан с автоматизацией работы с данными из Autodesk Revit.
Заказчику требовался удобный интерфейс для управления CFT (Contract Type) — наборами правил, определяющих, как различные элементы и параметры Revit должны использоваться при формировании отчетов.
Исходно данные представляли собой структурированные JSON-объекты с большим количеством параметров и вложенных фильтров. Основная задача заключалась в том, чтобы превратить эту техническую структуру в понятный интерфейс, с которым сможет работать пользователь без необходимости редактировать JSON вручную.
Задача
Необходимо было разработать UX/UI интерфейса, позволяющего:
- просматривать существующие Contract Types в табличном виде;
- отображать основные параметры каждого элемента;
- редактировать значения;
- работать с вложенными фильтрами;
- использовать выпадающие списки для параметров с фиксированными значениями;
- получать значения некоторых полей динамически через API;
- сделать интерфейс понятным несмотря на большое количество технических параметров.
Отдельно требовалось продумать способ отображения вложенных фильтров — через подтаблицу, отдельную страницу или другой удобный интерфейс.
Ключевая сложность
Главная проблема проекта была не в объёме функционала, а в представлении сложной технической структуры.
Один Contract Type содержит несколько основных параметров и может дополнительно включать набор фильтров, каждый из которых также имеет собственные поля:
- команда;
- поле;
- условие сравнения;
- значение;
- тип значения.
При этом часть параметров имеет фиксированные варианты, а часть должна подгружаться с backend через API в зависимости от выбранных значений.
Поэтому требовалось построить интерфейс, который одновременно оставался бы компактным и позволял работать со всей структурой данных.
Решение
UX/UI
На основе исходного технического задания разработали интерфейс управления Contract Types в Figma.
Основная информация была представлена в виде таблицы, а для работы с вложенными фильтрами предусмотрен отдельный интерфейс.
Для разных типов данных использовали соответствующие элементы управления:
- текстовые поля для свободного ввода;
- combobox для выбора типа отчёта;
- combobox для выбора категории Revit;
- динамические списки параметров;
- выбор операторов сравнения;
- выбор типа значения.
Таким образом, пользователь работает не с JSON-структурой напрямую, а с визуальным интерфейсом, который отражает её логику.
Работа с API
Для динамических полей frontend взаимодействует с готовым backend API.
В частности, значения для категорий и параметров загружаются через API в зависимости от выбранного типа отчёта и категории.
Это позволило не зашивать все возможные значения непосредственно в интерфейс и сохранить связь с актуальными данными backend.
Frontend
После утверждения дизайна реализовали frontend на JavaScript и интегрировали его с уже существующим backend.
Мы не разрабатывали backend с нуля — наша зона ответственности включала UX/UI и frontend-часть, включая подключение к готовым API.
Результат
В результате заказчик получил готовый интерфейс для управления CFT-структурами без необходимости работать непосредственно с техническим JSON.
Мы:
- разработали UX/UI интерфейса;
- спроектировали работу с основными параметрами Contract Type;
- реализовали отображение и редактирование вложенных фильтров;
- использовали динамические данные из API;
- реализовали frontend на JavaScript;
- интегрировали интерфейс с существующим backend.
Главный результат проекта — сложная техническая структура данных Autodesk Revit была преобразована в понятный рабочий интерфейс для пользователя.
При этом существующий backend заказчика был сохранён и использован как основа для работы frontend.