Анимация

анимация

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

 

Вступление

Джон Шлеммер

Моушн дизайнер в Google

Николя Менард

Режиссёр-мультипликатор

Арина Шабанова

Иллюстратор и аниматор

Рейчел Нэйборс

Разработчик, аниматор

Том Джаннаттазио

Глава продуктовой команды в InVision

Стас Аки 

Продуктовый дизайнер в Readymag

Заключение

Анимация

Вступление

Костя Горский

Дизайн-менеджер в Intercom

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


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


Для этого выпуска «Альманаха» команда Readymag поговорила с несколькими дизайнерами, разработчиками и мультипликаторами об анимации. О том, как статика превращается в динамику, мертвое — в живое, искусственное — в естественное.

Джон Шлеммер

Анимация

Джон Шлеммер

Джон Шлеммер

Джон — сотрудник Google, руководитель
направления моушн-дизайна. Он управляет

созданием и внедрением кросс-платформенной

анимации в Google Apps c учетом принципов

Material Design, а также пишет статьи, читает

лекции и рассказывает о современных

стандартах анимации в вебе.

 

schlem.me

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


В 2013-м я начал сотрудничать с рекламным агентством, которое выводило на рынок новый смартфон Motorola Moto X. Там я впервые начал анимировать прототипы интерфейсов в After Effects. Я очень увлекся этой темой и связался с Google (на тот момент Motorola принадлежала им). В Google было несколько открытых позиций UI-аниматоров, и мне предложили одну из них. Это произошло как раз в тот момент, когда мобильная и веб-анимация начали набирать обороты.

 

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

 

В апреле 2010-го Стив Джобс опубликовал открытое письмо, в котором подробно объяснил, почему Apple больше не будет поддерживать Flash на своих продуктах. Для индустрии это было жестким решением: тогда я еще вовсю пользовался этим инструментом, а на HTML5 даже близко нельзя было воспроизвести то, что люди делали на Flash.

 

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

Стив Джобс 

Размышления о Flash

Конференция D8, 2010

Мобильная эра подразумевает девайсы с маленькими батарейками, тач-интерфейсы и открытые веб-стандарты — все то, с чем Flash плохо совместим. Стив Джобс

Стив Джобс с оранжевым MacBook
Стив Джобс в черной водолазке

Стив Джобс презентует первый iPhone

Конференция Macworld, 2007

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


Четыре главных качества, которые раздел Material Design Motion формулирует для анимации, — это отзывчивость, естественность, осведомленность и намеренность.

Отзывчивость

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

Естественность

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

Осведомленность

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

Намеренность

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

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

 

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

 

Другие дизайн-элементы проясняют взаимоотношения объектов в пространстве. Правда, эта задача лучше проработана на iOS, чем на Android. Реализация одних и тех же вещей на разных платформах всегда немного отличается. Изучите рекомендации Material Design о визуальной глубине расположения объектов, а потом зайдите в Google Calendar: вы увидите, что верхняя панель и красная кнопка добавления события (справа внизу страницы) расположены на переднем плане поверх всех остальных элементов. Когда по клику карточка мероприятия увеличивается до полного размера, она также поднимается наверх и становится вровень с верхней панелью и красной кнопкой.


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

Material design: Анимация

Конференция Google I/O, 2014

Джон Шлеммер.

Анимация в Material Design: расширенное руководство
Конференция Google I/O, 2014

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

 

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


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

Я любитель анимированной графики,

которая задействуется при скролле. Мне

нравится, как при прокрутке этого

проекта каждый новый флаг постепенно

превращается в следующий. Кое-где

в процессе трансформации раскрывается

и смысл, заложенный в дизайн флага.

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

 

Изучение UI-анимации я советую начинать с прототипирования приложений и интерфейсов. Курсов UI-анимации не так много. Единственный, который приходит мне на ум, это UXInMotion.net. Изучите Form и Principle — у них есть отличные инструменты для прототипирования и создания интерактивной анимации. Таким образом вы сможете разобраться с механикой анимированных переходов между экранами и начнете понимать, как функционируют и перемещаются объекты в приложении. Это гораздо полезнее, чем просто анимировать что-то в After Effects.

 

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

 

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

Джои Черра

Продвинутая анимация в UIKit

Конференция WWDC, 2017

Презентация Google Pixel 2

Конференция MadeByGoogle, 2017

Один из моих любимых аниматоров — Сэт Эккерт. У него много крутых работ как в сфере UI-анимации, так и вне ее, — все они так или иначе оказывают влияние на современные тренды.

Сет Эккерт

Анимация для Facebook, 2016

Анимация

Николя Менар

Николя Менар

Николя Менар

Николя — канадский режиссер-мультипликатор, автор короткометражек,
анимированных иллюстраций. Работы
Николя показывают на фестивалях по всему
миру, его фильм «Среда с Годаром» получил
приз в номинации «Лучший короткий метр»
на американском кинофестивале South by
Southwest в 2017 году.

 

nicolasmenard.com

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


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


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


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

 

Фотографии Эдварда Мэйбриджа дают очень вдохновляющий взгляд на движение в окружающем мире. Ну и конечно же «Набор выживания аниматора» Ричарда Вильямса — это классический учебник, который есть дома у большинства аниматоров.

 

 

 

Норман МакЛарен

Begone Dull Care, 1949

Норман МакЛарен

Rythmetic, 1956

Комиксы — это международный язык, они могут пересекать границы и объединять поколения. Комиксы — мост между культурами. Осаму Тэдзука

Осаму Тэдзука за работой
Осаму Тэдзука в черном берете, белой водолазке и пиджаке смотрит в камеру

Осаму Тэдзука

Astro Boy, 1963

Осаму Тэдзука

Об экспериментальной анимации

Aрхивы Japan Society Film, 1986

Эдвард Майбридж

«Рука, отсчитывающая такт» 19 век

Эдвард Майбридж, «Рука, отсчитывающая такт», 19 век. Серия черно-белых стоп-кадров движущейся руки

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


Одним из важных моментов в моей карьере была премия жюри на фестивале South By Southwest за мой первый профессиональный мультфильм «Среда с Годаром». Мы сделали его вместе с художником
Маншен Ло на студии Nexus Studios. Нам понравилось работать вдвоем, и через полгода мы встретились вновь, чтобы поработать над айдентикой MTV.

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

Увлекательный, цепляющий взгляд и классно выполненный эксперимент!

В 2016-м я создал для Facebook 18 коротких мультфильмов, рассказывающих о поиске по группам — новой функции, которая помогает пользователям находить сообщества, популярные среди их круга общения или в их городе. Эти видео ориентированы на три разные аудитории. Первая — это студенты колледжей, вторая — родители маленьких детей, третья — родители учеников начальных и старших классов. Мы сделали по шесть видео для каждой социальной группы, они возникают прямо в ленте Facebook. Каждый мультфильм начинается с описания проблемы героя: например, молодая мама сидит дома с ребенком и ей одиноко. С помощью поиска по группам она может выйти из социальной изоляции — организовать детский праздник или встретиться с другими молодыми родителями.

 

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

 

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

Кайл Моватт

Ballpit, 2012

За каждым великим фильмом стоит
режиссер-экспериментатор.
Лен Лай

Лен Лай с пучком световодов
Лен Лай с набором пружин на фоне ковра с геометрическим узором

Лен Лай

«Калейдоскоп», 1935

Лен Лай

Trade tattoo, 1937

Лен Лай, окруженный инсталляциями из световодов

Никки Линдрот фон Бар

«Обуза», 2014