Микровзаимодействия: 15 примеров и как их проектировать
Объяснение микровзаимодействий: определение, четыре части Дэна Саффера, 15 реальных примеров, сгруппированных по типу, правила проектирования и способы их построения в CSS, Framer Motion, GSAP или ExodeUI.
Главное
Микровзаимодействие — это небольшой, ограниченный момент в интерфейсе, который выполняет одно действие: лайкает публикацию, переключает настройки, подтверждает форму или завершает жест. Этот термин и его анатомия взяты из Дэна Саффера, который определяет четыре части. Его запускает триггер, правила решают, что произойдет, обратная связь показывает результат, а циклы или режимы управляют тем, что он делает с течением времени. Хорошие микровзаимодействия короткие, реагируют на действия пользователя и не прерываются.
Что такое микровзаимодействие?
Микровзаимодействие — это наименьшее полное взаимодействие в продукте: отдельная задача с началом, изменением и концом. Это не целый поток. Лайк публикации — это микровзаимодействие; написание и публикация комментария — это поток. Идея и ее структура взяты из книги Дэна Саффера «Микровзаимодействия», в которой каждое из них разделено на четыре части.
Четыре части микровзаимодействия
Концепция Дэна Саффера разбивает микровзаимодействие на четыре компонента. Давать им имена полезно, потому что большинство ошибок и наиболее плохих движений обитают в одном из четырех, а не в целом.
Курок
Событие, которое его запускает. Инициируется пользователем (нажатие, наведение, длительное нажатие, перетаскивание) или инициируется системой (завершение загрузки, появление сетевой ошибки). Кредит: Дэн Саффер.
Правила
Что происходит после запуска: допустимые состояния, ограничения, такие как границы перетаскивания или минимальные и максимальные значения, а также последовательность событий. Кредит: Дэн Саффер.
Обратная связь
Как продукт сообщает пользователю, что произошло: установка пружины, изменение цвета, трансформация значков, обновление текста. Именно здесь живет большая часть моушн-дизайна. Кредит: Дэн Саффер.
Петли и режимы
Что происходит во время взаимодействия и как его меняют режимы. Один и тот же переключатель может вести себя по-разному в темном режиме или в компактном макете без изменения его логики. Кредит: Дэн Саффер.
Почему микровзаимодействия важны
Микровзаимодействие — это то, как интерфейс отвечает пользователю без абзаца текста. Он подтверждает получение действия, показывает, что что-то все еще работает, или объясняет, что только что изменилось. Когда они отсутствуют, один и тот же продукт кажется тяжелее: пользователи нажимают дважды, потому что ничто не предупредило их о первом нажатии, или они ждут на экране, который не подает никаких признаков прогресса. Хорошие больше чувствуются, чем замечаются, вот в чем дело.
15 примеров микровзаимодействий
Они сгруппированы по тому, что они сообщают. Там, где ExodeUI предоставляет соответствующий пример, указывается имя, поэтому вы можете открыть и отредактировать его.
Кнопки и переключатели (нажмите и укажите состояние)
1. Нажатие кнопки: масштабируется примерно до 0,92 при опускании указателя и возвращается назад при отпускании (пример ExodeUI: кнопка Jelly). 2. Переключатель: перевод на основе Spring с изменением цвета при фиксации (Gooey Toggle). 3. Переключатель режима: сегментированный элемент управления, который перемещает свой индикатор и изменяет активную метку (переключатель движения).
Форма обратной связи (проверка и отправка)
4. Недопустимое встряхивание ввода: короткое горизонтальное нажатие с надписью «проверьте это поле» без диалогового окна (покачивание ввода текста). 5. Выполняется отправка: кнопка становится индикатором выполнения, поэтому пользователь никогда не теряет свое место (анимированная кнопка отправки). 6. Подтверждение успеха: небольшой праздничный взрыв на кнопке при приземлении действия (Кнопка запуска ракеты).
Загрузка и прогресс
7. Круговой ход: кольцо, которое заполняется до фактического значения и устанавливается с помощью пружины (радиальный датчик). 8. Измеритель уровня или активности: полоса, которая в реальном времени реагирует на входящие данные, такие как уровень звука (звуковая волна).
Навигация
9. Переключение меню: значок, который меняется между двумя состояниями и отображает меню на месте (Morph Nav). 10. Увеличение дока: элементы рядом с курсором поднимаются и увеличиваются, а затем оседают (Магнитная док-станция). 11. Выбор вкладок: индикатор, который перемещается между вкладками, а не мигает (Жидкая панель вкладок).
Пустые и успешные состояния
12. Пустое состояние: небольшая иллюстрация, которая анимируется один раз, чтобы смягчить пустой экран. 13. Раскрытие награды: подарок или значок, который открывается с нетерпением при достижении определенного этапа (Подарочная коробка-сюрприз).
Обновление по запросу
14. Потяните, чтобы обновить: эластичная прокрутка, которая отслеживает сопротивление, затем возвращается назад и стабилизируется при отпускании. Обратная связь — это растяжка, а не спиннер.
Обратная связь в тактильном стиле
15. Импульс подтверждения: краткая шкала и свечение на элементе, который отражает тактильное касание на мобильном телефоне, поэтому то же действие ощущается одинаково на устройстве без вибромотора.
Правила дизайна, которые делают их хорошими
Несколько правил отделяют микровзаимодействие, которое помогает, от раздражающего.
- Будьте кратки: максимальное завершение занимает примерно 200–400 мс; более длительное движение на маленьком элементе кажется медленным
- Начните в том же кадре, что и входные данные; отсроченный старт нарушает ощущение причины и следствия
- Сохраняйте возможность прерывания: если пользователь меняет действие во время движения, перенаправляйте его со скоростью, а не перезапускайте с нуля.
- Уважение предпочитает ограниченное движение: обеспечьте статический или плавный резервный вариант, который по-прежнему сообщает об изменении.
- Дайте ему одну задачу: если взаимодействие требует более одного решения, это поток.
Как выстраивать микровзаимодействия
Правильный инструмент зависит от того, на скольких платформах должно выполняться одно и то же взаимодействие.
только CSS
Подходит для простых, автономных случаев: подъемников при наведении, колец фокусировки и переключателей, управляемых :checked или сменой класса. Переходов и @keyframes достаточно, и кроме таблицы стилей нечего добавлять.
Framer Motion или GSAP (Интернет)
Хорошо, когда для движения нужны пружины, жесты или оркестровка, и его нужно запускать только в Интернете. Оба дают прерываемые пружины и могут управляться состоянием React.
ExodeUI (веб, iOS и Android из одного файла)
Используйте это, когда одно и то же взаимодействие должно вести себя одинаково в приложении React, приложении SwiftUI и Flutter. Вы создаете его один раз в файле .exode, и среда выполнения воспроизводит его на каждой платформе, поэтому перезапись для каждой платформы не требуется.
Пример реализации для продакшена
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Ключевые принципы
- Микровзаимодействие — это одна небольшая задача с триггером, правилами, обратной связью и циклами или режимами — четырьмя частями, названными Дэном Саффером.
- Большинство хороших завершаются примерно за 200-400 мс, начинаются в том же кадре, что и входные данные, и остаются прерываемыми.
- Обратная связь — это то, что делает работу: она подтверждает действие и объясняет, что изменилось, часто без какого-либо текста.
- Всегда предоставляйте запасной вариант с ограничением движения, который передает ту же информацию без движения.