Картография T-One

Нам нужно сделать информативную и удобную карту на базе картографического сервиса T-One. Смотрим, что есть сейчас:

Начинаем с изучения популярных картографических сервисов:

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

Видим, что у Гугла и Спутника 90% вьюпорта серые — город выглядит как серая холодная пустыня. Однако за счет этой нейтральности у Гугла хорошо выделяются шоссе и лучше считываются названия улиц. У Яндекса и 2гиса более теплая цветовая палитра — карта выглядит приятней. Но у 2гиса в жилых кварталах слишком сильный контраст зданий и фона, поэтому карта выглядит шумновато.

У Гугла на рассматриваемом масштабе еще не отображаются номера домов. Хорошее решение у Яндекса и 2гиса — отображаются 60-70% номеров, а остальные показываются при увеличении масштаба. Яндекс и 2гис кодируют цветом станции метро в соответствием с цветом веток (тоже берем на заметку).

Инструменты

На первом этапе определяемся с толщинами линий дорог на разных масштабах, цветами зон, шрифтами и размерами подписей. Это огромное количество микроитераций (увеличить на два пункта, уменьшить на пункт, увеличить на полпункта шрифт, изменить 15 раз оттенок парковой или лесной зоны, посмотреть как этот оттенок смотрится на 5 разных масштабах в разном заполнении экрана... и опять сначала).

Используем для этого сервис Mapbox Studio — его картография отличается по детализации и некоторым слоям, зато он позволяет работать с картой «на лету» и сразу видеть вносимые изменения.

В дальнейшем подобранная стилистика перенесется на карты T-One и будет доработана в контексте реальных картографических данных.

Определение цветовой палитры

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

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

Подбор толщины линий дорог

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

Выбор шрифта и настройка подписей

Шрифт на карте должен быть хорошо читаем при искажениях (которых на карте много — ровных прямых улиц практически нет). И при этом довольно компактным (чтобы названия небольших улиц умещались на карте). Редкое сочетание с учетом того, что сжатые (condensed) шрифты плохо переносят искажения и вообще считывыются хуже обычных начертаний. Пока останавливаем выбор на шрифте Meta Offc Pro (кстати, изначально Meta создавалась как шрифт «предназначенный для печати в мелком кегле на плохой бумаге»).

Карта в контексте — геозоны и другие слои

Важно, чтобы карта хорошо считывалась и работала вместе с дополнительными пользовательскими слоями и объектами. Создаем макет с дополнительными элементами, и каждое значительное изменение стилей проверяем на нем:

Работаем с разными масштабами, расставляем акценты, выбираем актуальные информационные слои (например, на средних масштабах показаны линии метро, а на близких – нет – линии неинформативны, когда в просматриваемой области только одна станция – здесь важнее названия переулков, номера домов, расположение светофоров):

Прорабатываем масштабы карты:

Прорабатываем отображение объектов на каждом масштабе и сводим правила в единую таблицу:

Трудились:

Староста
Андрей Калибабин
Арт-директор и дизайнер
Георгий Давитая
Главный инженер
Дмитрий Кельми
Инженер
Алексей Земляков