Современные технологии анимации в веб-дизайне

Дадьянова Ирина Борисовна кандидат социологических наук доцент, кафедра информационных технологий и компьютерного дизайна, Санкт-Петербургский государственный университет культуры 191028, Россия, г. Санкт Петербург, ул. Моховая, 14, кв. 32 Dadianova Irina PhD in Sociology Associate Professor, Department of Information Technology and Computer Design, St. Petersburg State University of Culture 191028, Russia, g. Sankt Peterburg, ul. Mokhovaya, 14, kv. 32 newspaper2004@yandex.ru Другие публикации этого автора

На сегодняшнем этапе общественного развития анимация прочно заняла свое место в современной визуальной культуре и получила широкое распространение в различных сферах деятельности – рекламе, бизнесе, образовании. Попов Е.А. утверждает, что «экспансия компьютерных технологий в область культуры и искусства рубежа XX и XXI веков способствовала переходу анимации на новый, более масштабный и качественный уровень, требующий аналитического изучения новых видов произведений анимации и их взаимовлияния с ранее сформировавшимися». ^{[8, с.21]}

Термин «анимация» происходит от латинского “anima” – душа. С французского animation переводится как «одушевление». Под анимацией понимается «вид пространственно-временного искусства, художественный образ, основанный на одушевлении любых объектов, посредством приписывания им движения». ^{[12, с.70]} Также анимацию можно определить как «вид художественного творчества, относящийся к категории аудиовизуальных искусств, отличительной особенностью которого становится “оживление”, наделение “душой” образа, созданного искусственно, посредством разнообразных техник и средств выразительности». ^{[8, с.42]}

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

Предметом данного исследования выступает веб-анимация, применяемая в интерфейсах современных веб-приложений, ее функции в процессе взаимодействия пользователя и интернет-ресурсов, формы и технологии создания анимационных эффектов. В ходе исследования использовались общелогические методы исследования (анализ и синтез, дедукция и индукция), методы систематизации научных знаний – типологизация и классификация. Научная новизна исследования заключается в рассмотрении текущих тенденции эволюции роли анимации в современном веб-дизайне, а также в систематизации современных технологий создания веб-анимации. Практическое применение результатов реализуется в рамках преподавания автором вузовских дисциплин «Веб-дизайн», «Мультимедиа технологии», «Анимационное проектирование» для студентов направления подготовки «Дизайн».

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

В сети Интернет анимация также играет значимую роль и может быть представлена в различных формах - как в виде отдельных анимированных роликов, так и виде составных частей веб-сайтов. Анимация, интегрированная в веб-сайт, помогает привлечь внимания в определенную точку страницы и подталкивать пользователя к действиям. Анимированный объект вынуждает пользователя реагировать на него и совершать какое-то действие. Также анимация дает возможность продемонстрировать какие-либо товары или услуги более подробно, с деталями, в интересных ракурсах и с иллюстрациями. ^{[6, с.267]}

На текущий момент, одной из наиболее востребованных сфер веб-дизайна является сфера разработки интерфейсов, поскольку грамотно спроектированный интерфейс позволяет сделать взаимодействие пользователя с веб-сайтом более эффективным и комфортным. ^{[11, с.342]}

Не так давно технология Adobe Flash являлась доминирующей в сфере веб-анимации, однако реализовывала, как правило, развлекательную и рекламные функции, поскольку на основе flash-технологии разрабатывались в основном промо-сайты, игры и анимированные баннеры. С приходом технологий HTML5 в сочетании CSS3 анимированные объекты стали неотъемлемой частью эффективного интерфейса. Анимация интерфейса включает в себя различные изменения характеристик объекта – его размера, положения в пространстве, прозрачности, цвета, формы и проч. – в ответ на действие пользователя или запрограммированное событие. ^{[9, с.342]}

Рассмотрим основные функции анимации объектов, интегрированных в интерфейс веб-сайта или приложения:

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

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

- стилистическая. С художественной точки зрения, создание уникального визуального образа на основе анимации выделяет веб-сайт среди остальных, помогает отстроиться от конкурентов. ^{[1, с. 58]}

