Полное руководство по дизайну веб-анимации

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

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

Хорошо, некоторые из них уйдут. Но другие могут остаться.

Затем наступает этап впечатления, который в основном длится всего 10 секунд, Если ваш сайт не может управлять надежным сайтом, вы потеряете основную часть трафика до того, как он начнет процесс конверсии. Они просто нажимают кнопку "Назад" или "Закрыть".

И если у вас были какие-то надежды на их восстановление, вот жесткая правда. 88% из них вряд ли вернется на сайт после неудачного опыта.

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

Хорошо, конечно, естественно обвинять контент-менеджера сайта. И вы можете быть правы. Но только частично.

Оказывается, все начинается с веб-дизайнера. На самом деле, исследование, которое тщательно изучило широкий спектр отзывов потребителей, установило, что 94% отрицательных были связаны с дизайном.

Что это значит?

Для начала, избежать этого невозможно. Основная ответственность лежит на вас. В дополнение к реализации всех передовых методов проектирования, которые мы рассмотрели в наших предыдущих статьях, вы должны надеть PR-шапку и рассмотреть элементы, которые эффективно связаны с трафиком.

Я говорю о таких вещах, как веб-анимация.

И почему мы специально это предлагаем?

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

Основы веб-анимации

Представьте себе своего любимого мультипликационного персонажа, прогуливающегося по экрану. Или, возможно, логотип вашего телефона танцует по всему экрану при перезагрузке устройства. Что у них общего?

Ну, они оба являются основными примерами анимации.

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

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

Однако одно осталось неизменным - принципы анимации. На самом деле, Олли Джонстон и Фрэнк Томас из Disney позже написали о них в своей книге:Иллюзия жизни: анимация Диснея". Вот полный список:

  • Обжалование
  • Сплошной рисунок
  • преувеличение
  • тайминг
  • Вторичное действие
  • дуга
  • Медленно и медленно
  • Выполнять и перекрывать действия
  • Прямолинейные действия и позы, чтобы позировать
  • Инсценировка
  • Ожидание
  • Сквош и растянуть

Эти двенадцать по-прежнему обеспечивают основу для дизайна анимации сегодня, включая те, которые публикуются в Интернете в виде видео, WebGL, SVG, CSS и GIF.

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

И напрашивается вопрос: когда вы вообще должны использовать анимацию?

Когда вы должны использовать веб-анимацию?

Конечно, они милые. И они, безусловно, будут интересными дополнениями к макету вашего сайта.

Но вы знаете, что? Их последующие уровни эффективности - это совсем другое. Таким образом, само собой разумеется, что анимация не подходит для всех проектов сайта. И самое главное, было бы плохой идеей принять их случайно.

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

Итак, когда вы должны использовать их?

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

Как?

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

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

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

Инструменты веб-анимации

Готовы начать создавать веб-анимацию? Отлично! Но с чего начать?

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

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

  • js
  • 3D Линии Анимации с Three.js
  • js
  • Flubber
  • Цветовая анимация
  • jqClouds
  • Scrollissimo
  • Cel-анимация
  • js
  • js
  • Анимация CSS3
  • Transform-когда
  • js
  • Rellax
  • К
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • CSS
  • Animista
  • js
  • СААТ
  • AnimateMate
  • js
  • Stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • ПВРД
  • поколотить
  • MixItUp
  • CSS
  • CSS
  • js
  • Ceaser
  • CSSynth
  • Шафран
  • CSShake
  • CSS
  • js
  • Rocket
  • транзит
  • CSS
  • js
  • Popmotion
  • GSAP от GreenSock
  • js
  • js
  • CSS Animate
  • Это вторник
  • изворотливый
  • js
  • js
  • js
  • js
  • js
  • Подождите! оживлять
  • Пользовательский интерфейс движения
  • js
  • Lazy Line Painter
  • js
  • js
  • js
  • AnijS
  • js
  • Волшебная анимация
  • CSS

Разработка веб-анимации

эффекты при наведении курсора

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

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

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

Фоновые анимации

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

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

GIF-стиль анимации

GIF стоит рассмотреть, если вам особенно интересна анимация, которую исключительно легко настроить. Типичным может быть что-то вроде сдвига текста или улыбающегося клоуна, встроенного в ваш макет контента.

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

Переходные анимации

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

Изображение кредита: Shutterstock

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

Загрузка анимаций

Факт- 47% онлайн-потребителей ожидайте, что ваши веб-страницы загрузятся как минимум за 2 секунд. Если вам этого не удастся, каждая дополнительная секунда переводит на 7% меньше конверсий.

Идя мимо текущее среднее время загрузки в секундах 22Совершенно очевидно, что оправдать второе ожидание 2 довольно сложно. Но вы можете спасти значительную часть трафика, занимая их анимацией, так как другие элементы сайта продолжают загружаться.

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

Анимации, запускаемые при прокрутке

Исследования отслеживания глаз показали, что пользователи сайта тратят около 57% их времени выше сгиба, Но, оказывается, что многие из них готовы прокрутить вниз - при условии, что вы предоставите подходящую структуру и механизм дизайна.

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

Навигация и анимация меню

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

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

Галерея и слайд-шоу

Возможно, неудивительно, что средняя продолжительность внимания людей составляет 8 секунд - по крайней мере, согласно недавнему исследованию, проведенному Microsoft. Даже золотая рыбка способна оставаться внимательной дольше, чем обычный человек. Поэтому вы можете поспорить, что большинство посетителей вашего сайта не будут достаточно настойчивыми, чтобы просматривать все элементы вашей галереи.

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

Здесь главное время показа изображения. Короткие дисплеи с быстрыми переходами могут показаться срочными, а длинные дисплеи с медленными переходами - скучными и вялыми. Имея это в виду, спроектируйте общий макет так, чтобы каждое изображение отображалось в течение примерно от 5 до 8 секунд, прежде чем быстро перейти к следующему.

Вывод

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

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

изображение заголовка любезно предоставлено Элфри Дэвилла | vaneltia

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.