Веб-анимация: где, зачем и почему. Введение в анимацию в веб-дизайне

22.07.2019

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

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

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

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

Для получения плавной анимации с 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

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

Применение анимированной графики и трехмерной (3D) анимации

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

Моушн дизайн также активно применяется в самом актуальном направлении ивент-индустрии сегодняшнего дня - (3D video mapping) или, в простонародии, - . В маппинг шоу является контент, производимый моушн дизайнерами, с помощью различных видеопроекторов проекцируется на различные поверхности или даже на воздух.

Моушн дизайн также широко применим в интерьерном маппинг дизайне, т.е. когда интерьеры декорируются посредством видеопроекторов. Это позволяет создавать совершенно новые пространства, текстуры и предметы декора, ведь проекторы можно осветить поверхность любой формы, изменив ее тем самым любую до неузнаваемости, и даже создать абсолютную иллюзию физического изменения пространства.
BTL-маркетинг, брендинг пространств и помещений и моушн технологии сейчас практически неразделимы. Реклама, презентации, видео-инфографика, макеты, логотипы, брендирование – во всех этих сферах бизнеса активно применяется и является трендом моушн дизайн. Современные эпизоды таких кинофраншиз, как Джеймс Бонд и Гарри Поттер, суперпопулярные сериалы, как Игра Престолов, – их локации, спецэффекты, оформление – все это «рисуется» графиками и аниматорами на компьютере.

Моушн дизайн как вид современного искусства

Благодаря активному развитию программного и аппаратного обеспечения для 3D-графики моушн дизайн получает активное развитие в кино, а также являет собой один из самых тресковых изысканных видов современного искусства. В 1960 году Джон Уитни был одним из первых, кто признал моушн-графику искусством и ввел этот термин в профессиональный жанр. Его компания Motion Graphics Inc. получила говорящее название и стала пионером моушн графики и дизайна в кино индустрии. В течении нескольких лет компания Джона Уитни активно работает над такими картинами, как Psycho, Advise & Consent, Man With The Golden Arm, Vertigo. Задачей компании было создание относительно простой, но атмосферной моушн-графики для усиления настроения фильма.
В дальнейшем моушн-графика получает активное развитие, создаются визуально привлекательные графические композиции в движении, которые также заимствуют элементы из фотографии, видео и иллюстрации. Благодаря этому объекты, персонажи и фоны изменяются, двигаются, взаимодействуют и трансформируются.
Такой вид моушн-искусства в синергии с бизнес-задачами получил активное применение в для презентаций тех или иных крупных мировых брендов. Очевидное преимущество моушн-графики как искусства перед другими изобразительными средствами самовыражения художника - это абсолютное отсутствие каких-либо границ реализации идей худождика. С помощью комьютера и современного программного обеспечения и аксессуаров можно претворить в жизнь любую фантазию или идею.

Моушн дизайн в бизнесе

На Facebook 85% видеоконтента просматривается без звука и, тем не менее, благодаря графическим технологиям бизнесу удается донести до целевой аудитории необходимый месседж даже без звукового сопровождения. Посредством моушн-графики создаются самые лучшие презентации. Информационный моушн дизайн как нельзя лучше способен продемонстрировать в графическом виде процессы, алгоритмы, раскрыть суть документов, технические параметры устройств, факты и цифры.
На сегодняшний день моушн дизайн сопровождает вас везде: в телефоне, рекламе, кино, на спектаклях и шоу-постановках, выставках, презентациях и, конечно, на телевидении.
Моушн дизайн &ndash это крайне перспективная форма создания визуально привлекательного контента с рекламной или имиджевой целью. Если вы задумываетесь о создании моушн графических презентаций, рекламных видео для продвижения бизнеса, обратитесь в , наша команда всегда рада разработать что-то уникальное, найти решение именно для вашего бизнеса и создать невероятный и фантастический контент.

Как стать дизайнером моушн графики

