Принципы анимации пользовательского интерфейса: Дисней мертв

Фото было предсказано как смерть живописи (ранний дагерротип)

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

Новая среда

Когда где-то в 1839 году Поль Деларош столкнулся с дагерротипом, он, как известно, заявил: «С сегодняшнего дня живопись мертва!»

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

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

Прошло почти сто лет, прежде чем такие фотографы, как Ансель Адамс, Имоджен Каннингем, Эдвард Уэстон и другие в «Группе f / 64», внесли существенный вклад в визуальный язык, который отличает фотографию от живописи как уникальной среды - с ее собственным визуальным язык и принципы, и при этом они произвели революцию в области фотографии.

Эдвард Уэстон, Имоджен Каннингем, Ансель Адамс

Дисней решил другую проблему

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

В 1981 году Олли Джонстон и Фрэнк Томас выпустили «Анимацию Диснея: Иллюзия жизни» и представили так называемые «12 основных принципов анимации». Эти принципы решили проблему создания «реалистичного движения», возникающего, когда органические тела двигаться и реагировать в физическом пространстве (принципы также охватывают такие вещи, как эмоциональное время и привлекательность характера).

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

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

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

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

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

Постановка относится к макету анимации, который имеет смысл для мультфильма Диснея, потому что персонажи постоянно находятся в движении, но в пользовательском опыте это просто воспринимается как «дизайн».

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

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

Замедление и замедление говорит о том, что объектам нужно время, чтобы ускорить и замедлить. Это чрезвычайно актуально, поскольку 100% анимации пользовательского интерфейса должны использовать этот принцип. Обычно это называется «ослабление» и является чрезвычайно важным.

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

Вторичное действие полезно и отлично подходит для смены экрана и настройки визуальной иерархии.

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

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

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

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

В заключение

Таким образом, остается вопрос: почему 12 основных принципов анимации точно не описывают анимацию пользовательского интерфейса?

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

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

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