Дизайн экрана каталога товаров мобильного приложения
Разработчик интегрирует сетку товаров, но UICollectionViewFlowLayout не справляется с динамической высотой ячеек — карточки прыгают при скролле. На Android Jetpack Compose LazyVerticalGrid перерисовывает все видимые ячейки при изменении фильтра, что вызывает мигание. Ошибка в том, что дизайн не учитывал состояния ячеек и ограничения фреймворка. Мы проектируем каталог, который работает стабильно на всех устройствах. Опыт 50+ проектов в eCommerce показывает: правильно спроектированный каталог увеличивает конверсию на 15–25%.
Как выбрать между сеткой и списком?
Выбор между grid и list — это UX-решение с последствиями для реализации. Grid с двумя колонками на iPhone SE 2nd gen оставляет карточке ~160 pt ширины. Если в карточке: фото, название, цена, рейтинг, кнопка «в корзину» — нужно чётко расставить приоритеты по иерархии, иначе текст обрезается или кнопка исчезает. Сравнение:
| Параметр | Сетка (2–3 колонки) | Список (1 колонка) |
|---|---|---|
| Плотность информации | Высокая (больше товаров на экране) | Низкая (1 товар на строку) |
| Удобство скролла | Больше движений пальцем | Быстрый просмотр |
| Детализация карточки | Ограниченная ширина, нужны компактные данные | Полная информация, кнопки |
| Адаптация под разные экраны | Нужно менять количество колонок | Проще: стрейч или фикс |
Сетка даёт в 2 раза больше товаров на одном экране, но список на 30% быстрее скроллится. Оптимальное решение — дать пользователю переключаться между режимами. Fitts's law также диктует: кнопки важных действий (корзина, избранное) должны быть достаточно крупными и расположены в зоне лёгкого доступа.
Почему важны состояния при загрузке?
Состояния загрузки — скелетон, placeholder, ошибка — часто остаются «на потом». В результате пользователь видит пустой экран или белый лист, пока данные не подгрузятся. Это увеличивает показатель отказов на 20%+. Мы прорабатываем:
- Skeleton-заглушки с пропорциями, соответствующими реальным карточкам (сокращают воспринимаемое время загрузки на 40%);
- Blurhash для плавного появления изображений (занимает 10 байт на изображение);
- Сообщение об ошибке с кнопкой повтора;
- Пустое состояние при отсутствии результатов фильтрации с предложением изменить параметры.
Компоненты, которые прорабатываем
- Карточка товара: состояния normal, out-of-stock, sale, new — все четыре, не только normal;
- Фильтры и сортировка: bottom sheet vs inline chips — зависит от количества параметров;
- Пагинация: индикатор подгрузки в конце списка;
- Анимации: переходы между состояниями с использованием Spring-анимации для плавности.
Сравнение подходов к фильтрам:
| Параметр | Bottom Sheet | Inline Chips |
|---|---|---|
| Количество параметров | 5+ | до 5 |
| Видимость выбранных фильтров | Скрыта до открытия | Всегда на виду |
| Простота реализации | Средняя | Низкая (требуется горизонтальный скролл при переполнении) |
Как строим дизайн
Работаем в Figma с Auto Layout. Каждый компонент покрывает все состояния через Component Properties — это ускоряет передачу разработчику и исключает недопонимание «а как выглядит заблокированный товар». Типографическая шкала и цветовые токены подключаются к существующей дизайн-системе проекта, если она есть. Если нет — формируем минимальный набор: 4–5 текстовых стилей, базовая палитра с учётом будущего dark mode. Экономит время при доработках.
Процесс работы
Аналитика (изучаем пользовательские сценарии и боли) → проектирование (схемы экранов, user flows) → дизайн всех состояний (4+ на каждый компонент) → передача в разработку (Figma, Zeplin, или экспорт) → поддержка на этапе вёрстки (отвечаем на вопросы, уточняем детали).
Что входит в работу
- Дизайн-макеты всех состояний (4+ состояний на каждый компонент);
- Гайд по анимации и верстке;
- Компоненты в Figma с Auto Layout;
- Передача разработчику (экспорт assets, спецификации);
- Консультации на этапе вёрстки.
Типичные ошибки
- Слишком много информации на карточке: пытаются уместить всё, в итоге текст обрезается, кнопки исчезают.
- Игнорирование пустых состояний: пользователь видит пустой экран вместо сообщения «ничего не найдено».
- Отсутствие плейсхолдеров для изображений: при медленном интернете карточки выглядят сломанными.
- Непродуманная пагинация: индикатор загрузки не отображается, или подгрузка триггерится слишком рано/поздно.
Сроки и стоимость
Дизайн экрана каталога — около 1 дня при условии готового дизайн-гайда. Если гайда нет и нужно формировать стиль с нуля, добавляем 0,5–1 день на согласование базовых токенов. Оценка уточняется после изучения ТЗ и текущего состояния дизайн-системы. Стоимость рассчитывается индивидуально.
Получите консультацию по дизайну вашего каталога — оценим проект и предложим решение. Более 7 лет на рынке мобильной разработки, 50+ реализованных каталогов. Свяжитесь с нами для детального обсуждения.