⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.

Индикатор загрузки

Анимация, которая отображается во время загрузки страницы или контента. Например, анимированное лого или индикатор загрузки.

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

Меню

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

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

Пример навигационной панели на сайте. Источник
Пример бургер-меню. Источник

Карточка

Анимация, которая отображает карточки с информацией. Карточки — удобный способ отображения контента, такого как статьи, товары и изображения. Обычно имеют прямоугольную форму.

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

Пример карточки. Источник

Уведомление

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

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

Пример уведомления. Источник
Пример уведомления об ошибке. Источник

Наведение

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

Используется для подчеркивания важности элемента, добавления эффекта 3D-глубины, или для простого изменения внешнего вида элемента при наведении на него курсора мыши.

Пример изменения кнопки при наведении курсора. Источник

Клик

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

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

Пример нажатия на кнопку. Источник

Переключение

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

Пример изменения кнопки. Источник
Пример переключателя. Источник

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

Узнать больше