Виды анимаций на сайтах. Кринж, который стоит увидеть и не повторять. Часть 2
В этой статье — анимации приветствия, прокрутки и изображений. А в предыдущей части — загрузки, курсора и типографики.
Как и в предыдущий раз, разделила каждый вид анимации на 3 группы и расскажу подробно про каждый из них:
- Хорошая и красивая.
- Можно, но осторожно.
- Астанавитесь!
Приветственная
Первое впечатление очень важно, оно формирует имидж бренда. Такая анимация призвана развлечь пользователя, заинтересовать его и сформировать положительные эмоции от взаимодействия с интерфейсом.
Хорошая
Приятная успокаивающая анимация. Плавное появление названия компании, логотипа или приветствие, как при включении телефона.
Можно, но осторожно
Красивая графика и отдельное окно приветствия, после которого нужно что-то нажать, чтобы перейти к основной части сайта — только если вы на 100% уверены в том, что это необходимо. Такая анимация может стать вашей фишкой, а может погубить.
Остановитесь
Сложная анимация в стиле путешествия по мультивселенной из фильма “Доктор Стрэндж” запутает, утомит и приведет к уходу с сайта. Профессиональные дизайнеры оценят, клиенты — нет.
Прокрутка
Прокрутка — жизненно важная часть пользовательского опыта. Сделать ее интересной — одна из первостепенных задач. Чем интереснее перемещаться по сайту, тем дольше на нём будут задерживаться. Прошли времена, когда анимация и скроллинг не были связаны. Теперь прокрутка дополняет интерактивный дизайн и создает эмоциональную связь с пользователем.
Хорошая
Плавная прокрутка с разбивкой элементов = успех.
Можно, но осторожно
Бывают фишки, которые смотрятся интересно, но нужно быть осторожным с их использованием.
Остановитесь
Безумные и непредсказуемые движения страницы, которые меняют свое направление. Элементы неожиданно возникают и перемещаются в разные стороны. Любопытно, но неудобно.
Изображения
Анимация изображений уже стала чем-то совершенно привычным. Без нее не обходится практически ни один сайт, где есть галереи или карточки товаров.
Хорошо
Органичная плавная анимация. Например, легкое увеличение изображения или информация о товаре при наведении.
Можно, но осторожно
Много информации, сильное увеличение или анимация без наведения. Первые пару раз интересно, а потом приедается и оставляет негативный опыт.
Остановитесь
Изображения, которые много крутятся, переливаются и искажаются по поводу и без.
С вами была Лена, UX/UI/Motion-дизайнер, которая использует хорошую анимацию в своих работах.
- Подписывайтесь, вступайте в сообщество Юзабилити, в планах — много интересных материалов.
- Присоединяйтесь к авторам сообщества. За хорошие статьи по теме Юзабилити я предлагаю 4000-10000 рублей за материал. Свяжитесь со мной, предложите темы, чтобы начать зарабатывать.
- Всегда рада нетворкингу с UI/Motion-дизайнерами и Front-end — вы знаете где меня найти.
В этой статье мы обсудили анимации приветствия, прокрутки и изображений.
Делитесь — сбивает ли вас иногда с толку слишком непредсказуемая анимация скроллинга?
пфф..вот как надо
https://crazydimka.ru/
Спасибо, добавлю в свою библиотеку, буду показывать заказчикам. Это ж какой необрутализм!
Кайф ахах, и домен топовый))
сейчас эти безумные навыки на пике актуальности
Топ! 😁
Узнал два года назад, каждый раз заходя вновь и вновь дико ржу с этого
Елена, вы не перестаете удивлять! Отличная и полезная статья, спасибо)