Как и зачем мы внесли 22 тысячи изменений в дизайн Яндекс.Карт / Хабр

Привет, меня зовут Тая Лавриненко, я дизайнер-картограф из команды Яндекс.Карт. Как и всё на свете, карты имеют свойство устаревать, поэтому в течение прошлого года мы проектировали и поэтапно внедряли новый, более сбалансированный стиль Карт. Этот редизайн — одно из самых значимых и заметных обновлений картографического стиля сервиса за последние 5 лет.

Немного предыстории

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

Когда начали набирать популярность смартфоны, Карты столкнулись с задачей сочетать в себе сценарии как для водителей, так и для пешеходов. Кроме того, водитель может интересоваться пробками на дорогах и оптимальным маршрутом, а может искать место для парковки — два разных сценария, для каждого из которых нужны свой масштаб и детализация. С пешеходами всё ещё сложнее. Найти удобный выход из метро, построить маршрут без лестниц или отыскать работающее кафе рядом — использование карт давно не ограничиваются стандартным «проложить путь из пункта А в пункт Б». И у каждого человека свой набор сценариев взаимодействия с картой и требований к ним. Добавьте к этому сложность внутреннего устройства самих карт: больше 200 слоёв геоданных, логика отображения которых меняется в зависимости от выбранного масштаба с 0 по 21, где 0 масштаб — это карта мира, а 21 — подъезд дома.

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

Зачем вообще что-то менять

Яндекс.Карты, как мы выяснили в ходе многочисленных экспериментов и тестов, узнают благодаря их «теплоте» и «автомобильности». Теплота создаётся за счёт жёлтых оттенков базовых элементов карты — общего фона, кварталов, зданий, основных магистралей и других объектов. Автомобильность — акцентом на дорожной сети. Использовать карту для других, не автомобильных сценариев было довольно сложно: кроме толстых линий дорог, она была перегружена одинаковыми чёрными подписями и разными иконками. Да и в целом выглядела тяжёлой и устаревшей, хотя неоднократно менялась с момента своего создания:

_{От автомобильной карты к сбалансированной карте: сместили фокус внимания с дорожной сети на транспорт, метро, иконки достопримечательностей, сетку небольших улиц. Главные магистрали города всё ещё видны, но при этом стали лучше считываться станции метро.}

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

С чего мы начали: проанализировали сценарии использования, настроили логику

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

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

Чаще всего люди пользуются картами, чтобы:

• Ориентироваться, изучать местность
• Искать объекты (по адресу, названию места, категории объекта или даже названию товара)
• Планировать маршруты (авто, общественного транспорта, пешеходные, велосипедные, такси)
• Анализировать тематические слои (пробки, парковки, зеркала и т. д.)

При этом в каждом сценарии человек решает свои задачи, используя разные масштабы:

Так, на обзорных масштабах (с 0 по 8) мы исследуем мир и страны, на средних (8-15) изучаем города, а на крупных ищем нужную улицу, дом (14-21).

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

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

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

_{Разметка геоданных в Народной карте}

_{Визуализация в Яндекс.Картах}

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

_{Добавили коды аэропортов, платные дороги и новые шильды их названий. Изменили отображение населённых пунктов, чтобы крупный город было легче отличить от небольшого населённого пункта с первого взгляда.}

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

_{Ввели новую логику отображения метро: теперь расположение входов на карте соответствует их географическому местонахождению, появилась нумерация.}

Картографический дизайн

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

_{Прототипы стилей в сравнении с продакшен-версией, октябрь 2019}

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

При проектировании стиля важно учиться не только на своём опыте, но и на чужом, находить лучшие решения среди уже существующих. К примеру, карта «2ГИС» выделяется хорошим контрастом, OpenStreetMap — детализацией данных, а у Google Maps на сером фоне лучше считываются цветные иконки организаций.

_{Сравнение картографических стилей разных картографических сервисов}

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

