Роль анимации в web дизайне. Веб-анимация: где, зачем и почему. Даже если вам кажется, что так будет лучше, всё равно не стоит этого делать

Слово «анимация» происходит от древне-латинского слова «анима» , что означает “душа” . Попытки вдохнуть жизнь в статичные искусственные объекты появились тысячи и тысячи лет назад, когда Пигмалион попытался разбудить свое творение – статую очаровательной Галатеи.

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

КАК ПОЯВИЛАСЬ АНИМАЦИЯ В ВЕБ-ДИЗАЙНЕ?

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

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

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

УЛУЧШЕНИЕ ЮЗАБИЛИТИ С АНИМАЦИЕЙ

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

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

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

E TECHEVENT – САЙТ С АНИМИРОВАННЫМИ ЭЛЕМЕНТАМИ

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

ИНТЕРАКТИВНЫЙ САЙТ A PPS

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

ИСПОЛЬЗОВАНИЕ АНИМАЦИИ В МАТЕРИАЛЬНОМ ДИЗАЙНЕ

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

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

В своем «Руководстве по материальному дизайну» Google утверждает, что движение может сообщить пользователям, что объект легкий, тяжелый, гибкий, и даже большой или маленький. Анимация должна быть использована, чтобы предоставить пользователям больше понимания того, какова природа объекта, а, следовательно, как он может и должен быть использован в дизайне.

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

СОВЕТЫ ПО АНИМАЦИИ, ИСПОЛЬЗУЕМОЙ НА ВЕБ-САЙТАХ

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

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

The Happy Forecast Website

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

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

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

Laerepenger Website

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

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

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

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

Kikk Website
Nodeplus Digital Agency
Creative Cruise
Animated Scenery Vintage Farm
Pomade Digital Agency

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

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

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

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

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

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

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

Что такое анимация?

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

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

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

Twitter недавно использовали этот простой подход для их новой анимации сердца, прокручивая в заданной последовательности 26 кадров.

Полученная таким образом анимация слишком сложна в реализации и, на самом деле, недостаточно плавная.

Во многих случаях выгоднее использовать свойство CSS «transition» для автоматической анимации элемента при его изменении. Эта техника известна также как «tweening» и подразумевает создание анимации с автоматическим построением промежуточных изображений. Допустим, мы имеем 2 изображения одного объекта в различных положениях. Эффекты перехода CSS помогут создать анимацию изменения его состояния. Их использование выгодно тем, что можно в любой момент сбросить или обратить всю логику анимации. Это идеальный подход из разряда «установил и забыл». Отлично работает, к примеру, с различными интро-последовательностями или простыми взаимодействиями вроде активации анимации при наведении мыши.

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

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

#1 Не изменяйте никакие свойства кроме непрозрачности (opacity ) и преобразования (transform )

Даже если вам кажется, что так будет лучше, всё равно не стоит этого делать!

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

На самом деле, к использованию этого принципа довольно просто привыкнуть. Особую выгоду это принесёт тем, кто ранее делал анимации при помощи традиционных свойств CSS.

Например, если вам нужно сделать объект меньше, вы можете использовать свойство трансформации scale вместо изменения ширины/высоты. Если вам нужно переместить элемент, то не стоит возиться с изменением значений отступов, ведь такая анимация потребует перестройки макета страницы при каждом кадре. Лучше используйте простые свойства трансформаций для этого: transform : translateX или transform : translateY .

Почему это работает?

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

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

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

#2 Скрывайте контент на виду.

Используйте «pointer-events» в CSS: значение «none» наряду с нулевой непрозрачностью для сокрытия элементов

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

В далёкие времена, когда анимации обрабатывались при помощи jQuery animate(), основная сложность при работе с эффектом fade заключалась в необходимости переключения значения свойства display: активировать none для прекращения эффекта в нужный момент. Слишком рано и анимация не будет завершена, слишком поздно и вы получаете невидимый элемент с нулевым значением opacity, перекрывающий страницу. Требовался обратный отклик для очистки экрана после завершения анимации.

Свойство CSS «pointer-events» (существует давно, но почему-то используют его нечасто) служит для того, чтобы сделать вещи нечувствительными к кликам мышью и другим взаимодействиям. Так, будто их вообще нет на странице. Это свойство может быть легко включено/выключено посредством CSS. При работе оно не прерывает анимацию и не влияет на рендеринг/видимость элементов.

Комбинируя эту вещь с нулевым значением opacity, мы получаем тот же эффект, что даёт «display: none», но без влияния на производительность при запуске новых циклов рендеринга анимации. Если необходимо скрыть элемент из поля зрения, я обычно выставляю нулевую непрозрачность и выключаю pointer-events. После этого могу забыть о нём, зная, что всё можно легко вернуть обратно и ничего не будет мешать производительности страницы.

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

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

