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

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

Мы сделали подборку из 5 библиотек для создания анимации на web-сайтах, рассказав об их преимуществах, недостатках и сферах применения.

GreenSock Animation Platform

Но при этом для анимации HTML элементов tween.js совершенно не подходит - с этим справляются следующие два инструмента.

Move.js

Move.js - javascript-библиотека, позволяющая делать всё то же, что и tween.js, только с использованием CSS3 и HTML5 вместо Canvas. Она является не самой легкой (как для JS), но одной из самых популярных. Набор заранее заготовленных видов анимации (поворот, наклон, ротация и тд.) делает её также одной из самых легких в использовании.

Пример кода c использованием Move.js:

Move("#example-4 .box") .rotate(140) .end();

WOW.js + Animate.css

На самом деле это не настоящие библиотеки или фреймворки для анимации, по крайней мере в привычном понимании.

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

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

Во-первых, решает легковесность. Всего 2 КБ и никаких зависимостей!

Во-вторых, wow.js и animate.css являются крайне простыми в использовании. Скорее всего, вам не придется написать ни строчки лишнего JS кода. Достаточно подключить эти два скрипта к странице и добавить к элементу, который нужно анимировать, пару css классов: класс wow и класс нужной нам анимации.

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

Для настройки анимации используются специальные data-атрибуты, например, data-wow-duration=»2s» задаст продолжительность кручения в 2 секунды.

Демо, более подробную документацию и полный список data-атрибутов можно найти на официальном сайте WOW.js , полный список классов анимации - на официальном сайте Animate.js.

Анимация средствами JQuery

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

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

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

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

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 теряет свою привлекательность, когда вынужден смотреть ее в десятый раз.

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

Как анимация появилась в веб-дизайне?

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

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

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

Улучшение юзабилити при помощи анимации

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

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

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

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

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

Использование анимации в материал-дизайне

Анимация в веб-дизайне является чрезвычайно полезной вещью, если только она не используется исключительно в декоративных целях. Разработчики интерфейсов теперь часто используют анимации для улучшения рабочего пространства. Даже Google понимает важность наличия движущихся элементов для юзабилити. Собственно, так и появился гугловский «Material design». Материал-дизайн становится всё более и более модным. Сегодня его используют в различных приложениях и в дизайне веб-сайтов. Секрет его популярности кроется в повышенном внимании к тому, как будет восприниматься элемент, как движение может рассказать пользователям больше о том, что это за элемент и как его использовать.

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

Убедитесь, что ваши анимации адаптивные. Адаптивный дизайн веб-сайта жизненно необходим, если вы желаете добиться успеха. Но, если он хорошо выглядит и работает лишь на десктопных системах, вы можете потерять пользователей, предпочитающих серфить с мобильных устройств. Существует множество инструментов для создания адаптивных анимаций вроде Adobe After Effects или Invision. Также такое можно проделывать в некоторых CMS (Webdlow или MotoCMS), частью которых является возможность создания адаптивных анимированных эффектов. Они предлагают различные типы анимаций, которые могут быть использованы на сайте для улучшения юзабилити и дизайна в целом:

Появление (слева, справа, сверху, снизу);

• Имитация удара в экран;
• Вращение;
• Скольжение;
• Вспышка и пульсация;
• Сдвиг и желеподобный эффект;
• Качание и др.

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

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

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

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

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

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

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

Огромное спасибо http://www.webdesignerdepot.com и, как обычно, обязательно посмотрите прошлые подборки с красивыми сайтами:

www.noiretrenoir.com

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

barcampomaha.org

Совершенно восхитительный и разноцветный сайт, который наполнен разными анимированными монстрами и иностранцами.

www.azahran.com

www.quechua.com

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

Parallax.js

Сайт используется в место демо страницы которая демонстрирует работу скрипта Parallax.js. Ну что сказать, всё выглядит очень и очень эффектно!

www.buffalowildwings.com

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

goodtwin.co

Этот сайт использует как красивые иллюстрации так и хорошую анимацию к ним. Всё вместе это смотрится очень круто.

www.intacto10years.com

Возможно я Вам уже показывал данный сайт, но не упомянуть его я не мог:) Посмотрите ещё ну просто на очень качественную работу.

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

www.ipolecat.com

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

www.octaveoctave.com

Интересный сайт с необыкновенными картинками и рисунками, плюс анимация. Другими словами — необыкновенно, но стильно.

www.milkable.me

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

www.mitchlana.com

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

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

Как создать анимированный баннер с помощью онлайн-сервисов?

Создание статического изображения

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

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

Перейдите на главную страницу сервиса Banner Fans и пройдите регистрацию, которая позволит хранить созданные файлы не только на компьютере, но и в самом сервисе.

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

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

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

Анимация статического баннера

Для того чтобы из созданной нами картинки сделать анимированную, необходимо скачать с сервиса Banner Fans два файла в формате gif (гиф): один с пустым изображением, а другой содержащий надписи. Перейдите на minimultik.ru .

Так же, как и на Banner Fans, регистрация в данном сервисе не является обязательной. Загрузите подготовленные файлы:

Следующее, что вам необходимо сделать - выполнить настройки будущей анимации:

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

Нажмите «Создать анимацию » и затем «Скачать »:

В конечном итоге получился такой простой баннер:

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

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

Создание анимированного изображения в Adobe Photoshop

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

Откройте Photoshop и создайте новый файл, предварительно указав его размер:

Включите в вашу рабочую область панель анимации («Окно -> Шкала времени »). Появится блок с кадрами:

Нарисуйте на первом слое холста какой-нибудь рисунок и создайте новый кадр. Добавьте новый слой:

Нарисуйте новую картинку вашей анимации в только что созданном новом слое:

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

Проверьте поведение анимации, нажав на «Play ». Если готовый результат вас устраивает, сохраните работу, нажав «Файл » -> «Сохранить для WEB устройств »:

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

Надеемся, что наши уроки полезны для вас. Желаем творческих успехов!

Хорошо Плохо