Grid layout

Grid layout (Грид / Сетка) — паттерн компоновки контента в многоколоночную сетку для визуального discovery и каталогов. Когда использовать: фото-контент, продуктовые карточки, портфолио, иконки. Лучши

Grid layout (Грид / Сетка) — паттерн компоновки контента в многоколоночную сетку для визуального discovery и каталогов. Когда использовать: фото-контент, продуктовые карточки, портфолио, иконки. Лучшие практики: 2 колонки для мобильного, равная высота карточек или masonry для медиа-контента. Сравнение: grid vs list — grid выигрывает при визуальном сравнении, list — при информационном скане. Антипаттерн: grid с плохим качеством изображений или без lazy-loading — пустые ячейки и битые картинки разрушают восприятие.

Экран с каталогом сервисов приложения, предлагающий пользователю выбрать одну из множества функций, связанных с недвижимостью, такими как умный помощник, умная…
Экран с каталогом сервисов приложения, предлагающий пользователю выбрать одну из множества функций, связанных с недвижимостью, такими как умный помощник, умная…

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

Подборка grid-based mobile screens для каталогов и card-dense discovery surfaces. В подборке 172 экранов из 90 сценариев и 3 приложений. Репрезентативный пример: Циан_45.Найти акции и скидки_001.webp в сценарии Найти акции и скидки приложения Циан.

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

Семейство
Паттерны
Фокус
Grid layout
Экранов
172
Сценариев
90
Приложений
3

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

Семейство
Паттерны
Фокус
Grid layout
Экраны
172
Сценарии
90
Приложения
3

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

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

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

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

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

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

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

  • Каталог (catalog) (ai_screen_type)
  • Главный экран (home) (ai_screen_type)
  • Обычное состояние (default) (ai_screen_state)
  • Другое (other) (ai_primary_cta_type)
  • Искать (search) (ai_primary_cta_type)
  • Сетка (grid) (ai_layout_style)
  • Переход вглубь (drill_down) (ai_navigation_pattern)
  • Без явной навигации (none) (ai_navigation_pattern)

Теги

  • недвижимость
  • сервисы
  • каталог
  • аренда
  • продажа
  • оценка
  • скидки
  • новостройки
  • кешбэк
  • потратить кешбэк
  • мтс
  • мгтс

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

  • Умный помощник (Кнопка (button))
  • Умная камера (Кнопка (button))
  • Подобрать новостройку (Кнопка (button))
  • Продать жильё (Кнопка (button))
  • Снять жильё в отпуск (Кнопка (button))
  • Подбор вторички (Кнопка (button))
  • Найти акции и скидки (Кнопка (button))
  • Сдать квартиру (Кнопка (button))

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