#3 Не нужно анимировать всё подряд одновременно.

Либо же используйте принцип хореографии.

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

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

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

Материал-дизайн от Google имеет некоторые по этому вопросу. Это, конечно, не единственно правильный путь, но он даёт пищу для размышлений и тестирования.

#4 Небольшое увеличение задержки перехода позволяет легко следовать принципу хореографии

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

Я обычно заменяю один класс на родительском элементе (чаще всего на body) для того, чтобы вызвать кучу переходов, каждый из которых имеет свой параметр задержки (transition-delay). Делается это для того, чтобы каждый элемент появлялся в нужное мне время. С точки зрения кодинга вам стоит беспокоиться о значении лишь одной переменной вместо поддержания десятков таймингов в JavaScript.

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

Пример кода

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

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

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

#5 Используйте общий множитель для разработки в slow motion

И ускорьте всё это позже.

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

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

Если вы используете Javascript или какой-нибудь CSS-препроцессор вроде SASS, код должен быть достаточно простым для построения правильной структуры переменных.

Вы должны убедиться в удобстве кодовой конструкции, чтобы без проблем тестировать различные скорости и тайминги. Например, если анимация заикается даже на 1/10 скорости, вы, скорее всего, делаете что-то в корне неправильно. Если она идёт гладко при растяжении в 50 раз, то вопрос сводится к нахождению максимальной скорости, при которой она сможет плавно работать. Довольно трудно заметить проблемы на полной скорости, но если вы снизите её, то все они станут весьма очевидными.

Для настройки очень сложных анимаций либо же при поиске узких мест в производительности отслеживание процесса в замедленном темпе будет очень полезным.

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

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

#6 Возьмите видео с записью вашего интерфейса и прокрутите, от третьего лица вы сможете увидеть больше

Иногда взгляд со стороны помогает видеть вещи более ясно, и видео является отличным способом добиться этого.

Некоторые люди создают видео в After Effects, после чего пробуют реализовать полученное на сайте. Я часто делаю с точностью до наоборот, пытаясь сделать хорошее видео на основе пользовательского интерфейса сайта.

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

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

#7 Активность Сети может привести к лагам.

Вам нужно предварительно загрузить или блокировать большие HTTP -запросы

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

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

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

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

#8 Не нужно менять стандартную прокрутку.

Идея замены скролла может показаться классной, но это не так на самом деле.

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

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

Ещё худшей затеей выглядит замена стандартного скролла на так называемый scrolljacking (контент изменяется в такт прокрутке, пример - сайт Apple). Не делайте этого. Реализовать удачно такой эффект сложно, да и не всем пользователям он понравится.

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

#9 Почаще тестируйте свои проекты на мобильных устройствах.

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

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

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

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

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

#10 Тестируйте проекты на разнообразных устройствах

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

Несмотря на то, что Chrome и Safari созданы на базе Webkit и имеют практически одинаковый синтаксис, у каждого из них свои собственные причуды. Любое обновление Хрома одновременно устраняет старые ошибки и привносит новые, так что вы должны постоянно держать руку на пульсе, как говорится.

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

Я регулярно переключаюсь в работе между моим маленьким MacBook Air и большим iMac. Каждый такой цикл выявляет небольшие проблемы и указывает на необходимые усовершенствования. Это касается не только производительности работы анимации, но и дизайна сайта в целом, плотности информации, читаемости, структуры и т. д.

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

Надеюсь, вы нашли приведённые техники полезными и используете их в вашем следующем проекте. Удачи!

Перевод статьи https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29

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

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

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

Классный веб-сайт с красивыми трёхмерными объектами и анимированными фрагментами. Каждую страницу украшают собственные трёхмерные "изюминки".

Восхитительный шедевр! Огромное трёхмерное пространство, на котором посредством анимации происходит действие игры. Отлично выполнены трёхмерные микшированные переходы для каждой страницы.

Простой, но очень красивый веб-сайт с трёхмерным меню и такими же переходами.

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

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

Прекрасно выстроенный веб-сайт. Отличное трёхмерное подводное пространство. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

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

Бесподобное трёхмерное меню. Данное трёхмерное портфолио является отменным образцом стиля под названием "минимализм".

Хорошо выстроенный трёхмерный веб-сайт. Он не просто состоит из трёхмерных элементов, но и в целом, как бы, образует трёхмерное пространство, к тому же, почти все анимированные фрагменты тоже трёхмерные. Хорошая работа.

Прекрасный трёхмерный веб-сайт с отличными эффектами передачи объёма. Просто чудо. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Интересный веб-сайт на Flash-основе с восхитительной Flash-заставкой и массой трёхмерных элементов.

