Кастомизация в интерфейсе: как мы создавали курсоры для навигатора

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

Меня зовут Миша Литвиненко, я дизайнер продуктов в 2ГИС. Расскажу, как мы создавали маленький, но такой важный визуальный элемент навигатора, на который ежедневно смотрят миллионы человек.

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

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

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

Открываешь карту и почти всегда первое действие — определение своего местоположения. Если GPS-сигнал стабилен, то в этом помогает геомаркер — иконка-точка на карте, которая показывает, где мы находимся и в каком направлении движемся. А при запуске навигатора геомаркер становится главным героем экрана: ярким, заметным и самостоятельным курсором, который следует с нами по маршруту. Он также оценивает расстояние до различных объектов на пути: повороты, камеры, манёвры или даже аварии.

В 2016 году мы создали первую версию автонавигатора 2ГИС, тогда же появился первый курсор. Это была честная объёмная модель с острыми и плоскими гранями. Самое важное — курсор отлично справлялся со своими задачами:

Было здорово замечать в пробках или на остановках перед светофором нашу синюю стрелку в машинах у других водителей.

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

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

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

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

Открыли 3D-редактор, добавили и получилась такая красота:

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

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

Нас часто спрашивали пользователи: «Можно ли сделать поездку более разнообразной?» Так это вдохновило нас добавить выбор голоса в навигаторе. Кстати, Николай Николаевич Дроздов и Матроскин — одни из самых популярных голосов (как мы записывали и добавляли голоса в навигатор, можно почитать здесь). Дальше Друзья на карте, о которых мы очень долго мечтали, в них много персонализации — есть особые эмодзи, анимации и взаимодействие друг с другом прямо на карте.

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

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

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

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

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

Сначала я планировал сделать 3–5 моделей, но пообщавшись с командой, всё же решили дать пользователям больше вариативности, пусть даже в ущерб визуалу. Так мы сможем понять, какие курсоры нравятся людям, а какие лучше не использовать.

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

Тренды на фан и анимацию можно отследить на китайских приложениях, таких как Baidu, Amap и Tencent. Разнообразные цвета, формы, знаменитости и персонажи — палец устанет скроллить все курсоры! В курсоре для пешехода можно выбрать девушку-кошку, которая при ходьбе машет хвостом, передвигает ногами и руками.

Дальше совместно с 3D-моделлером собирали модели. Определяли класс автомобиля, на доске собирали фотографии популярных моделей и выделяли ключевые элементы, которые хотелось видеть в конкретном курсоре. Так получали «собирательный образ». Образующими элементами стали колёса, фары, воздуховоды и боковые зеркала. Сначала создавали простые модели, чтобы почувствовать настроение, которое они передают.

Дальше добавляли больше деталей и снова тестировали.

Где-то, наоборот, понимали, что детализация излишняя, как в случае с пожарной машиной — мелкие детали неразличимы на карте и добавляли больше шума, чем пользы.

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

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

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

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

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

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

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

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

Будем следить за использованием этой новой фичи и обязательно придумаем что-нибудь ещё. Если хотите с нами, то мы как раз в поисках продуктовых дизайнеров.