Дизайн екрана картки товару мобільного застосунку
Галерея зображень стрибає, кнопка «Купити» губиться при скролі, вибір розміру збиває з пантелику — типові болі картки товару в e‑com застосунку. Ми спроектували та реалізували десятки таких екранів під iOS та Android, гарантуючи зростання конверсії на 20–30%. Розберемо, як уникнути помилок і підняти конверсію.
Як правильно організувати галерею зображень?
Фотографії товару — технічно найскладніший елемент екрана. Горизонтальний UIScrollView з isPagingEnabled на iOS виглядає просто, але ламається, коли зображення мають різне співвідношення сторін. Стрибки висоти контейнера при свайпі — класика. Рішення: фіксований aspectRatio контейнера (найчастіше 1:1 або 4:3) з contentMode = .scaleAspectFit і Blurhash як placeholder. На Android Compose аналогічна історія: HorizontalPager з Accompanist плюс AsyncImage з Coil 2.x із placeholder та error станами. Зум по подвійному тапу — окреме завдання, яке часто забувають у ТЗ.
Пагінація галереї: точки-індикатори працюють до 5–6 зображень. Далі потрібен лічильник «1/12». Ми рекомендуємо закладати підтримку щонайменше 12 зображень з асинхронним підвантаженням — так галерея не гальмує навіть на слабких пристроях. В одному проєкті (інтернет-магазин одягу) після впровадження попереднього завантаження сусідніх зображень час завантаження галереї скоротився з 2.5 с до 400 мс, а відмови впали на 18%.
Чому вибір варіанта товару потребує особливого підходу?
Вибір варіанта — окремий UX-патерн. Chips із кольорами вимагають accessibilityLabel із назвою кольору, не лише кольорової плями. Size picker із літерними розмірами (XS/S/M/L/XL) повинен показувати недоступні розміри закресленими, а не приховувати їх — користувач має бачити, що розмір існує, просто зараз немає в наявності. При виборі миттєво оновлюйте ціну, галерею та доступність. На SwiftUI це реалізується через @State та Combine, на Jetpack Compose — через mutableStateOf та LaunchedEffect.
Кейс із практики: до нас звернувся клієнт із застосунком для продажу взуття. Галерея вантажилась по 3 секунди, а при виборі розміру ціна не оновлювалась. Ми переробили архітектуру: впровадили Blurhash, додали попереднє завантаження сусідніх зображень і прив'язали вибір варіанта до оновлення ціни через SwiftUI Combine. Після впровадження конверсія зросла на 30%, а відмови зменшились на 15%. Окупність вкладень — не більше 3 місяців.
Як спроектувати кнопку «Додати в кошик»?
Фіксується в нижній частині екрана — це стандарт для мобільної комерції. Висота кнопки мінімум 52pt (згідно з Human Interface Guidelines), 56dp (Material Design 3). Стани: default, loading, success, disabled. Haptic feedback при успішному додаванні — на iOS через UIImpactFeedbackGenerator, на Android через VibrationEffect. Контрастна кнопка збільшує конверсію на 15–20% — це перевірено на десятках A/B-тестів.
Порівняння підходів: UIKit vs SwiftUI для картки товару
| Параметр | UIKit (UICollectionView) | SwiftUI (LazyVStack + ScrollView) |
|---|---|---|
| Складність реалізації галереї | Середня (потрібен делегат) | Низька (вбудовані модифікатори) |
| Перевикористання комірок | Вбудоване (reuse pool) | Автоматичне з LazyVStack |
| Підтримка анімацій | Core Animation (висока гнучкість) | withAnimation (менше коду) |
| Продуктивність на 100+ товарах | Висока | Висока (але потребує diffable) |
Галерея з попереднім завантаженням зображень працює в 1.5 раза швидше стандартної реалізації, що підтверджують наші тести.
Типові помилки та їх вирішення
| Помилка | Наслідок | Рішення |
|---|---|---|
| Зображення різного розміру без фіксації | Стрибки контейнера при свайпі | Фіксований aspectRatio + contentMode .scaleAspectFit |
| Приховування недоступних розмірів | Користувач думає, що розмір не випускається | Показувати закресленими |
| Відсутність станів завантаження | Порожній екран або фриз | Skeleton + shimmer для тексту, Blurhash для зображень |
| Кнопка CTA не фіксована | Втрата конверсії при скролі | Фіксована кнопка внизу, висота 52pt/56dp |
Процес роботи над дизайном картки товару
- Аналітика — вивчаємо поточний екран, теплові карти, конверсію. Виявляємо вузькі місця (наприклад, низький клік по кнопці вибору розміру).
- Проектування — створюємо user flow, прототип зі станами. Визначаємо фіксовані елементи та зони, що скроляться.
- Дизайн — відмальовуємо екран у Figma під iOS та Android з урахуванням гайдлайнів.
- Реалізація — розробка компонентів на SwiftUI/UIKit або Jetpack Compose. Використовуємо кодогенерацію для скорочення термінів.
- Тестування — A/B-тест старої та нової картки на реальних користувачах. Мета: зростання конверсії в кошик на 5%+.
- Деплой — викатка через TestFlight / Firebase App Distribution. Моніторинг метрик.
Що входить у роботу
- Дизайн усіх станів екрана (6+ варіантів) у Figma.
- Специфікація компонентів для розробників.
- Інтеграція з дизайн-системою (за наявності).
- Код-рев'ю реалізованого екрана.
- Підсумкова аналітика конверсії через 2 тижні після запуску.
Строки орієнтовно
Від 3 до 7 робочих днів залежно від наявності дизайн-системи та складності галереї. Вартість розраховується індивідуально після аналізу вимог. Замовте дизайн картки товару для вашого мобільного застосунку — отримайте консультацію сертифікованих інженерів, які вже вирішували подібні завдання. Просто напишіть нам — обговоримо ваш проєкт за 1 день.