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

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

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

Анимация в Сети: Краткая история

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

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

Когда функции файлов в формате gif были исчерпаны, людям потребовались новые методы добавления анимации на веб-сайты. И звука!

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

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

Но к середине прошлого десятилетия в W3C работали над тем, чтобы включить анимацию в CSS. В 2009 году была выпущена первая спецификация CSS-анимации.

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

Анимация больше не будет диковинкой для веб-дизайнеров. В кино она стала основой для нового метода рассказа. Для нас она становится платформой для эффективного проектирования взаимодействий:

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

Типы веб-анимации

Недостаточно просто добавить анимацию для элементов веб-страницы и надеяться, что это автоматически повысит ее конверсию:

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

Начнем с того, что рассмотрим разные виды анимации, используемые в Сети.

Анимации элементов интерфейса

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

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

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

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

Анимация ожидания

Это анимация для веб-сайта, при помощи которой можно без проблем дать понять посетителям, что что-то происходит в фоновом режиме.

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

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

Анимация повествования

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

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

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

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

Два моих любимых примера на эту тему связаны с брендами, которые имеют большой опыт работы с подобными вещами: Apple и Sony. Страница, посвященная Mac Pro при прокрутке вниз, показывает, что находится под «капотом» этого устройства:

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

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

Декоративная анимация

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

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

Простой поиск в Google покажет, что есть пару веб-сайтов, на которых что-то происходит при помощи кода Konami. Иные ресурсы включают в себя известные пасхальные яйца Google, и один из них — photojojo.com:

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

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

Анимация в рекламе

Реклама. Для некоторых, это их деньги, а для иных это раздражение. Добавьте в рекламный блок анимацию, и бум! Глаза тянутся к нему против воли. Это рефлекторное действие.

Добавьте звук, и вы почувствуете приступ ненависти к данной рекламе… это тоже рефлекторное действие.

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

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

Реализация анимации

Технические аспекты реализации имеют значение, но не зависимо от того, используете ли вы gif, видео, CSS, SVG или даже Flash, существуют принципы, которые более важны.

Производительность, производительность, производительность

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

У меня следует видеокарта Nvidia GTX 750 TI, которая обошлась мне приблизительно в $200. И с ней-то анимация точно не должна проигрываться прерывисто. Но я все равно встречаю в Сети веб-сайты, заходя на которые ловлю себя на мысли: «Марио работает быстрее, чем этот веб-сайт«.

Сейчас представьте себе, если бы кто-то зашел на такой веб-сайт со слабенького планшета или смартфона. Этот посетитель никогда бы больше не имел дела с таким медленным веб-сайтом. Если есть только два варианта: медленная анимация или никакой анимации, лучше оставить только голый интерфейс.

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

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

Начните с малого

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

Большинство веб-сайтов вообще не нуждается в какой-либо анимации кроме той, которая применяется, чтобы сделать использование элементов интерфейса «реальным» и естественным. Перед тем, как начать «разбрасывать» на веб-сайте параллакс, как конфетти, спросите себя, улучшит ли это опыт взаимодействия посетителей.

В большинстве случаев ответ будет «нет«. Конечно, есть и исключения. Но в подавляющем большинстве лучше просто анимировать кнопки, создать скрытую, всплывающую панель навигации, а «адскую» анимацию вызывать после того, как посетитель заполнит и отправит контактную форму.

Продолжительность анимации должна быть небольшой

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

Представьте себе, как мы взаимодействуем с реальными объектами. Иногда мы двигаем их быстрее, иногда медленнее. Скорость, с которой мы взаимодействуем с объектом, может зависеть от его размера, цели, с которой мы с ним взаимодействуем. Но чаще всего мы берем вещи и передвигаем их довольно быстро.

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

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

Заставьте элементы «подпрыгивать»

Физические объекты отскакивают. Некоторые из них отскакивают не так пружинисто. Но в основном все объекты отскакивают, если уронить их с большой высоты на твердую поверхность.

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

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

Предметы обычно не останавливаются мгновенно

После остановки предметов обычно проходит некоторое время, прежде чем они в полном объеме перестают двигаться. Если находящиеся в покое объекты начинают движение, чтобы набрать полную скорость, у них также уходит некоторое время, они приходят в движение с ускорением.

Так что, когда вы создаете объекты 3d анимации для веб-сайта, приходящие в движение или наоборот останавливающиеся, не забудьте задать время(в миллисекундах), за которое они набирают полную скорость или в полном объеме останавливаются. Это называется «ослабление«, CSS включает встроенные возможности, которые могут реализовать этот эффект.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *