{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

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

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

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

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

Приветственная

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

Хорошая

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

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

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

Творческая студия цифрового производства Active Theory https://activetheory.net/

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

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

Прокрутка

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

Хорошая

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

Магазин товаров для дома moheim https://moheim.com/

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

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

Промосайт к фильму House of Gucci https://www.welcometothehouseofgucci.com/

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

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

Частая смена направлений может свести с ума и отпугнуть. Агентство типографики https://typographyprinciples.obys.agency/

Изображения

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

Хорошо

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

Сайт с коллекцией бесполезных вещей https://www.theuncomfortable.com/

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

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

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

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

Студия дизайна https://yetimotion.com/

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

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

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

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

0
17 комментариев
Написать комментарий...
Андрей

пфф..вот как надо
https://crazydimka.ru/

Ответить
Развернуть ветку
Lena Nexman (UX/UI Дизайнер)
Автор

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

Ответить
Развернуть ветку
Сергей Фёдоров

Кайф ахах, и домен топовый))

Ответить
Развернуть ветку
Grigoriy Malyshev

сейчас эти безумные навыки на пике актуальности

Ответить
Развернуть ветку
Сергей Невзоров

Топ! 😁

Ответить
Развернуть ветку
Павел Леонтьев

Узнал два года назад, каждый раз заходя вновь и вновь дико ржу с этого

Ответить
Развернуть ветку
Anton

Елена, вы не перестаете удивлять! Отличная и полезная статья, спасибо)

Ответить
Развернуть ветку
Lena Nexman (UX/UI Дизайнер)
Автор

Спасибо!
Вас - интересует, я - пишу :)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Lena Nexman (UX/UI Дизайнер)
Автор

Анимации нужно уметь правильно использовать :)
Если переборщить - получается солянка (которую, как известно, не все любят)

Ответить
Развернуть ветку
Mazko Alex

Так и есть, 99% плавных скроллов берут у Локомотива и не могут нормально докрутить, фпс проседает

Ответить
Развернуть ветку
Gigacelitel

Такие анимации на один - три раза, затем надоест.

Ответить
Развернуть ветку
Lena Nexman (UX/UI Дизайнер)
Автор

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

Ответить
Развернуть ветку
Gigacelitel

Согласен с вами.

Ответить
Развернуть ветку
Андрей Чередниченко

Долго же не было 2 части

Спасибо, что всё-таки выложили, очень интересно)

Ответить
Развернуть ветку
Lena Nexman (UX/UI Дизайнер)
Автор

А скоро еще будет третья, надеюсь, не через пару месяцев)

Ответить
Развернуть ветку
Elene Cr

Спасибо, очень наглядно

Ответить
Развернуть ветку
14 комментариев
Раскрывать всегда