Задача

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

В дальнейшем задача была расширена и мы разработали: логотип, дизайн интерфейса 3D-конфигуратора, дизайн сайта и обучающий ролик.

Этапы работ

Обсуждение и доработка ТЗ

PictureThis 3D — канадский проект, работу над которым мы начали с налаживания эффективной обратной связи. Главным препятствием была разница в часовых поясах, в остальном смогли найти общий язык, обговорить все детали и приступить к работам.

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

Проектирование и дизайн

Проектирование системы начали с «Блокинга» — разбили всю будущую систему на основные обобщенные блоки, а также детально продумали все взаимосвязи внутри проекта.

На этом этапе осознали необходимость проектирования на принципах многих графических редакторов, в том числе, позволяющих работать с 3D-графикой, где есть рабочая область с объектами. Кроме того, необходимо было предусмотреть наличие панели редактирования и навигации, возможности экспорта и импорта 3D-объектов.

Все современные 3D-редакторы имеют много общего, начиная с функционала навигации внутри окна редактирования, заканчивая панелями инструментов и механиками взаимодействия пользователей с объектами. Мы решили не отходить от стандартов и проектировали систему, которая укладывалась бы в общий контекст существующих редакторов и была понятна и удобна пользователям.

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

• возможность оформления подписки;
• возможность покупки 3D-моделей.

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

Первый прототип на основе собственной креативной концепции мы собрали в течение недели и подготовили презентационный видеоролик в After Effects для обратной связи с клиентом. Заказчик положительно оценил проделанную работу и дал «добро» на детальную проработку дизайна.

Структура решения

Дизайн

Любая сложная система нуждается в собственном визуальном языке, поэтому дальнейшие усилия сконцентрировали на проработке уникального дизайна, включающего в себя:

• Разметку страниц;
• Типографику;
• Набор кнопок;
• Иконки;
• Карточки;
• Переключатели;
• Дизайн полей ввода;
• Всплывающие окна;
• Панели меню разных уровней;
• И многое другое.

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

Мы спроектировали дизайн и прототип системы таким образом, чтобы потенциальный пользователь имел возможность детально редактировать не только отдельную модель, но также системы моделей и их окружение. Каждый уровень получил собственный функционал и особенности.

Пользователь получает возможность, например, редактировать не только модель дивана, но также его материалы и переходить между разными уровнями редактирования — на модель комнаты, жилого объекта или целого жилого комплекса.

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

Так как обычный пользователь не имеет ни времени, ни желания на то, чтобы разбираться в особенностях сложных систем, мы детально проработали интерфейс, сделав его максимально похожим на современные 3D-редакторы и обеспечили ему лаконичный, но стильный дизайн, только с самыми необходимыми элементами управления, без непонятных кнопок и неиспользуемых инструментов (чем грешат многие редакторы).

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

Сложности и ограничения

Результаты

Проделали очень большую, сложную, но интересную работу для клиента. То, что начиналось с задачи на разработку 3D-конфигуратора в итоге вылилось в создание комплексной системы для работы с 3D-объектами, включая: логотип, дизайн сайта, интерфейс конфигуратора, а также обучающий ролик, позволяющий быстро знакомить пользователя со всеми возможностями системы.