Анимация в веб-дизайне: основные тренды

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

Анимация на домашней странице

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

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

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

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

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

Материальный дизайн

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

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

Форма и поля ввода

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

Взгляните на этот пример на сайте CodePen. Используя чистый CSS3, его создатели сумели добиться того, что интерфейс не только выполняет свои основные функции, но и решает две других задачи: заметно отделяет невыбранные пункты от выбранных и делает процесс выбора немного интереснее.

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

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

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

Панель навигации

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

Движение элементов

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

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

SVG Анимация

SVG - один из новых стандартов в области веб-анимации. Это векторная графика, которая может двигаться или меняться без потери качества. Adobe Illustrator является самой популярной программой для создания SVGs но есть и другие варианты.

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

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

Заключительные мысли

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