Принципы анимации для UX и UI дизайнеров, от простого к сложному

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

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

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

Ответ: посредством науки и принципов.

Эта статья в основном теория, завернутая в красивую упаковку.

Вернон Джойс

Что такое анимация?

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

Количество кадров в течение одной секунды анимации называется частотой кадров (frame rate) или кадры в секунду (FPS). Человеческому глазу требуется не менее 24 кадров в секунду, чтобы воспринимать анимацию, как плавное движение.

Например, в Интернете частота кадров ваших CSS-анимаций во многом зависит от скорости браузера и компьютера. Вы можете увидеть дергание анимации или зависание, если ваш компьютер работает медленно, и это (часто) показатель того, что частота кадров упала ниже 24 FPS (и что пришло время купить новый iMac).

Игры – еще один отличный пример. Игры лагают, когда ваш компьютер не может поддерживать их со скоростью 24 FPS – хотя большинство игроков настаивают на том, что все, что ниже 60 FPS, запаздывает и лагает.

Основы физики

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

Тайминг (Timing) – это количество времени или кадров, необходимое для перемещения объекта. Если мячику потребуется 5 секунд, чтобы упасть на землю, его анимированное время будет равно 120 кадрам (5 x 24 FPS).

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

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

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

– Google Material Design

Размер и вес

Как мы знаем, большинство объектов в реальном мире имеют размеры и вес. Эти размеры дают объекту то, что называется центром тяжести, и это влияет на то, как он движется и вращается.

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

У нас есть прерогатива сместить центр тяжести объекта, если это кажется естественным
У нас есть прерогатива сместить центр тяжести объекта, если это кажется естественным. Пример от Wouter Raateland

Гравитация (Сила тяжести)

Гравитация – это естественная сила, которая притягивает объекты друг к другу. Она привязывает нас к планете, а также несет ответственность за приливы океана. Это таинственно – поэтому я не буду притворяться, что знаю больше, чем уже сказал, кроме того факта, что она оказывает огромное влияние на движение объектов.

Мне кажется, на наши устройства действуют две гравитационные силы. Во-первых, сверху вниз по оси Y, а во-вторых, в глубину интерфейса по оси Z. Google одним из первых осознал, что наши устройства обладают глубиной, и основал большую часть философии Material Design на том, что они называют elevation (возвышение).

Nick Taylor применяет философию глубины Material Design в этом Google Bank примере.
Nick Taylor применяет философию глубины Material Design в этом Google Bank примере.

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

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

Cопротивление

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

Сопротивление используется в UX дизайне довольно часто. Отличным примером является 3D Touch от Apple (RIP), где интерфейс практически «сопротивляется» действию, пока вы не нажмете достаточно сильно. Это сопротивление демонстрируется с помощью анимации, при этом иконка выделяется сильнее или слабее в зависимости от давления, которое вы оказываете.

Интересный взгляд на 3D Touch от Benjamin Berger
Интересный взгляд на 3D Touch от Benjamin Berger

Действие «потяните, чтобы обновить» (pull-to-refresh), когда пользователь должен потянуть интерфейс, чтобы получить новейший контент, является еще одним отличным примером сопротивления. Пользователь должен потянуть вниз с некоторым сопротивлением (здесь, что задействована антигравитация?), пока не достигнет определенного порога, когда он перезагружает страницу.

Этот функциональный и естественный пример действия «потяните, чтобы обновить»  от James G демонстрирует сопротивление.
Этот функциональный и естественный пример действия «потяните, чтобы обновить»  от James G демонстрирует сопротивление.

Действие и реакция (противодействие)

Всякое тело продолжает удерживаться в своём состоянии покоя или равномерного и прямолинейного движения, пока и поскольку оно не понуждается приложенными силами изменить это состояние.

сэр Исаак Ньютон

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

Очень по научному, не так ли?

Действию всегда есть равное и противоположное противодействие

– сэр Исаак Ньютон

Третий закон Ньютона особенно важен для анимации в опытах и ​​интерфейсах. Интерфейсы по своей природе реактивны – есть даже эта библиотека под названием React (или что-то в этом роде). Особенно, когда дело доходит до изменения данных, размера, цвета, фона и многого другого. Роль анимации здесь заключается в создании визуальных подсказок, необходимых для информирования пользователя о том, где он находится и что делает. Когда пользователь нажимает, чтобы загрузить изображение, он ожидает увидеть какие-либо признаки (индикаторы) прогресса, неудачи или успеха.

Кнопка бурно реагирует на нажатие. Изображение Chashi.
Кнопка бурно реагирует на нажатие. Изображение Chashi.

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

12 принципов анимации

В 1981 году два аниматора студии Disney, Олли Джонстон и Фрэнк Томас, предположили, что вся анимация состоит из двенадцати основных принципов. Эти принципы придерживаются законов физики, упомянутых ранее, и служат руководством для создания реалистичного движения.

Эти принципы применимы не только к мультфильму «Холодное сердце», но также имеют превосходную ценность применительно к пользовательскому опыту и дизайну, если мы помним о физике.

