Москва больше не будет прежней

4 октября 2012, 14:59

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



Удобно? Думаю, что нет.

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


Если коротко, то цель оформления карт звучит очень коротко:
Сделать карту удобнее для использования.

За лаконичностью этой формулировки скрывается множество интересных деталей реализации.

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

Мы изучили обратную связь от пользователей и экспертов в области дизайна, систематизировали знания о проблемах и, после серии обсуждений, сформулировали для себя следующие требования к «удобной карте»:

- наша карта должна обеспечить максимальную «читаемость» объектов на карте;

- карта должна быть по-прежнему узнаваемой и привычной для пользователей Яндекса (это было непростое требование – менять дизайн и при этом постараться сохранить то, к чему пользователи привыкли);

- на карте должны хорошо быть различимы слои отображаемых объектов (например, результаты поиска, пробки);

- при распечатке карты на чёрно-белом принтере, карта должна быть достаточно контрастной и объекты разных типов должны быть различимы;

- в новом дизайне для некоторых территорий нужно предусмотреть возможность двуязычных подписей объектов (для карты Киева мы это уже сделали, например);

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

- новый дизайн должен предусматривать два варианта использования: просто карту как картинку, по которой уже можно ориентироваться, а также как инструмент для отображения каких-либо данных (например, результатов поиска). При этом дизайн должен быть один;

- дизайн карты будет использоваться на Яндекс.Картах как в браузере, так и в мобильном устройстве, кроме этого карту мы предоставляем сторонним сайтам и мобильным приложениям посредством технологий API и MapKit

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

Важно отметить, что картой у нас пользуются и пешеходы, и автомобилисты. Например, для московских автомобилистов самые важные ориентиры города – это магистрали: радиально-кольцевая структура должна легко считываться на всех масштабах карты. Для пешеходов важны районы и станции метро (которые иногда оказываются важнее при ориентировании, чем районы). Непростой задачей было соблюсти баланс этих двух групп пользователей и сохранить удобство использования картой.

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

 

На этом масштабе проработали подписи районов, а вокзалы выделили более заметными значками:

 

И на этом масштабе работа со стилями магистралей сделала картинку «чище». Плюс на этом масштабе появились подписи станций метро – для Москвы это очень важные ориентиры.

 

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

 

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

 

На следующем уровне масштабирования автомобилистов ждёт приятный сюрприз. Мы добавили стрелки направления движения; учитывая многочисленные односторонние улицы в центре, карта стала удобнее. Между прочим, летом подобным нововведением мы порадовали автомобилистов Санкт-Петербурга.

 

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

 

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

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

Команда Яндекс.Карт

91 комментарий
Подписаться на комментарии к посту

Проработка карты нравится. Но новая палитра красок отталкивает. А также смущает обновленные снимки со спутников. На ст. метро Юго-Западная вообще безобразие какое-то. 

Согласна: Солнцево и Очаково в облаке - это отвратительно! :(

да, палитра цветов стала блеклой

В целом, дизайн стал похож на цветовую палитру Народных карт.

НО, растительность (зеленый цвет) и вода (синий) стали бледнее. Верните насыщенность этих цветов.

Совершенно согласен. Зеленый точно стал менее приятным глазу :) Прошлый вариант именно по цветам был оч вкусный :)

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

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

 

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

 

Может картинка стала и "чище", но из нее исключили пешеходов как класс.

Согласен. Раньше различные объекты очень чётко отличались друг от друга на карте: дома, промзоны, леса, реки. Теперь же всё "потускнело" и при быстром взяглде на карту не сразу понятно, где дом, а где завод, где огромный ТЦ или пустырь, а где парк.

Как же точно вы отразили мои ощущения! У меня карты еще в четверг где-то в 6 вечера обновились. Я сразу обалдел от цветов. До сих пор привыкнуть не могу. Всё сливается, ничо не пойму где что есть.

 

согласен. это уже не яндекс.карты, а гугл мэпс какой-то. бе

Спасибо за внимание к метро! И за дорожки в парках :)

В остальном, надеюсь, вы не будете двигаться дальше в сторону гугл карт, упрощая и делая все еще более однотонным. 

Когда будут здания трехмерными с учетом высоты?

когда кгб разрешит

Олег Какойтов
4 октября 2012, 18:52

хм... Уже есть, но не тут.

ок
осталось убрать стрелки в пробках на мобильных картах
Зачем если улица двухсторонняя понятно в какую сторону пробка
на улице прорисовываются пробки обоих направлений, поэтому стрелки не нужны

