Анимация — это изменения в движении. Она позволяет точнее отобразить окружающую нас жизнь. Вот почему люди часто говорят, что анимация для сайта оживляет его. Данная фраза довольно точно передает цель анимации в веб-дизайне.
Подобная иллюзия движения при правильном применении является свидетельством того, что пользователи сделали что-то. Что они успешно взаимодействовали с интерфейсом и вызвали какие-то изменения.
Анимация в Сети: Краткая история
Давайте взглянем на то, как анимация в интернете достигла своего нынешнего уровня. В значительной степени все началось благодаря гифкам…
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 содержит встроенные функции, которые позволяют реализовать этот эффект.