Ниже я перечислил эти принципы вместе с лучшими примерами с Dribbble (в произвольном порядке).

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

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

Аккордеоны – классический пример сжатия и растяжения в интерфейсах. Изображение Scott Brookshire
Аккордеоны – классический пример сжатия и растяжения в интерфейсах. Изображение Scott Brookshire

Сжатие и растяжение – также полезный способ создания анимации для меньшего масштаба.

В этом примере от Stan Yakusevich, персонаж переходит через анимацию сжатия и растяжения.
В этом примере от Stan Yakusevich, персонаж переходит через анимацию сжатия и растяжения.

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

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

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

Мне бы очень хотелось знать, куда они кликают. Ожидание меня убивает. Изображение Yancy Min.
Мне бы очень хотелось знать, куда они кликают. Ожидание меня убивает. Изображение Yancy Min.

3. Сценичность (сценическое оформление, театрализация)

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

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

Этот загрузчик от Su функционален и описательный для загрузки eBook.
Этот загрузчик от Su функционален и описательный для загрузки eBook.

Каркасная загрузка страницы (Skeleton loading) – расширение иконки загрузчика, считается гораздо более удобным опытом загрузки. «Скелет» загружаемого контента показывается пользователю, а затем заполняется по мере загрузки контента.

Пример skeleton loading от UI8
Пример skeleton loading от UI8

4. Движение «прямо вперед» и от позы к позе

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

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

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

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

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

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

Эти плавные анимации от Anton Skvortsov рассказывают историю и практически никогда не начинаются, не двигаются и не останавливаются одновременно.
Эти плавные анимации от Anton Skvortsov рассказывают историю и практически никогда не начинаются, не двигаются и не останавливаются одновременно.

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

Второй Dribbble шот от Anton Skvortsov – это отличный пример использования сквозного движения и захлеста действия в унисон.
Второй Dribbble шот от Anton Skvortsov – это отличный пример использования сквозного движения и захлеста действия в унисон.

6. Смягчение начала и завершения движения (плавность)

В жизни объекты редко мгновенно останавливаются – они имеют тенденцию постепенно терять импульс и замедляться.

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

Плавность этих анимаций прокрутки кажется естественной. Изображение Anton Skvortsov.
Плавность этих анимаций прокрутки кажется естественной. Изображение Anton Skvortsov.

7. Дуги

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

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

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

8. Вторичное действие (Дополнительное действие)

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

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

Этот маленький переключатель от Oleg Frolov использует маленькое кольцо, чтобы раскрыть анимацию концепции включения / выключения.
Этот маленький переключатель от Oleg Frolov использует маленькое кольцо, чтобы раскрыть анимацию концепции включения / выключения.

9. Тайминг

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

Хореография переходов – это скоординированная последовательность движений, которая поддерживает внимание пользователя при адаптации интерфейса.

– Google Material Design

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

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

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

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

Этот пример 3D touch почти ощущается как лопающийся пузырь, когда он достигает порога сопротивления. Этот взрыв преувеличен летящими из него фигурами. Изображение Voicu Apostol.
Этот пример 3D touch почти ощущается как лопающийся пузырь, когда он достигает порога сопротивления. Этот взрыв преувеличен летящими из него фигурами. Изображение Voicu Apostol.

11 и 12. Профессиональный рисунок и привлекательность

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

Еще один пример от Anton Skvortsov, на этот раз просто, чтобы продемонстрировать ценность привлекательности.
Еще один пример от Anton Skvortsov, на этот раз просто, чтобы продемонстрировать ценность привлекательности.

В заключение

Эти принципы помогли Диснею создать бесчисленные душещипательные анимационные хиты, и не без оснований – они работают.

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

Полезные ресурсы для дальнейшего чтения по теме

Похожие записи

Создание iOS-приложения в Sketch и Xcode, публикация его в App Store

Создание приложения в Sketch и Xcode еще никогда не было таким простым. Sketch и Xcode делает весь этот процесс одинаково достижимым для дизайнеров и разработчиков. С одной стороны, в Sketch каждый шаблон и инструмент создан специально для такого типа работы, а с другой – у нас есть Storyboard и Assets Catalog в Xcode, которые позволяют быстро построить функциональный прототип. За 5 минут у вас может получиться нечто, что можно потестировать на вашем iPhone. Часть 1 Часть 2 Часть 4

Обучение Swift и Xcode для дизайнера. Создание своего приложения на Swift

В прошлом году я писал Главу 3 под Objective-C и Xcode 5. С тех пор многое кардинально изменилось. Код Swift существенно упростился, из-за чего он стал одним из самых популярных языков для разработки приложений. Xcode 6 представил ряд новых инструментов, включая Playground, Vector Assets и Designable Views. Кроме того, Адаптивные макеты стали невероятно востребованы в связи с выходом iPhone 6 и 6 Plus. Часть 2 Часть 3 Часть 4

Анимация интерфейсов. Микровзаимодействия для макрорезультата

Микровзаимодействие – один из ключевых моментов в UI/UX-дизайне. Это, наверное, лучшее доказательство того, что внимание к мелким деталям может дать большой и мощный результат.