Осмысленное движение

Что это такое

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

Почему это важно

Анимация — одна из немногих вещей в интерфейсе, способных заставить его казаться медленнее, чем он есть. Переход в 400 мс на меню делает каждое открытие обстоятельным, а каждое закрытие — сломанным; то же меню за 120 мс ощущается мгновенным и всё равно сообщает направление. Длительность и сглаживание и есть весь эффект, поэтому их нужно решать, а не угадывать, и они должны быть согласованными. Продукт, где у каждого перехода своё время, читается как неотшлифованный, даже когда каждый по отдельности хорош. Другая половина — сдержанность: движение, которое не несёт сообщения, первым идёт под нож, когда страница кажется тяжёлой.

Ключевые идеи

Движение должно объяснять изменение в пространстве

Если панель принадлежит правому краю, она должна появляться справа. Если элемент удалили из списка, он должен схлопнуться на своём месте, а не исчезнуть. Информацией, а не украшением, движение делает именно согласование его направления с геометрией изменения.

.drawer {
  transform: translateX(100%);
  transition: transform 160ms ease-out;
}

.drawer.is-open { transform: translateX(0); }

Входите медленно, выходите быстро

Воспринимаемая скорость асимметрична: элемент может позволить себе прибывать не спеша и не ощущаться медленным, но всё, что задерживается на выходе, блокирует следующее действие. Обычное правило — держать выходы примерно на две трети длительности входа и давать им более простой путь.

.panel { transition: opacity 200ms ease-out, transform 200ms ease-out; }
.panel.is-closing { transition-duration: 120ms; }

Длительность масштабируется по расстоянию, а не по важности

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

Переходы — для состояний, ключевые кадры — для последовательностей

Переход анимирует между двумя состояниями, которые у элемента уже есть, и естественно разворачивается, когда состояние переключается обратно. Анимация по ключевым кадрам описывает последовательность с собственной шкалой времени: это правильно для спиннера или иллюстрации и неправильно для всего, что должно отвечать на действие пользователя на полпути.

Движение может заменять текст

Незаметное изменение состояния на элементе управления — короткое нажатие, смена цвета — подтверждает клик ещё до прихода результата. Это законное применение: обратная связь о состоянии системы, и она оправдывает свои несколько миллисекунд.

Практика

Сравните три длительности друг с другом

Соберите одно и то же меню на 120 мс, 240 мс и 400 мс и откройте-закройте каждое по пять раз подряд.

Готово, когда: вы можете назвать длительность, на которой оно перестаёт ощущаться отзывчивым, а выбранное значение лежит ниже неё и имеет более быстрый выход.

Заставьте одно удаление объяснить себя

Возьмите список, который удаляет строку по клику. Анимируйте уход высоты и прозрачности строки до того, как она убрана из DOM, а затем удалите узел, когда анимация закончится.

Готово, когда: соседние строки плавно поднимаются, а не прыгают, а быстрый клик по двум строкам всё равно оставляет список согласованным.

Частые ошибки

Анимация всего на странице — интерфейс ощущается медленнее, а внимание пользователя притягивают неважные изменения; исправить: анимируйте только изменения, которые иначе были бы двусмысленными.
Одна длинная длительность повсюду — каждое взаимодействие ощущается как ожидание; исправить: держите длительности между 100 мс и 250 мс и берите нижнюю границу для малых изменений.
Анимация исчезновения элемента без сообщения — строка пропадает, будто это ошибка; исправить: схлопните или растворите её на месте.
Симметричное время входа и выхода — закрывающее движение блокирует следующее действие; исправить: делайте выходы короче входов.
Запуск анимации по ключевым кадрам для смены состояния из двух состояний — анимацию нельзя прервать, и элемент с состоянием расходятся; исправить: используйте переход на классе, который отражает состояние.

Что читать дальше

Каскадные таблицы стилей (CSS) (02-frontend/05-css) — переходы, трансформации и правила композитинга, от которых зависит, что анимируется дёшево.
Уменьшенное движение и производительность (02-frontend/16-motion-design/02-reduced-motion-and-performance) — обязательства по доступности и частоте кадров, идущие вместе с этим выбором.
Интерактивный дизайн (03-design-ux/44-interaction-design) — более широкая дисциплина, частью которой является время обратной связи.