Map-based pattern

Map-based pattern (Карта) — паттерн навигации на основе карты как основного UI: food delivery, такси, недвижимость, трекинг доставки. Лучшие практики: карта занимает весь экран, управляющие элементы —

Map-based pattern (Карта) — паттерн навигации на основе карты как основного UI: food delivery, такси, недвижимость, трекинг доставки. Лучшие практики: карта занимает весь экран, управляющие элементы — overlay-панель поверх карты, bottom sheet с деталями выбранного объекта. Управление картой: pinch-zoom, tap-to-select, автоопределение геолокации при старте. Сравнение: map-first vs list — map выигрывает при пространственном выборе, list — при сравнении по параметрам. Антипаттерн: карта без возможности переключиться в list-режим — не все пользователи читают карту.

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

Что покрывает эта подборка

Подборка screens для map-driven selection and tracking flows. В подборке 32 экранов из 18 сценариев и 3 приложений. Репрезентативный пример: Циан_28.карточка квартиры продолжение - детские сады - карта_002.webp в сценарии Места рядом - Карта приложения Циан.

Контекст страницы

Семейство
Паттерны
Фокус
Map-based pattern
Экранов
32
Сценариев
18
Приложений
3

Семантический профиль

Семейство
Паттерны
Фокус
Map-based pattern
Экраны
32
Сценарии
18
Приложения
3

Путь пользователя

Намерение пользователя
Просматривать (browse), 5
Этап воронки
Обнаружение (discovery), 8
Роль шага
Промежуточный шаг (intermediate), 12

Паттерны и действия

Основное CTA
Подтвердить (confirm), 3
Паттерн раскладки
Карта (map), 12
Навигационный паттерн
Навигация по карте (map_based), 7
Платформа
iOS (ios), 2
Тема
Светлая тема (light), 6

Семантические сигналы

Типы экранов
Карта (map)
Состояния экранов
Обычное состояние (default)
Основные CTA
Другое (other), Подтвердить (confirm), Искать (search), Выбрать (select)
Паттерны раскладки
Карта (map)
Навигационные паттерны
Навигация по карте (map_based), Нижние вкладки (tab_bar), Переход вглубь (drill_down)
Намерения пользователя
Просматривать (browse), Отслеживать (track), Выбрать (select), Искать (search)
Этапы воронки
Обнаружение (discovery), Удержание (retention), Другое (other)
Темы
Светлая тема (light), Темная тема (dark)
Платформы
iOS (ios)
Роли шага
Промежуточный шаг (intermediate)

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

  • Карта (map) (ai_screen_type)
  • Обычное состояние (default) (ai_screen_state)
  • Другое (other) (ai_primary_cta_type)
  • Подтвердить (confirm) (ai_primary_cta_type)
  • Искать (search) (ai_primary_cta_type)
  • Выбрать (select) (ai_primary_cta_type)
  • Карта (map) (ai_layout_style)
  • Навигация по карте (map_based) (ai_navigation_pattern)

Теги

  • карта
  • детские сады
  • поликлиники
  • магазины
  • метро
  • ориентиры
  • город
  • навигация
  • медицинские учреждения
  • масштабирование
  • переключение категорий
  • фильтр

Ключевые действия

  • Детские сады (Кнопка (button))
  • Поликлиники (Кнопка (button))
  • Магазины (Кнопка (button))
  • Увеличить масштаб (Кнопка (button))
  • Уменьшить масштаб (Кнопка (button))
  • Определить местоположение (Кнопка (button))
  • Детские сады (Кнопка (button))
  • Поликлиники (Кнопка (button))

Подходящие страницы