Motion-дизайн, который помогает, а не раздражает: принципы которые работают

Интерфейс без анимаций — не нейтральный. Он общается через мгновенные переключения состояний которые мозг с трудом отслеживает. Нажал кнопку — резко оказался на другой странице. Произошло что-то? Где я был? Где я теперь?

Анимация отвечает на эти вопросы. Но только если она функциональная, а не декоративная. Разница между «помогает» и «раздражает» — не в красоте. В наличии цели.

## Тест который всё объясняет

Мудлы сформулировали его точно: опиши словами что сообщает эта анимация. Если не можешь назвать конкретную информацию — анимация лишняя.

Карточка которая сдвигается при удалении сообщает: «этот элемент ушёл». Список который перестраивается при сортировке сообщает: «вот куда переместились эти элементы». Фоновый градиент который постоянно плавно меняется не сообщает ничего — он просто движется.

Пять причин по которым анимация оправдана: объяснить изменение состояния, направить внимание, дать обратную связь на действие, показать пространственную связь, подчеркнуть характер бренда. Если анимация не попадает ни в одну — убрать.

## Пять принципов функциональной анимации

### Цель прежде всего

Каждая анимация решает задачу или её нет. Анимация должна прояснять, направлять или подтверждать — если она этого не делает, её не должно быть.

Конкретные ситуации где анимация нужна: смена состояний компонента (hover, active, disabled, loading), появление и исчезновение элементов из DOM, переход между экранами, обратная связь на действие пользователя.

Ситуации где не нужна: фоновые элементы которые не интерактивны, постоянно движущиеся декоративные паттерны, анимация на элементах с которыми пользователь не взаимодействует.

Практический способ проверить: закрой глаза и объясни анимацию словами. «Кнопка слегка вдавливается при нажатии — это тактильная обратная связь». «Карточка плавно появляется снизу — это пространственный переход». «Фон медленно меняет оттенок» — это что? Если нет ответа — убирай.

### Скорость имеет значение

Google Material Design фиксирует 200мс как референсную длительность для стандартных переходов, 300мс для межэкранных. Apple HIG предлагает похожие значения.

Ориентиры для UI:

• Микровзаимодействия (hover, tap): 100–150мс
• Показать/скрыть элемент: 200–300мс
• Переход между экранами: 300–400мс
• Сложные нарративные анимации: 400–700мс

Меньше 100мс — не воспринимается как анимация, воспринимается как мгновенное переключение. Больше 500мс для функциональных элементов — ощущается как задержка. Пользователь начинает думать что продукт медленный — хотя дело только в анимации.

### Easing — не опция

Все интерфейсные анимации должны использовать easing-кривые, не линейное движение. Ничто в физическом мире не движется с постоянной скоростью.

Практические правила:

• ease-out — для входящих элементов, имитирует торможение при остановке
• ease-in — для уходящих элементов, ускоряется и исчезает
• ease-in-out — для перемещений между состояниями
• linear — только для прогресс-баров и ротационных спиннеров

### Иерархия движения

Когда несколько элементов движутся одновременно — анимируй их с задержкой, не одновременно. Список из восьми карточек появляющихся с 60мс между каждой воспринимается плавно. Те же восемь одновременно — как резкая вспышка.

Не больше 3–4 одновременных анимаций в разных частях экрана. Глаз не знает куда смотреть — пользователь теряет ориентацию и чувствует хаос вместо движения.

### Пользователь контролирует движение

prefers-reduced-motion — системная настройка которую пользователи включают по медицинским причинам или личным предпочтениям. Вестибулярные нарушения затрагивают около 35% взрослых старше 40 лет — у части из них параллакс и масштабные движения вызывают физические симптомы.

Минимальная защита — одно CSS-правило:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

## Принципы Disney которые работают в UI

12 принципов анимации 1981 года применяются к интерфейсам с адаптацией:

Squash and stretch. Кнопки слегка сжимаются при нажатии (scale(0.97)) — тактильная метафора физического нажатия. Хорошо работает для primary CTA, плохо — для навигационных элементов.

