Анимация в интерфейсах: 7 фундаметальных принципов UX-анимации | Глава 2

Анимация — это инструмент дизайна, который позволяет сделать абстрактные цифровые сущности осязаемыми и знакомыми. В статье семь главных принципов анимации, которые стоит учитывать при любом ее использовании.
Иллюстрация Jack Daly: https://dribbble.com/shots/2282022-Deloitte-Uni-Press-Illustration

← Назад | Продолжение (Глава 3) →

(Перед вами бесплатный курс от InVision Studio «Анимация интерфейсов». В курсе 4 главы. Если вы здесь впервые, то лучше начните сначала)

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

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

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

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

Третий закон Артура Кларка гласит: “Любая достаточно развитая технология неотличима от магии”. 

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

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

Нам под силу сделать нереальное доступным. 

Принципы ui-анимации

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

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

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

  • Тайминг (timing): время и продолжительность анимации 
  • Темп (pacing): скорость, с которой происходит движение
  • Стейджинг (staging): анимация, которая предшествует крупным изменениям
  • Доводка (follow-through): отдача от анимации, как в реальном мире
  • Второстепенное действие (secondary action): непримечательные анимации на фоне подчеркивают ключевое действие
  • Нахлест (overlapping action): дополнительная анимация связана и согласована с основным движением
  • Привлекательность (appeal): у героев преувеличенные черты внешности и необычные пропорции

Тайминг и темп

Чем отличается хорошая шутка от плохой? Правильно выбранным моментом. Момент вообще решает все: когда каждый элемент анимации появляется в нужный момент, мы начинаем видеть между передвижениями связи (даже если их нет). Тайминг — это и есть выбор правильных моментов, расстановка кадров в истории. Тайминг позволяет оживить неодушевленные предметы и, что самое важное, транслирует определенное настроение и индивидуальность. 


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

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

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

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


Рис. 2. За счет анимации, изменения в интерфейсе становятся более понятными и человечными. 

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

Рис. 3. Объект кажется нам правдоподобным, если он подчиняется законам реального мира: например, если на него действуют сила трения и сила тяжести. Красный шарик на картинке катится под горку и явно ускоряется.

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

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

Однако такое равномерное движение выглядит немного неестественно (возможно, потому что в реальном мире оно по законам Ньютона невозможно). Чтобы объект двигался реалистично, на него должны влиять физические силы: движущая сила и сила трения. Другими словами, мы должны видеть ускорение


Рис. 4. Есть такое правило: если объект только появляется в кадре, или нужно привлечь к нему внимание — используйте плавное замедление (ease-out); при таком эффекте объект быстро перемещается в начале и плавно замедляется к концу движения. И наоборот: если объект уходит из кадра или теряет важность, нужно использовать плавное ускорение (ease-in).  

Чтобы воссоздать естественное ускорение или замедление объектов реального мира под влиянием физических сил, в анимации используют эффекты смягчения (easing). 

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

Экспериментируйте с разными скоростями и эффектами, но помните, что есть такое правило: если объект только появляется в кадре, или нужно привлечь к нему внимание — используйте плавное замедление (ease-out); при таком эффекте объект быстро перемещается в начале и плавно замедляется к концу движения. И наоборот: если объект уходит из кадра или теряет важность, нужно использовать плавное ускорение (ease-in). Создавая иллюзию жизни в цифровом мире, важно понимать, как объекты реального мира функционируют и двигаются. 

Стейджинг

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


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

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

Доводка (follow-through) 

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

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


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

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

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

Второстепенное действие 

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

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

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

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


Рис. 7. Иногда второстепенное действие придает анимации необъяснимый шарм. Второстепенные действия помогают сделать взаимодействия в интерфейсе приятными, понятными и человечными — главное знать меру. 

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

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

Имейте в виду, что чем больше элементов идут внахлест — тем сложнее зрителю их воспринимать. Когда элементов много, анимации должны быть как можно более незаметными, а если элементов больше 20, их лучше сгруппировать. Реализуя “нахлест”, всегда держите в уме сценарии использования: эффект, который мило смотрится на трех элементах, может выглядеть совершенно неуклюже на 12. 

Профессиональная хитрость

Постепенно уменьшайте время отставания каждого следующего элемента: для этого можно использовать функцию плавности (easing function) или функцию затухания (decay function). Это позволит создать эффект плавного разгона: так звенья якорной цепи по одному погружаются в воду. 

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

Рис. 8: Один из распространенных примеров использования “нахлеста” в интерфейсе: похожие элементы движутся одинаково, но с небольшим отставанием. Такой “каскад” подразумевает логическую связь между элементами.  

Привлекательность 

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

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

Принципы на практике 

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

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

← Назад | Продолжение (Глава 3) →

Курс «Анимация интерфейсов»

Посты в категории Анимация интерфейсов

Будущее моушн-дизайна в интерфейсах | Глава 4

Ольга Жолудова

4 июля 2020

Посты в категории Анимация интерфейсов

Как добавить ui-анимацию в дизайн-систему: обогащаем движением uikit | Глава 3

Ольга Жолудова

4 июля 2020

Посты в категории Анимация интерфейсов

Как анимация влияет на восприятие: применяем ui-анимации для улучшения интерфейсов | Глава 1

Ольга Жолудова

4 июля 2020