Дизайн экрана каталога товаров мобильного приложения
Каталог — это точка входа для большинства пользовательских сессий. Скорость восприятия, фильтрация, переход к товару — всё это работает или ломается на этом экране. Типичная ошибка: дизайнер рисует красивую сетку, разработчик её верстает, а потом оказывается, что UICollectionViewFlowLayout не справляется с динамической высотой ячеек и карточки прыгают при скролле. Или на Android Jetpack Compose LazyVerticalGrid начинает перерисовывать все видимые ячейки при каждом изменении состояния фильтра — и пользователь видит мигание.
Что реально важно в дизайне каталога
Главный выбор — сетка (grid) или список (list). Это не эстетика, это UX-решение с последствиями для реализации. Grid с двумя колонками на iPhone SE 2nd gen оставляет карточке ~160 pt ширины. Если в карточке: фото, название, цена, рейтинг, кнопка «в корзину» — нужно чётко расставить приоритеты по иерархии, иначе текст обрезается или кнопка исчезает.
Переключение между режимами (grid/list) — частая фича, которую добавляют «на ходу». Когда это решение принято на уровне дизайна заранее, реализация через @State в SwiftUI или remember { mutableStateOf() } в Compose получается чистой. Когда нет — появляются костыли.
Компоненты, которые прорабатываем:
- Карточка товара: состояния normal, out-of-stock, sale, new — все четыре, не только normal
- Фильтры и сортировка: bottom sheet vs inline chips — зависит от количества параметров
- Состояния загрузки: skeleton-заглушки с правильными пропорциями под реальный контент
- Пустое состояние при отсутствии результатов поиска/фильтрации
- Пагинация: индикатор подгрузки в конце списка
Фотографии товаров приходят разного размера и соотношения сторон. Карточка должна это переживать — AspectRatio режим fill vs fit, placeholder при ошибке загрузки, blur-хэш для плавного появления через Blurhash SDK.
Как строим дизайн
Работаем в Figma с Auto Layout. Каждый компонент покрывает все состояния через Component Properties — это ускоряет передачу разработчику и исключает недопонимание «а как выглядит заблокированный товар».
Типографическая шкала и цветовые токены подключаются к существующей дизайн-системе проекта, если она есть. Если нет — формируем минимальный набор: 4–5 текстовых стилей, базовая палитра с учётом будущего dark mode. Экономит время при доработках.
Для eCommerce-каталогов отдельно прорабатываем поведение при медленном интернете: что показываем, пока грузится первая страница, как выглядит карточка с частично загруженным изображением.
Сроки
Дизайн экрана каталога — около 1 дня при условии готового дизайн-гайда. Если гайда нет и нужно формировать стиль с нуля, добавляем 0,5–1 день на согласование базовых токенов. Оценка уточняется после изучения ТЗ и текущего состояния дизайн-системы.