← Назад | Продолжение (Глава 3) →
(Перед вами бесплатный курс от InVision Studio «Анимация интерфейсов». В курсе 4 главы. Если вы здесь впервые, то лучше начните сначала)
Исследования подтверждают, что рассказывая истории, мы часто приукрашиваем. Нам хочется, чтобы люди, которые слушают наши истории, прочувствовали всю соль ситуации, в которой мы оказались. Чтобы наши истории звучали более ярко, мы убираем лишние детали и подчеркиваем важное. Мы приукрашиваем и нагнетаем драму, чтобы сделать истории более эмоциональными и запоминающимися. А еще, мы задействуем физику времени и движения, чтобы оживить наши истории, перенести их в реальный мир, в котором их будет проще понять и прочувствовать. Движение всегда оживляет историю.
Однако анимация нужна не только для того, чтобы истории казались более правдоподобными. Анимация помогает нам лучше понять мир цифровой “магии” и довериться ему. С точки зрения физики, все аналоговые системы: велосипеды, тостеры, стиральные машины функционируют вполне предсказуемо. Мы понимаем их принцип работы и знаем, чего от них ждать. Это вселяет уверенность.
Крутишь педали — едешь вперед. Нажимаешь рычаг на тостере — хлеб опускается вниз. Даже если сам механизм скрыт — как у фонарика или стиральной машины — принцип работы легко представить и понять. Мы понимаем движение этих аналоговых объектов, потому что они живут в нашем физическом мире.
По мере развития, цифровые продукты становятся все более компактными, и их принцип работы, который когда-то был очевиден, начинает казаться нам сложным и непонятным. Не шуршат шестеренки, не поднимается легкий успокаивающий дымок короткого замыкания — все работает надежно, бесшумно и недвижно. Мы надстроили новый слой “магических” рычажков и кнопок, которые программно управляют физическими механизмами внутри.
Третий закон Артура Кларка гласит: «Любая достаточно развитая технология неотличима от магии».
И хотя сама идея магии всегда привлекала людей, мы порой чувствуем себя не в своей тарелке, когда объекты реального мира работают за пределами нашего понимания. Сегодня механизмы и принципы работы большинства инструментов скрыты от наших глаз. Да, вся техника подчиняется законам физики, но как именно телефоны распознают лицо или слышат даже удаленные запросы мы чаще всего не представляем.
В цифровых системах почти нет ограничений — практически все возможно. Мы действительно можем творить магию, а при помощи нескольких простых принципов анимации эту магию можно сделать привычной и комфортной для пользователей.
Нам под силу сделать нереальное доступным.
Принципы ui-анимации
Анимация — это инструмент дизайна, который позволяет сделать абстрактные цифровые сущности осязаемыми и знакомыми. Есть несколько известных принципов анимации, которые стоит учитывать при любом ее использовании.
Вообще, хотя анимация и нашла свое место в цифровых интерфейсах, исторически она применялась в кино и развлечениях. Настоящие мастера анимации из студии Уолта Диснея Фрэнк Томас и Олли Джонстон, собрали 12 ключевых принципов анимации в своей книге: “Иллюзия жизни: Анимация Диснея”. И хотя кинематографическая анимация немного отличается от анимации в интерфейсе, ее ключевые принципы вполне применимы и в области дизайна.
В этой главе мы в деталях разберем семь ключевых принципов, которые работают в дизайне интерфейсов:
- Тайминг (timing): время и продолжительность анимации
- Темп (pacing): скорость, с которой происходит движение
- Стейджинг (staging): анимация, которая предшествует крупным изменениям
- Доводка (follow-through): отдача от анимации, как в реальном мире
- Второстепенное действие (secondary action): непримечательные анимации на фоне подчеркивают ключевое действие
- Нахлест (overlapping action): дополнительная анимация связана и согласована с основным движением
- Привлекательность (appeal): у героев преувеличенные черты внешности и необычные пропорции
Тайминг и темп
Чем отличается хорошая шутка от плохой? Правильно выбранным моментом. Момент вообще решает все: когда каждый элемент анимации появляется в нужный момент, мы начинаем видеть между передвижениями связи (даже если их нет). Тайминг — это и есть выбор правильных моментов, расстановка кадров в истории. Тайминг позволяет оживить неодушевленные предметы и, что самое важное, транслирует определенное настроение и индивидуальность.
Рис. 1. Тайминг позволяет оживить неодушевленные предметы и, что самое важное, транслирует определенное настроение и индивидуальность. Понаблюдайте за движением объектов на рисунке, и вы увидите историю.
В аналоговом мире мы можем наблюдать промежуточные состояния практически любого процесса. Они красноречиво объясняют, как устроен мир и что за чем следует. Повернешь ручку — откроется дверь. Сотрешь текст — напишешь на его месте новый. Поставишь чайник на огонь — он засвистит. Мы запрограммированы реагировать на такого рода трансформации.
В то же время, мы не в состоянии отследить изменение цифровых данных: оно происходит слишком быстро, а нашему мозгу требуется порядка сотни миллисекунд, чтобы зафиксировать изменения. Поэтому, даже если мы выведем какие-то изменяющиеся данные на экран: например, количество пройденных шагов или экранное время, эти цифры будут условными, “замедленными” до скорости нашего восприятия.
С технической точки зрения, промежуточные состояния (движения, выцветания, мерцания) в цифровом мире не нужны: ведь пока объекты двигаются, выцветают и мерцают реальные данные могут сто раз измениться. Тем не менее, мы осознанно используем эти небольшие искажения, чтобы сделать волшебный мир digital более предсказуемым и понятным. Анимации помогают объяснить людям, как одни элементы цифрового мира превращаются в другие.
Рис. 2. За счет анимации, изменения в интерфейсе становятся более понятными и человечными.
Самый простой способ “очеловечить” изменения в интерфейсе — это замедлить их до скорости человеческого восприятия. Время — один из главных инструментов анимации. Управляя временем, мы можем влиять на то, как пользователь воспринимает интерфейс: его скорость, возможности и даже настроение. Переход от одного экрана к другому, появление нового элемента на экране, загрузка файла, прокрутка ленты — все эти изменения требуют правильного тайминга.
Кадр — это основополагающий элемент анимации. Каждый кадр — это отдельный фрагмент или сцена. Разница между кадрами сглаживается при их быстрой смене и создает ощущение движения. В традиционной анимации тайминг определяется количеством кадров от начала и до конца движения. Чем больше кадров — тем медленнее объект анимации будет двигаться, и наоборот. В цифровой анимации мы полагаемся на функции распределения анимированных значений во времени, которые математически определяют ускорение, замедление и даже подпрыгивание объекта в процессе движения.
Самая простая функция распределения значений — линейная, что означает, что объект двигается вперед на равное расстояние в каждый момент времени.
Однако такое равномерное движение выглядит немного неестественно (возможно, потому что в реальном мире оно по законам Ньютона невозможно). Чтобы объект двигался реалистично, на него должны влиять физические силы: движущая сила и сила трения. Другими словами, мы должны видеть ускорение.
Рис. 4. Есть такое правило: если объект только появляется в кадре, или нужно привлечь к нему внимание — используйте плавное замедление (ease-out); при таком эффекте объект быстро перемещается в начале и плавно замедляется к концу движения. И наоборот: если объект уходит из кадра или теряет важность, нужно использовать плавное ускорение (ease-in).
Чтобы воссоздать естественное ускорение или замедление объектов реального мира под влиянием физических сил, в анимации используют эффекты смягчения (easing).
В разных ситуациях уместны анимации, разные по скорости и траектории движения. Давайте поясним это на примере из реальной жизни. Сожмите ладонь в кулак, а потом быстро разожмите. А теперь сделайте то же самое, только разжимайте руку осознанно и с чувством. Возможно, второе движение не заняло значительно больше времени, но сам темп жеста поменял его значение и смысл.
Экспериментируйте с разными скоростями и эффектами, но помните, что есть такое правило: если объект только появляется в кадре, или нужно привлечь к нему внимание — используйте плавное замедление (ease-out); при таком эффекте объект быстро перемещается в начале и плавно замедляется к концу движения. И наоборот: если объект уходит из кадра или теряет важность, нужно использовать плавное ускорение (ease-in). Создавая иллюзию жизни в цифровом мире, важно понимать, как объекты реального мира функционируют и двигаются.
Стейджинг
Даже самые легкие и незаметные анимации помогают нам лучше воспринимать изменения, происходящие на экране. Возьмем, к примеру, субтитры. Если строки субтитров сменяют друг друга непрерывно, зритель может отвлечься и не заметить очередную смену строки. Но если перед появлением новой строки, предыдущая на секунду пропадёт, это точно привлечет внимание зрителя. Подобные микро-движения и анимации, которые готовят пользователя к последующим изменениям и направляют внимание — это и есть стейджинг.
Рис. 5. Когда мы показываем быстро сменяющиеся цифры в интерфейсе, можно сымитировать их движение на механическом табло или циферблате: как на вокзалах или в винтажных часах. Это упрощает восприятие быстрых изменений и снижает когнитивную нагрузку.
Отображение изменяющихся чисел в интерфейсе тоже требует стейджинга. Бывают ситуации когда эти числа растут (например, прогресс загрузки) или уменьшаются (оставшееся время). Формально, к сменяющимся числам достаточно добавить пульсацию или легкое мигание — чтобы мозгу было проще фиксировать изменение. Однако, в случае с числами лучше сымитировать смену цифр на механическом табло или циферблате: как на вокзале или в винтажных часах. Тогда пользователю будет еще проще понять направление и характер изменений — а это снижает когнитивную нагрузку.
Доводка (follow-through)
Плавное ускорение и плавное замедление придают движению некий реализм, но без дополнительных эффектов все равно смотрятся достаточно плоско и неестественно. Только роботы после плавного замедления замирают на месте как вкопанные. В реальном мире, объекты движутся более мягко и разболтано. Представьте, как вы тянетесь за каким-то предметом или, например, отматываете бумажные полотенца из рулона. Любое движение сопровождается рядом сопутствующих микродвижений: дотянувшись до нужного предмета вы качнетесь вперед, а рулон с полотенцами при раскручивании будет немного болтаться в разные стороны.
В интерфейсе такие дополнительные движения объекта, прежде чем он займет свое место, создают эффект реального движения. Поэтому после плавного торможения нужно добавлять эффект доводки — такое легкое отпружинивание, словно у объекта есть вес и он подчиняется действию физических сил.
Рис. 6. В реальном мире, объекты движутся более мягко и разболтано. Представьте, как вы тянетесь за каким-то предметом или, например, отматываете бумажные полотенца из рулона. Любое движение сопровождается рядом сопутствующих микродвижений.
Если анимация — это язык тела ваших цифровых творений, то сопутствующие микродвижения — это мимика, которая выдает разницу между искренними и неохотными действиями.
Эффект доводки можно реализовать в том числе через тайминг: объект должен пройти чуть большее расстояние, чем задумано, затем “отпружинить” назад и, наконец, остановиться в нужной точке. Это как мячик для гольфа, который прокатывается по краю лунки, делает полукруг и наконец падает внутрь. Имейте в виду, что “отпружинивание” не всегда уместно. Прежде чем применять какие-то эффекты, задумайтесь о восприятии.
Второстепенное действие
У вас есть любимое блюдо? А вы задумывались, за что вы его любите? Наверняка, ответить на этот вопрос сложно. Вас привлекает целая гамма ароматов и вкусов — о некоторых ингредиентах вы, возможно, даже не задумываетесь. Любимая песня — это тоже набор мелодий, ритмов и эффектов, которые в сумме запали в душу.
По тому же принципу, второстепенные действия дополняют анимацию и делают ее запоминающейся. Персонаж прислоняется к стене и перекрещивает руки на груди. Над сломанным компьютером поднимается легкий дымок. В обоих примерах второстепенные действия определяют смысл: персонаж не просто устал — он смущается; компьютер не просто глючит — полетела какая-то электроника. Если анимация — это язык тела ваших цифровых творений, то сопутствующие микродвижения — это мимика, которая выдает разницу между искренними и неохотными действиями.
Эти незаметные движения подчеркивают и оттеняют анимацию, делают ее более яркой, экспрессивной и понятной. Второстепенные анимации в интерфейсе подсказывают нам последствия тех или иных действий. Они помогают сделать взаимодействия в интерфейсе приятными, понятными и человечными — главное знать меру.
Второстепенные действия никогда не отвлекают внимание от основных — они их подчеркивают. Как цвет, типографика и лейаут помогают создать иерархию в тексте, так второстепенные действия расставляют акценты в анимации. И пусть неискушенный пользователь может их даже не заметить, они играют очень важную роль — как пунктуация в литературе или как гарнир в кулинарии.
Рис. 7. Иногда второстепенное действие придает анимации необъяснимый шарм. Второстепенные действия помогают сделать взаимодействия в интерфейсе приятными, понятными и человечными — главное знать меру.
В традиционной анимации “нахлест” — это действие, которое происходит параллельно с основным действием, но с небольшим отставанием. Представьте пса с большими ушами, который прыжками несется к хозяину. Уши двигаются вместе с телом, но в небольшом рассинхроне.
В цифровых интерфейсах нахлест используется при анимации группы отдельных элементов. Каждый элемент анимируется так же, как и предыдущий, но с небольшим отставанием. В итоге элементы выглядят логически связанными и движутся друг за другом как вагоны большого поезда — а не появляются одновременно как печеньки на противне. Нахлест помогает разгрузить тяженые переходы и показать, что все объекты взаимосвязаны и в то же время самостоятельны.
Имейте в виду, что чем больше элементов идут внахлест — тем сложнее зрителю их воспринимать. Когда элементов много, анимации должны быть как можно более незаметными, а если элементов больше 20, их лучше сгруппировать. Реализуя “нахлест”, всегда держите в уме сценарии использования: эффект, который мило смотрится на трех элементах, может выглядеть совершенно неуклюже на 12.
Совет профи
Постепенно уменьшайте время отставания каждого следующего элемента: для этого можно использовать функцию плавности (easing function) или функцию затухания (decay function). Это позволит создать эффект плавного разгона: так звенья якорной цепи по одному погружаются в воду.
Иногда стоит по-особенному обыграть последний элемент: удлинить его анимацию и добавить эффект удара. Это будет важным завершающим аккордом: свободный конец цепи только что был у вас в руках — и вот он уже шлепается в воду. Этот эффект можно использовать не только в списках загрузки элементов — точно так же как нахлест пригодится не только для анимации псов с развевающимися ушами.
Привлекательность
Совсем не обязательно, чтобы анимация всегда была чисто функциональной и реалистичной. В классической анимации, чтобы персонажи выглядели привлекательно, их наделяют преувеличенными чертами внешности и необычными пропорциями (детские глаза, выступающая челюсть и т.п.). Это выглядит нереалистично, но, как ни странно, приукрашивая реальность, мы делаем ее более человечной и понятной.
Привлекательность в анимации — это как брендинг. В реальном мире мы получаем обратную связь от взаимодействий: щелчок фотоаппарата, мягкое нажатие кнопки, рычание двигателя. В цифровом мире эмоциональную связь можно создать за счет анимаций: когда мы лайкаем пост друга, сердечко пульсирует и наполняется красным цветом, а когда сильно нажимаем на иконку приложения, оно моргает, а в палец отдает приятная вибрация. Благодаря анимациям, ваш продукт выделится на фоне конкурентов и западет в душу пользователям.
Принципы на практике
Мы привыкли видеть и понимать причинно-следственные связи в реальном мире — и поэтому чувствуем себя не в своей тарелке, когда сталкиваемся с тем, что не можем объяснить: например, как работают цифровые продукты. Анимации в интерфейсе помогают восполнить пробелы в истории.
В следующей главе мы разберем принципы анимации в контексте реальных проектов. И все же, над каким бы проектом вы ни работали, если вы будете использовать проверенные принципы анимации, ориентироваться на законы природы и физику движения и применять удачные техники, реализованные в других интерфейсах, вы научитесь делать классные анимации.
← Назад | Продолжение (Глава 3) →