12 принципов анимации, которые работают и в интерфейсах

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

Замедление в начале и в конце

В реальном мире ничто не начинает и не прекращает движение мгновенно. Плавные кривые ускорения делают интерфейс «физичным» и приятным. Линейная анимация почти всегда выглядит механической.

Предвосхищение

Небольшое движение перед основным действием готовит глаз пользователя. Например, кнопка слегка сжимается перед тем, как раскрыться в меню.

Сжатие и растяжение

В интерфейсах его нужно дозировать: пара процентов деформации при нажатии добавляет живости, а больше уже отвлекает.

Сквозное действие

Элементы списка появляются не одновременно, а с небольшой задержкой друг за другом. Так глаз легче считывает структуру.

Тайминг

Большинство интерфейсных анимаций укладывается в 150–400 мс. Короче — пользователь не заметит, длиннее — начнёт ждать.

Остальные принципы — дуги, второстепенное действие, выразительность — мы разберём в следующей статье.

← Все статьи