02/04 Свойства веб-анимации

Анимация – это не UI-шаблон. Это совсем не тот элемент, который вы можете воткнуть в любое место на вашем сайте. В применении анимация оказывается ближе к цвету: она может существовать везде, и её эффекты распространяются на весь сайт.

Tannbach

Источник: Tannbach

BMW

Источник: BMW

Для начала мы можем разбить веб-анимацию на две группы в зависимости от её размера и роли:

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

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

Общей для этих двух групп является развлекательная ценность, которую они приносят интерфейсу.

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

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

Humaan

Источник: Humaan

Одним из ключевых компонентов анимации является расчёт времени. Для анимации, запускаемых пользователем, хорошим решением является возникновение эффекта в течение 0,1 секунды с момента активации, чтобы интерфейс казался легко реагирующим. Этот пример можно увидеть на превью UXPin-проекта.

UXPin

Источник: UXPin

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

Теги: , , ,