Масштабная работа: как создаётся дизайн карт

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

С чем работаем

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

Команда дизайнеров, упаковывая геоданные в единый продукт, решает, какую информацию карта даёт на каждом уровне приближения и как эта информация взаимодействует друг с другом.

Технически в приложении 2ГИС одна карта. Но в зависимости от уровня приближения, настроек, сценария использования и просматриваемой местности перед пользователем открываются десятки разных заранее подготовленных карт.

До 2019 года мы работали с растровыми тайлами — по сути с множеством разных карт для каждого из масштабов, которые последовательно сменяли друг друга при приближении. Кроме того, что их было сложнее настраивать, из-за технических ограничений сами правки «доставлялись» только раз в месяц.

Масштабная работа: как создаётся дизайн карт

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

Мы можем прорабатывать отдельные виды карты в зависимости от контекста. Например, карта по-разному выглядит для автомобилистов и тех, кто пользуется общественным транспортом. А изменения можно вносить по несколько раз в день.

Масштабная работа: как создаётся дизайн карт

Визуальный образ карты

Подбор цветов, шрифтов и отрисовка объектов — отдельный большой блок работы над восприятием карты. Важно сделать её удобной, сохранив индивидуальность и соответствие общему брендовому стилю.

Масштабная работа: как создаётся дизайн карт

Об этом хочется рассказать подробнее, но тогда пост разрастётся до космических размеров. Попробуем раскрыть тему в отдельной статье.

Вместе с картографами

Картографы 2ГИС работают в нашей собственной программе, которая называется Fiji. В ней карту создают отдельными слоями. При создании города, первым рисуется гидрослой — реки и водоёмы. Дальше выстраиваются все необходимые слои ландшафта — холмы, леса, дороги и т. п. Затем создаются слои для городской местности. Всего слоёв порядка 500.

Масштабная работа: как создаётся дизайн карт

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

Например, мы хотим добавить на карты лавочки. Картографы собрали данные о расположении всех лавочек в Москве, а наша команда нарисовала, как лавочки будут отображаться в соответствующем слое. Знать, где можно присесть, конечно, полезно, но на карте лавочки не должны заслонять, к примеру, Большой театр.

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

Масштабная работа: как создаётся дизайн карт

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

После основного этапа дизайна начинается процесс тестирования и тюнинга. Начинается…и никогда не заканчивается. Главная цель этого процесса — максимальная читаемость карты. Команда дизайнеров проверяет, не заползают ли объекты друг на друга, соблюдается ли их иерархия (Большой театр заметнее лавочек), работают ли масштабы и цвета в общей карте.

Масштабная работа: как создаётся дизайн карт

Для проверки нужна работа «в полях». Для этого мы регулярно проводим интенсивы на свежем воздухе. Например, выходим со смартфонами на прогулку и сверяем, как достопримечательности и их окрестности отображаются на карте. Все детали, которые не совсем точно отображают реальность или не позволяют интуитивно считать маршрут, потом дорабатываются.

Эмоциональные карты

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

Например, в 2021 году мы выпустили ретрокарту ДубльГИС с дизайном как в 2004 году, и по ним сразу становится ясно, насколько удобнее и функциональнее стали современные карты.

Масштабная работа: как создаётся дизайн карт

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

Новый этап развития карт — ещё большая реалистичность. Добавляются детальные 3D-модели зданий, ландшафт, дороги.

Масштабная работа: как создаётся дизайн карт

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

3030
5 комментариев

Современные карты удобнее? Нет и ещё раз нет. Попробуйте людям дать выбор, какой дизайн использовать - сразу станет видно, что бледные карты нравятся "не только лишь всем". Объективности ради - да, старым картам не помешает слегка поубавить яркости, ключевое слово СЛЕГКА. Но лучше видеть кислотно-зелëные цвета, чем бледнное месево с яркими (вероятно рекламными) логотипами компаний, которые не просишь и которые только засоряют просмотр.
И вообще - если раскошелились на озвучку целой коллекции разных голосов известных и не очень людей, то что мешает добавить редактор цвета или хоты бы 3-4 темы? Не пользуюсь 2гис в основном из-за бледного и неюзабельного дизайна.

1
Ответить

У карты с кислотными яркими домами минус еще хуже - дома-то видны, а вот дороги и тротуары - нет. Глаз цепляется только за дома, но не за визуальный путь.

Именно поэтому и произошел переход к бледным оттекнкам - легкочитаемость дорог, что позволяет быстрее ориентироваться(это просто особенность человеческого восприятия)

Ответить

Поддерживаю. Сервис хороший, но бледные дома бывает трудно рассмотреть с телефона при ярком дневном солнце

Ответить