Мікровзаємодії: 15 прикладів і як їх розробити
Пояснення мікровзаємодій: визначення, чотири частини Дена Саффера, 15 реальних прикладів, згрупованих за типом, правила проектування та способи їх створення в CSS, Framer Motion, GSAP або ExodeUI.
Основний винос
Мікровзаємодія — це невеликий замкнутий момент в інтерфейсі, який виконує одну дію: лайкає публікацію, перемикає налаштування, підтверджує форму або виконує жест. Термін і його анатомія походять від Дена Саффера, який визначає чотири частини. Тригер запускає його, правила вирішують, що відбувається, зворотний зв’язок показує результат, а цикли або режими керують тим, що він робить з часом. Гарна мікровзаємодія коротка, реагує на власний вхід користувача та не переривається.
Що таке мікровзаємодія?
Мікровзаємодія — це найменша повна взаємодія в продукті: одне завдання з початком, зміною та кінцем. Це не цілий потік. Ставлення лайків до публікації – це мікровзаємодія; написання та публікація коментаря є потоком. Ідея та її структура взяті з книги Дена Саффера «Мікровзаємодії», яка розбиває кожну з них на чотири частини.
Чотири частини мікровзаємодії
Фреймворк Дена Саффера розбиває мікровзаємодію на чотири компоненти. Називати їх корисно, оскільки більшість помилок і більшість поганих рухів живуть в одному з чотирьох, а не в цілому.
Тригер
Подія, яка його починає. Ініціюється користувачем (дотик, наведення курсора, тривале натискання, перетягування) або системою (завершення завантаження, надходження помилки мережі). Авторство: Ден Саффер.
правила
Що відбувається після його запуску: дійсні стани, обмеження, такі як межі перетягування або мінімальні та максимальні значення, а також послідовність подій. Авторство: Ден Саффер.
Зворотній зв'язок
Як продукт повідомляє користувачеві про те, що сталося: весняне осідання, зміна кольору, зміна значка, оновлення тексту. Саме тут живе більша частина моушн-дизайну. Авторство: Ден Саффер.
Петлі та режими
Що робить взаємодія з часом і як режими її змінюють. Той самий перемикач може поводитися по-різному в темному режимі або в компактному макеті без зміни своєї логіки. Авторство: Ден Саффер.
Чому мікровзаємодії важливі
Мікровзаємодія – це те, як інтерфейс відповідає користувачеві без абзацу тексту. Він підтверджує отримання дії, показує, що щось все ще працює, або пояснює, що щойно змінилося. Коли вони відсутні, той самий продукт здається важчим: користувачі натискають двічі, тому що нічого не повідомило їм, що перше натискання припало, або вони чекають на екрані, який не показує жодних ознак прогресу. Добрих більше відчувають, ніж помічають, у чому суть.
15 прикладів мікровзаємодії
Вони згруповані за тим, що вони повідомляють. Там, де ExodeUI надсилає відповідний приклад, ім’я вказується, щоб ви могли його відкривати та редагувати.
Кнопки та перемикачі (натисніть і стан)
1. Натискання кнопки: масштабується приблизно до 0,92 при натисканні вказівника вниз і повертається після відпускання (приклад ExodeUI: Jelly Button). 2. Перемикач: переклад на основі пружини зі зміною кольору під час фіксації (Gooey Toggle). 3. Перемикач режимів: сегментований елемент керування, який пересуває свій індикатор і змінює активну мітку (перемикач руху).
Відгук про форму (перевірка та подання)
4. Недійсне тремтіння при введенні: короткий горизонтальний поштовх із написом «перевірте це поле» без діалогового вікна (Wiggle Text Input). 5. Триває надсилання: кнопка стає індикатором прогресу, тому користувач ніколи не втрачає своє місце (анімована кнопка надсилання). 6. Підтвердження успіху: маленький святковий сплеск на кнопці, коли приземляється дія (кнопка запуску ракети).
Завантаження та прогрес
7. Круговий хід: кільце, яке заповнюється до реального значення та осідає за допомогою пружини (радіальний калібр). 8. Індикатор рівня або активності: панель, яка в реальному часі реагує на вхідні дані, такі як рівень звуку (звукова хвиля).
Навігація
9. Перемикач меню: піктограма, яка змінюється між двома станами та відкриває меню на місці (Morph Nav). 10. Збільшення дока: предмети біля курсору піднімаються та ростуть, а потім осідають (Magnetic Dock). 11. Вибір вкладки: індикатор, який ковзає між вкладками замість блимання (Liquid Tab Bar).
Порожні та успішні стани
12. Порожній стан: маленька ілюстрація, яка анімується один раз, щоб пом’якшити порожній екран. 13. Розкриття винагороди: подарунок або значок, який відкривається з очікуванням, коли буде досягнута віха (Подарункова коробка-сюрприз).
Потягніть, щоб оновити
14. Pull-to-refresh: пружне перекручування, яке відстежує перетягування, а потім повертається назад і фіксується після відпускання. Зворотній зв'язок - це розтяжка, а не обертання.
Зворотній зв'язок у стилі тактильного зв'язку
15. Імпульс підтвердження: коротка шкала та світіння на елементі, що відображає тактильний дотик на мобільному телефоні, тому така сама дія відчувається на пристрої без вібраційного двигуна.
Правила дизайну, які зберігають їх хорошими
Кілька правил відрізняють мікровзаємодію, яка допомагає, від тієї, яка дратує.
- Будьте короткими: найповніше приблизно за 200-400 мс; тривалий рух на маленькому елементі виглядає повільно
- Почніть у тому ж кадрі, що й вхід; запізнілий початок порушує відчуття причини та наслідку
- Зберігайте переривання: якщо користувач змінює дію під час руху, перенаправляйте зі швидкістю, а не перезапускайте з нуля
- Respect prefers-reduced-motion: забезпечте статичний або перехресний резервний варіант, який все ще повідомляє про зміну
- Дайте йому одну роботу: якщо взаємодія потребує кількох рішень, це потік
Як будувати мікровзаємодії
Правильний інструмент залежить від того, на скількох платформах має працювати та сама взаємодія.
Лише 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)}
/>
);
}Ключі Principle, які слід запам’ятати
- Мікровзаємодія — це одне невелике завдання з тригером, правилами, зворотним зв’язком і циклами або режимами, чотири частини, названі Деном Саффером
- Більшість хороших завершуються приблизно за 200-400 мс, починаються в тому ж кадрі, що й вхід, і залишаються переривчастими
- Зворотній зв’язок – це те, що працює: він підтверджує дію та пояснює, що змінилося, часто без тексту
- Завжди надавайте резервний варіант зі зниженим рухом, який передає ту саму інформацію без руху