не согласен. стрелки не мешают, а только дают информацию о направлении "движения" пробки.

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

ваш пример в самом начале напоминает стиль Toner от Stamen, которые вам помогали с дизайном :)

Вот только теперь некоторые кварталы остались без номеров домов на первом масштабе с номерами:

http://maps.yandex.ru/-/CVqZqEKw

Почему линии метро не сделать в виде отдельного слоя как на гуглокартах? Часто хочется видить линии и на других масштабах.

+500

Слои именно для этого и придумали, чтобы выбирать..

Тоже об этом хотел написать! Полностью поддерживаю!

Поддерживаю идею!

+100500, и вообще все значки остановок общественного транспорта туда же, в один слой!

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

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

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

Круто! Молодцы!

За развязки и долгожданные стрелки отдельное спасибо!

 

да, стрелки на развязках - зачет!

Спасибо ребята, хорошо поработали! Цветовая схема лучше прежней! Но снимки со спутика ещё паршивые! 

Как скоро будут карты городов Казахстана, кроме Астаны и Алматы?

А когда планируется обновление МЯК под новую карту? 

В МЯК уже новая карта.

Зачёт!

наконец-то дождались

а мне новая цветовая схема больше нравится..

 

Молодцы!

Но линии метро действительно можно отдельным слоем сделать.

Подтянули тона, что разумно и поуже сделали дороги. 

Мониторы сильно изменились, стали больше, больше точек на дюйм, так что очень разумно изменить карты соответственно времени. 

Молодцы. Стало понятнее.

Карта оч. понравилась, особенно развязки и стрелки направления движения.

...на радостях стер кэш + сохраненную Москву "Август 2012"...

и скачал по новой, а там все по старому...:-@

похоже пока не обновили для закачки...

 

у меня 2 вопроса:

 

1. когда Я-Карты научатся писать названия улиц поверх слоя пробок?

 

2. когда цвет синей линии Маршрута перестанет сливаться с синими линиями слоя Панорамы? 

Попробуйте попасть мышью в линию маршрута так, чтобы увидеть соответствующую панораму, скриншот:

http://cl.ly/image/0X0s3h1y0U3p

Олег Какойтов
4 октября 2012, 17:59

Чуток на рамблер-карты похоже... "trololo"


Но да, стало теперь на карте "по-спокойнее", без рези и яда в глаза.
Развязки тоже штука очень полезная и теперь понятная.

Не понимаю почему так принято ругать советское наследие. Здесь - ещё один пример. Посмотрите печатные карты 70-х годов. Один-в-один! Классика не стареет...

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

"мы не забывали о людях с ограничениями по зрению"

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

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

Давайте прольем реки на дороги, да. Это будет "дорога свободна", а желтый сделаем "всё стоит" а красный будет "кое-как едет". Зато одному из десяти будет удобно.

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

столь категорично рассуждал KoKosov, правда запись почему-то оказалась удалена.

 

Там предлагалось в ОБЫЧНОЙ версии Я.карт сделать другие цвета для пробок. В качестве основных цветов предлагался СИНИЙ и на выбор желтый или красный. Вот и выбирайте.

 

А решение конечно можно найти — в настройки вынести соотв. опцию для красно-желтых дальтоников. И все довольны.

А вот осуждать создателей карт и обвинять их в том, что они не сделали пробки с СИНИМ цветом чтоб было удобно 10% мужского населения — это эгоизм. Именно по умолчанию предлагались такие цвета, типа "вам, не дальтоникам, и так различимо, а нам хоть юзабельно станет"

Верхотуров Дмитрий
5 октября 2012, 09:23

Красно-зелёный дальтоник - автолюбитель? Искренне думал, что на это-то и проверяют на медкомиссии, которую нужно пройти перед получением прав.

У меня нет машины. И прав тоже нет. И не нужно оно мне.

- Я вообще не понимаю, зачем москвичам машины...
- Ну как зачем? Музыку послушать, фильмы посмотреть...

(c)

Но периодически вот мне кто-нибудь звонит, "алё, ты дома, у компа? Посмотри, плиз пробки на улице.... А, извини, забыл..." ;)
Верхотуров Дмитрий
5 октября 2012, 09:27

Забавно, ведь получается, что эти-то 10% за рулём находиться и не могут.

Могут. Права теперь получить без проблем. Но мне оно не нужно.

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

