[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } } ]
{ "author_name": "Philipp Kontsarenko", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 26, "likes": 12, "favorites": 5, "is_advertisement": false, "section_name": "default", "id": "10797", "is_wide": "1" }
Philipp Kontsarenko
3 505

Как разрабатывался новый дизайн карт Maps.me

Экс-руководитель службы дизайна геоинформационных сервисов «Яндекса», основатель студии Urbica Design, разработавшей дизайн карт Maps.mе, Андрей Кармацкий рассказал в своём блоге на Medium о процессе работы.

Редакция vc.ru публикует текст с разрешения автора.

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

Maps.me — как раз тот случай удачного применения данных OpenStreetMap. Это популярное мобильное приложение c офлайн-картой всего мира, Maps.me скачали и установили более 20 миллионов пользователей.

Наша студия взялась разработать дизайн карты мира для Maps.me. Главная задача — учесть сценарии использования продукта и предложить современный и удобный картографический стиль. Основные сценарии использования: ориентирование на карте, поиск объектов и построение маршрутов.

Детально смотрим на то, с чем нам нужно поработать:

Карта Maps.me до редизайна:

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

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

Далее, нужно понять, как используют Maps.me. Помимо стандартной статистики поиска и популярности устройств, просим команду разработчиков поделиться статистикой скачивания карт из разных стран: какую страну и откуда пользователи скачивают. Данных много, нужно как-то их упаковать в понятный вид. Визуализируем.

Распределение загрузки карт, в процентах от общего числа

Интересно посмотреть, какая доля пользователей в каждой стране скачивает свою страну — локальное использование.

Доля локальных загрузок карт от общего числа

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

Какое отношение эта статистика имеет к стилям карты? Точное знание пользователя помогает уточнить задачу и предлагать решения с учётом особенностей использования уже работающего продукта. Выяснилось, что есть страны, в которых Maps.me популярны у местных пользователей, а есть страны, которыми чаще всего пользуются туристы.

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

Создание картографического стиля

Помимо стилистических решений нам порой требовались изменения в самом продукте. Ребята из разработки Maps.me помогали нам с этим, и сложилось ощущение, что наша студия влилась в их команду на время проекта. Ещё и специально разработанный инструментарий для отладки стилей карт оказался очень удобным и выдавал результат, который легко было тестировать прямо на мобильном устройстве.

В итоге, получаем такой концепт:

Карта центра Барселоны в обновлённом стиле

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

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

Отображение ориентиров переработано, выбраны наиболее важные категории POI (point of interest). Также применяется более жёсткая фильтрация объектов — это избавляет от ощущения перегруженности, а по мере увеличения масштаба карты включаются менее важные категории объектов. Для большой части пиктограмм POI используется набор Maki — они прекрасно унифицированы и подходят для использования на карте, при этом, для обозначения метро и различных видов транспорта мы разработали набор иконок специально для этого проекта.

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

Цвета карты были подобраны так, чтобы их различали все пользователи, в том числе и люди с нарушением цветового восприятия (дальтонизм). Это важно, так как ~8% мужчин и ~0.5% женщин не различают некоторые цвета.

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

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

Три стиля карты (сверху вниз): прежние стили, промежуточный вариант (запустился сейчас), концепция дизайна в будущих версиях:

Сегодня Maps.me обновили версию приложения с разработанным нами дизайном карты и активно собирают обратную связь.

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

И раз речь идёт о редизайне, хочется показать, что получилось у нас в сравнении с прежними стилями (было/стало, слева направо).

Европа:

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

Западное побережье Северной Америки:

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

Нью-Йорк:

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

Лондон:

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

Москва:

Впрочем, во многих крупных городах, где развита транспортная система, люди ориентируются по станциям метро и крупным транспортным узлам.

Париж:

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

Учтён важный для пешеходов момент — точное расположение выходов из метро и их обозначение. Как правило в OpenSteetMap станция метро отмечается на месте платформы под землёй (в стороне, до полукилометра от реального входа), но, чтобы туда попасть, человеку с поверхности нужно найти вход в метро на карте.

Упрощать подачу информации — отсекать ненужное на каждом масштабе карты и оставлять только важные для пользователя объекты.

Рим:

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

И ещё одна приятная деталь: в обновлённом приложении есть «ночной» режим — цвета которого подобраны так, что карта на экране не слепит в тёмное время суток. Режим можно включить, набрав «?dark» в строке поиска (и «?light», чтобы вернуть «дневную» карту обратно).

Берлин — ночной режимы карты:

Сейчас в картах Maps.me показывается 385 миллионов различных объектов в нескольких сотнях различных категорий. Благодарим ребят из Maps.me за возможность поработать с таким большим и интересным массивом данных. Это было очень интересно.

#Интерфейсы

{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления