Bottom sheet

Bottom sheet element (Боттом шит / Шторка) — UI-компонент выдвижной панели снизу экрана. Анатомия: drag handle, scrollable content area, optional sticky footer с CTA. Стейты: collapsed, peek (частично

Bottom sheet element (Боттом шит / Шторка) — UI-компонент выдвижной панели снизу экрана. Анатомия: drag handle, scrollable content area, optional sticky footer с CTA. Стейты: collapsed, peek (частично виден), expanded, full-screen. Sheet-action mechanics: свайп вниз закрывает, свайп вверх расширяет, snap points задают фиксированные высоты. Сравнение с patterns/bottom-sheet: этот хаб — об анатомии компонента и его стейтах. Антипаттерн: bottom sheet без drag handle или без snap points — пользователь не понимает, что панель можно двигать.

Экран раздела 'Деньги' с предложениями сервисов и продуктов для бизнеса. Пользователь видит историю переводов, рекламное предложение оформить карту МТС Деньги…
Экран раздела 'Деньги' с предложениями сервисов и продуктов для бизнеса. Пользователь видит историю переводов, рекламное предложение оформить карту МТС Деньги…

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

Подборка screens с bottom-sheet elements и sheet-based action surfaces. В подборке 5 экранов из 3 сценариев и 2 приложений. Репрезентативный пример: Мой МТС_56.Продукты для бизнеса_002.webp в сценарии Продукты для бизнеса приложения Мой МТС.

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

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

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

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

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

Намерение пользователя
Управлять аккаунтом (manage_account), 4
Этап воронки
Обнаружение (discovery), 1
Роль шага
Промежуточный шаг (intermediate), 3

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

Основное CTA
Выбрать (select), 2
Паттерн раскладки
Список (list), 3
Навигационный паттерн
Переход вглубь (drill_down), 4

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

Типы экранов
Каталог (catalog), Профиль (profile), Настройки (settings)
Состояния экранов
Обычное состояние (default)
Основные CTA
Выбрать (select)
Паттерны раскладки
Сетка (grid), Список (list)
Навигационные паттерны
Нижние вкладки (tab_bar), Переход вглубь (drill_down)
Намерения пользователя
Выбрать (select), Управлять аккаунтом (manage_account)
Этапы воронки
Обнаружение (discovery), Удержание (retention)
Роли шага
Выбор (selection), Ввод данных (input), Промежуточный шаг (intermediate)

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

  • Каталог (catalog) (ai_screen_type)
  • Профиль (profile) (ai_screen_type)
  • Настройки (settings) (ai_screen_type)
  • Обычное состояние (default) (ai_screen_state)
  • Выбрать (select) (ai_primary_cta_type)
  • Сетка (grid) (ai_layout_style)
  • Список (list) (ai_layout_style)
  • Нижние вкладки (tab_bar) (ai_navigation_pattern)

Теги

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

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

  • Добавить (Кнопка (button))
  • Сделать фотографию (Кнопка (button))
  • Выбрать из галереи (Кнопка (button))

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