Чтобы сохранить узнаваемость, важно было придерживаться тёплой палитры, как бы мы ни меняли сочетания оттенков:

Стилевая и смысловая преемственность

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

_{По мере приближения к центру города на карте появляется более подробная сетка улиц и транспортные хабы}

_{Так, при увеличении масштаба в парке Горького появляются сначала дорожки, достопримечательности, а потом все остальные объекты инфраструктуры. При сильном приближении можно понять, где есть лужайки для пикника, что, например, на масштабе города было бы не так важно.}

_{Чем ближе, тем детальнее прорисованы здания}

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

_{Дорожная сеть в разных городах}

_{Плотность застройки}

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

_{Сделали контрастные границы стран и дорожную сеть}

_{Систематизировали подписи для населенных пунктов}

_{Для водителей добавили платные дороги, новые шильды дорог}

_{Сделали редизайн иконок и настроили цветные подписи для каждой категории объектов (магазины, аптеки, общепит), чтобы их было легче находить и различать.}

_{Настроили контрастные силуэты зданий}

_{Добавили новую категорию иконок-иллюстраций для главных ориентиров в городе — SuperPOI. Они помогают не только туристам, но и тем, кому нужно быстро сориентироваться на местности: крупные и легко узнаваемые.}

Тем, кто перемещается пешком, пригодятся не только типично городские ориентиры — улицы, достопримечательности и иконки организаций, но и детальная инфраструктура парков:

_{Добавили тропинки и лужайки, чтобы вы могли спланировать прогулку}

За городом тоже стало легче ориентироваться: теперь на Картах больше тропинок, гор, водопадов и родников — мы добавили новые иконки, чтобы их было проще найти.

_{А у горнолыжных курортов появился свой стиль}

С 2019 мы стали показывать внутренние планы для крупных торговых центров, вокзалов и аэропортов. Мы регулярно обновляем и актуализируем их, в том числе благодаря вам — спасибо участникам Народных карт!

А вот так теперь выглядит ночная версия Карт (справа — новый вариант):

_{Тонкие линии, более спокойные цвета — карта не будет ослеплять водителя ночью}

К чему пришли

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

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

Базовая карта стала сбалансированной, ещё более информативной и удобной для всех сценариев пользователя: навигации, поиска, прокладывания маршрута, просмотра пробок или просмотра маршрута автобуса.

Недавно мы зарелизили новый стиль пробок. Подобрали более насыщенные и контрастные цвета и перенастроили логику отображения. Теперь толщина линии пробки зависит от класса дороги: на МКАДе линия будет шире, чем на обычной улице. Фокус сместился на проблемные участки дорог и развязки. А чтобы люди с нарушением цветового восприятия могли лучше ориентироваться в дорожной ситуации, мы добавили зависимость длины линии пробки от степени загруженности: чем сильнее пробка, тем короче линия паттерна.

Для режима навигатора мы спроектировали специальный стиль с акцентом на дорожную сеть:

И у нас большие планы на следующий год. Уже отрисованы более 200 новых иконок с популярными ориентирами для 14 городов:

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

Два интерактивных примера (отступы такие больше из-за интеграции с Хабром; полноэкранные версии тут и тут):

7 функций «Яндекс.Карт», о которых вы могли не знать

20 ноября 2018AndroidiOS

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

Поделиться

0

1. Поиск общественного транспорта

В крупных городах мобильное приложение «Яндекс.Карты» можно использовать для поиска общественного транспорта. Сервис в режиме реального времени показывает, где находятся автобусы, троллейбусы, трамваи и маршрутки.

Для этого в настройках приложения должен быть активирован слой «Движущийся транспорт». На карте его отображение включается при помощи нажатия на иконку автобуса в выпадающем списке слоёв в левом верхнем углу.

2. Умный поиск по общепиту

