Графика и типографика нового 2ГИС



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

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

    Работая над новым 2ГИС, мы искали не только удобные и эргономичные интерфейсные решения, но и уникальный графический язык карты и справочника: запоминающийся, комфортный и цельный. Мы хотим рассказать вам про ключевые элементы графики новой версии.

    За полтора года дизайн карты 2ГИС прошёл долгий путь — появились новые цвета, трёхмерные здания и 3D-модели достопримечательностей. В новой версии нам нужно было обратить внимание на данные, показанные на карте. А особенно на маркеры организаций — важные идентификаторы в картографических сервисах. У каждого из них свой, запоминающийся маркер, являющийся своего рода визитной карточкой.



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



    Кроме этого, мы предъявляли ещё одно требование к форме маркера. Нам была важна преемственность формы в карточке, которая открывается при клике по этому маркеру. Эксперименты продолжились.



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



    Следующим шагом был поиск темперамента справочника.

    Справочник — это большое количество текста. Поэтому шрифт справочника — один из основных идентификаторов, работающих на узнаваемость и характер справочника.



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



    Требование ёмкости строки в длинных названиях нас быстро вывело к суженным, конденсным шрифтам.

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



    Поскольку 2ГИС преимущественно русскоязычный сервис, мы пригляделись к шрифтам с кириллицей.

    Выбор оказался не богат. Мы уделили внимание двум кандидатам. Подставляя их в разные справочники мы смотрели на:
    • Ширину штриха. Заголовок карточки не должен быть чёрным пятном и не должен быть слишком лёгким.
    • Трекинг. Без изменения авторского трекинга мы должны иметь комфортный ритм знаков в строке.
    • Хинтинг. Шрифт должен чётко выглядеть во всём парке браузеров и мобильных устройств.
    • Лицензия. Стоимость лицензии должна быть разумной, ведь в перспективе шрифт придется тиражировать на более чем 20 000 000 пользователей 2ГИС.

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

    Всё это время мы параллельно работали над освежением бренда 2ГИС и заметили на шрифтовом рынке студию, разрабатывающую шрифт с близкими нам формами.


    Swiss Typefaces — швейцарская словолитня, возглавляемая Йаном Пати, работала над шрифтовой семьёй Suisse. Графика этого шрифта была нам близка. Несмотря на то, что в их публикациях на тот момент не фигурировал конденсный шрифт, мы связались со студией. Вселенная нас подслушивала, оказалось, что Йан работает над конденсом к своему Suisse BP Int’l и заинтересован в пополнении шрифтовой семьи кириллицей. Мы договорились о сотрудничестве.

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



    Итогом сотрудничества стала замечательная пара Suisse BP Int’l Condensed и Condensed Bold.



    В этом шрифте авторам удалось сделать комплименты традиционной Helvetica и освежить её пластику грациозными ходами.



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

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



    Эти и многие другие ходы позволили нам создать графический язык, который вы уже можете видеть на beta.2gis.ru и увидите в будущих продуктах 2ГИС.

    2ГИС

    169,00

    Карта города и справочник предприятий

    Поделиться публикацией

    Похожие публикации

    Комментарии 57
      +11
      Захватывающие описания восхитительных изменений!
        +13
        Очень клевая статья, побольше бы таких, особенно о крупных проектах. И хочется еще подробностей)
          +7
          Ребят, расскажите про сглаживание и загрузку шрифтов, это очень интересно было-б!
            +7
            Про сглаживание. Хинтинг шрифта остался авторский. Swiss Typefaces хорошо подготовили его. Про загрузку шрифтов хорошо может рассказать Тим Chaptykov, один из наших фронтэнд мастеров.
              +2
              Пока вряд ли смогу чем-то удивить. На стадии беты мы подключаем шрифт напрямую. В релизе будет отдельная версия шрифта для каждой локализации.
                0
                А какое будет решение проблемы кривого (с зазубринами, дефектами и др.) рендеринга шрифта? В частности на Windows и экранах «обычной» плотности пикселей?
                  0
                  Проблема известна. Будет новая версия шрифта, где будет решена эта проблема.
              +5
              Программа просто незаменимая!
              Убедился в этом в Москве.
              Когда ждать карты для Харькова?
                0
                Думаю, можно вот тут почитать
                company.2gis.ua/odessa/franchise/
                и задуматься ;)

                Если пока нет, то может… создать?
                +3
                Очень понравилось, что в бете карта занимает вообще всю площадь окна браузера, без всяких панелек, бордеров и т.д. Сразу смотрится как-то по-другому.
                  +1
                  Нуууу круто! :) Только, как я понял, в бете у вас не самые свежие карты — того же метро «Жулебино» ещё нет, а так хотелось посмотреть о маршрутах ОТ до него :)
                  В любом случае молодцы.
                    +7
                    У нас пока что процесс выкатки тайлов на онлайн привязан к ежемесячным сборкам данных. Жулебино появится уже в это воскресенье, 1-го декабря.
                    В будущем планируем перейти на ежедневные обновления карты — так же, как у нас сейчас обновляются справочные данные.
                    0
                    А мне очень интересно, я конечно не житель Екб, но не узнал бы город по идентификатору. Лично мне более узнаваем был бы купол цирка. А что думают местные?
                      +1
                      Я присоединюсь, но по поводу Донецка.
                      Думаю, символ пальмы Мерцалова был бы более узнаваем.

                      Изображение
                      image
                      +1
                      Родной Ульяновск с Ленином ассоциируется, но не со странным куполом с крестом…
                        +1
                        Нижневартовск из нефтяной столицы стал рыбной :-)
                        +4
                        Очень круто!
                        Особенно понравилось про сотрудничество со швейцарской студией.
                          0
                          Посмотрел бету.
                          Товарищи из 2gis не относят кафе на первом этаже своего бизнес центра к группе «поесть».

                          Что для меня очень символично =))
                            +2
                            Оказывается, я не туда смотрел…
                            Прошу прощения.
                            0
                            Иконки городов — это очень круто. Не думали, кстати, использовать официальные логотипы для городов, у которых они есть (например, Пермь, Ярославль)?

                            Для Ульяновска колонна с герба целиком была бы более узнаваема, чем только ее верхушка (то бишь корона, которая сама по себе совсем не про Ульяновск).
                              +14
                              По первым двум ссылкам, упаси боже их использовать.
                                +8
                                Надеюсь, вы шутите.
                                  +1
                                  Да нет, почему шучу.

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

                                  Власти города для того и заказывали логотип, чтобы его потом применяли как идентификационный знак в случаях, когда ни флаг, ни герб не могут использоваться.
                                    +1
                                    В какую еще вкусовщину? Все эти «простые» логотипы во-первых, чудовищно вторичны (что проверяется простым search by image), во-вторых, на столько просты, что на карте они будут восприниматься как непонятное нечто.
                                    Зачем власти города заказывали логотип — это вообще отличный вопрос. Сейчас пошла мода подменять реальную работу дизайном. На этом можно и украсть много, и оправдать расходы на «имидж», «чтобы было красиво» — очень просто, ровно как и просто заклеймить противников такого рода реинкарнации «потемкинских деревень», заявив, что они против того, чтобы было красиво и хорошо.
                                      0
                                      Я имел в виду, что логотип как вообще явление существует как раз для таких случаев. Логотип в виде авиамотора и флага Баварии идентифицирует автомобили BMW, а крыло Ники — Найк.

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

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

                                      Понимаю, конечно, ваши эмоции про распилы и откаты, однако к делу они имеют мало отношения. Есть факт — у некоторых городов существуют готовые логотипы. Есть еще один факт — компании 2ГИС потребовались значки для городов. Вот мне и захотелось узнать, в первую очередь, от представителя 2ГИС, не думали ли они в этом направлении.
                                  +4
                                  Конечно, мы рассматривали логотипы от Студии для этих городов. Но оба лого пока сложно встроить в этот сет. Для Одессы мы ссылаемся на лого города, например. А в Старом Осколе (официальный герб — ого), ссылаемся на кокошник барышни из логотипа шоколадной фабрики Славянка, которой гордится Старый Оскол
                                    0
                                    Спасибо за ответ!

                                    Как раз заметив прекрасный одесский якорь, я и решил спросить про логотипы городов в целом.
                                  +1
                                  Пиликов, привет, земляк :)
                                  2:6009/10
                                    +2
                                    И еще про иконки: У Саратова стерлядь смотрится как-то неопрятно из нижних плавников.
                                      +6
                                      Дорогие друзья и комментаторы, мы продолжаем развивать сет иконок городов и будем внимательно изучать ваш фидбек, в том числе здесь, в комментариях.
                                        +4
                                        У Челябинского верблюда три ноги
                                        +2
                                        Шрифт не планируете разрешить использовать?
                                          +4
                                          Как это?
                                          Судя по рассказу, он принадлежит швейцарцам, и для 2гис только лицензирован (хотя и, наверное, на особых условиях).
                                          Любой желающий его может купить на общих основаниях.
                                          +2
                                          Ваш новый маркер напоминает штуку, которой берут кровь из пальца, я не могу смотреть на него без содрагания.
                                            +1
                                            А я сижу думаю — что он мне напоминает?! Перо? Похоже, но в голове крутится что-то ещё… И точно.
                                            Но даже без этой ассоциации маркер не понравился — какой-то он надуманный. Видно, что хотели сделать непохоже на конкурентов и перегнули палку с оригинальностью.

                                            Шрифт — напротив, очень круто.
                                              +5
                                              мне кажется, это похоже на олдскульный советский номер дома, типа таких

                                              image image
                                                +2
                                                Хм, это не «олдскульные», а какие-то новоделы.
                                                Вот советские оригиналы:
                                                image
                                                image
                                              –4
                                              не клизма и то хорошо. минуточку…
                                              +3
                                              Не знаю как другие, но знак (герб) Красноярска надо переделать, у нас лев держит серп и лопату, а у вас получилось что он какое буги-вуги танцует. Да и сам лев как то сильно на коня смахивает.
                                                0
                                                Буги-вуги здорово же)
                                                Раслабтесь, у нас официальный герб козла носит ;)
                                                –7
                                                Лучше бы интерфейс андроидовской версии поправили, там есть реально неудобные места.
                                                  –5
                                                  А у меня почему-то в последнем FF beta.2gis.ru вообще не работает
                                                  картинка 68кб

                                                    +7
                                                    Какая же у вас приятная и лаконичная тема браузера, прямо глаз радуется. Особенно хорошо выглядит на вашем широком мониторе!
                                                    –1
                                                    В попытках изобрести что-то уникальное, можно зайти довольно далеко. 2ГИС и так имеет достаточно узнаваемый стиль и уникальный набор потребительских свойств.
                                                    У меня есть несколько замечаний, которые, могут прозвучать субъективно, но я все равно их выскажу:

                                                    Есть ощущение что компания включилась в гонку редизайнов — это довольно затратное занятие, отдача от которого спорна: это информационный повод для привлечения новых пользователей, но того же эффекта можно достичь рекламой; нелояльные пользователи тоже поудивляются, покрутят, но им до лампочки сервис, так что толку в итоге ноль; лояльным пользователям придется привыкнуть к новому (это не все воспринимают хорошо, если это просто новое, а не новое и полезное — новый маркер вот никакой пользы не несет дополнительно), при этом они будут ворчать на тему «лучше бы обновили данные, а то у нас вчера открылся ларек, а его нет на карте».
                                                    «Гиганты» вроде гугла (на чей сервис карт теперь похож интерфейс 2ГИС) могут себе позволить редизайнить все это сколько угодно. Яндексу ничего не остается больше, пока они не могут повлиять на качество данных в карте и т.п. — потому занимаются ерундой вроде перевода названий (да, направлением карт рулила лингвист по образованию несколько лет, так что не странно). А у вас есть конек — свои собственные уникальные данные. На нем бы и ездить…

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

                                                    Кнопки с крестом для закрывания блока — разные у разных блоков, но все — бледные и некоторые — с широкими тенями, создающими эффект размытости. Анимация… вы в курсе, что если люди за компьютером работают, а не фигней занимаются, они отключают анимацию интерфейса ОС (задержки меню и прочее), чтобы экономить время? Эффекты хороши для презентаций. Новый блок с информацией об объекте имеет избыточную высоту из-за длинного нового «острия».
                                                      +4
                                                      Спасибо за объёмную обратную связь. Интересные мысли.

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

                                                      Вводим новую версию аккуратно, заботимся о лояльных пользователях: она будет в beta ещё какое-то время. Анализируем фидбек, в том числе на графические идентификаторы.

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

                                                      Анимацию старались и стараемся сделать не навязчивой. На крестики обратим внимание, спасибо.
                                                        +2
                                                        Так случилось, что я именно визуализацией картографических данных на web много занимался, потому тема близка, вот и постарался поделиться. Хотя вашим проектом не пользуюсь почти (так случилось что мои края далеко от планов расширения покрытия), но очень внимательно слежу за развитием и всячески желаю хорошего — ваша компания выбрала существенно более сложный, но продуктивный путь, чем «гиганты рынка», потому за вас «болеть» приятнее.

                                                        Про панели поверх карты — фикус не столько в контрасте, сколько в том, что карта по краям панели все равно присутствует, панель как-бы ее закрывает, но между левой стороной окна, правой стороной окна и панелью кусочки карты все равно торчат. Лично я бы придвинул панель ближе к краю и карту прикрыл тенью — чтобы глазу там не за что было зацепиться. Что-то в духе loc.alize.us/ (они вроде первооткрыватели этого стиля), только еще меньше промежутки.
                                                      0
                                                      Вот смотрю я на beta.2gis.ru/kaliningrad/center/19.663472,54.715491/zoom/9 — а сильнее отдалить никак. А ведь вокруг, хоть и Польша с Литвой, но все же земля/вода, а дальше — опять Россия.

                                                      Не вырывайте кусок из полной карты, право! Напишите лучше на белом «There Be Dragons», что ли, но покажите цельность земли, тем более что по приведенной ссылке даже не вся область видна — а карта у вас хорошая, не хочется при zoom out на гуглакарту переключаться :)
                                                        0
                                                        Форму маркера все-таки не надо было трогать, был вполне запоминающийся и приятный на вид, похожий на медиатор или семечку, а теперь действительно клизма какая-то)) А вообще, молодцы, конечно! Рад за земляков!
                                                          +4
                                                          Шрифты и правда получились здоровские :)
                                                            +1
                                                            Спасибо, карта Алматы шикарна! Интересно, какова там активность рекламодателей.
                                                            Очень жду, когда добавите Астану.
                                                            Внезапно, еще есть Усть-Каменогорск, непонятно по какому принципу принималось решение насчет добавления города.

                                                            Ваш новый маркер напоминает лист гингко, очень круто.
                                                              –3
                                                              Интересно, как отнесутся к новому дизайну значков на бизнеслинче.
                                                              Когда то ...
                                                              Лично мне бы хотелось видеть хоть маленькие но названия компаний а не значки (особенно когда на карте их видно всего несколько штук)

                                                              2 2ГИС. Молодцы, что думаете о красоте продукта!
                                                                0
                                                                Молодцы, ребята, но форма маркера стала какой-то убогой на мой взгляд, что как-то обесценивает всю работу…
                                                                Да и лого был визуально живее. Эта ситуация когда перфекционизм начинает вредить.
                                                                  0
                                                                  Не сделать на карте кнопку «где я», которая через Geolocation API покажет моё положение — это удивительный промах. Как так получилось? (уж простите, что офтопик)
                                                                    +2
                                                                    Бета же. Геолокация, печать, пробки, поиски проездов и еще куча мелочей — все это к релизу.
                                                                    0
                                                                    Старые оранжевые маркеры сливались с цветом шоссе. Текущие синие — с реками (поэтому похожи на фонтанчики). Не то, чтобы я знала, какой цвет самый подходящий, но предполагаю, что он не должен совпадать ни с одним элементом самой карты.

                                                                    А так-то 2ГИС радует все больше.

                                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                    Самое читаемое