Анимация в веб-дизайне: руководство. Часть 2

Главная цель анимации — максимально улучшить пользовательский опыт. Используйте эту актуальную веб-тенденцию, чтобы укрепить эмоциональную связь с вашими пользователями и упростить их взаимодействием с вашим ресурсом. 

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

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

Ключевые техники анимации

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

Методы, которые мы рассмотрим ниже — это базовое руководство, которое поможет вам создать что-то новое и визуально интересное.

  • Навигация: используйте микро-анимацию, чтобы показать пользователям, что элемент можно активировать щелчком или касанием;
  • Состояние при наведении указателя: еще одна микро-анимация, которая поможет облегчить взаимодействие пользователя с веб-сайтом;
  • Видео: это основная анимация, которая поможет рассказать вам историю вашего бренда;
  • Скользящие переходы: этот метод перемещает изображение с помощью прокрутки или какого-либо автоматического действия;
  • Прокрутка: вы можете добавить эффект параллакса или другие более сложные анимированные переходы;
  • Фоновая анимация: такая анимация поможет сделать статическое изображение более интересным;
  • Анимация приветствия или загрузки: правильная анимация поможет отвлечь пользователя от задержки в период загрузки страницы;
  • Повествовательная анимация: эта анимация поможет удержать пользователя на вашем веб-сайте как можно дольше.

Вдохновляющие примеры:

The Chaos Order Academy

Wovenandco

Onenil

Виды анимации 

Веб-анимацию можно разделить на три категории: крупная, маленькая и микро-анимация. Давайте подробнее рассмотрим каждую из них: 

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

Пример: Studiometa

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

Пример: Henry Brown

  • Микро-анимация — это очень короткие анимированные элементы, которые относятся к пользовательскому интерфейсу и помогают пользователям лучше ориентироваться на сайте.  

Ресурсы

Ниже рассмотрим несколько полезных ресурсов, которые вы можете использовать для более глубокого изучения анимации: 


Источник: designshack.net 

 

Условия передачи информации

Я даю согласие OOO «ЭсБилдер» (далее «BINN») на обработку моих персональных данных в соответствии со статьями 6, 9, 10, 18 Федерального закона от 27 июля 2006 года № 152-ФЗ «О персональных данных», указанных в онлайн-форме и/или предоставленных мною с целью:

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

Настоящее согласие применяется в отношении обработки следующих данных: имя, номер телефона, адрес электронной почты (E-mail).

Настоящее согласие предоставляется сроком на пять лет. По истечении указанного срока действие согласия считается продленным на каждые следующие пять лет при отсутствии сведений о его отзыве.

Согласие может быть отозвано мною в любой момент путем направления в BINN подписанного мною письменного заявления.