Чтобы найти место, где можно пообедать или просто взять кофе с собой, совсем необязательно открывать категорию мест «Где поесть» и перебирать предложенные заведения поблизости. В поисковой строке можно просто набрать то, что вам необходимо. К примеру, «бизнес-ланч», «роллы», «кофе». Такие запросы заметно сузят круг вариантов и позволят заметно сократить время поиска.

3. Масштабирование карты клавишами громкости

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

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

4. Поиск бесплатного Wi-Fi

При отсутствии мобильного интернета приложение «Яндекс.Карты» может помочь вам найти точку с бесплатным Wi-Fi. Нужно лишь предварительно загрузить карту города для работы в режиме офлайн и после набрать в поиске «вайфай» или «wi-fi».

При наличии мобильного интернета запросы могут быть более сложными. К примеру, можно искать «бар с wi-fi», «кальянная с wi-fi» и так далее.

5. Быстрый вызов такси

Не все знают, что при помощи «Яндекс.Карт» можно моментально перейти к сервису «Яндекс.Такси», вызвав авто до указанного места назначения. Для этого нужно лишь построить маршрут и сдвинуть список вариантов перемещения влево, открыв иконку такси.

При нажатии появится кнопка вызова машины, которая перенесёт вас в приложение «Яндекс. Такси», где будет построен маршрут к той же точке, что и на «Картах». Вам останется лишь выбрать тариф и запустить поиск.

6. Определитель номера

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

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

7. Панорамы из прошлого

Слой карт «Панорамы» позволяет буквально перенестись в любое доступное место, чтобы осмотреться и проверить наличие каких-то визуальных ориентиров. Его интересной особенностью является возможность просмотра изображений многолетней давности, что позволяет узнать, как место выглядело 5, а то и 10 лет назад.

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

Загрузить

Цена: Бесплатно

Загрузить

Цена: Бесплатно

Читайте также 🧐

• 13 расширений для «Яндекс Браузера», которые пригодятся каждому
• Как управлять «Яндекс.Музыкой» из любой вкладки браузера
• «Яндекс.Навигатор» предупредит о камерах и ДТП даже без построения маршрута

android — Как включить основные элементы управления Yandex Mapkit? Как добавить маркер на карту?

спросил
2 года 10 месяцев назад

Изменено
8 месяцев назад

Просмотрено
1к раз

Я использую Яндекс MapKit в своем приложении для Android. Документации очень мало и она совершенно бесполезна. Я сделал базовую настройку. Карта работает нормально. Но у меня проблемы с:

1. Как добавить маркер на карту? Я попробовал код, который они предложили:

 val mapObjects = mapView.map.mapObjects.addCollection()
       val mark: PlacemarkMapObject = mapObjects.addPlacemark (точка (X, Y))
       отметка.непрозрачность = 0.5f
       mark.setIcon(ImageProvider.fromResource(requireContext(), R.drawable.ic_heart))
       mark.isDraggable = истина
 

Не работает и маркер не отображается на карте.

2. Но я хотел бы включить некоторые другие элементы управления, предлагаемые картой. Например, увеличить и поискать. Посмотрите на картинку:

Как я могу добавить эти элементы управления на мой mapView ? Любые предложения будут ценны.

• android
• yandex
• yandex-mapkit

Вам нужно добавить их программно или с помощью построителя интерфейса (не знаю правильного имени в студии Android) в качестве пользовательского представления, а затем реализовать любую логику, которая вам нужна. Yandex Map Kit не предоставляет какой-либо реализации по умолчанию.

