Хорошая анимация отвечает на вопрос пользователя: «нажалось ли?», «что изменилось?», «откуда это появилось и куда делось?». Большинство интерфейсных анимаций укладываются в 100–500 мс, движутся с замедлением в конце, анимируют только transform и opacity и отключаются, если человек попросил систему уменьшить движение. Анимация, которая ничего не объясняет, а только задерживает или отвлекает от кнопки заявки, вредит продукту, каким бы красивым ни был эффект.
После материала вы сможете
- объяснить, на какой вопрос пользователя отвечает анимация, и отличить функциональное движение от украшения
- выбрать длительность в диапазоне 100–500 мс и кривую ease-out или ease-in под задачу
- назвать свойства, которые безопасно анимировать (transform, opacity), и те, что запускают пересчёт раскладки
- описать, что меняется при включённом «уменьшить движение» и что требуют критерии WCAG 2.3.3 и 2.2.2
Что знать заранее
Содержание
Зачем интерфейсу движение
Микроанимация — короткое движение в ответ на действие: кнопка слегка «вдавливается», переключатель переезжает, карточка улетает в корзину. Моушн в широком смысле — всё движение на экране, включая переходы между страницами и анимации при прокрутке. Nielsen Norman Group сводит полезную анимацию к нескольким задачам: обратная связь, смена состояния, навигационные метафоры и подсказки о том, как ведёт себя элемент.
- Обратная связь — система показывает, что заметила нажатие
- Смена состояния — понятно, что именно изменилось: включилось, раскрылось, сохранилось
- Непрерывность — видно, откуда появилось окно и куда делась удалённая строка
- Внимание — движение направляет взгляд на то, что действительно важно сейчас
Где анимация помогает
Обратная связь
- Пример
- Кнопка меняет вид при нажатии, галочка рисуется после отметки
- Что даёт пользователю
- Уверенность, что действие принято
Смена состояния
- Пример
- Переключатель плавно переезжает, кнопка «Отправить» превращается в «Отправлено»
- Что даёт пользователю
- Понятно, в каком состоянии элемент сейчас
Пространственный переход
- Пример
- Карточка товара раскрывается в полный экран, боковая панель выезжает с того края, где была кнопка
- Что даёт пользователю
- Человек не теряет контекст и знает, как вернуться
Подсказка
- Пример
- Список слегка «пружинит» в конце, намекая, что дальше ничего нет
- Что даёт пользователю
- Поведение интерфейса становится очевидным без инструкций
Ожидание
- Пример
- Skeleton с мягким переливом вместо пустого экрана
- Что даёт пользователю
- Загрузка ощущается живой, а не зависшей
На проектах InterLAB мы начинаем с этих функциональных анимаций и только потом обсуждаем «вау-эффекты». Аккуратная обратная связь на каждой кнопке делает продукт дороже на ощупь сильнее, чем один эффектный экран.
Длительность и плавность
Самая частая ошибка — слишком долгая анимация. Nielsen Norman Group в разборе длительности анимаций приводит такие ориентиры:
100 мс100 мс
простая обратная связь: галочка, переключатель
200–300 мс200–300 мс
заметные изменения экрана, например появление модального окна
500 мс500 мс
порог, после которого анимация начинает раздражать
- Easing (кривая скорости) важнее длительности: линейное движение выглядит механическим и неестественным
- Для появления чаще всего подходит ease-out — быстрый старт и мягкая остановка, глаз успевает предсказать, где элемент замрёт
- Для ухода с экрана иногда используют ease-in — элемент разгоняется и «уезжает»
- Исчезновение делайте чуть короче появления: окно может открываться за 300 мс, а закрываться за 200–250 мс
- Чем больше расстояние и элемент, тем длиннее движение; мелочи должны быть быстрыми
Анимации при прокрутке
Scroll-driven motion — движение, привязанное к прокрутке: блоки проявляются, картинки сдвигаются с разной скоростью, видео прокручивается вместе со страницей. Это сильный инструмент для промо-страниц и рассказов о продукте, но и главный источник раздражения, если перестараться. В CSS появились нативные анимации, привязанные к прокрутке (описаны в MDN), — они не нагружают страницу скриптами, но поддержку в браузерах стоит проверять и оставлять запасной вариант.
Помогает
- Мягкое проявление блоков, когда они входят в экран
- Один ключевой механизм, который объясняет продукт: например, сборка устройства по мере прокрутки
- Индикатор прочитанного в длинной статье
- Шапка, которая сжимается и освобождает место под контент
Мешает
- Перехват прокрутки: страница едет не так, как крутит колесо или палец
- Текст, который проявляется так медленно, что его ждёшь
- Анимация на каждом блоке подряд — эффект перестаёт что-либо значить
- Цена или кнопка заявки, которые «прилетают» последними
Производительность: что анимировать
Плавность анимации зависит от того, какие свойства меняются. Чтобы показать кадр, браузер проходит несколько этапов, и чем раньше этап затронут, тем дороже каждый кадр. web.dev рекомендует по возможности анимировать только transform и opacity и избегать свойств, которые запускают перерасчёт раскладки или перерисовку.
- 01СтилиБраузер вычисляет, какие CSS-правила применяются к элементам
- 02Раскладка (layout)Пересчёт размеров и положения: его запускают width, height, top, margin
- 03Отрисовка (paint)Заливка пикселей: цвета, тени, фоны
- 04КомпозицияСборка готовых слоёв — здесь работают transform и opacity, это самый дешёвый этап
- Двигаем и масштабируем через transform, а не через top, left, width
- Проявляем через opacity, а не через смену display или height
- Не анимируем тени и размытие на больших площадях без необходимости
- Проверяем на недорогом Android-телефоне, а не только на мощном ноутбуке
- Тяжёлые эффекты подгружаем только там, где они видны
Доступность: уважать prefers-reduced-motion
У части людей крупное движение на экране вызывает головокружение и тошноту — особенно параллакс, масштабирование и резкие переходы. В настройках iOS, Android, Windows и macOS есть пункт «уменьшить движение», и сайт может узнать о нём через медиазапрос prefers-reduced-motion (описан в MDN и web.dev). WCAG 2.3.3 рекомендует давать возможность отключить анимацию, запущенную действием пользователя, а критерий 2.2.2 требует, чтобы автоматическое движение длиннее пяти секунд можно было остановить.
Проверяем настройку
Если пользователь включил «уменьшить движение», крупные перемещения, параллакс и автопрокрутку отключаем.
Заменяем, а не удаляем
Вместо вылета сбоку — мягкое проявление: обратная связь остаётся, укачивающее движение уходит.
Даём паузу
Карусели, бегущие строки и фоновое видео можно остановить кнопкой.
Проверяем руками
Включаем настройку на телефоне и проходим ключевые сценарии сайта.
Когда моушн вредит заявкам
Nielsen Norman Group отмечает, что движение на периферии зрения — всплывающий чат, выезжающий баннер — отвлекает от основной задачи, а самый ненавязчивый вариант часто вообще без анимации. Для сайта, который должен приносить заявки, это прямой риск.
- Прелоадер с логотипом перед показом сайта — человек ждёт ради заставки
- Тяжёлые эффекты, из-за которых страница долго грузится и дёргается на телефоне
- Всплывающие окна и виджеты, которые выезжают, пока человек читает
- Анимированные элементы рядом с формой, отвлекающие от заполнения
- Эффект ради эффекта, который не отвечает ни на одно сомнение клиента
Лучшая анимация — та, которую пользователь не замечает, но без которой интерфейс сразу показался бы «деревянным».
Источники
- Nielsen Norman Group — The Role of Animation and Motion in UX
- Nielsen Norman Group — Executing UX Animations: Duration and Motion Characteristics
- Nielsen Norman Group — Animation for Attention and Comprehension
- web.dev — How to create high-performance CSS animations
- web.dev — prefers-reduced-motion: Sometimes less movement is more
- MDN — prefers-reduced-motion CSS media feature
- MDN — CSS scroll-driven animations
- W3C WAI — Understanding SC 2.3.3: Animation from Interactions
- W3C WAI — Understanding SC 2.2.2: Pause, Stop, Hide
- Apple Human Interface Guidelines — Motion