Интерактивная главная магазина авторской графики
Главная магазина авторской графики должна помочь представить будущую покупку: как выглядит рисунок на изделии, что можно изменить в файле и чем отличаются форматы.
Для магазина «Векторная графика.ру» я связал эти вопросы с интерактивными блоками главной. Ниже можно попробовать три фрагмента: рисование паттерна, примерку и сравнение масштабирования. Для кейса они вынесены в самостоятельные демо с локальными материалами.
Первый экран: рисунок собирается на глазах
Вместо неподвижной обложки на первом экране паттерн «Лён» появляется по слоям. Посетитель видит, что рисунок состоит из отдельных элементов. Этот показ связан с возможностью редактировать векторную работу.
Решение в интерфейсе. На главной анимацией управляет прокрутка. В статье используется ползунок, чтобы фрагмент можно было рассмотреть без длинной прокрутки. Контуры и цвета взяты из материалов проекта.
Примерка: от рисунка к изделию
Сам паттерн не всегда помогает представить готовую вещь. В блоке примерки можно сменить рисунок и посмотреть его на разных поверхностях. Для демонстрации выбраны платье и посуда из существующего набора мокапов.
Решение в интерфейсе. Изделие и рисунок выбираются независимо. Это позволяет сравнить применение одной работы и несколько рисунков на одном изделии. Показ иллюстративный: фактические масштаб печати и цвет согласуются при подготовке изделия.
Форматы: разницу можно увидеть
В комплекте векторной работы есть EPS и JPG. Чтобы объяснить различие масштабирования, на главной используется один и тот же цветок: с одной стороны он пересчитывается по контурам, с другой увеличивается как растр.
Решение в интерфейсе. Сравнение привязано к выбору формата и возможности редактирования. Это наглядная модель на данных рисунка «Васильки», а не просмотр настоящего EPS в браузере и не проверка разрешения конкретного JPG.
Как блоки связаны в главную
Первый экранЗнакомит с авторской графикой и показывает устройство рисунка.
Выбор и примеркаПомогают сравнить исполнение и представить применение работы.
Файлы и лицензияОбъясняют состав покупки и условия использования.
Каталог и авторДают переход к работам и сведения об авторе графики.
В исходной главной также есть переключение чёрно-белого и цветного исполнения, популярные работы, интерактивное объяснение лицензии и тематические подборки. В этом кейсе работают три выбранных фрагмента; они не заменяют всю страницу магазина.
Реализация на 1С-Битрикс: Управление сайтом
Исходная главная встроена в шаблон магазина на CMS «1С-Битрикс: Управление сайтом». Для кейса визуальная часть отделена от PHP, корзины, оплаты и аналитики. Демо используют только локальные изображения, контуры, шрифты и JavaScript.
На узком экране управление перестраивается под доступную ширину. Воспроизведение рисования запускается кнопкой и останавливается, когда блок выходит из области просмотра. Увеличением и границей сравнения можно управлять с клавиатуры.
Кейс показывает реализованные решения интерфейса. Измерений изменения конверсии в него не добавляю.