Прекрасно выстроенное красивое трёхмерное пространство и анимированные фрагменты. Состоит из множества отдельных трёхмерных планов, каждый из которых, как бы, отображает действие, происходящее в свой отрезок времени.

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

Красивый веб-сайт. Всё вокруг трёхмерное и очень чутко реагирующее на перемещения мыши.

Красивый и простой веб-сайт с трёхмерным объектом в середине страницы.

Прекрасно выстроенный веб-сайт. С отличной трёхмерной анимацией и межстраничными переходами. Здорово и то, что каждая страница управляется перемещениями мыши. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

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

Симпатичная трёхмерная фото-галерея с прекрасно воспроизведённым отражением. Строго и просто.

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

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

Образцовая работа! Прекрасное трёхмерное меню и анимированные фрагменты. Даже 4 варианта объёмного отображения меню на ваш выбор.

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

Простой в оформлении веб-сайт с трёхмерным меню навигации в виде планеты. Хороший пример применения библиотеки Papervision3D.

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

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

Очень интересный корпоративный веб-сайт с трёхмерной анимацией. Эскиз тоже сногсшибательный. Отличная работа.

Любопытный веб-сайт со множеством трёхмерных объектов, которые можно вращать.

Строгий и простой в оформлении веб-сайт с трёхмерной анимацией, прелесть!

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

Компактный веб-сайт с трёхмерными эффектами, который смотрится восхитительно. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Веб-сайт на Flash-основе, меню которого снабжено очень интересным трёхмерным эффектом. Красивые трёхмерные переходы.

Строгий и простой в оформлении трёхмерный веб-сайт. Очень грамотно сконструированный. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Подобие трёхмерной фильмотеки с красивыми трёхмерными переходами. Все анимированные фрагменты воспроизводятся очень плавно. Отличная работа.

Простой и строгий в оформлении трёхмерный веб-сайт.

Любопытный способ нанесения рисунков – помещайте их в центр звёздного неба! Шикарное трёхмерное пространство. Может послужить и милым маленьким подарком вашей подруге/другу (в смысле, ваш рисунок на нём) – ей/ему точно понравится. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

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

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

Когда анимация способна улучшить впечатления пользователя от работы со страницами? Что именно стоит «оживить» для того, чтобы взаимодействие с ресурсом стало бы более удобным, понятным, увлекательным?

Анимация и последовательности событий

Анимация при загрузке данных

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

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

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

Примечание: тут везде анимированные GIF-файлы, вставил в виде ссылок и выделил.

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

Анимация процессов и пошаговых операций

Анимация может показать выполнение некоей линейной последовательности действий, не зависящей от пользователя. Классическая полоса загрузки – самый распространённый пример.

Полоса загрузки для Aviasales. (

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

Анимация может показать прохождение по шагам некоей последовательности действий. (

Анимация и каркасное отображение веб-страниц

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

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

Визуальная обратная связь

Анимированная реакция на действия пользователя

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

Анимация элементов управления для настольных и мобильных сайтов

Один из самых распространённых примеров визуальной обратной связи – анимация при наведении курсора на интерактивный элемент.

Когда пользователь не уверен в назначении элемента управления, он пытается навести на него курсор мыши. Анимация элемента при наведении курсора, на интуитивном уровне, сообщит пользователю о том, что с объектом можно взаимодействовать. (Источник: codepen)

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

Затенение указывает на то, что элемента можно коснуться для выполнения некоего действия. (

Привлечение внимания с помощью анимации

Хорошо известно, что наши глаза привлекает движение. Этим можно воспользоваться для того, чтобы направлять внимание пользователя и подкреплять выполняемые им действия.

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

Форма отрицательно «качает головой». (

Навигация

Переходы и взаимоотношения состояний

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

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

Вот – пример с веб-сайта Brian Hoff Design. Когда пользователь щёлкает по круглой кнопке со стрелкой, большой блок меню появляется с правой стороны экрана. Благодаря анимации, меню будто выезжает из области, находящейся за пределами экрана. В результате во взаимодействии со страницей нет логических разрывов.

Анимация помогает связать воедино два состояния страницы

Плавное изменение состояний

Анимация переходов бесценна для указания смены состояний страницы. В статье «Умные переходы в UX-дизайне» Адриан Зумбруннен показал отличный пример того, как анимация может помочь пользователю оставаться в курсе того, где именно он находится, при щелчке по ссылке, которая ведёт к другому разделу той же самой страницы.

Просто сравните это с резким переходом, который ощущается как неестественный «скачок».

Внезапное изменение состояния выглядит ненатурально. Пользователю тяжело воспринимать подобное. (