Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки в соответствии с этапами клиентского пути и функциональными элементами:
- Открытие карточки товара
- Фото товара
- Видео товара
- Прокрутка слайдера
- Page control и альтернативы
- Появление галереи
- Формат галереи
- Прокрутка галереи
- Миниатюры
- Зум фото в галерее
- Закрытие галереи
- Прочие интересные фичи
1. Открытие карточки товара
Скорость загрузки фото
При открытии карточки товара его фото должно отображаться без каких-либо задержек. Базовый момент, но антипримеры встречаются.
![](https://awdee.ru/wp-content/uploads/2023/08/ezgif.com-video-to-gif-2.gif)
❌
Анимация появления фото
Иногда фото играет важную роль в анимации появления карточки. В примере фото товара из листинга не пропадает, а расширяется и сдвигается, становясь частью карточки.
![](https://awdee.ru/wp-content/uploads/2023/08/002.gif)
✅
Placeholder — размытое фото
Если загрузки фото приходится ждать, в это время можно отображать размытое фото товара с анимацией загрузки. Нестандартное и интересное решение.
![](https://awdee.ru/wp-content/uploads/2023/08/003-1.gif)
✅
Placeholder — не отсутствие фото
Если клиенту всё же приходится ждать загрузки фото, placeholder, который он видит в этот момент, не должен вводить в заблуждение, что фото по товару нет.
![](https://awdee.ru/wp-content/uploads/2023/08/image-61.png)
❌
Позиция слайдера при открытии
Если в карточках листинга предусмотрен скролл слайдера, слайдер в полноценной карточке товара при её открытии должен устанавливаться на ту же позицию.
![](https://awdee.ru/wp-content/uploads/2023/08/004.gif)
❌
Без анимации прокрутки
Воздержитесь от какой-либо прокрутки слайдера при открытии карточки. Такая анимация может лишь дезориентировать пользователя и вызвать ненужные вопросы.
![](https://awdee.ru/wp-content/uploads/2023/08/005.gif)
❌
2. Фото товара
По товару есть фото
Базовый момент: если по товару в карточке нет фотографий, это сильно снижает шансы на его продажу.
![](https://awdee.ru/wp-content/uploads/2023/08/image-62.png)
❌
Достаточно для ознакомления
По товару должно быть достаточно фото, чтобы клиент мог в деталях ознакомиться с товаром и сформировать представление о нём.
![](https://awdee.ru/wp-content/uploads/2023/08/image-63.png)
❌
В хорошем качестве
Фото товара должны быть загружены в хорошем качестве, чтобы не исказить впечатление у клиента. Момент базовый, но антипримеры встречаются.
![](https://awdee.ru/wp-content/uploads/2023/08/006.gif)
❌
Не обрезаются
Убедитесь, что товары на фото видны полностью. Заставлять клиента открывать галерею, чтобы посмотреть полное фото — не лучшая идея.
![](https://awdee.ru/wp-content/uploads/2023/08/image-64.png)
❌
Фото непустые
Иногда меня спрашивают: зачем я добавляю пункты с таким заголовком? Но пока такие оплошности будут допускать крупнейшие компании, эти пункты будут в моем списке.
![](https://awdee.ru/wp-content/uploads/2023/08/007.gif)
❌
100% экрана по ширине
Первый и наиболее часто используемый вариант — когда фото товара занимает всю полезную площадь экрана по ширине.
![](https://awdee.ru/wp-content/uploads/2023/08/image-65.png)
✅
Несколько фото на экране
В кейсах, когда фото товара в вертикальной ориентации, чтобы блок не занимал весь экран, фото уменьшают в размере, и видимыми становятся уже почти 2 фото.
![](https://awdee.ru/wp-content/uploads/2023/08/image-66.png)
✅
Единый размер фото
Для лучшего пользовательского опыта позаботьтесь о том, чтобы фото товаров были выполнены в едином размере. От такого исполнения лучше воздержаться:
![](https://awdee.ru/wp-content/uploads/2023/08/image-67.png)
❌
Выравнивание размера
Если вы не можете контролировать размер размещаемых фото и стилистика позволяет, их можно дополнять до единого размера за счет визуальных эффектов.
![](https://awdee.ru/wp-content/uploads/2023/08/image-68.png)
✅
Дополнительный контент на фото
Часто на фото можно встретить не только товар, но еще и пояснения. Что думаете по этому поводу? Полезно или визуальный шум? Напишите в комментах.
![](https://awdee.ru/wp-content/uploads/2023/08/image-126.png)
?
Фото vs. реклама
Что может выступить в качестве визуального шума — так это наложение поверх фото рекламы, которая начинает отвлекать от самого товара.
![](https://awdee.ru/wp-content/uploads/2023/08/image-71.png)
❌
Элементы управления поверх фото
Часто можно встретить кейсы, когда поверх фото размещают различные кнопки. В принципе, это нормально, если они не перегружают интерфейс.
![](https://awdee.ru/wp-content/uploads/2023/08/image-72.png)
✅
Смена при выборе варианта
Если по товару есть несколько визуально различающихся вариантов, при выборе варианта фото товара должно соответственно обновляться.
![](https://awdee.ru/wp-content/uploads/2023/08/008.gif)
✅
Параллакс при скролле карточки
При прокрутке карточки товара в слайдер можно добавить эффект параллакса: смотреться будет симпатично.
![](https://awdee.ru/wp-content/uploads/2023/08/009.gif)
✅
Фиксация при скролле карточки
Также встречаются кейсы, когда при прокрутке карточки товара фото фиксируется и остальной контент как бы перекрывает его.
![](https://awdee.ru/wp-content/uploads/2023/08/010.gif)
✅
3. Видео товара
Добавлены в карточку
С помощью видео можно лучше погрузить клиента в детали продукта и сформировать лучшее восприятие. Поэтому видеоконтент в карточках товаров встречается всё чаще.
![](https://awdee.ru/wp-content/uploads/2023/08/image-73.png)
✅
Как элемент слайдера
Часто видео можно встретить просто как элемент слайдера в карточке товара, наравне с фотографиями.
![](https://awdee.ru/wp-content/uploads/2023/08/image-75.png)
✅
Как отдельный элемент
Однако кнопку просмотра видео также можно вынести в качестве отдельного элемента интерфейса, чтобы повысить заметность и шансы на его просмотр.
![](https://awdee.ru/wp-content/uploads/2023/08/image-76.png)
✅
В контуре приложения
По возможности реализуйте воспроизведение видео, как составную часть карточки товара или галереи. Не переводите клиента в другие приложения или браузер.
![](https://awdee.ru/wp-content/uploads/2023/08/011.gif)
❌
Автовоспроизведение
Первый подход — автоматически начинать воспроизводить видео о товаре при его появлении на экране.
![](https://awdee.ru/wp-content/uploads/2023/08/012.gif)
✅
Воспроизведение по желанию
Клиенту также можно самому дать решить: хочет он просмотреть видео или нет. Но стоит учесть, что это предполагает дополнительное действие на его стороне.
![](https://awdee.ru/wp-content/uploads/2023/08/image-77.png)
✅
Один тап до воспроизведения
Если видео воспроизводится по желанию, клиент должен быть в одном касании от его запуска. В примере, чтобы просмотреть видео, необходимо сделать минимум 3 тапа.
![](https://awdee.ru/wp-content/uploads/2023/08/013.gif)
❌
Качество видео
Создавая видео о товаре по возможности подойдите к вопросу с умом и сделайте качественное, завлекающее видео.
По умолчанию без звука
Если в видео есть звук, учтите, что клиент может смотреть его в совершенно разных условиях. Поэтому по умолчанию его лучше отключить.
![](https://awdee.ru/wp-content/uploads/2023/08/image-78.png)
❌
Субтитры
Исходя из предыдущего пункта, убедитесь, что видео будет понятно и без звука. Любые пояснения можно вынести в качестве субтитров.
![](https://awdee.ru/wp-content/uploads/2023/08/image-79.png)
✅
Пауза/продолжение при тапе
При тапе по воспроизводимому видео его можно останавливать, а при повторном тапе — продолжать показ.
![](https://awdee.ru/wp-content/uploads/2023/08/014.gif)
✅
Область для тапа
При этом активная область для нажатия может не ограничиваться лишь кнопкой play и охватывать всю площадь видео.
![](https://awdee.ru/wp-content/uploads/2023/08/image-80.png)
✅
Остановка зажатием
Также для остановки видео иногда используется механика зажатия (long press), схожая с той, что часто реализуется в сторис.
![](https://awdee.ru/wp-content/uploads/2023/08/015-1.gif)
✅
4. Прокрутка слайдера
Побуждение к прокрутке
Встречаются кейсы, когда клиента с помощью анимации обучают, что у слайдера есть скролл. Главное, чтобы это было ненавязчиво и лишь до первой его прокрутки клиентом.
![](https://awdee.ru/wp-content/uploads/2023/08/016.gif)
✅
Highlight смежных фото
В некоторых случаях слайдер проектируется таким образом, чтобы края смежных фото были видны, тем самым подсвечивая возможность прокрутки.
![](https://awdee.ru/wp-content/uploads/2023/08/image-81.png)
✅
Длина свайпа
Длину жеста смахивания, требуемого для прокрутки можно сделать небольшой, чтобы слайдер прокручивался даже при легком свайпе.
![](https://awdee.ru/wp-content/uploads/2023/08/017.gif)
✅
Cell snapping
Хорошей практикой будет как бы привязывать фото к области видимого экрана, чтобы при свайпе слайдер прокручивался до полного отображения следующего фото.
![](https://awdee.ru/wp-content/uploads/2023/08/018.gif)
❌
Свайп для смены карточек?
Встречаются нестандартные кейсы, когда свайп в стороны отвечает за переход к карточке следующего товара. Как вам такое? Напишите в комментах.
![](https://awdee.ru/wp-content/uploads/2023/08/019.gif)
?
Без прокрутки, если фото одно
Если в вашей карточке только одно фото, возможность скролла можно блокировать в принципе. Зачем она, если нечего прокручивать?
![](https://awdee.ru/wp-content/uploads/2023/08/020.gif)
❌
Highlight контента
Некоторые при прокрутке фото подсвечивают факты и отзывы, призванные повысить конверсию. Но есть риск, что они могут быть восприняты, как отвлекающий фактор.
![](https://awdee.ru/wp-content/uploads/2023/08/021.gif)
?
Вертикальная прокрутка
В этом случае смену фото в слайдере по текущему товару можно реализовать через вертикальный свайп. Но, опять же, это нестандартная механика.
![](https://awdee.ru/wp-content/uploads/2023/08/022.gif)
?
Выход за рамки коллекции
При попытке выхода за рамки слайдера можно не блокировать действие, а дать клиенту протянуть скролл, но затем плавно вернуть его к крайнему слайду.
![](https://awdee.ru/wp-content/uploads/2023/08/023.gif)
✅
В конце — призыв к действию
Если контекст позволяет, при полной прокрутке слайдера в качестве последнего слайда можно разместить блок с призывом и кнопками действий.
![](https://awdee.ru/wp-content/uploads/2023/08/024.gif)
✅
В конце — схожие товары
Также можно встретить кейсы, когда при полной прокрутке слайдера с фото товара клиенту предлагают ознакомиться с похожими моделями.
![](https://awdee.ru/wp-content/uploads/2023/08/025.gif)
✅
Закольцованный слайдер
Закольцованный слайдер помогает клиенту быстро вернуться в начало с последней позиции. Главное — дать ему понять, что фото начали прокручиваться заново.
![](https://awdee.ru/wp-content/uploads/2023/08/026-1.gif)
✅
5. Page control и альтернативы
Добавлен в карточку товара
Дополнив слайдер с фото товара элементом page control, вы как бы подскажете, что слайдер можно прокрутить.
![](https://awdee.ru/wp-content/uploads/2023/08/image-82.png)
❌
Выведен за рамки фото
Лучше если page control будет выведен за рамки фото. Это позволит избежать риска, что он будет плохо заметен на пёстром или неконтрастном фоне.
![](https://awdee.ru/wp-content/uploads/2023/08/image-83.png)
❌
В направлении прокрутки
Вне зависимости от того, каким смахиванием — в стороны или вертикальным — будет реализована смена слайдов, расположите page control по направлению свайпа.
![](https://awdee.ru/wp-content/uploads/2023/08/027-1.gif)
✅
Точки хорошо заметны
При этом, разместив page control за рамками фото, сделайте цвет самих кнопок достаточно контрастным по отношению к фону, чтобы они были лучше заметны.
![](https://awdee.ru/wp-content/uploads/2023/08/image-84.png)
❌
Текущая точка выделяется
Хорошо выделив текущую точку, мы облегчаем навигацию и улучшаем понимание уровня прокрутки слайдера. Сделать это можно за счёт формы, размера и цвета.
![](https://awdee.ru/wp-content/uploads/2023/08/image-85.png)
✅
Highlight типов контента
Если в слайдере у вас есть разные типы контента, их можно специально подсветить, заменив точки на иконки в page control.
![](https://awdee.ru/wp-content/uploads/2023/08/image-86.png)
✅
Отображаемое число точек
Если фото по товару не так много, лучше не обрезать page control и оставлять все точки видимыми. Это позволит лучше управлять ожиданиями по количеству фото в слайдере.
![](https://awdee.ru/wp-content/uploads/2023/08/image-87.png)
✅
Уменьшение точек по краям
Если фото много и число точек в слайдере приходится ограничить, точки ближе к его краям можно уменьшать в размерах, как бы подсказывая, что это ещё не конец.
![](https://awdee.ru/wp-content/uploads/2023/08/image-88.png)
✅
Синхронное обновление
При переключении слайдера смена активной точки в page control должна происходить синхронно, без каких-либо задержек.
![](https://awdee.ru/wp-content/uploads/2023/08/028.gif)
✅
Анимация обновления
Изменение состояния page control можно производить с помощью анимации. Это позволит сделать реакцию интерфейса на действия клиента чуть более плавной.
![](https://awdee.ru/wp-content/uploads/2023/08/029.gif)
✅
Автоскролл в page control
Клиента также можно не утруждать прокручивать фото товара самому: встречаются кейсы, когда page control выполняет и роль индикатора автопрокрутки.
![](https://awdee.ru/wp-content/uploads/2023/08/030.gif)
✅
Альтернатива: нумерация
В качестве альтернативы page control также может выступать обычный счётчик текущего слайда и общего числа фото. Иногда это даже более информативно.
![](https://awdee.ru/wp-content/uploads/2023/08/image-89.png)
✅
Альтернатива: scrollbar
Также можно встретить и scrollbar. Он подходит в тех случаях, когда на экране видно более одного фото, и текущий слайд определить сложно.
![](https://awdee.ru/wp-content/uploads/2023/08/image-90.png)
✅
Альтернатива: миниатюры
Кроме того, некоторые участники рынка используют в карточке товара миниатюры. О них мы поговорим чуть позже.
![](https://awdee.ru/wp-content/uploads/2023/08/image-91.png)
✅
6. Появление галереи
При тапе по фото
Наиболее часто встречающаяся механика — привязка появления галереи к событию тапа по фото товара в карточке.
![](https://awdee.ru/wp-content/uploads/2023/08/031.gif)
✅
Реакция на касание
Фото может визуально вдавливаться при касании. Смотрится неплохо, особенно если анимация возврата в начальное состояние совпадает с открытием галереи.
![](https://awdee.ru/wp-content/uploads/2023/08/032.gif)
✅
Анимация движения
Часто появление галереи реализовано с помощью анимации выезжающей из нижней части экрана карточки.
![](https://awdee.ru/wp-content/uploads/2023/08/033.gif)
✅
Анимация проявления
Также нередко можно встретить анимацию, при которой галерея проявляется на экране из полностью прозрачного состояния.
![](https://awdee.ru/wp-content/uploads/2023/08/034.gif)
✅
Анимация увеличения
Кроме того, переход к галерее можно реализовать за счёт плавного, но достаточно быстрого увеличения фото из слайдера.
![](https://awdee.ru/wp-content/uploads/2023/08/035.gif)
✅
Синхронная анимация
Если используется анимация движения или увеличения, фон карточки товара можно синхронно затемнять или засветлять по мере появления галереи.
![](https://awdee.ru/wp-content/uploads/2023/08/036.gif)
✅
Скорость анимации
Несмотря на анимацию, само появление карточки или экрана с галереей должно быть быстрым: клиент не должен ждать.
![](https://awdee.ru/wp-content/uploads/2023/08/037.gif)
✅
Фото при появлении галереи
При появлении слайдер галереи должен устанавливаться на позицию фото, на которое клиент нажал в карточке товара.
![](https://awdee.ru/wp-content/uploads/2023/08/038.gif)
✅
Без анимации прокрутки
Если клиент переходит в галерею не с первого фото, прокручивать все предыдущие фото с помощью анимации избыточно. Лучше открыть галерею с текущего фото по умолчанию.
![](https://awdee.ru/wp-content/uploads/2023/08/039.gif)
❌
Ранняя загрузка фото
К моменту открытия галереи фото, которое отобразится в ней, уже должно быть загружено. Даже небольшая задержка из-за загрузки фото сделает процесс менее бесшовным.
![](https://awdee.ru/wp-content/uploads/2023/08/040.gif)
❌
7. Формат галереи
Горизонтальный слайдер
В большинстве случаев галерея реализована в формате, аналогичном слайдеру, с которым клиент уже сталкивался в карточке товара.
![](https://awdee.ru/wp-content/uploads/2023/08/041.gif)
✅
Вертикальная галерея
Иногда галерею фотографий товара ориентируют вертикально, а при тапе по фото отображается его увеличенная версия.
![](https://awdee.ru/wp-content/uploads/2023/08/image-92.png)
✅
Коллаж
В некоторых кейсах галерея реализована в формате коллажа, который позволяюет ознакомиться сразу с несколькими фото в рамках одного экрана.
![](https://awdee.ru/wp-content/uploads/2023/08/image-93.png)
✅
8. Прокрутка галереи
С помощью свайпа
Базовый момент: первый метод прокрутки галереи — с помощью смахивания фото влево и вправо.
![](https://awdee.ru/wp-content/uploads/2023/08/042.gif)
✅
При тапе по миниатюрам
Если вы используете миниатюры, при нажатии на миниатюру должна происходить прокрутка к соответствующему фото.
![](https://awdee.ru/wp-content/uploads/2023/08/043.gif)
✅
С помощью кнопок прокрутки?
Также есть кейсы, когда галерея снабжена кнопками прокрутки. Но, учитывая, что большинство клиентов уже привыкли к свайпу, встречается такая механика редко.
![](https://awdee.ru/wp-content/uploads/2023/08/image-94.png)
?
Cell snapping
Как и в случае с прокруткой фото в карточке, при лёгком свайпе фото в галерее прокрутка должна осуществляться до полной видимости следующего фото.
![](https://awdee.ru/wp-content/uploads/2023/08/044.gif)
✅
Угол жеста меньше 45°
Иными словами, если жест свайпа больше похож на горизонтальный, методы, ответственные за вертикальное смахивание (закрытие галереи), должны блокироваться.
![](https://awdee.ru/wp-content/uploads/2023/08/image-95.png)
✅
Угол жеста больше 45°
И наоборот: если жест больше похож на вертикальный, блокироваться должны методы прокрутки фото, а методы закрытия галереи через смахивание должны срабатывать.
![](https://awdee.ru/wp-content/uploads/2023/08/image-96.png)
✅
Анимация при свайпе
Свайп предполагает смахивание чего-либо. Поэтому фото при свайпе лучше именно смахнуть и не заменять иной анимацией. В примере при свайпе происходит выцветание:
![](https://awdee.ru/wp-content/uploads/2023/08/045.gif)
❌
Фоновая загрузка фото
По возможности загружайте фото в фоновом режиме, чтобы клиент при пролистывании галереи не сталкивался с placeholder’ами и не ждал, пока они загрузятся.
![](https://awdee.ru/wp-content/uploads/2023/08/046.gif)
❌
Тайминг смены миниатюры
При пролистывании галереи обновление активной миниатюры должно происходить без каких-либо задержек, синхронно со сменой фото.
![](https://awdee.ru/wp-content/uploads/2023/08/047.gif)
❌
Прокрутка при зуме
Убедитесь, что в вашем приложении корректно отрабатывается прокрутка слайдов, если текущий слайд увеличен. Встречал такое не в одном примере:
![](https://awdee.ru/wp-content/uploads/2023/08/048-1.gif)
❌
Возврат к 100% зуму
Если клиент приблизил фото, перелистнул слайдер к следующему фото и вернулся назад, первое фото лучше возвращать в изначальное состояние — к 100% зуму.
![](https://awdee.ru/wp-content/uploads/2023/08/049.gif)
❌
Скролл галереи vs. слайдера
Прокрутка галереи должна осуществляться в том же направлении, что и скролл слайдера. Разные механики прокрутки могут вызвать затруднения с переключением фото.
![](https://awdee.ru/wp-content/uploads/2023/08/050.gif)
❌
Закольцовывание галереи
Галерею можно сделать закольцованной, чтобы с последнего слайда можно было быстро вернуться в начало. Но главное, чтобы клиенту было понятно, когда пошёл повтор.
![](https://awdee.ru/wp-content/uploads/2023/08/051.gif)
❌
Кнопки действий
Иногда в галерее также можно встретить кнопки целевых действий, фиксированные при скролле, чтобы клиент мог совершить эти действия в любой момент.
![](https://awdee.ru/wp-content/uploads/2023/08/image-97.png)
✅
Скрытие кнопок
При этом кнопки действий и прочие элементы можно скрывать по желанию клиента, чтобы они не выступали в роли визуального шума. Например, при тапе по фото:
![](https://awdee.ru/wp-content/uploads/2023/08/052.gif)
✅
9. Миниатюры
Добавлены в галерею
Добавьте в галерею миниатюры, чтобы облегчить навигацию и расширить возможности для быстрого переключения фото.
![](https://awdee.ru/wp-content/uploads/2023/08/image-98.png)
✅
В нижней части экрана
Разместите альтернативы миниатюрам в нижней части экрана, чтобы до них легче было дотянуться большим пальцем.
![](https://awdee.ru/wp-content/uploads/2023/08/image-99.png)
❌
Размер миниатюр
Выполните миниатюры в размере, достаточном для того, чтобы клиент мог примерно разглядеть и понять, что именно показано на фото.
![](https://awdee.ru/wp-content/uploads/2023/08/image-100.png)
✅
Прокрутка миниатюр
Для коллекции миниатюр можно реализовать прокрутку, чтобы клиент мог быстро просмотреть, какие фото есть в галерее.
![](https://awdee.ru/wp-content/uploads/2023/08/053.gif)
✅
Размещены в один ряд
Однако размещать миниатюры в несколько рядов может быть чрезмерно: такое расположение может слишком перегрузить интерфейс.
![](https://awdee.ru/wp-content/uploads/2023/08/image-101.png)
❌
Highlight активной миниатюры
Миниатюра текущего фото должна достаточно хорошо подсвечиваться, чтобы облегчить навигацию для клиента. В примере она хоть подсвечивается, но достаточно слабо.
![](https://awdee.ru/wp-content/uploads/2023/08/image-102.png)
❌
Обрезание крайней миниатюры
Если коллекция миниатюр не вписывается в экран, спроектируйте их размер и отступы так, чтобы крайняя миниатюра обрезалась на половине, подсвечивая возможность прокрутки.
![](https://awdee.ru/wp-content/uploads/2023/08/image-103.png)
✅
Когда миниатюра центрируется
Активная миниатюра должна центрироваться, если справа и слева от нее достаточно элементов, чтобы заполнить всю область, отведённую под миниатюры.
![](https://awdee.ru/wp-content/uploads/2023/08/image-104.png)
✅
Когда миниатюра не центрируется
И наоборот: если это одна из первых или последних миниатюр, она уже не должна центрироваться, чтобы по краям не возникало пустое пространство.
![](https://awdee.ru/wp-content/uploads/2023/08/image-105.png)
❌
Highlight видео
Чтобы облегчить восприятие, видео можно выделять на фоне остальных миниатюр за счёт наложения на них кнопки play.
![](https://awdee.ru/wp-content/uploads/2023/08/image-106.png)
✅
Нажатие на миниатюру
При тапе по миниатюре должен происходить переход к соответствующему фото. Анимация может быть реализована, как быстрое пролистывание всех фото между текущим и целевым.
![](https://awdee.ru/wp-content/uploads/2023/08/054.gif)
✅
Пропадание при тапе
Небольшой минус миниатюр: они могут выступать в роли визуального шума. Поэтому при тапе по основному фото их можно скрывать, а при повторном тапе — отображать снова.
Page control вместо миниатюр?
Иногда миниатюры в галерее заменяют на page control. Это делает элемент менее информативным и делает быстрое переключение невозможным.
![](https://awdee.ru/wp-content/uploads/2023/08/image-107.png)
❌
Нумерация вместо миниатюр?
Аналогичный момент и с нумерацией, хотя её можно встретить достаточно часто. Какой сейчас слайд, понятно. Но менее информативно и нельзя быстро переключаться.
![](https://awdee.ru/wp-content/uploads/2023/08/image-108.png)
❌
10. Зум фото в галерее
Зум предусмотрен
Предусмотрите зум. База? База. Но антипримеры есть даже среди крупных игроков. В Ленте, например, мелкий текст-инструкцию извольте читать без увеличения.
![](https://awdee.ru/wp-content/uploads/2023/08/image-109.png)
❌
Фото вписываются в экран
Спроектируйте размер фото для галереи так, чтобы по умолчанию они полностью вписывались в экран и не обрезались по краям.
![](https://awdee.ru/wp-content/uploads/2023/08/image-110.png)
❌
Разведение и сведение пальцев
Наиболее распространённая механика зума фото в галерее — развести или свести два пальца для увеличения и уменьшения соответственно.
![](https://awdee.ru/wp-content/uploads/2023/08/055.gif)
✅
Активная область зума
Вне зависимости от того, какую часть экрана занимает фото, отслеживайте жест разведения пальцев на всём экране галереи, как триггер для зума.
![](https://awdee.ru/wp-content/uploads/2023/08/image-111.png)
❌
Двойной тап
Также часто можно встретить механику, при которой фото увеличивается или уменьшается при быстром двойном касании.
![](https://awdee.ru/wp-content/uploads/2023/08/056-1.gif)
✅
Зум анимирован
Будет хорошо, если при зуме через двойной тап увеличение фото будет происходить не прерывисто, а плавно, с помощью анимации.
![](https://awdee.ru/wp-content/uploads/2023/08/057-1.gif)
❌
Плавность анимации
Добавляя в зум анимацию, сделайте её плавной. В примере в конце зума она становится прерывистой и кратковременно смещается (лучше видно в самом приложении).
![](https://awdee.ru/wp-content/uploads/2023/08/058.gif)
❌
Центрирование при двойном тапе
При увеличении фото с помощью быстрого двойного касания оно должно центрироваться в точке, в которой было это касание, так как именно на ней в этот момент фокус внимания.
![](https://awdee.ru/wp-content/uploads/2023/08/059.gif)
✅
Прогрессивный зум?
Есть кейсы, когда при нескольких повторных двойных тапах фото продолжает увеличиваться, и лишь в конце возвращается к 100% зуму. Как вам такое? Напишите в комментах.
![](https://awdee.ru/wp-content/uploads/2023/08/060.gif)
?
Реакция на двойной тап
Галерея не должна реагировать нестандартно на двойной тап. Чаще всего это обратный зум. В редких случаях — прогрессивный. Но не то, что творится в следующем примере.
![](https://awdee.ru/wp-content/uploads/2023/08/061.gif)
❌
Scrollbar’ы при зуме?
В редких кейсах при увеличении фото в галерее появляются scroll bar’ы. Как вам? Полезно или они просто добавляют визуальный шум? Напишите в комментах.
![](https://awdee.ru/wp-content/uploads/2023/08/image-112.png)
❌
Фото занимает весь экран
При увеличении фото лучше, если оно будет занимать всю площадь экрана. Это позволит сделать восприятие более полным и лучше погрузить клиента в детали товара.
![](https://awdee.ru/wp-content/uploads/2023/08/image-113.png)
✅
Кнопка закрытия видна
Фиксируйте кнопку закрытия галереи, чтобы она была видна при любом зуме, и клиент мог быстро выйти из неё без необходимости возвращаться к 100% масштабу фото.
![](https://awdee.ru/wp-content/uploads/2023/08/image-114.png)
✅
Миниатюры видны
Также при просмотре фото в увеличенном состоянии можно фиксировать и миниатюры. Это позволит облегчить навигацию и быстрее переключиться к следующему фото.
![](https://awdee.ru/wp-content/uploads/2023/08/image-115.png)
✅
Уровень зума достаточен
Сделайте уровень приближения достаточным, чтобы клиент мог разглядеть детали товара на фото.
![](https://awdee.ru/wp-content/uploads/2023/08/062.gif)
❌
Зум vs. качество фото
При выборе максимального уровня зума и подготовке контента учитывайте, что при зуме фото не должны пикселить.
![](https://awdee.ru/wp-content/uploads/2023/08/image-116.png)
❌
Импульс при перемещении
При зуме перемещаться по фото может быть неудобно. Поэтому, если жест больше похож на свайп, чем на перемещение пальца, его можно «усилить», заставляя фото проскальзывать.
![](https://awdee.ru/wp-content/uploads/2023/08/063.gif)
✅
Haptic feedback при зуме
Достижение максимального и минимального уровня зума можно сопроводить лёгкой вибрацией, чтобы подчеркнуть переход в крайнее состояние.
![](https://awdee.ru/wp-content/uploads/2023/08/064.gif)
✅
Выход за крайние состояния зума
Не ограничивайте клиента крайними состояниями зума во время жеста. Вместо этого можно анимированно вернуть его в максимальное/минимальное состояние после того, как жест закончен.
![](https://awdee.ru/wp-content/uploads/2023/08/065.gif)
✅
11. Закрытие галереи
Нажатием на кнопку закрытия
Наиболее часто галерею можно закрыть с помощью нажатия на соответствующую кнопку закрытия в виде крестика.
![](https://awdee.ru/wp-content/uploads/2023/08/image-117.png)
✅
Смахивание вниз
Также достаточно часто можно встретить закрытие галереи с помощью жеста смахивания вниз. Такой паттерн активно используется в карточках.
![](https://awdee.ru/wp-content/uploads/2023/08/image-118.png)
❌
Смахивание вверх
Для карточек, выезжающих на экран снизу, это не подойдет, но если вы используете полноэкранную галерею, для закрытия также можно использовать жест смахивания вверх.
![](https://awdee.ru/wp-content/uploads/2023/08/066.gif)
✅
Закрытие через левый edge swipe
Если галерея — это экран в рамках navigation controller’а, её закрытие можно реализовать через свайп слева направо по левой границе экрана (выполняет функцию возврата назад).
![](https://awdee.ru/wp-content/uploads/2023/08/067.gif)
✅
Закрытие через pinch
Иногда также можно встретить кейсы, когда к закрытию галереи приводит сведение двух пальцев — жест, уменьшающий изображение.
![](https://awdee.ru/wp-content/uploads/2023/08/068.gif)
✅
Закрытие не при тапе по фото
Однако реакция интерфейса в виде закрытия галереи при тапе по фото может быть неожиданной и конфликтовать с частой привычкой увеличивать через двойной тап.
![](https://awdee.ru/wp-content/uploads/2023/08/069.gif)
❌
Закрытие после пролистывания?
Есть ещё одна нестандартная механика: закрывать галерею при пролистывании всех её слайдов. Что думаете по этому поводу? Напишите в комментах.
![](https://awdee.ru/wp-content/uploads/2023/08/070.gif)
?
Исчезание миниатюр
Так как миниатюры расположены под фото, при смахивании вниз они могут уезжать с экрана, как бы под его давлением, а при смахивании вверх — просто растворяться.
![](https://awdee.ru/wp-content/uploads/2023/08/071.gif)
✅
Финальная точка при смахивании
Финальная точка анимации при смахивании должна быть там, куда был направлен жест. В примере свайп идет вверх, а финальная точка анимации — внизу.
![](https://awdee.ru/wp-content/uploads/2023/08/072.gif)
❌
Движение с выцветанием
При смахивании галерея также может параллельно выцветать, причём уровень её выцветания может быть завязан на длину свайпа.
![](https://awdee.ru/wp-content/uploads/2023/08/073.gif)
✅
Длина свайпа
Сделайте длину свайпа достаточной, чтобы сократить риски закрытия галереи по ошибке. В примере свайп слишком чувствительный и срабатывает с первых пикселей.
![](https://awdee.ru/wp-content/uploads/2023/08/074.gif)
❌
Расположение кнопки закрытия
Большинство клиентов — правши. Поэтому лучше разместить кнопку закрытия в правом, а не левом верхнем углу. Так до неё легче будет дотянуться большим пальцем.
![](https://awdee.ru/wp-content/uploads/2023/08/image-119.png)
❌
Кнопка закрытия хорошо видна
Убедитесь, что кнопка закрытия будет хорошо видна вне зависимости от фона фото и уровня его приближения.
![](https://awdee.ru/wp-content/uploads/2023/08/image-120.png)
❌
Кнопка закрытия интерактивна
Добавляя в кнопку закрытия визуальную реакцию на касание (событие TouchDown), вы делаете интерфейс более отзывчивым.
![](https://awdee.ru/wp-content/uploads/2023/08/075.gif)
✅
Кнопка закрытия одна
Не стоит плодить кнопки закрытия галереи и возврата к карточки товара. Одной кнопки закрытия будет вполне достаточно.
![](https://awdee.ru/wp-content/uploads/2023/08/image-121.png)
❌
12. Прочие интересные фичи
Фото 360°
Некоторые компании добавляют возможность просмотра товара в формате 360°, чтобы клиент мог ознакомиться с товаром со всех ракурсов.
![](https://awdee.ru/wp-content/uploads/2023/08/image-122.png)
✅
Похожие товары по фото
Функция поиска похожих товаров по фото позволяет упростить выбор и сэкономить время клиенту — особенно если ассортимент товаров в магазине широкий.
![](https://awdee.ru/wp-content/uploads/2023/08/image-123.png)
✅
Комплементарные товары
Если у вас есть подборки товаров (например, образы, рецепты и т.д.), кнопка быстрого перехода к подборке может гармонично вписаться рядом с фото.
![](https://awdee.ru/wp-content/uploads/2023/08/image-124.png)
✅
Загрузка своего фото?
Механика в каком-то плане интересная, но спорная: зачем предлагать загрузить свое фото товара клиенту, который его не покупал?
![](https://awdee.ru/wp-content/uploads/2023/08/image-125.png)
?
To be continued…
Нюансов про проектировании взаимодействия с фото в карточке товара много, но чтобы не допустить ошибок и сделать все хорошо, важно просто о них знать.
Надеюсь, этот материал поможет вам прокачать насмотренность, а кому-то из вас — ещё и поправить недочёты, сделав блок с фото в карточках товаров лучше.
Следующие материалы будут с таким же высоким уровнем детализации. Продолжаем создавать крупнейшую базу знаний по UX/UI в e-commerce.
Свои новые материалы я анонсирую в Телеграм-канале. Подписывайтесь, если хотите их не пропускать. На связи.
Обсуждение
Похожее
Эстетика футуристических интерфейсов
Проблемы оформления набора в современной книге
Метамодерн и дизайн