Цвета светофора и цвета на картах разные. Лунно зеленый на светофоре не пересекается у дальтоников с ярко красным светофорным. Если бы в Яндекс пробках пробки были как светофор - то проблем бы не было.

Небольшое уточнение. Цвета на светофорах, где лампочка за цветным стеклом (старые совецкие) различаются без проблем. Современные светодиодные (или какие они там, в точечку) - уже почти сливаются.

Я, например, не водитель, но с красно-зелёным у меня тоже иногда проблемы, а пробки всё равно нужны, например, для проезда на ОТ. И да, отличить красный сигнал светофора от зеленого намногго легче, чем красные и зелёные участки пробок.

Трофимов Павел
8 октября 2012, 08:52

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

Пробки актуальны для подавляющего большинства пассажиров наземного транспорта, представьте себе!

Увидев новые карты - первым делом подумал что по умолчанию запустили слой НЯК, очень уж гамма похожа.

Прошлый вариант был контрастнее, теперь всё какое-то блеклое, даже на мониторе, не говоря уже про смартфоны на солнце, где белые дороги будут сливаться с почти белой подложкой.

И куда подевалось название Тверской на 14ом уровне ? Хорошо хоть не улицей Горького обозвали, но степень бага та же.

Ну а в целом очень медленно развиваетесь. Где 3D дома, как на 2GIS, хотя бы в НЯК ? Где общий векторный слой, одинаковый для карт и навигатора на смартфонах ? Ваш Навигатор - лучшее по скорости, что только может быть среди карт на Андроиде, но по размеру данных - учитесь у MapsWithMe или купите их. Где API для Москвы с конкретными функциями, завязанными на МКАД (расстояние по МКАД, удалённость от МКАД) без велосипедов для каждого сайта, которые ломаются как сегодня (например Таксивик сегодня сломался из-за вашего обновления и неправильно пишет расстояние по МКАД).

для смартфонов есть отдельные приложения где используются свои стили.

люто плюсую.

Карты действительно стало проще читать. Спасибо. 

это всё хорошо
совсем было бы здорово, если бы на мобильных яндекс.картах вернули функцию "названия и номера поверх пробок".
Очень неудобно со включенными пробками ориентироваться..
©ШвЕц АрTёМ
4 октября 2012, 21:53
А когда вы «мою» карту Пикалево с НЯК в Яндекс.Карты перенесете? )))
Ваше красота стала, особенно, метро и развязки молодцы)) Пешеходы не забыты - радует)
Интересно узнать какое отношение у команды Я.Карт к MapsGL и векторным картам? Планируется ли перевод Я.Карт на MapsGL подобно Google Maps?

Если бы Вы сделали цветовую гамму как в приложении Карты iOS 6 ......Цены бы не было!:-)

Маркировка ТТК ужасна. 

 

ТТК ТТК ТТК пустоооооооооо ТТК ТТК ТТК

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

Круто!

Действительно стало приятнее смотреть.

И огромное спасибо за развязки!

Отличная работа. Стало значительно лучше.

Замечание: на 2х самых крупных зумах (максимальное приближение) дворовые проезды и асфальтированные пешеходные дорожки (например в парке) отрисовываются одинаковой линией.

А что же с кэшем? Почему в программе скачивает старый кэш? Ну почему же нельзя было обновить и скачку кэша целиком сразу ? Накололся с этим теперь, все стер, думал новый скачаю, а там опять старый. И теперь грузит все время все по новой. Учитывая наш мега интеренет это не удобно, раньше хоть только пробки качал... В общем опять пользоваться нельзя...
проверьте, пожалуйста, в пятницу вечером кэш должен был обновиться
Да обновился. Там правда еще косяки наблюдаются. На двух самых близких масштабах, у меня это 100 и 50 метров, всё равно требуется подключение к сети, то есть полный то он полный но эти масштабы выходит, что не входят в этот полный кэш?

Очень большое предложение!

Сейчас под стрелками пробок не видно названий улиц!

Т.е. приходится отключать пробки, находить нужную улицу, и после этого обратно включать пробки...

Заранее спасибо... 

названия улиц намертво нарисованы на самой карте, пробки же отдельно накладываются. это yandex design bug

Очень большое предложение!

Сейчас под стрелками пробок не видно названий улиц!

Т.е. приходится отключать пробки, находить нужную улицу, и после этого обратно включать пробки...

Заранее спасибо... 

Очень большое предложение!

Сейчас под стрелками пробок не видно названий улиц!

Т.е. приходится отключать пробки, находить нужную улицу, и после этого обратно включать пробки...

