Bottom sheet

Bottom sheet (Боттом шит / Шторка) — навигационный паттерн для контекстных действий поверх текущего экрана без полного перехода. Когда использовать: выбор из 3–7 опций, детали элемента без отдельного

Bottom sheet (Боттом шит / Шторка) — навигационный паттерн для контекстных действий поверх текущего экрана без полного перехода. Когда использовать: выбор из 3–7 опций, детали элемента без отдельного экрана, быстрые действия. Bottom sheet vs modal: sheet — нативный мобильный паттерн с drag-dismiss, modal — для tablet или критичных подтверждений. В CJM bottom sheet заменяет промежуточные экраны в сценариях checkout и onboarding, сокращая число переходов. Антипаттерн: вложенные bottom sheet или sheet с прокрутой длиннее экрана — пользователь теряет контекст.

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

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

Подборка экранов с паттерном bottom sheet, полезная для мобильных action surfaces и contextual actions. В подборке 17 экранов из 14 сценариев и 3 приложений. Репрезентативный пример: Циан_14.сохранить в подборку_001.webp в сценарии Сохранить в подборку приложения Циан.

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

Семейство
Паттерны
Фокус
Bottom sheet
Экранов
17
Сценариев
14
Приложений
3

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

Семейство
Паттерны
Фокус
Bottom sheet
Экраны
17
Сценарии
14
Приложения
3

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

Намерение пользователя
Выбрать (select), 4
Этап воронки
Конверсия (conversion), 2
Роль шага
Выбор (selection), 6

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

Основное CTA
Выбрать (select), 4
Паттерн раскладки
Нижняя шторка (bottom_sheet), 10
Навигационный паттерн
Переход вглубь (drill_down), 7
Тема
Светлая тема (light), 1

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

Типы экранов
Нижняя шторка (bottom_sheet), Модальное окно (modal), Каталог (catalog), Профиль (profile)
Состояния экранов
Обычное состояние (default)
Основные CTA
Выбрать (select), Другое (other), Продолжить (continue), Оплатить (pay)
Паттерны раскладки
Нижняя шторка (bottom_sheet), Сетка (grid)
Навигационные паттерны
Переход вглубь (drill_down), Без явной навигации (none), Нижние вкладки (tab_bar)
Намерения пользователя
Другое (other), Выбрать (select), Управлять аккаунтом (manage_account), Оплатить (pay)
Этапы воронки
Активация (activation), Другое (other), Монетизация (monetization), Конверсия (conversion), Восстановление (recovery), Обнаружение (discovery), Удержание (retention)
Темы
Светлая тема (light)
Роли шага
Промежуточный шаг (intermediate), Выбор (selection), Ввод данных (input), Проверка (review)

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

  • Нижняя шторка (bottom_sheet) (ai_screen_type)
  • Модальное окно (modal) (ai_screen_type)
  • Каталог (catalog) (ai_screen_type)
  • Профиль (profile) (ai_screen_type)
  • Обычное состояние (default) (ai_screen_state)
  • Выбрать (select) (ai_primary_cta_type)
  • Другое (other) (ai_primary_cta_type)
  • Продолжить (continue) (ai_primary_cta_type)

Теги

  • объявление
  • меню
  • действия
  • сохранение
  • избранное
  • чат
  • заметка
  • активация sim
  • каталог услуг
  • сим карта
  • новый номер
  • старый номер

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

  • Написать в чат (Кнопка (button))
  • Изменить заметку (Кнопка (button))
  • Поделиться (Кнопка (button))
  • Удалить объявление из избранного (Кнопка (button))
  • Скрыть объявление (Кнопка (button))
  • Сохранить в подборку (Кнопка (button))
  • Пожаловаться на объявление (Кнопка (button))
  • Закрыть (Кнопка (button))

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