ПИК создает передовые технологические сервисы, которые позволяют специалистам в сфере строительства применять в работе инновационные решения. Family Manager — один из таких сервисов. Он необходим для получения качественных информационных моделей, по которым возводятся здания.
Начало. Работа над главной страницей веб-приложения
![](https://static.tildacdn.com/tild3430-3833-4466-b434-373132306230/1.jpg)
![](https://static.tildacdn.com/tild3531-3361-4066-a538-363534653337/2.jpg)
Основное меню и навигация: вкладки и деревья
Обычно мы начинаем проект с навигации. Но у Family Manager уже было классное меню, когда мы подключились. Нам оставалось привести меню в актуальный вид, кардинально ничего не меняя. Главная находка команды — имитация браузерных вкладок в рамках приложения. Это как листы в гугловской таблице, только вкладки. Оказалось, что активные пользователи веб-приложения работают одновременно с несколькими семействами или другими сущностями, в рамках задач перемещаются между вкладками и кайфуют от такого решения.
Чтобы еще упростить навигацию, мы начали экспериментировать с цветовым кодированием сущностей. Необходимость этой задачи объясняется тем, что разные сущности стоят рядом не только в навигационных панелях, но и в таблицах и других шаблонах. Еще в проекте есть единое дерево всех компонентов — это такой швейцарский нож для BIM-методолога, в нем нам особенно пригодилось цветовое кодирование типов сущностей.
Дерево семейств настраивается в веб-приложении. Можно создавать папки с любой глубиной вложенности, назначать им картинки, скрывать вспомогательные папки, переносить и копировать семейства.
![](https://static.tildacdn.com/tild3337-3766-4661-b761-396633333436/3.jpg)
![](https://static.tildacdn.com/tild6236-3163-4164-a163-636465613030/4.jpg)
Дизайн-система
На этом этапе добавили иконок, составили локальную библиотеку компонентов, в том числе таблиц, и глобальный гайд по дальнейшему использованию системы.
![](https://static.tildacdn.com/tild3362-6431-4530-a535-616266653266/5.jpg)
В старой версии дизайна иконки были с стиле fill, то есть с заливкой, и после изменения цветовой палитры они собирались в оранжевое пятно. Попробовали разные варианты и в итоге пришли к outline-стилю. Чтобы не нарушить преемственность интерфейса, сохранили метафоры для основных модулей. Специфические элементы оставляем в локальной библиотеке компонентов. Общие элементы добавляем в глобальный гайд.
![](https://static.tildacdn.com/tild6130-3737-4130-a430-346233663463/6.jpg)
Знакомство с семейством
На созвоне с клиентом обсудили, какие решения сейчас в ходу и что надо добавить. Затем взяли время на первичную генерацию гипотез: нас интересовало, какая сетка окажется для шаблона сущности самой масштабируемой. Сделали три варианта, из которых и выбрали победителя.
Условия масштабирования
Главная особенность приложения — множество пользовательских ролей, то есть это сложная многоролевая система: проектировщики используют семейства и создают заявки на их разработку, BIM-мастера обрабатывают эти заявки и наполняют библиотеку, BIM-менеджеры настраивают информационные стандарты, администраторы регулируют доступы.
Интерфейс приложения должен прогрессивно эволюционировать в зависимости от роли пользователя: больше прав — больше элементов и доступных функций. Начали с того, что разложили основные состояния страницы свойств семейства.
![](https://static.tildacdn.com/tild3031-3331-4839-a634-636162643933/7.png)
Выбранный вариант сетки дотачивали до релизного варианта в течение 3 итераций: расставляли акценты, боролись с хаосом в разных типах категоризаций, проверяли сценарии редактирования.
![](https://static.tildacdn.com/tild6634-3033-4461-b764-636236623533/Frame_1231457.jpg)
Рефакторим таблицы
Таблица — универсальный формат, они есть везде, и проектировать их стоит с расчетом на дальнейшее масштабирование приложения. Мы начали систематизировать виды сущностей и расписывать необходимые модули и контексты использования.
![](https://static.tildacdn.com/tild6430-3534-4133-a335-613832626237/Frame_1231462.jpg)
![](https://static.tildacdn.com/tild6161-3838-4264-b863-336163663638/9.jpg)
Интересные сценарии
Создание заявки: идем по пути упрощения
Одна из проблем первой версии — процесс создания заявки был сложен для пользователей. Все находилось вперемешку, было далеко не ясно, какие данные и как заполнять. Мы обсудили задачу и решили попробовать сделать визард по созданию заявки. Сначала набросали быстрый прототип, чтобы понять, как это может выглядеть и действительно ли решит затруднения пользователей. После пары созвонов и уточнения деталей пришли к оптимальному рабочему процессу по заявке.
![](https://static.tildacdn.com/tild3331-3832-4966-b332-643733623438/10.jpg)
Давайте пообщаемся: добавили чат
Оптимизированный процесс по созданию заявки потянул за собой еще один интересный сценарий — чат. В чате по конкретному семейству пользователи в том числе обсуждают новые заявки, видят системные сообщения по процессу согласования.
![](https://static.tildacdn.com/tild6532-6562-4439-a166-616538626261/Frame_1231461.jpg)
Десктопное приложение: масштабируем и избегаем ограничений
Вся мощь идеи Family Manager ощущается, когда работаешь с десктопным приложением. Оно ставится поверх софта проектировщика и обновляется автоматически. Десктопное приложение — окно в каталог семейств, которое позволяет не выходя из рабочей среды использовать нужную для проекта часть библиотеки. Оно экономит проектировщику время на поиск семейств и позволяет автоматически проверять семейства в проекте на актуальность.
Для нас десктопное приложение — история про ограничения:
- UI наследуется из приложения, а тот из операционной системы;
- UX уже устаканился, пользователи привыкли к выбранной архитектуре приложения.
![](https://static.tildacdn.com/tild3138-3535-4839-a661-643963323366/Frame_1231463.jpg)
Практика Ландау: авторский надзор после внедрения
Авторский надзор — наша стандартная практика для среднесрочных и долгосрочных проектов. Мы запускали процесс надзора регулярно, после каждого большого релиза. Результаты оформляли по договоренности с командой проекта: списком со скринами или текстовыми заметками.
![](https://static.tildacdn.com/tild3963-3562-4365-b965-363630323739/12.jpg)
Отзывы пользователей по итогам редизайна
По итогам редизайна заказчик в июне 2022 года провел опрос среди 240 активных пользователей платформы. Результаты в сравнении с предыдущими итерациями нас порадовали: выявили рост по всем значимым параметрам.![](https://static.tildacdn.com/tild3039-3561-4535-b831-613033303162/13.jpg)
![](https://static.tildacdn.com/tild3837-6236-4236-a238-336139633435/16.jpg)
Результаты
Мы помогли команде Family Manager разработать вторую версию продукта и подготовить его к успешному публичному релизу. Проект признан образцом отличной работы для внутреннего контура продуктов группы ПИК. Гордимся тем, что наша разработка интерфейса теперь задает стандарты на рынке BIM-проектирования в России.
Мы поддерживаем связь с командой проекта, радуемся успехам Family Manager и надеемся в будущем поработать с третьей версией интерфейса продукта.
Источник