Разработка дизайна страницы каталога товаров сайта
Страница каталога — точка принятия решений. Пользователь приходит с намерением найти нужный товар из сотен или тысяч позиций. Дизайн каталога — это не про красоту: это про скорость нахождения, эффективность фильтрации и плотность информации на экране. Промахи здесь прямо конвертируются в отказы и потерянные заказы.
Структура страницы каталога
Типичная компоновка включает несколько независимых зон, каждая из которых решает свою задачу:
Зона навигации по категориям
Хлебные крошки (Главная → Электроника → Ноутбуки) + боковая или горизонтальная иерархия подкатегорий. Для глубоких каталогов (3+ уровня) — выезжающее дерево или mega-menu на десктопе.
Зона фильтров Боковой фильтр (sidebar) на десктопе, offcanvas drawer на мобильных. Фильтры группируются по семантике: характеристики → ценовой диапазон → доступность → рейтинг. Каждая группа — раскрывающийся аккордеон с индикатором активных фильтров.
Зона управления листингом Количество результатов, сортировка (по популярности, цене, новизне), переключатель вида (сетка/список), количество карточек на страницу.
Сетка карточек товаров Основная рабочая область. Параметры сетки:
| Устройство | Карточек в ряд | Рекомендуемый gap |
|---|---|---|
| Десктоп (1280px+) | 3–4 | 24px |
| Планшет (768–1280px) | 2–3 | 16px |
| Мобильный (320–768px) | 1–2 | 12px |
Пагинация
«Загрузить ещё» (append) vs классическая пагинация vs бесконечный скролл. Бесконечный скролл ухудшает SEO и делает невозможным возврат к позиции — использовать только с виртуализацией. Append-пагинация с сохранением позиции через history.pushState — оптимальный компромисс для большинства каталогов.
Карточка товара в листинге
Карточка каталога содержит меньше информации, чем страница товара, но должна давать достаточно для сравнения:
- Фото (обычно квадратное 1:1, hover меняет на второе фото если есть)
- Название (2 строки максимум,
overflow: hidden; -webkit-line-clamp: 2) - Цена (актуальная + зачёркнутая при скидке + значок процента скидки)
- Рейтинг (звёзды + количество отзывов)
- Доступность (в наличии / под заказ / нет в наличии)
- CTA кнопка (добавить в корзину / в корзину / выбрать вариант)
Дополнительные элементы по контексту: бейджи (новинка, хит, акция), иконка избранного (wishlist), быстрый просмотр.
Дизайн фильтров: UX-детали
Чекбоксы vs теги. Чекбоксы подходят для фильтров с 3–8 опциями. Для цветов — визуальные свотчи. Для 10+ опций — поле поиска внутри фильтра.
Ценовой диапазон. Двойной слайдер (range slider) с полями ввода. Гистограмма распределения товаров по цене над слайдером даёт пользователю контекст — паттерн из Amazon, ASOS.
Применение фильтров. Два подхода:
- Мгновенное (применяется при клике) — для небольших каталогов с быстрым ответом сервера
- Отложенное (кнопка «Применить») — для каталогов с медленным API, мобильных устройств
Активные фильтры. Тег-пилюли над результатами с крестиком для снятия каждого фильтра и кнопкой «Сбросить все».
Пустые состояния и edge-кейсы
Нулевые результаты фильтрации — не «страница 404», а специальный экран с:
- Иллюстрацией (не stock-photo)
- Объяснением что произошло
- Кнопкой «Сбросить фильтры»
- Предложением похожих категорий или популярных товаров
Каталог с одним товаром — редиректить на страницу этого товара, не показывать листинг из одной карточки.
Скелетон-загрузка
При AJAX-обновлении каталога (применение фильтров, смена страницы) показывать skeleton placeholders, не спиннер:
.skeleton-card {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
SEO-требования к дизайну
- Каждая страница фильтрации с уникальным набором параметров должна иметь canonical → на главную страницу категории (если фильтры не создают отдельных SEO-страниц)
- H1 должен меняться при выборе категории: «Ноутбуки», не «Каталог»
- Тексты с количеством результатов для поисковиков: «142 ноутбука в наличии»
- Структурированные данные:
ItemListс первыми 10 товарами
Производительность
Фотографии — главный ботлнек каталога. Рекомендации:
- WebP + AVIF с JPEG fallback через
<picture> - Lazy loading для карточек ниже fold
- Eager loading для первых 4–8 карточек (видимы без скролла)
- Размеры изображений: 400×400 для листинга (не тащить 1200×1200)
-
aspect-ratio: 1/1на контейнере изображения — избегает CLS
Инструменты проектирования
Дизайн каталога разрабатывается в Figma с:
- Компонентами карточек со всеми состояниями (hover, в корзине, нет в наличии, со скидкой)
- Auto Layout для сетки с правильными gap и padding
- Вариантами компонента для разных breakpoints
- Прототипом фильтрации для демонстрации поведения
Сроки
Дизайн каталога для 1 типа товаров, 1 breakpoint (десктоп) без фильтров — 2–3 дня. Полный дизайн: десктоп + мобайл, сложные фильтры, все состояния карточек, пагинация, empty states — 5–8 дней. Дизайн + компонентная система + передача в разработку — 1.5–2 недели.