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