Card

Card (Карточка) — базовый UI-элемент представления сущности: товар, статья, пользователь, событие, место. Карточка — самодостаточный контейнер с медиа, заголовком, метаданными и CTA. Лучшие практики:

Card (Карточка) — базовый UI-элемент представления сущности: товар, статья, пользователь, событие, место. Карточка — самодостаточный контейнер с медиа, заголовком, метаданными и CTA. Лучшие практики: чёткая визуальная иерархия внутри карточки, tap target не менее 44pt, видимая граница или тень для отделения от фона. Размер карточки зависит от плотности контента: compact для списков, expanded для showcase. Сравнение: карточка vs строка списка — карточка лучше для визуального контента. Антипаттерн: карточка без явного CTA или с несколькими конкурирующими действиями одинакового визуального веса.

Главный экран приложения Мой МТС с информацией о балансе, расходах, подключённых услугах и тарифах. Пользователь может искать, пополнить баланс, управлять тари…
Главный экран приложения Мой МТС с информацией о балансе, расходах, подключённых услугах и тарифах. Пользователь может искать, пополнить баланс, управлять тари…

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

Подборка screens с card-based composition для catalog, content and product browsing. В подборке 200 экранов из 136 сценариев и 3 приложений. Репрезентативный пример: Мой МТС_25.Cashback_001.webp в сценарии Cashback приложения Мой МТС.

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

Семейство
Элементы интерфейса
Фокус
Card
Экранов
200
Сценариев
136
Приложений
3

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

Семейство
Элементы интерфейса
Фокус
Card
Экраны
200
Сценарии
136
Приложения
3

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

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

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

Основное CTA
Другое (other), 6
Паттерн раскладки
Стопка карточек (card_stack), 5
Навигационный паттерн
Нижние вкладки (tab_bar), 9
Тема
Светлая тема (light), 12

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

Типы экранов
Главный экран (home), Каталог (catalog), Профиль (profile)
Состояния экранов
Обычное состояние (default)
Основные CTA
Другое (other), Искать (search)
Паттерны раскладки
Стопка карточек (card_stack), Сетка (grid), Список (list)
Навигационные паттерны
Нижние вкладки (tab_bar), Без явной навигации (none), Переход вглубь (drill_down)
Намерения пользователя
Управлять аккаунтом (manage_account), Просматривать (browse), Искать (search)
Этапы воронки
Удержание (retention), Обнаружение (discovery), Вход в сценарий (entry)
Темы
Светлая тема (light)
Роли шага
Начальный шаг (entry)

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

  • Главный экран (home) (ai_screen_type)
  • Каталог (catalog) (ai_screen_type)
  • Профиль (profile) (ai_screen_type)
  • Обычное состояние (default) (ai_screen_state)
  • Другое (other) (ai_primary_cta_type)
  • Искать (search) (ai_primary_cta_type)
  • Стопка карточек (card_stack) (ai_layout_style)
  • Сетка (grid) (ai_layout_style)

Теги

  • баланс
  • расходы
  • подключённые услуги
  • тариф
  • семейная группа
  • персональные бонусы
  • скидки
  • поиск
  • кешбэк
  • потратить кешбэк
  • мтс
  • мгтс

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

  • пополнить (Кнопка (button))
  • семейная группа (Кнопка (button))
  • мой тариф (Кнопка (button))
  • сменить тариф (Кнопка (button))
  • СМОТРЕТЬ ВСЁ (Кнопка (button))
  • Пополнить (Кнопка (button))
  • Мой тариф (Кнопка (button))
  • Сменить тариф (Кнопка (button))

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