Дизайн экрана карточки товара мобильного приложения
Карточка товара — экран, на котором пользователь принимает решение «купить или нет». Конверсия здесь напрямую зависит от того, насколько быстро и без когнитивной нагрузки человек находит нужное: цену, кнопку «в корзину», фотографии, ключевые характеристики. Плохо спроектированный экран — это не «некрасиво», это деньги, которые клиент теряет каждый день.
Галерея изображений: самое болезненное место
Фотографии товара — технически самый сложный элемент экрана. Горизонтальный 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.
Обязательные состояния:
- Товар в наличии / нет в наличии
- Выбор варианта (цвет, размер) — до и после выбора
- Добавлен в корзину (brief confirmation без перехода)
- Загрузка (skeleton для текстовых полей, shimmer для галереи)
- Ошибка загрузки с возможностью повтора
Выбор варианта товара — отдельный UX-паттерн. Chips с цветами требуют accessibilityLabel с названием цвета, не только цветовой пятно. Size picker с буквенными размерами (XS/S/M/L/XL) должен показывать недоступные размеры зачёркнутыми, а не скрывать их — пользователь должен видеть, что размер существует, просто сейчас нет в наличии.
Кнопка «Добавить в корзину»
Фиксируется в нижней части экрана — это стандарт для мобильной коммерции. Высота кнопки минимум 52pt (iOS HIG), 56dp (Material Design 3). Состояния: default, loading (spinner вместо текста), success (brief), disabled. Haptic feedback при успешном добавлении — на iOS через UIImpactFeedbackGenerator, на Android через VibrationEffect.
Сроки
1 день при наличии дизайн-системы и компонентов галереи. Стоимость рассчитывается индивидуально после анализа требований и текущего состояния дизайна.