Внешний вид анимационных эффектов можно привести к следующей классификации:

- анимация при прокрутке страницы, поочередное появление новых элементов. Полоса прокрутки выступает в виде временной шкалы;

- анимация изменения макета заключается в динамическом перемещении элементов страницы при изменении размеров окна;

- анимация слоев. Слои, наложенные друг на друга, в каждом слое – отдельная анимация;

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

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

Внедрение анимации является важной частью процесса разработки интерфейса веб-сайта или приложения. Разумное использование анимированных элементов повышает уровень привлекательности и комфорта взаимодействия пользователя с веб-сайтом или приложением. ^{[3, с. 113]}

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

Рисунок 1 – Анимированная иллюстрация, демонстрирующая различия между двумя шрифтами, с сайта-лендинга, посвященного шрифту Baskerville (здесь и далее для иллюстраций используются работы студентов кафедры информационных технологий и компьютерного дизайна СПбГИК).

В сети интернет могут использоваться разнообразные виды анимации, однако наиболее востребованные являются анимированные элементы интерфейса, которые раскрывают цель и функциональность пользовательского интерфейса более эффективно, чем статичный текст. ^{[10, с.421]} Также анимация позволяет фокусировать внимание пользователя и направлять его действия в нужное русло. К качественной анимации интерфейса предъявляются особые требования: она должна быть функциональной, проработанной и не раздражать пользователя чрезмерно активным дизайном.

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

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

Рисунок 2 – Фрагмент анимированного веб-комикса, посвященного преимуществам использования велосипеда в городских условиях.

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

Рисунок 3 – Оформление главной страницы рекламного сайта с использованием анимации.

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

Что касается технологий создания веб-анимации, то на сегодняшний момент они достаточно разнообразны. Лидирующее положение занимают технологии каскадных таблиц стилей третьего поколения (CSS 3.0) и язык веб-программирования JavaScript.

Каскадные таблицы стилей третьего поколения дают возможность создавать анимации и анимированные переходы между различными состояниями объектов, используя ключевые кадры. Основные преимущества CSS-анимаций – это отсутствие необходимости подключения внешних библиотек визуальных эффектов и высокая производительность. Однако при помощи CSS нельзя воспроизводить сложные физические характеристики и имитировать реалистичное движение. Также существует ограничение на количество анимаций, воспроизводимых подряд. ^{[5, с. 379]}

Сложносоставные анимации лучше всего разрабатывать используя язык веб-программирования JavaScript, который дает более широкий спектр возможностей. В JavaScript присутствует собственный функционал для разработки анимации, однако чаще всего используются внешние дополнительные библиотеки (например, JQuery). В данном случае, следует учитывать, что производительность сайта будет зависеть от выбираемой библиотеки и от сложности программируемой анимации. Таким образом, JavaScript-анимации дают больше возможностей в создании придвинутых анимации, чем CSS. ^{[9, с. 269]}

Следующая технология создания веб-анимаций, набирающая популярность – это (масштабируемая векторная графика). SVG является векторным форматом графики, что позволяет масштабировать SVG-изображения и анимации без потери качества. Анимировать SVG-элементы можно как при помощи CSS и JavaScript, так и при помощи собственного языка программирования, носящего название SMIL. ^{[10, с.221]}

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

Что касается различных инструментальных средств создания веб-анимации, то они, в большинстве своем представлены различными внешними библиотеками, такими как GreenSock (GSAP), ScrollMagic, Velocity.js, Mo.js, Anime.js и прочие. Мощным инструментом для разработки трехмерных анимаций является библиотека Three.js. Для создания и рендеринга веб-анимаций также часто используется программа Adobe After Effects.

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

Будучи популярным конструктором сайтов, Readymag позволяет анимировать элементы веб-сайта, применять базовые эффекты анимации (масштабирование, изменение прозрачности, перемещение, поворот), настраивать время и скорость анимации, последовательность прокрутки, привязки к событиям. Webflow – конструктор, позволяющий создавать сложные многоходовые анимации без написания кода. ^{[2, с.174]}

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