Микроанимация — это короткая анимация (150–300 мс), которая даёт обратную связь на действие, объясняет изменение состояния и направляет внимание. Применяется там, где нужно подтвердить действие (нажатие кнопки), объяснить переход (появление элемента) или направить взгляд (на CTA). Главное правило: анимация не для красоты, а для снижения когнитивной нагрузки. Если её убрать и интерфейс станет хуже — она нужна. Если ничего не меняется — она лишняя.
Что такое микроанимация и микровзаимодействие
Микроанимация — это анимация отдельного элемента интерфейса. Микровзаимодействие — это анимация + логика: что происходит при действии пользователя, какая обратная связь, какие состояния.
Примеры микроанимаций:
- кнопка чуть увеличивается при наведении;
- чекбокс плавно закрашивается при выборе;
- модальное окно выезжает сверху с лёгким замедлением;
- лайк в соцсети сопровождается сердечком, которое «выпрыгивает»;
- новый элемент списка появляется с fade-in.
У каждой микроанимации есть конкретная задача — не «сделать красиво». Если задачу нельзя сформулировать, анимация лишняя.
Четыре функции микроанимации
| Функция | Пример | Что даёт |
|---|---|---|
| Обратная связь | Кнопка меняет цвет при нажатии | Подтверждает, что действие сработало |
| Объяснение изменения | Раскрывающийся аккордеон | Показывает, откуда появился контент |
| Наведение внимания | Лёгкая пульсация CTA | Указывает, куда нажать |
| Снижение тревоги | Скелетный экран при загрузке | Объясняет, что процесс идёт |
Без этих анимаций интерфейс остаётся «мёртвым»: пользователь не понимает, сработало ли нажатие, куда делся контент, что вообще происходит. С ними — интерфейс ощущается живым и предсказуемым.
Длительность: 150–300 мс правило
Длительность анимации — ключевой параметр. Слишком короткая — выглядит резко, пользователь не успевает заметить изменение. Слишком длинная — раздражает, замедляет работу.
| Тип анимации | Длительность |
|---|---|
| Hover-эффект | 100–200 мс |
| Появление/скрытие элемента | 200–300 мс |
| Переход между состояниями | 200–400 мс |
| Загрузка (skeleton) | 1000–1500 мс, в цикле |
| Переход между экранами | 300–500 мс |
Правило: пользователь должен заметить анимацию, но не ждать её. Если анимация длится дольше 500 мс — её либо сокращают, либо делают прерываемой (пользователь может начать следующее действие до её окончания).
Easing: кривая, которая делает движение естественным
Linear-анимация (равномерное движение) в природе не встречается. Реальные объекты ускоряются и замедляются — из-за инерции, трения, гравитации. Поэтому в интерфейсе linear выглядит неестественно и дёшево.
Базовые типы easing:
| Тип | Характер | Когда использовать |
|---|---|---|
| Linear | Равномерное | Только для прогресс-баров и пульсаций |
| Ease-out | Быстрый старт, плавный финал | Появление элементов, появление модалок |
| Ease-in | Плавный старт, быстрый финал | Скрытие элементов, уход за пределы экрана |
| Ease-in-out | Плавный старт и финал | Движение по экрану, изменение положения |
| Spring (пружина) | С лёгким отскоком | Иконки, лайки, игривые взаимодействия |
Стандартный выбор для большинства микроанимаций — ease-out или ease-in-out. Spring — для мобильных приложений и неформальных интерфейсов, где уместна «физика».
Где анимация улучшает UX
1. Подтверждение действия
Любое действие пользователя должно подтверждаться мгновенно. Если после нажатия на кнопку ничего не происходит 0.5 секунды — пользователь нажимает снова, думая, что не сработало.
Примеры:
- кнопка меняет цвет и слегка уменьшается при нажатии;
- чекбокс закрашивается галочкой;
- иконка лайка меняет цвет и подскакивает.
2. Появление и исчезновение контента
Когда элемент появляется резко — пользователь теряет контекст. Откуда он взялся? Это то, что я только что нажал? Анимация объясняет связь между действием и результатом.
Примеры:
- модальное окно выезжает сверху с затемнением фона;
- раскрывающийся блок плавно увеличивается по высоте;
- toast-уведомление выезжает снизу и через 3 секунды уходит обратно.
3. Навигация между экранами
При переходе между экранами пользователь должен понимать, где он оказался. Анимация перехода показывает связь между старым и новым экраном:
- push-анимация (новый экран «выталкивает» старый) — навигация вперёд;
- slide-back — возврат назад;
- fade — переключение вкладок.
Без анимации переход выглядит как «всё моргнуло, и я где-то в другом месте». С анимацией — пользователь понимает логику перемещения.
4. Загрузка и ожидание
Ожидание — главная причина раздражения в интерфейсах. Анимация не ускоряет процесс, но снижает ощущение ожидания:
- скелетный экран (skeleton). Серые блоки повторяют структуру будущего контента. Пользователь видит, что контент загружается, а не сайт завис.
- прогресс-бар. Когда известно время загрузки — показывает, сколько осталось.
- spinner. Используйте только если время неизвестно и меньше 5 секунд. Дольше — переключайтесь на прогресс-бар с конкретикой.
Где анимация не нужна и мешает
- На читаемом тексте. Анимация появления абзацев, моргающий курсор, печатающийся текст — отвлекают от чтения.
- На каждом элементе сразу. Когда при заходе на экран «всё танцует» — перегруз, пользователь устаёт.
- На статичных элементах. Иконка в подвале, логотип в шапке — анимация там не нужна.
- Длинные анимации (больше 500 мс). Замедляют работу, раздражают при частом использовании.
- Анимация ради тренда. «Сейчас модно» — не аргумент. Если анимация не решает задачу — уберите её.
Доступность: prefers-reduced-motion
Часть пользователей плохо переносит анимации: головокружение, тошнота, дискомфорт при вестибулярных расстройствах. WCAG требует поддержки режима prefers-reduced-motion — это медиа-запрос, который отключает или минимизирует анимацию, если пользователь включил эту настройку в системе.
В коде это реализуется так: для всех анимаций задаётся @media (prefers-reduced-motion: reduce), внутри которого animation: none или transition-duration: 0.01s. Минимум — убрать движение, оставить смену состояния.
Как тестировать микроанимации
- Проверьте без анимации. Отключите её и посмотрите — стал ли интерфейс хуже? Если нет — анимация не нужна.
- Прогоните на медленном устройстве. На старом смартфоне анимация может тормозить и выглядеть хуже, чем без неё.
- Проверьте при частом использовании. Если анимация красивая в первый раз, но раздражает на двадцатом — её надо сокращать или убирать.
- Соберите обратную связь. Пользователи редко хвалят микроанимации, но жалуются на «тормозящий» или «прыгающий» интерфейс.
Минимальный набор микроанимаций для цифрового продукта
Если ресурсов мало, сделайте минимум:
- hover-эффекты на всех интерактивных элементах (100–150 мс);
- переход между состояниями форм, кнопок, чекбоксов (150–200 мс);
- появление/исчезновение модальных окон (200–300 мс);
- скелетные экраны при загрузке контента;
- toast-уведомления для обратной связи после действия.
Этого достаточно, чтобы интерфейс ощущался живым. Дальше — по мере ресурса и потребностей.
Микроанимации — это не украшательство, а инструмент снижения когнитивной нагрузки. Каждая анимация должна отвечать на вопрос: что она объясняет, подтверждает или наводит. Если ответа нет — анимация лишняя и крадёт внимание. Хорошая микроанимация незаметна: пользователь не думает «как красиво», он просто понимает, что происходит.
Комментарии · 0