2ГИС

В 2013 году я занимался интерфейсами для карт и справочника 2ГИС. Он известен в России и некоторых других странах как наиболее подробный каталог организаций в городе.

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

  • ДизайнДен Талалá
  • Арт-дирекшнДима Пиликов
Июнь 2012 — Май 2013 2gis.ru

Веб-сервис

Сетка веб-карт

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

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

Значки геолокации
Варианты значков

Пиктограммы для разных видов общественного транспорта.

Пиктограммы общественного транспорта

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

Схема анимации значка
Коллаут

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

Коллауты

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

Интерфейс карты
Элементы интерфейса

Элементы интерфейса и взаимодействие с поисковыми подсказками.

Элементы поискового интерфейса

Поисковая карточка с организациями (и рекламой).

Поисковые результаты

Эксперименты с пометками избранного.

Эксперименты с пометками избранного
Эксперименты с пометками избранного
Эксперименты с пометками избранного

Разные состояния поисковых карточек и элементов интерфейса.

Состояния карточек

Наложение карточек
Элементы интерфейса

Интерфейс сервиса целиком на карте.

Интерфейс на карте
Интерфейс в миниатюре

Эксперименты с иконкой для iOS.

Эксперименты с иконкой для iOS

И случайные иллюстрации.

Иллюстрация прокликивания карты
Набор для организаций
Иллюстрация для поиска ресторанов
Иллюстрация чека
© Ден Талалá