Anticipation. Drawer начинает движение чуть медленнее — пользователь успевает подготовиться к изменению. Применяется к выдвижным панелям и dropdown.

Follow-through. Элементы чуть перелетают точку назначения и возвращаются. cubic-bezier(0.34, 1.56, 0.64, 1) — стандартный способ добавить этот эффект. Не злоупотреблять: работает для иконок и маленьких элементов, ломает восприятие на больших.

Secondary action. Вспомогательные элементы реагируют на основное действие. Например: при добавлении товара в корзину иконка корзины в хедере слегка «прыгает». Это подтверждение без явного уведомления.

Главное — не применять все принципы сразу. Один нюанс который добавляет жизни лучше пяти которые создают хаос.

## Анимация и производительность: что нельзя анимировать

AI-инструменты иногда генерируют анимации через top, left, width, height. Это вызывает layout reflow — браузер пересчитывает положение всех элементов на каждом кадре. На мобильных устройствах это заметно.

Что анимировать безопасно (работает на GPU, без reflow):

• transform: translate, scale, rotate
• opacity

Что не анимировать:

• top, left, right, bottom
• width, height
• margin, padding
• font-size

Простое правило: если CSS-свойство влияет на размер или положение других элементов — не анимируй напрямую, используй transform.

## Промпт для Codex / Claude Code

Проверь все CSS transition и animation в проекте на соответствие
принципам производительной анимации.

Найди:
1. Анимации через top/left/width/height вместо transform — замени
2. Анимации без easing (linear) на UI-элементах — добавь ease-out
3. Анимации длиннее 400мс на кнопках и микровзаимодействиях — сократи
4. Отсутствие @media (prefers-reduced-motion: reduce) — добавь

Для каждого: файл и строка, текущий код, исправленный вариант.

## Когда анимация начала раздражать — и почему это происходит

Самый частый сценарий: дизайнер добавляет анимации по одной. Каждая кажется уместной. Hover на кнопке — логично. Появление карточек с stagger — красиво. Fade между вкладками — аккуратно. Плавный переход при загрузке — профессионально.

А потом открываешь продукт глазами пользователя который хочет быстро выполнить задачу — и понимаешь что каждый шаг сопровождается движением. Меню анимируется. Контент появляется. Кнопка реагирует. Уведомление выплывает. В сумме — постоянный фоновый шум.

Проблема не в каждой конкретной анимации. Проблема в кумулятивном эффекте.

Один способ проверить: пройди основной пользовательский сценарий без мыши — только наблюдай. Сколько раз что-то двигается? Если больше 10 раз на 5 шагов — вероятно слишком много.

## Motion в дизайн-системе: почему это важнее чем кажется

Большинство дизайн-систем тщательно документируют цвета, типографику, компоненты. Motion — редко. В итоге каждый разработчик и каждый AI-инструмент принимает решения об анимациях самостоятельно. Одна страница с ease-out, другая с linear, третья с spring. Продукт теряет motion-идентичность.

Решение: motion-токены в DESIGN.md. Несколько строк которые задают систему:

## Motion
duration-fast: 150ms     # hover, tap
duration-base: 250ms     # показать/скрыть
duration-slow: 350ms     # экранные переходы
easing-enter: cubic-bezier(0.16, 1, 0.3, 1)
easing-exit: cubic-bezier(0.4, 0, 1, 1)
stagger-interval: 70ms

С этим контекстом AI-инструменты генерируют консистентные анимации. Без него — каждый экран чуть отличается.

☐ Каждая анимация: одно предложение о том что она сообщает
☐ Hover/tap — 100–150мс ease-out
☐ Показать/скрыть — 200–300мс ease-out
☐ Нет linear easing на UI-элементах (только прогресс/спиннер)
☐ Stagger для групп: 60–80мс между элементами
☐ Не больше 3–4 анимаций одновременно на экране
☐ Только transform и opacity (не top/left/width/height)
☐ prefers-reduced-motion обработан
☐ Анимации не задерживают отклик на действие пользователя