Создание обратной связи и анимации вокруг действий пользователя вашего приложения.
Medium является прекрасным примером улучшения пользовательского опыта.
Кнопка хлопка.
Нажатие на нее вызывает мгновенное высвобождение дофамина. Конфетти, яркая светящаяся анимация, резкая вибрация при нажатии на мобильном телефоне - с этой кнопкой хлопка весело взаимодействовать. Эти микровзаимодействия - это мгновенный способ заставить пользователей полюбить ваше приложение.
Давайте посмотрим на приведенный выше пример до и после. Предыдущий пример просто указывает, что он был нажат с изменением цвета. Блэнд, но выполняет свою работу. Следующий пример сразу дает вам привлекательное зеленое внешнее свечение, когда вы наводите курсор на кнопку, дразня вас, когда вы нажимаете на нее. После нажатия вы получаете взрыв конфетти и ярко-зеленый индикатор, который плавно гаснет, что в конечном итоге соблазнительное взаимодействие заставляет вас нажать еще пару кликов. Предыдущий пример не обязательно плохой…, и он выполняет свою работу …, но мне было весело, нажав на другая кнопка хлопка. Итак, спросите себя: весело ли пользоваться вашим приложением?
Если вы хотите реализовать этот компонент в React, вы можете использовать библиотеку react-clap-button от KikoBeats. Эта библиотека настраивается, то есть вы можете отключить значок, изменить цветовую схему и управлять механизмом подсчета.
Как я могу начать реализовывать микровзаимодействия в моем приложении React?
Самый быстрый способ освоить микровзаимодействия - использовать эту небольшую, но невероятную библиотеку response-rewards. Если вам нужен поток конфетти, парад смайликов или отличная анимация форм, реализация этой гибко настраиваемой библиотеки так же просто, как обернуть любой компонент тегом ‹Reward›.
Давайте посмотрим, как мы можем шаг за шагом реализовать response-rewards в приложении React.
npx create-react-app rewardexample
cd rewardexample
npm i react-rewards
Теперь давайте отредактируем App.js.
Сначала мы хотим импортировать response-rewards.
import Reward from "react-rewards"
Затем выберите компонент, по которому вы хотите получить вознаграждение! Пока что мой App.js выглядит так:
Я добавлю взаимодействие с наградой в наш тег ‹p›.
Оберните выбранный тег тегом ‹Reward› и инициируйте реф. Это должно выглядеть так: (кстати, убедитесь, что приложение является компонентом класса, а не функциональным компонентом)
Затем мы добавим конструктор к нашему компоненту приложения и добавим функцию onClick. Добавьте функцию onClick в наш тег ‹p›, и готово!
Вы можете найти полный пример кода на моем Github
Для большего количества React UX