Профессия моушн дизайнера - это достаточно молодое направление в дизайне, возникшее в следствии развития современных технологий и программного обеспечения. Графические дизайнеры, веб дизайнеры, дизайнеры интерфейсов, иллюстраторы, 3d специалисты и конструкторы – все они в некоторой степени могут быть моушн дизайнерами.
Наиболее важным шагом для всех, кто планирует продолжить карьеру в этом направлении, является ознакомление с основами 3D-моделирования, анимации и графического дизайна. Одни из самых популярных компьютерных программ для создания моушн контента являются Adobe Premiere Pro, Cinema 4D, Adobe Photoshop, Adobe After Effects и Final Cut Pro. В наше время при желании практически любой талантливый художник может научиться создавать качественный моушн контент даже без профильного технического образования. В интернете можно найти огромное количество обучающих видео и других материалов про создание моушн-графики.
Важно постоянно следить за трендами, анализировать работы коллег, чтобы всегда понимать тенденции и перспективы индустрии. Моушн дизайнер - это профессиия, востребованная во всем мире. Средняя зарплата моушн дизайнера в США порядка $99000 в год. Профессионалы топ-уровня и руководящие специалисты имеют еще больший доход.
В качестве резюме можно констатировать, что профессия моушн дизайнера перспективна для творческих людей вне зависимости от того, есть у них профильное образование или нет. Главное – желание и упорство.

Спасибо! Вы успешно подписались на нашу рассылку.

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

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

Прогрессия

Анимация загрузки

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

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

Анимация выполнения

Анимация может представить процесс выполнения посредством линейной прогрессии. Классическая «полоса загрузки» — это самый распространенный пример такой анимации.

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

Скелетные экраны

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

Визуальный отклик

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

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

Эффекты наведения мыши – самый распространенный пример визуального отклика.

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

Привлечение внимания

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

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

Смена состояния

Переходы очень важны для отображения смены состояний. В своей статье Smart Transitions In User Experience Design (англ), Эдриан Зумбруннен показывает, как анимация может помочь пользователю сохранить контекст после нажатия на ссылку, перемещающую его в другую секцию той же страницы.

Просто сравните этот статичный, мгновенный переход:

С анимированным поведением:

Креативные эффекты

Креативная анимация может сделать ваш UX действительно красивым и запоминающимся. Она добавляет в UI развлекательный элемент.

Сторителлинг и длинный скроллинг

Совсем недавно, правило «над складкой» было бесспорным. Дизайнеры концентрировали большую часть своего внимания на заполнении этой области ценной информацией. К счастью, теперь мы знаем, что это правило не обязательно верно. На самом деле, 66% внимания на обычной медиа странице, тратится на область под складкой (англ). Такой сдвиг делает скроллинг важным элементов интерактивного дизайна.

Анимация вдыхает в скроллинг жизнь и интерес

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

Заключение

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

Перевод статьи Ника Бабича

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основы

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

Дисней – это почти синоним анимации. В начале 1980-х, два аниматора этой компании написали книгу, в которой обозначили 12 принципов анимации. Эта книга, «Illusion of Life: Disney Animation», написанная Френком Томасом и Оли Джонстоном и до сих пор не потеряла актуальности.

Вот эти принципы:

Сжатие и растяжение
Упреждение
Сценичность (постоянный учет того, как образ видит зритель)
Использование компоновок и прямого фазованного движения
Сквозное движение (или доводка) и наложение действия
Смягчение начала и завершения движения (Спэйсинг)
Дополнительное действие (выразительная деталь)
Расчёт времени (Тайминг)
Преувеличение, утрирование
«Крепкий» (профессиональный) рисунок
Привлекательность

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

Тенденции, появляющиеся в этом году

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

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

Большая и маленькая анимация

Веб анимация делится на две простые категории: большая анимация и маленькая.

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

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

Когда использовать анимацию

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

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

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

Перевод статьи Кэрри Казинс