Дизайн екрану каталогу товарів мобільного додатку
Розробник інтегрує сітку товарів, але 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 день на узгодження базових токенів. Приклад вартості: базовий пакет (до 5 екранів) — $500, розширений (до 10 екранів з анімацією) — $950. Оцінка уточнюється після вивчення ТЗ та поточного стану дизайн-системи.
Отримайте консультацію з дизайну вашого каталогу — оцінимо проєкт і запропонуємо рішення. Більше 7 років на ринку мобільної розробки, 50+ реалізованих каталогів, 100% гарантія якості. Зв'яжіться з нами для детального обговорення.