если добавить иконку маркера svg на яндекс карту
ты делаешь так:

 класс AddMarkerActivity : AppCompatActivity() {
// изменить это местоположение
    private val endRoute = Point(41.275548, 69.204386) // 69.197425, 41.256773
    private val endRoute2 = Point(41.273366, 69.210980) // 69.197425, 41.256773
    private val endRoute3 = Point(41.282035, 69.213861) // 69.197425, 41.256773
    private val endRoute4 = Point(41.277995, 69.229924) // 69.197425, 41.256773
 приватный lateinit var mapView: MapView
переопределить удовольствие onCreate(savedInstanceState: Bundle?) {
        MapKitFactory.setApiKey("Ваш_Яндекс_API_Key")
        MapKitFactory.initialize(это)
        DirectionsFactory.initialize(это)
        super.onCreate(сохраненныйInstanceState)
        setContentView (R.layout.activity_draw_route)
        mapView = findViewById(R.id.yandex_map)
        mapView.setOnClickListener {
            toast("${(это как MapView). focusPoint.x} , : , ${it.focusPoint.y}")
        }
        userLocation.setTapListener {
            Log.d("TTT", "местоположение: ${it.latitude} ${it.longitude}")
        }
       DrawLocationMark (endRoute, mapView)
       DrawLocationMark (endRoute2, mapView)
       DrawLocationMark (endRoute3, mapView)
       DrawLocationMark (endRoute4, mapView)
    }
   личное развлечение drawMyLocationMark (точка: Point, представление карты: MapView) {
      val view = View(this).apply {
     фон = getDrawable (R.drawable.ic_baseline_location_on_24)
     }
     mapview.map.mapObjects.addPlacemark (точка, ViewProvider (представление))
    }
}
 

2

макет активности

 

     yandex.mapkit.mapview.MapView
        android:id="@+id/yandex_map"
        Android: layout_width = "match_parent"
        android:layout_height="match_parent" />

 

2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Яндекс.

Карты теперь поддерживают Android Auto, но только в России

Дэмиен Уайлд

– 17 августа 2021 г., 1:04 по тихоокеанскому времени.

@iamdamienwilde

Ответ России на Google теперь расширяется, добавляя Яндекс.Карты к головному устройству Android Auto в автомобиле.

За последние несколько месяцев в Android Auto появился целый ряд навигационных альтернатив Google Maps, таких как Waze и TomTom, предоставляющих разумные сторонние опции. Согласно Android Police , Яндекс.Карты теперь доступны на Android Auto, если вы находитесь в России.

Они отмечают, что вы даже не можете протестировать его, даже когда пытаетесь подделать свое местоположение, чтобы оно загружалось за пределами региона. Так что это хорошее дополнение для тех, кто в России, но Яндекс.Карты, скорее всего, не будут поддерживаться на Android Auto где-либо еще, по крайней мере, какое-то время, если вообще будут. AP также отмечает, что эта функция могла быть добавлена ​​в выпуске версии 10. 5.0, выпущенном в прошлом месяце. В Play Store версия 10.5.1 указана как самая последняя сборка, поэтому она, вероятно, ускользнула из сети из-за региональных ограничений.

Для тех, кто может использовать Яндекс.Карты со своим автомобилем с поддержкой Android Auto, вам также потребуется подписка на Яндекс Плюс, чтобы начать работу. Это стоит около 2,30 долларов в месяц или 169 рублей, что не так уж и плохо, если картографические данные надежны. К сожалению, мы не можем поручиться за точность и актуальность указаний и общих картографических данных, поскольку на данном этапе они не работают за пределами домашнего рынка Яндекса.

Тем не менее, вы можете использовать стандартное приложение Android на своем смартфоне, и оно кажется довольно надежным. Таким образом, мы ожидаем, что Яндекс.Карты станут достойной альтернативой Google Maps в автомобилях с поддержкой Android Auto в регионах, где покрытие фирмы Mountain View не совсем полное.

Подробнее об Android Auto:

• Android Auto тестирует новые «Media Picks» для музыкальных рекомендаций со специальной кнопкой
• Некоторые пользователи Android Auto месяцами не видели значок погоды; Google работает над этим
• Последнее стороннее навигационное приложение Android Auto — Gaia GPS, предназначенное для исследования отдаленных районов

FTC: Мы используем автоматические партнерские ссылки, приносящие доход.

This entry was posted in Популярное