Критерии хорошей анимации. Анимация — помогает оживить сайт, | HTML Academy

Критерии хорошей анимации.

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

Попробуем разобраться, какие могут быть критерии оценки анимации на сайте.

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

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

Хорошая скорость анимации для обычных сайтов без большого количества контента — 120 fps. Для загруженных может быть — 60 fps.

fps — количество сменяемых кадров за единицу времени.

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

Как музыка в фильме — если вы заметили её и отвлеклись от сцены, то, возможно, музыка была выбрана неподходящая или её громкость была неправильно отрегулирована.

Вот небольшой список вопросов для пересмотра анимации перед финальной сдачей:

— Производительность.
Замедляет ли анимация скорость загрузки сайта? Если да, оправдано ли это?

— Адаптивность.
Анимация выглядит, как было задумано, на всех устройствах?

— Необходимость анимации.
Нет ли лишних движений на сайте?
У каждой анимации есть цель и она выполняется?
Анимация не избыточна и не чрезмерно сложная?

— Общая информативность анимации.
Делает ли анимация понятнее блок, в котором находится?
Нет наложения или перекрытия важных частей? Анимация не перекрывает кнопки или формы так, что на них нельзя нажать или заполнить?

— Общий вид.
Анимация выглядит уместной и живой?
Скорость анимации выставлена верно?
Нет слишком быстрых движений или, наоборот, медленных?
Не создаётся ли на сайте ощущения медленной загрузки?
Анимация не перетягивает на себя внимание?

Что прочитать про анимацию:
12 основных принципов анимации от Disney — в интернете есть переводы статьи.

Если статьи мало и хочется глубже изучить анимацию в вебе, приходите на наш курс «Анимация для фронтендеров».

Курс проходит в асинхронном формате. Это означает, что вы можете начать обучение в любое время и учиться в собственном темпе.