Дизайн екрана карточки товара мобільного додатка
Карточка товара—екран, на якому користувач приймає рішення «купити чи ні». Конверсія тут напрямку залежить від того, наскільки швидко й без когнітивного навантаження людина знаходить потрібне: ціну, кнопку «в корзину», фотографії, ключові характеристики. Погано спроектований екран—це не «некрасиво», це гроші, які клієнт втрачає щодня.
Галерея зображень: найбільш болісне місце
Фотографії товара—технічно найскладніший елемент екрана. Горизонтальний UIScrollView з isPagingEnabled на iOS виглядає просто, але ломається, коли зображення мають різне співвідношення сторін. Стрибки висоти контейнера при своїпе—класика. Рішення: фіксований aspectRatio контейнера (частіше за все 1:1 або 4:3) з contentMode = .scaleAspectFit та blur-хеш через Blurhash як placeholder.
На Android Compose аналогічна історія: HorizontalPager з Accompanist (тепер нативний Compose Foundation) плюс AsyncImage з Coil 2.x з placeholder та error станами. Зум по подвійному таупу—окрема задача, яку часто забувають у ТЗ, а потім додають хотфіксом.
Пагінація галереї: точки-індикатори працюють до 5–6 зображень. Далі потрібен лічильник «1/12». Це проектується заздалегідь.
Структура екрана
Екран не можна розбити на «фіксований» та «скроллюваний» контент довільно—це рішення впливає на архітектуру в CoordinatorLayout (Android) або UIScrollView + sticky header (iOS). Дизайн повинен явно фіксувати, що прикріплено до дна (кнопка «Купити»), що скроллюється разом з контентом, а що залишається в navigation bar.
Обов'язкові стани:
- Товар в наявності / нема в наявності
- Вибір варіанту (колір, розмір)—до й після вибору
- Додано в корзину (коротке підтвердження без переходу)
- Завантаження (skeleton для текстових полів, shimmer для галереї)
- Помилка завантаження з можливістю повтору
Вибір варіанту товара—окремий UX-паттерн. Chips з кольорами вимагають accessibilityLabel з назвою кольору, не тільки кольорового пляму. Size picker з буквеними розмірами (XS/S/M/L/XL) повинен показувати недоступні розміри зачеркненими, а не ховати їх—користувач повинен бачити, що розмір існує, просто зараз нема в наявності.
Кнопка «Додати в корзину»
Фіксується в нижній частині екрана—це стандарт для мобільної комерції. Висота кнопки мінімум 52pt (iOS HIG), 56dp (Material Design 3). Стани: default, loading (spinner замість тексту), success (коротке), disabled. Haptic feedback при успішному додаванні—на iOS через UIImpactFeedbackGenerator, на Android через VibrationEffect.
Терміни
1 день при наявності дизайн-системи та компонентів галереї. Вартість розраховується індивідуально після аналізу вимог та поточного стану дизайну.