Как сделать максимально продающий и запоминающийся сайт: оживить его, добавив интерактивность

Привет! Это команда конструктора сайтов Taptop. И мы, как всегда, расскажем про то, как делать сайты круче. Сегодня фокус на пользовательском опыте — улучшении UX с помощью интерактивности. Покажем маленькие детали, которые имеют большое значение — отзывчивые кнопки, динамичное меню и другие симпатичные вещи. Расскажем, как сделать интересные интерактивные эффекты в Taptop, просто настроив состояния элементов. Поехали!

Интерактивные элементы превращают дизайн-макет из статичной картинки в динамичный и живой сайт. Они делают страницу интереснее, а интерфейс понятнее. А главное, они манят пользователей и зовут к действиям. И, что не менее важно, служат подсказками и ориентирами — где кликнуть, куда ввести данные, на какую страницу перейти.

Стандартный пример интерактива — изменение внешнего вида кнопки или пункта меню при наведении курсора мыши. Таким образом мы показываем пользователю, что на элемент можно кликнуть. Такие микро-анимации дадут посетителям обратную связь и понимание, как взаимодействовать с сайтом.

Помогая пользователям лучше ориентироваться на сайте и подсвечивая для них возможные действия, мы тем самым делаем сайт привлекательнее для клиентов. А это в свою очередь решает задачи бизнеса.

Интерактивные элементы помогают:

Как мы видим, от интерактива хорошо всем — пользователям удобно взаимодействовать с сайтом, а владельцу сайта полезно, что увеличивается вовлеченность посетителей.

Особенно важно добавлять интерактивные эффекты элементам, которые служат для целевого действия пользователей — кнопкам заказа, формам подписки и т.п. Оригинальную кнопку сложно пропустить, так что вероятность клика по ней будет больше.

Интерактивные эффекты можно создать, настроив внешний вид элементов в разных состояниях.

Состояние элемента (State) зависит от действий пользователя. Оно показывает, как он в данный момент взаимодействует с элементом — например, наводит на него курсор мыши или кликает. Так что действие пользователя служит триггером для изменения состояния элемента.

Четыре основных состояния элемента:

Для пунктов меню есть еще одно состояние — открытый (opened), которое определяет пункт меню, выбранный пользователем.

Состояние элемента — это термин из классической верстки сайтов. Так что вышеописанные параметры соответствуют обозначениям в CSS-коде. Создавая сайты в Taptop, вы напрямую работаете с этими параметрами, только с помощью визуального редактора. Поэтому код сайта получается качественный и неперегруженный лишними элементами.

Каждому состоянию — свой дизайн

Создавая дизайн страницы, мы задаем для каждого элемента определенные настройки — цвет, размер, границы и т.п. Это параметры дизайна для его состояния “по умолчанию”.

Для любого другого состояния также можно настроить индивидуальный набор параметров, определяющих его внешний вид.

Для каждого состояния можно менять один параметр дизайна (например, цвет) или сразу несколько (например, размер и положение по оси Х или Y).

От простых эффектов до оригинальных сочетаний

Многие конструкторы сайтов предлагают определенный набор интерактивных эффектов, которые считаются наиболее востребованными. Однако вы не сможете реализовать в них нетипичные решения. Например, можно будет изменить цвет кнопки при наведении, но не получится поменять иконку внутри нее. Для реализации нестандартных идей понадобится писать код.

Платформа Taptop использует другой подход. Настройка интерактивных эффектов через состояния элементов позволяет напрямую использовать все возможности CSS, но без необходимости писать код.

Вариантов может быть множество, так что простор для творческой фантазии огромный.

Плавные переходы между состояниями

При настройке состояний элементов желательно не только задать параметры дизайна, но и создать плавный переход между ними. Иначе получится, например, что кнопка при наведении вдруг резко поменяет размер. Возможно, такой эффект вам тоже пригодится, но для глаза будет приятнее постепенное увеличение размера.

Для создания плавных интерактивных эффектов используются настройки перехода (Transition). Здесь можно настроить следующие параметры:

Если мы создаем у элемента несколько эффектов, можно сделать отдельные настройки перехода для каждого из них. Или настроить единый паттерн перехода для всех эффектов.

В Taptop настройка состояний элемента реализуется с помощью селекторов. Процесс такой — добавляем селектор нужного состояния (например, “при наведении”), задаем для него параметры дизайна и настраиваем плавность перехода.

Попробуем на практике — создадим для кнопки эффект изменения цвета при наведении.

1. Добавим элементу селектор “При наведении”.

2. Настроим дизайн элемента в состоянии “при наведении” — поменяем цвет фона.

3. Настроим плавность перехода — продолжительность 600 ms.

Вот что у нас получилось:

По такому же алгоритму можно настроить и другие состояния элемента. При этом мы можем выбрать любые параметры дизайна, например:

Сделаем несколько вариантов эффектов для кнопки, меняя разные параметры дизайна для состояния “при наведении”.

1. Эффект поднятия кнопки — при наведении кнопка сдвигается вверх и тень становится более размытая.

На скринах ниже показаны 4 шага настроек:

Результат на видео:

2. Увеличение кнопки — при наведении кнопка увеличивается и меняет цвет.

Результат:

3. Эффект мерцающего фона — при наведении цвет кнопки постепенно меняется.

Результат:

4. Поворот кнопки — при наведении кнопка поворачивается под углом и меняет цвет.

Результат:

5. Инверсия кнопки — при наведении у кнопки инвертируются цвет фона и текста, а также иконка.

Результат:

Можно сделать также любые другие эффекты с кнопками — появление рамки, сдвиг в любую сторону, вращение или наклон. Простор для экспериментов огромный.

Чтобы оживить меню на сайте, сделаем следующий эффект — при наведении пункт меню будет немного сдвигаться вверх.

Результат:

Сделаем визуальную подсказку пользователю, когда курсор находится в выбранном поле формы, и можно вводить текст. Для этого создадим эффект — у поля формы в состоянии фокуса (при клике или переходе в него по клавише Tab) цвет фона становится белым и появляется граница внизу.

Результат:

Сделаем эффекты для списка товаров и услуг, чтобы показать, что на элементы можно кликнуть.

1. Сдвиг элемента вправо при наведении.

Результат:

2. Цветовой фильтр.

Результат:

И напоследок важное дополнение — все примеры интерактивных эффектов взяты из шаблонов и библиотек компонентов платформы Taptop. Вы можете бесплатно воспользоваться любым из них и многими другими, а также доработать все элементы под свои требования. Пробуйте, экспериментируйте, а если будут вопросы, пишите в чат поддержки — мы всегда поможем.