Виды анимаций на сайтах. Кринж, который стоит увидеть и не повторять. Часть 2

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

Как и в предыдущий раз, разделила каждый вид анимации на 3 группы и расскажу подробно про каждый из них:

• Хорошая и красивая.
• Можно, но осторожно.
• Астанавитесь!

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

Хорошая

Приятная успокаивающая анимация. Плавное появление названия компании, логотипа или приветствие, как при включении телефона.

Можно, но осторожно

Красивая графика и отдельное окно приветствия, после которого нужно что-то нажать, чтобы перейти к основной части сайта — только если вы на 100% уверены в том, что это необходимо. Такая анимация может стать вашей фишкой, а может погубить.

Остановитесь

Сложная анимация в стиле путешествия по мультивселенной из фильма “Доктор Стрэндж” запутает, утомит и приведет к уходу с сайта. Профессиональные дизайнеры оценят, клиенты — нет.

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

Хорошая

Плавная прокрутка с разбивкой элементов = успех.

Можно, но осторожно

Бывают фишки, которые смотрятся интересно, но нужно быть осторожным с их использованием.

Остановитесь

Безумные и непредсказуемые движения страницы, которые меняют свое направление. Элементы неожиданно возникают и перемещаются в разные стороны. Любопытно, но неудобно.

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

Хорошо

Органичная плавная анимация. Например, легкое увеличение изображения или информация о товаре при наведении.

Можно, но осторожно

Много информации, сильное увеличение или анимация без наведения. Первые пару раз интересно, а потом приедается и оставляет негативный опыт.

Остановитесь

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

С вами была Лена, UX/UI/Motion-дизайнер, которая использует хорошую анимацию в своих работах.

• Подписывайтесь, вступайте в сообщество Юзабилити, в планах — много интересных материалов.
• Присоединяйтесь к авторам сообщества. За хорошие статьи по теме Юзабилити я предлагаю 4000-10000 рублей за материал. Свяжитесь со мной, предложите темы, чтобы начать зарабатывать.
• Всегда рада нетворкингу с UI/Motion-дизайнерами и Front-end — вы знаете где меня найти.

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

Делитесь — сбивает ли вас иногда с толку слишком непредсказуемая анимация скроллинга?