<aside> ℹ️ Примерное время на прочтение: 30 минут. Не забывайте о полезных ссылках для самостоятельного изучения темы.

</aside>

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

Анимация усиливает и насыщает пользовательский опыт, а также является мостом между виртуальным и реальным миром.

Например, курсор в форме буквы "i" в текстовом поле или лёгкое дрожание при вводе неправильного пароля, словно кто-то качает головой.

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

Самым простым примером прерывания видео ряда является моргание. Во время моргания вы видите как минимум 3 кадра: до, во время и после.

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

• Отображение текущего статуса системы. Лоадер, шимер (скелетон) помогают снизить напряжение во время загрузки интерфейса, показывая, что система не перестала работать.
• Отображение реакции на действия пользователя. Как правило это небольшая короткая анимация, которая следует за любым действием пользователя. Например, анимация во время оплаты с помощью Apple Pay или аналогов на системе Android помогает пользователю понять, что покупка совершена.
• Отображение ввода данных. Моргание курсора и появление букв при наборе помогают ориентироваться в текстовом поле. Есть и другие реакции, например анимация интерфейса при неверно введённом пароле.
• Отображение изменений, не зависящих от действий пользователя. Например, получение лайка приводит к появлению иконки сердца в инстаграме или отображение ползунка на прогресс баре в плеере в процессе прослушивания трека.

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

• Демонстрация перехода между страницами. Когда скорость загрузки интерфейса медленнее, чем мгновенный переход на другую страницу, анимация позволяет заполнить пробел во взаимодействии пользователя с продуктом — например плавное появление элементов на экране.
• Скроллинг. Бесконечная лента один из популярных способов оформления контента, а бесшовные скролл обеспечивает анимация интерфейса.
• Появление всплывающих окон. Например, окна с рекламой, подсказками и чаты.
• Погружает в контекст или историю компании. С помощью анимации можно вовлечь пользователя в интерактив, рассказать историю или доступнее донести нужную информацию.