Совместные карты Путей Авалона, маршруты и доступ для сообществ Albion Online.
Спроектировать интерфейс совместной карты для игроков Albion Online по большому техническому заданию. Нужно было связать редактирование сети локаций, поиск маршрутов и права участников в десктопной и мобильной версиях. Функции и правила продукта задавал клиент.
Portaler помогает гильдиям и альянсам картировать Пути Авалона — локации, связанные порталами. Участники отмечают порталы, ресурсы, сундуки и подземелья, затем используют общую карту для поиска маршрутов.
Я работал над проектом в NIITSURU и отвечал за структуру страниц, компоновку и визуальный дизайн. Работа заняла около полутора месяцев. Данные на экранах демонстрационные.
Исходными материалами были ТЗ и наброски клиента в FigJam и Paint. Я превращал заданные функции в страницы и рабочие сценарии, затем обсуждал макеты с клиентом и вносил правки, если таковые были.
Основная обратная связь приходила в комментариях Figma и Telegram; остальные вопросы решали на созвонах. Палитра и обводки линий были ограничениями клиента, которые нужно было учитывать при доработках.
Сервер объединяет карты и настройки сообщества. Я собрал их в одном рабочем пространстве: состояние карт доступно до открытия сети, а доступ и интеграция с Discord относятся к серверу целиком.
Это была моя первая работа такого типа. Узлы обозначают локации, а линии порталы. Сеть, сведения о зонах и редактирование должны оставаться в одном рабочем поле.
Режимы просмотра, редактирования и поиска маршрута были частью исходной логики. Я разместил действия с локацией возле узла, а общие инструменты, такие как: добавление связи, отмену и размещение — в нижней панели.
При поиске маршрута важно различать выбранный путь и остальные связи. В этом режиме путь выделен, а остальная сеть приглушена. Начальная и конечная точки остаются видны во время работы с картой; недавно посещённые локации доступны в поиске.
Для роли действуют общие права и исключения на конкретных картах. Я разделил доступ к серверу и картам на два блока. Выбор роли определяет, чьи права редактируются, а выбор карты где действует исключение.
У человека может быть индивидуальный план и подписки на приватные карты с разными состояниями оплаты. Я разделил эти типы подписок и показал статус в каждой карточке. Задержка платежа на одной карте не смешивается с состоянием остальных подписок.
Карта стала самой трудной частью адаптива: инструменты и сеть конкурируют за небольшое рабочее поле. В текущем макете основные кнопки находятся над картой, а выбор начальной и конечной точки под ней.
Завершён дизайн приложения для десктопа и телефона: карта, поиск маршрутов, серверы, доступ и подписки. Реализация оставалась на стороне клиента; данных о запуске и использовании новой версии у меня нет.