О проекте

AR Map — редактор интерактивных поэтажных карт для торговых центров и других крупных объектов. Администратор загружает обычный план этажа, обводит на нём помещения, раскрашивает их и получает схему, на которой каждый магазин или арендная площадь — отдельный объект, а не просто часть картинки.

Задача

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

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

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

Редактор открывается с пустым холстом и одним понятным действием — «Загрузите карту». Под кнопкой сразу указаны требования к файлу: рекомендуемое разрешение 1920 × 768 и форматы JPG, WEBP или PNG. Это снимает большую часть вопросов ещё до того, как пользователь что-то загрузил: подойдёт скан, экспорт из CAD или схема из презентации.

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

• Выделить блок — перо, которым помещение обводится по точкам. Так повторяется контур любой формы: скошенные стены, Г-образные залы, островные павильоны в атриуме. У инструмента есть дополнительные режимы, они открываются из выпадающего меню.
• Изменить цвет — заливка помещения, чтобы отделять зоны друг от друга: якорных арендаторов, фуд-корт, сервисные помещения.
• Скрыть — временно убирает блок, если нужно посмотреть на подложку под ним или поправить соседний контур.
• Назад — отмена последнего действия, чтобы ошибка при обводке не стоила нескольких минут работы.
• Удалить — убирает блок с карты целиком.

Многоэтажные объекты

Торговые центры редко бывают одноэтажными, поэтому этажи вынесены в отдельную панель над картой. Каждый этаж — своя вкладка со своим планом и своими блоками. Новый этаж добавляется одной кнопкой, а если этажей много, панель прокручивается стрелками.

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

Как выглядит готовая карта

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

Результат

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