12 принципов анимации Disney: как применять их в продуктовом дизайне

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

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

Нам следует воспринимать движение не как дополнительное средство для улучшения дизайна, а скорее как основополагающий элемент отличного UX.

‍

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

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

1. Сжатие и растяжение

Применение принципа сжатия и растяжения к карточке

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

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

Как применить этот принцип в интерфейсах:

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

• Переходы: Эффект сжатия и растяжения может сделать переходы между различными состояниями и страницами более плавными и естественными.

2. Подготовка/упреждение

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

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

Как применить этот принцип в интерфейсах:

• Анимированные иконки: Они могут деликатно намекать на возможные действия и результаты, тем самым направляя и информируя пользователя.

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

• Анимация наведения: Такие взаимодействия информируют пользователей о том, что сейчас произойдет. Например, перед появлением выпадающего меню кнопка, на которую пользователь навел курсор, может изменить цвет или слегка увеличиться в размере.

3. Сценичность

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

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

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

Скелетная загрузка подготавливает пользователя к тому, какой контент вот-вот появится на экране

Как применить этот принцип в интерфейсах:

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

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

4. Прямое движение и переход от позы к позе

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

Первый подразумевает последовательное создание кадров — от начала до конца. Второй же — планирование и прорисовку ключевых кадров (основных поз), а затем уже заполнение интервалов между ними.

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

Яркий пример такого подхода — функция Smart Animate в Figma. Дизайнеры разрабатывают фреймы («позы»), отражающие ключевые состояния интерфейса, например, состояние кнопки по умолчанию, состояние наведения и активное состояние. Затем Smart Animate автоматически генерирует промежуточные кадры, создавая плавные переходы между ними.

5. Сквозное движение и захлёст действия

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

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

Как применить этот принцип в интерфейсах:

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

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

• Анимированные кнопки: Когда пользователь взаимодействует с кнопкой, она может уменьшаться (сквозное движение), а затем снова увеличиваться, в то время как иконка или текстовая метка внутри нее могут начинать движение немного позже или с другой скоростью (захлёст действия).

6. Смягчение начала и завершения движения

Благодаря замедлению карточки карусели плавно скользят, создавая приятный эффект при каждом пролистывании (вдохновлено руководством Material Design)

Принцип предполагает постепенное ускорение в начале (slow in) и замедление в конце (slow out). Такой подход имитирует естественное движение, ведь большинству объектов нужно время, чтобы ускориться и замедлиться, что добавляет анимации реалистичности и плавности.

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

Как применить этот принцип в интерфейсах:

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

• Модальные окна: Когда окна плавно появляются и исчезают, они органично вписываются в сценарий взаимодействия, а опыт получается более гармоничным.

• Анимация прокрутки: Контент начинает двигаться медленно, ускоряется в середине, а затем замедляется перед остановкой. Такая анимация делает прокрутку более динамичной и менее утомительной.

7. Дуги

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

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

Как применить этот принцип в интерфейсах:

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

• Жесты пролистывания: Мы можем реализовать движение по дуге в карусели или карточном интерфейсе, чтобы имитировать естественное движение и повысить удобство использования.

8. Дополнительное действие

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

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

Как применить этот принцип в интерфейсах:

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

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

• Обновление свайпом: Во многих соцсетях и новостных приложениях первичное действие — свайп вниз для обновления контента — часто сопровождается вторичным действием, например анимированной иконкой, которая вращается или меняет цвет, указывая на то, что процесс обновления продолжается.

9. Расчет времени (тайминг)

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

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

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

10. Преувеличение

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

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

Как применить этот принцип в интерфейсах:

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

• Навигация: Смелые размашистые анимированные переходы между разделами приложения превращают взаимодействие в настоящее путешествие.

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

11. Цельный рисунок

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

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

По мере развития дополненной (AR) и виртуальной реальности (VR) принципы скевоморфизма и целостности будут играть все более важную роль. Эти среды нацелены на создание иммерсивного опыта, который органично сочетает в себе цифровой и физический миры, поэтому такой дизайн должен соответствовать ожиданиям пользователей и максимально перекликаться с реальными взаимодействиями.

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

Персонажи должны привлекать аудиторию и вызывать у нее эмоциональный отклик. 

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

Как применить этот принцип в интерфейсах:

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

• Интерактивные элементы: Анимированные кнопки, переходы и обратная связь добавят в дизайн элемент веселья и превратят рутинное взаимодействие в интересный опыт.

• Анимированные иллюстрации: Уникальная графика, отражающая стиль и индивидуальность бренда, выделит цифровой продукт на фоне конкурентов и поможет заинтересовать аудиторию.

Заключение

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