Заранее спасибо... 

Очень большое предложение!

Сейчас под стрелками пробок не видно названий улиц!

Т.е. приходится отключать пробки, находить нужную улицу, и после этого обратно включать пробки...

Заранее спасибо... 

Очень большое предложение!

Сейчас под стрелками пробок не видно названий улиц!

Т.е. приходится отключать пробки, находить нужную улицу, и после этого обратно включать пробки...

Заранее спасибо... 

Вот бы все делали такие ченжлоги :)
Сергей Титов
6 октября 2012, 11:50

Дороги намного информативнее стали, особенно тунели и мосты. Жду таких же изменений для всей России.

Класс!! спасибо!! вы лучшие!

Открыл на ios МЯК, выползло сообщение что обновился дизайн и нужно обновить карты, чтоб они загружались из кэша. Но блин, чтоб обновить - нужно для начала очистить ВЕСЬ кэш!!! Вы чего народ, неужели сложно сделать кнопку удаления одной карты, а еще лучше кнопку ее обновления! А если у меня 10 карт разных городов в кэше? Ради Москвы я должен грохнуть все? Ну почему у всей команды разработчиков ниразу не возникло этого вопроса?

Или это я не знаю как обновить ОДНУ карту? Так просвятите пожалуйста, а то это совсем не очевидно.

Дороги лучше стали, да, станции метро тоже - но вот цвета остального вокруг сильно ухдшились. Верните пожалуйста предыдущие!

Линии метро ненастоящие - пролегают не там, где на самом деле. И хочется видеть их не на этом уровне масштаба, а и, скажем, когда на экране видно половину города.

если уж вы задумали глобальное обновление с привлечением специалистов из-за рубежа, почему бы не сделать все по-человечески? вектор, слои, названия, многоязычность, не?

Мне не нравится новый дизайн карт, в версии 2.20 карты были красивее. Нумерация домов была даже на маленьком увеличении. Ещё в в старой версии автовращение карты было отключено по умолчанию. Но при старых картах, категорически не работает виджет карт на экране. Информация на нем нее обновляется! Сейчас поставил новые карты. Пока мучаюсь. Автовращение работает от легкого касания :( Виджет поначалу работал, потом перестал обновляться.... Будем ждать, пока исправят.
Самсунг галакси нот.
Извините,если не совсем в тему..

Дорожки в парках – это пять!

 

То, что сделали значки метро разными цветами – тоже пять! Однако, почему только в таком масштабе? В менее крупном уже обычные значки, когда непонятно, какая ветка - :(((

 

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

 

С новой прорисовкой магистралей теперь на карте, действительно, теперь стало меньше «шума» - неожиданно и очень комфортно.

 

Снимки со спутников стали гораздо четче – или я ошибаюсь???

 

В общем, вывод – крайне приятственное ощущение от обновленной версии Яндекс.карт! Спасибо за работу!

После обновления маршруты в картах и на яндекс нави стали рисоваться неправильно. До обновления маршруты не вели хотя бы на авто через пешеходные мостики! А сейчас по три раза на маршруте!

 

Мое мнение такое, Ребята очень хорошо работают, развивают проект. Очень многое стало удобно.  Конечно же, много недоработок, но все поправимо я надеюсь. Большая просьба и думаю, многие поддержат как на этой карте, так и на мобильных версиях улицы лежат под пробками, что доставляет, мягко скажем некоторые неудобства.  Также хотелось бы видеть более логичный просчет маршрута мимо пробок, например: три варианта 1. Через пробку, 2. В объезд пробки, 3. Через менее загруженные улицы.  В общем, ребята надеемся на развитие. 

Хотелось бы попросить команду яндекс карт внести поправку небольшую.

Я через самоуправление (новая функция в картах как я понял) внес данные но они не поменялись.

В общем суть в том что оба этих адреса теперь 1 школа ГБОУ ЦО 1240 Хотелось бы что бы поправку в карты внесли, ниже адреса и краткое описание

Россия, Москва, метро Белорусская большой кондратьевский переулок 3      Старшая школа и адмиристрация

Россия, Москва, метро Белорусская Средний кондратьевский переулок 2а Начальная школа и детский сад

 

На последнем скриншоте первого поста по-моему косяк несовершенство: крупная надпись "МКАД, 94-й километр" закрывает собой добрую треть развязки. Как бы так сделать, чтоб надписи не где попало выскакивали (типа "поближе к центру экрана"), а в зависимости от содержания, т.е. между объектов, а не на них.