Дизайн екрана каталогу товарів мобільного додатка
Каталог—точка входу для більшості користувальницьких сесій. Швидкість сприйняття, фільтрація, перехід до товару—все це працює або ломається на цьому екрані. Типова помилка: дизайнер малює гарну сітку, розробник її верстає, а потім виявляється, що 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 день на узгодження базових токенів. Оцінка уточняється після вивчення ТЗ та поточного стану дизайн-системи.