Сергей Кириллов
продакт транспорта
Михаил Литвиненко
дизайн-лид транспорта
Курсоры для навигатора
А у вас были моменты, когда вы смотрели на свой автомобиль и думали: «А почему курсор в 2ГИС не может выглядеть так же круто, как моя ласточка?» Ну что ж, у нас хорошие новости. Мы наконец-то добавили персонализацию в навигаторе — теперь можно выбрать уникальный курсор вместо стандартной стрелки.
Вернёмся к истокам
История курсора началась в 2016 году, когда мы разрабатывали первую версию навигатора и поняли, что нам понадобится собственный курсор в главном транспортном сценарии. В отличие от обычного курсора местоположения, по которому можно найти себя на карте, в навигаторе нам требовалась стрелка, которая будет яснее указывать направление движения.
Именно тогда мы занялись созданием курсора, предложив несколько вариаций, и в итоге выбрали вариант с острыми, ярко выраженными плоскими гранями, который был достаточно контрастным, понятным и отличался от курсоров других навигаторов.
Именно тогда мы занялись созданием курсора, предложив несколько вариаций, и в итоге выбрали вариант с острыми, ярко выраженными плоскими гранями, который был достаточно контрастным, понятным и отличался от курсоров других навигаторов.
Это отличие было особенно заметно во время ведения по маршруту: на светофоре или в пробке, можно было заглянуть в соседние авто и увидеть, у кого жёлтая стрелка, а у кого наша синяя. Это было просто невозможно не заметить.
Курсор в нашем навигаторе не менялся вплоть до редизайна в 2021 году. Вместе с обновлением интерфейса не забыли и про курсор, ведь это важный брендинговый элемент, которому пользователи уделяют внимание каждый день. Он должен был не просто обновиться, но и приобрести уникальные особенности, которые бы сделали его нашим.
И мы многое перепробовали.
Курсор в нашем навигаторе не менялся вплоть до редизайна в 2021 году. Вместе с обновлением интерфейса не забыли и про курсор, ведь это важный брендинговый элемент, которому пользователи уделяют внимание каждый день. Он должен был не просто обновиться, но и приобрести уникальные особенности, которые бы сделали его нашим.
И мы многое перепробовали.
С каждой итерацией становились всё ближе.
Уже на тот момент мы понимали, что не хотим ограничиваться только одним курсором. Представьте: у вас день рождения, вы заходите в навигатор — а там кусок торта вместо курсора!
Мы создали десятки вариантов нового курсора, включая более функциональные и технические концепции. После того, как утвердили общий визуал навигатора, приступили к тестированию.
Стало понятно, что курсор прекрасно считывается на карте, но ему не хватало динамики и скорости. Ну что ж, открываем 3D-редактор и продолжаем искать решение.
Стало понятно, что курсор прекрасно считывается на карте, но ему не хватало динамики и скорости. Ну что ж, открываем 3D-редактор и продолжаем искать решение.
Пока выбирали вид стрелки, уделили внимание и эффектам: хотелось не упустить ни единой детали, чтобы на карте наш курсор сиял и радовал ваши сердечки
И мы его нашли: все элементы дизайна, включая рёбра, блики, тени и скругления, стали более мягкими, насыщенными и аккуратными, как и весь интерфейс. Благодаря контрасту курсор хорошо смотрится на картах дневной и ночной темы, в том числе при визуализации пробок. Это новое исполнение курсора мы используем до сих пор и в навигаторе, и в маркетинге — и очень-очень его любим.
У нас было очень мало времени — не только из-за обновления внешнего вида навигатора, но и больших внутренних изменений. Поэтому ограничились лишь сменой текущей модели курсора. Для новых курсоров потребовалась бы система для их хранения и обновления. Тогда мы не были готовы к этому. Теперь этот момент настал.
Персонализация
Персонализация сценариев становится центральной темой в современных приложениях. Поэтому мы заинтересованы в том, чтобы в будущем 2ГИС был полностью адаптирован для индивидуального использования. Мы любим наше приложение и любим делать штуки, которые бы вызывали приятные эмоции и нравились бы и нам самим, и нашим пользователям.
Первые опыты в кастомизации мы провели, когда добавили новые голоса для озвучки навигатора, например, Николая Николаевича Дроздова и Кота Матроскина — они стали популярны. Дальше — больше. В Друзьях на карте сейчас тоже много персонализации — есть особые эмоции и эффекты.
А теперь мы нашли время и смогли сделать набор кастомных курсоров. Их основная идея — это дать пользователям выбрать его по своему вкусу. Таким образом интерфейс навигатора становится ближе и понятнее для пользователя, добавляя нотку индивидуальности. Ведь как хотелось покататься на пожарной машине в детстве!
Первые опыты в кастомизации мы провели, когда добавили новые голоса для озвучки навигатора, например, Николая Николаевича Дроздова и Кота Матроскина — они стали популярны. Дальше — больше. В Друзьях на карте сейчас тоже много персонализации — есть особые эмоции и эффекты.
А теперь мы нашли время и смогли сделать набор кастомных курсоров. Их основная идея — это дать пользователям выбрать его по своему вкусу. Таким образом интерфейс навигатора становится ближе и понятнее для пользователя, добавляя нотку индивидуальности. Ведь как хотелось покататься на пожарной машине в детстве!
Кастомные курсоры — это ещё и возможность позаботиться о пользователе и усилить его эмоциональную связь с продуктом.
Как это было
Это было непросто. С одной стороны, нужно было подготовить всю механику загрузки, хранения и выбора курсоров. С другой стороны, нужно было добиться того, чтобы движок карты нормально отображал более сложные курсоры, со своей формой и цветом. А ещё с нуля собрать их визуальный стиль, который бы аккуратно дополнил нашу карту.
В нашем движке карты довольно высокие технические требования к 3D-моделям, и соблюсти их было непросто. Мы постоянно открывали для себя что-то новое, что нужно было поддержать. Например, первые модели мы проверяли, заменив деревья на карте. Получился вот такой лес, на котором модельки ехали вперёд задом. Мелочь, но посмеялись знатно.
В нашем движке карты довольно высокие технические требования к 3D-моделям, и соблюсти их было непросто. Мы постоянно открывали для себя что-то новое, что нужно было поддержать. Например, первые модели мы проверяли, заменив деревья на карте. Получился вот такой лес, на котором модельки ехали вперёд задом. Мелочь, но посмеялись знатно.
Когда работали над внешним видом курсоров, собрали доску с референсами: из самых разных классов автомобилей мы выделяли детали, которые хотелось отразить. В общем и целом стандартный набор сложился сразу, но было желание разбавить их чем-то фановым и забавным. От многого пришлось отказаться, так как некоторым моделям нужна анимация. Её мы обязательно реализуем в будущем.
Некоторые модели машин довольно схожие, при минимальных различиях их было непросто показать в моделях, поэтому мы от них отказывались. Делали и сборные модели из нескольких машин одного класса. Мы постарались сделать многообразие моделей, которые будут ездить по картам: кто-то пронесётся на спортивной тачке по центру, а кто-то объедет пробку на большом внедорожнике. Учли и профессии: например, сделали фургон и скорую помощь. При этом нам очень хотелось фана. На самолете или НЛО по картам? Давить всё вокруг на монстр-траке? Пожалуйста!
Было много тестов, доработок моделей, текстур, света, контраста на карте. И наконец, когда мы это всё увидели в продукте — получили искреннее удовольствие.
Карта в 2ГИС оживает! Появляются иммерсивные модели, дороги, деревья — всё становится ближе к реальности, но при этом мы продолжаем соблюдать ощущение некоторой «игрушечности». Так и в курсорах. Мы хотели, чтобы они были похожи на игрушки: открываешь набор и катаешь по столу.
Вместе с тем у нас вышло крупное обновление в навигаторе — иммерсивные дороги, новый вид для камер и событий на маршруте, луч направления у камер и многое другое. И вот всё это мы сложили воедино и поняли, насколько это чертовски красиво получилось. Уверены, что это новшество позволит сделать любую поездку по навигатору ещё более комфортной и приятной.
Карта в 2ГИС оживает! Появляются иммерсивные модели, дороги, деревья — всё становится ближе к реальности, но при этом мы продолжаем соблюдать ощущение некоторой «игрушечности». Так и в курсорах. Мы хотели, чтобы они были похожи на игрушки: открываешь набор и катаешь по столу.
Вместе с тем у нас вышло крупное обновление в навигаторе — иммерсивные дороги, новый вид для камер и событий на маршруте, луч направления у камер и многое другое. И вот всё это мы сложили воедино и поняли, насколько это чертовски красиво получилось. Уверены, что это новшество позволит сделать любую поездку по навигатору ещё более комфортной и приятной.
Присоединяйтесь к тем, кто уже пробовал кастомные курсоры, — сделайте ваш навигатор 2ГИС по-настоящему уникальным.
Оцените статью:
Нажимая кнопку «Комментировать», вы принимаете условия Лицензионного соглашения и даёте ООО «ДубльГИС» согласие на обработку персональных данных на условиях и в целях, определённых «Политикой конфиденциальности».