Есть такая городская байка: если угадать правильную скорость, то можно проехать десяток светофоров подряд и ни разу не остановиться, поймав «зелёную волну». Водители из разных городов охотятся за этим ощущением десятилетиями. А мы взяли щепотку данных, немного технологической магии, дизайна и превратили эту байку в работающую фичу в навигаторе 2ГИС. 

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

Идея «зелёной волны»

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

Окей, мы научились показывать состояние светофора в моменте. И если у нас есть данные сразу по всей цепочке светофоров на маршруте, значит, можем сделать следующий шаг. Не просто сказать: «Через 12 секунд будет зелёный», а провести водителя по маршруту с минимальным числом остановок. Так зелёная волна стала логичным продолжением того, что мы уже начали.

Главный дизайнерский вызов

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

Первый — как донести скорость, не отвлекая водителя.

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

Второй вопрос — само пространство экрана навигатора.

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

Поэтому истинная суть задачи — встроить новый смысл в уже работающую систему так, чтобы она не сломалась.

Поиск визуального образа

Я начал с базы. Разобрал требования, разложил сценарии и понял, что критериев много, и они тянут в разные стороны. Решение должно быть:

• крупным — чтобы считывалось,

• при этом не шумным — чтобы не отвлекало от дороги,

• и информативным — чтобы было очевидно.

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

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

Но все это было слишком мелко, плохо считывается, место отнимают. Плюс зона спидометра уже занята предупреждениями о камерах — конфликт. Значит, подход должен быть другим. Или нет?

Дальше я пытался объяснить водителю словами, что происходит и что делать. «Начало зелёной волны. Держите скорость 35–45 км/ч. Конец зелёной волны».

Это работало. Но решение получалось чересчур прямолинейным: место отъедает, сообщение долго считывается, а главное, что оно ощущалось как уведомление. А зелёная волна — это не уведомление, а состояние, в котором ты находишься или нет.

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

Так родилась плашка с диапазоном, интегрированная в спидометр — та самая, что в итоге пошла в релиз. Но мне всё равно чего-то не хватало. Решение было корректным, но в нём не было эмоции и какой-то графической части, которая бы помогла водителю понять, в какую сторону регулировать скорость. Я думал об этом фоном. И тут случились новогодние праздники. Я начал проходить Zelda на «Свитче» и зацепился за один крошечный элемент интерфейса — индикатор температуры окружающей среды.

В нём не было ни одной цифры. Только шкала и стрелка. И он работал офигенно. Ты сразу понимал, в каком состоянии находишься: жарко тебе, холодно или нормально. 

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

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

Анимация

Моя любимая часть проекта — это то, что превращает зелёную волну из набора плашек в живую систему. Она задаёт эмоцию, создаёт ощущение, что фича правда работает. 

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

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

А когда водитель попадает в волну — отвечает уже весь экран. По краям мягко выступает зелёная подсветка. Эта штука работает на уровне ощущения: ты на неё не смотришь, ты её видишь периферией. Будто бы интерфейс говорит: «Всё, ты в потоке, расслабься».

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

Техническая реализация

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

Для меня было важным, чтобы фича дошла до релиза именно в том виде, в котором существует в моём воображении. А лучший способ сделать это — попробовать реализовать те части, которые вызывают сомнения самому.

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

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

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

Что дальше

Мы только-только запускаемся и уже готовимся собирать обратную связь. Дальше планов несколько.

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

Приглашаю попробовать прокатиться с навигатором 2ГИС в Москве или Новосибирске и поймать свою зелёную волну!