interaction-design

Interaction Design от William Shobson — практический skill для микроинтеракций, motion design, переходов и паттернов обратной связи. Его применяют, когда нужно усилить понятность UI: показать, что действие принято, объяснить перемещение элемента, направить внимание к изменению состояния и сохранить непрерывность при переходе между состояниями. В область навыка входят loading states и skeleton screens, page и component transitions, gesture interactions, notification и toast systems, drag-and-drop, scroll-triggered animations, hover и focus states. Motion здесь рассматривается как средство коммуникации, а не как украшение само по себе. Для ритма интерфейса источник предлагает шкалу длительностей. Микрообратная связь вроде hover и click обычно занимает 100–150 мс, небольшие transition для toggle или dropdown — 200–300 мс, modal и page changes — 300–500 мс, а более сложная хореография может занимать 500 мс и больше. Для easing приведены decelerate при входе, accelerate при выходе, in-out для перемещения между состояниями и spring с overshoot для playful-реакций. Эти значения являются ориентирами из skill, а не доказательством того, что любое приложение должно использовать ровно такую длительность. Набор примеров покрывает типовые задачи. Skeleton сохраняет геометрию карточки во время загрузки; progress bar показывает determinate progress; toggle сочетает aria-checked, цветовой переход и движение thumb; AnimatePresence и layout animation помогают связать уходящее и появляющееся состояние страницы. Ripple button вычисляет позицию клика относительно кнопки и очищает временные ripple-элементы, а swipe-to-dismiss использует drag по оси X и порог смещения 100 пикселей из примера. Для реализации автор показывает React/TSX-паттерны с motion-компонентами и CSS-переходы, но конкретная библиотека и стили должны соответствовать проекту. CSS-часть навыка предлагает простые keyframes для fadeIn, pulse и spin, transition для transform и box-shadow, а также ограничение анимации свойствами, которые не заставляют браузер постоянно пересчитывать layout. В best practices отдельно выделено использование transform и opacity для плавности, единая шкала timing, предпочтение spring physics, возможность прервать долгую анимацию и progressive enhancement, при котором интерфейс работает и без JS-анимаций. Анимацию width, height, top и left источник относит к частым причинам jank; will-change следует применять экономно. Доступность обязательна. Для пользователей с prefers-reduced-motion нужно сокращать duration и iteration count через media query или передавать нулевую длительность в motion-компонент. Интерактив нельзя блокировать на время декоративного перехода, а обработчики анимации нужно очищать при unmount, чтобы не оставлять memory leaks. Hover не должен быть единственным способом получить обратную связь, а focus state должен оставаться заметным. Отдельно рекомендуется тестировать реальные устройства, потому что производительность и touch-поведение различаются. Ограничение карточки простое: skill даёт паттерны и критерии ревью, но не универсальную animation library и не готовый дизайн для любого продукта. Нельзя считать красивую motion-реакцию доказанно полезной без проверки контекста, клавиатуры, reduced motion, отмены действия и производительности. Сначала определите, какое состояние нужно объяснить пользователю, затем выберите самый короткий transition и проверьте его на устройствах; если движение мешает вводу, создаёт fatigue или не работает без JavaScript, его нужно упростить или убрать.