Основные принципы использования анимации в UX Статьи редакции

Колонка UX-дизайнера SoftServe — о скорости и продолжительности анимации, видах движения объектов.

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

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

Продолжительность и скорость анимации

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

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

Многочисленные исследования помогли установить оптимальную скорость для интерфейсной анимации — от 200 до 500 мс. Она связана с психологическими свойствами человека. Если анимация короче 100 мс, ее невозможно воспринять — для человека это слишком быстро. Зато анимация длиннее одной секунды вызовет ощущение задержки и может быть скучной для пользователя.

Оптимальная продолжительность анимации в интерфейсе

Material Design Guidelines предлагает дизайнерам ограничивать продолжительность анимации до 200-300 мс на мобильных устройствах. Если речь идет об анимации на планшетах, то продолжительность должна быть на 30% длиннее, то есть 400-450 мс.

Причина проста: поскольку размер экрана большой, то и объекты при изменении положения преодолевают долгий путь. Соответственно на носимых устройствах (wearbables) анимация должна быть короче на 30% — от 150 до 200 мс, поскольку путь для изменения короче из-за малого размера экрана.

Размер мобильных устройств определяет продолжительность анимации

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

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

Больший экран = медленнее анимация? Нет

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

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

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

Продолжительность анимации зависит от размера объекта и расстояния, которое тот одолеет

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

Эффект подпрыгивания отвлекает внимание пользователя

Движение объектов должно быть четким, поэтому не нужно использовать эффект размытия (motion blur). Простите, пользователи After Effects, не в этот раз. Он вообще не используется в интерфейсной анимации, поскольку его трудно воспроизвести даже на современных мобильных устройствах.

Не используйте эффект размытия в анимации

Однотипный контент (карточки с новостями, список электронной почты и так далее) должен иметь очень короткую задержку между появлением каждого следующего элемента — от 20 до 25 мс. Если элементы будут появляться медленнее, это может раздражать пользователя.

Анимация для однотипного контента должна длиться от 20 до 25 мс

Смягчение (easing)

Смягчение помогает изобразить движение объекта естественнее. Это один из основных принципов анимации, его подробно описали в книге "The Illusion of Life: Disney Animation" Олли Джонстон и Франк Томас — одни из ведущих аниматоров студии Disney.

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

Анимация со смягчением выглядит естественнее по сравнению с линейной

Линейное движение

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

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

Кривая линейного движения

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

Ease-in или кривая ускорения

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

Кривая ускорения

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

Кривая ускорения «выбрасывает» карточку за пределы экрана

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

В конце концов, экспериментируя с кривой, можно максимально уподобить движение объекта к реальному миру.

Одинаковая продолжительность и расстояние, но разное настроение

Ease-out или кривая замедления

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

Кривая замедления

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

Кривая замедления эффектно выведет на экран карточку

Ease-in-out или стандартная кривая

Объекты, которые движутся согласно этой кривой, сначала набирают скорость, а затем медленно сбрасывают ее. Этот тип движения чаще всего используется в анимации интерфейсов. Мой совет: если сомневаетесь, какой тип движения использовать в вашей анимации, применяйте ease-in-out.

Ease-in-out или стандартная кривая

Согласно рекомендациям Material Design Guidelines, следует использовать асимметричную кривую, она сделает движение естественнее и изящнее. Больший акцент следует делать на конец кривой, чем на ее начало, чтобы объект ускорялся немного быстрее, чем замедлял свое движение. Тогда пользователь будет больше обращать внимание на конечное движение элемента, что позволит сфокусироваться на новом состоянии элемента.

Сравните движение объектов с симметричной и асимметричной стандартной кривой

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

Движение карточки на экране и соответствующая асимметричная кривая Ease-in-out

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

Боковое меню скрывается с экрана согласно стандартной кривой

Отсюда следует очень важное правило, которым пренебрегают многие дизайнеры, — анимация появления элементов на экране не равна анимации их исчезновения. Что касается случая с боковым меню — оно появляется по кривой ease-out, а исчезает по ease-in-out. Согласно рекомендациям Google Material Design, время появления объекта должно быть длиннее, чтобы привлечь больше внимания пользователя к новому состоянию объекта.

Появление и исчезновение бокового меню происходит согласно ease-out и ease-in-out кривых

Для описания кривых используются функция cubic-bezier (). Называется она кубической, поскольку строится на четырех точках. Первая точка с координатами 0; 0 (внизу слева) и последняя — 1; 1 (сверху справа) — уже определены на графике.

С помощью функции cubic-bezier () нам остается описать всего две точки на графике, которые задаются четырьмя аргументами: первые два — координаты x и y первой точки, вторые два — координаты x и y второй точки.

Для удобной работы с кривыми предлагаю использовать сайты easings.net и cubic-bezier.com. На первом есть перечень самых популярных кривых, параметры которых вы можете скопировать в свою программу для прототипирования. На втором — можно просто поиграть с различными параметрами кривой и увидеть, как будет двигаться объект.

Различные типы кривых и их значение для функции cubic-bezier ()

Хореография в анимации интерфейсов

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

Разделяют два типа хореографии — равноправное и подчиненное взаимодействия.

Равноправное взаимодействие

Суть этого типа — подчинить появление всех объектов одному определенному правилу.

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

Внимание пользователя следует плавно направлять в одном направлении

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

Диагональная появление для табличного вида

Подчиненное взаимодействие

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

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

Стоит анимировать только один центральный объект, а все остальные подчинять ему

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

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

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

При пропорциональном изменении размера, объект должен двигаться вдоль прямой

Движение вдоль дуги можно осуществлять двумя способами. Первый называется vertical out — горизонтальное движение переходит в вертикальное. Второй — horizontal out — объект начинает смещаться вертикально, а под конец переходит в горизонтальное движение.

Способ движения объекта вдоль кривой должен совпадать с основной осью скроллинга интерфейса. Например, на следующем примере интерфейс скролиться вверх-вниз, то и соответственно карточка разворачивается по способу vertical out — движется сначала направо, а потом вниз. Обратное движение происходит наоборот, то есть карта сначала поднимается вертикально и заканчивает движение горизонтально.

Направление открытия или закрытия карточки должно совпадать с осью скролла интерфейса

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

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

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

Объекты могут приподниматся над другими элементами и только тогда осуществлять движение

Выводы

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

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

Но не забывайте, что анимация — это больше искусство, чем наука, поэтому лучше просто экспериментируйте и тестируйте свои решения на пользователях.

0
19 комментариев
Написать комментарий...
Алексей Чингуль

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

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

А если серьёзно, то правда очень крутой материал.

Ответить
Развернуть ветку
Aleksandr Sorokin

Это все конечно чудно, но:
1) Почему никто не спросил мнения iOS/Android разработчиков, сколько времени и сил им придётся на все это нестандартное художество затратить, и не легче ли будет просто пренебрегнуть анимацей в угоду более важных вещей, например работоспособности продукта;
2) Ни слова не сказано про ориентацию дивайса: куда должно что двигаться, если в момент анимации телефон поворачивается на бок? А сам поворот как анимировать? Должна ли быть разная анимация в зависимости от положения дивайса?
ЗЫ И ещё айпаду насрать какая у вас ориентация, без бубнов он любое положение считает "regular width, regular height" (с телефонами попроще)

Ответить
Развернуть ветку
Алексей Чингуль

Пусть iOS/Android разработчики пойдут на (вписать нужное) если они думают, что потребительские свойства продукта ненужный мусор, в сравнении в правильно выстроенной архитектурой кода. А потом не плачут, когда их "ШЕДЕВВВР" и чудо программной мысли никто не покупает.

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

Ответить
Развернуть ветку
Aleksandr Sorokin

Тут вопрос приоритетов, "вам шашечки или ехать?".
Скажем так, если все остальное работает криво, через жопу и на костылях, то направление и время анимации в жопу никому не упёрлось.

Ответить
Развернуть ветку
Igor Plyusch

Каких еще приоритетов?

Что это вообще за история, когда обязательно надо выбирать из плохо сделанного красивого и некрасивого статичного работоспособного продуктов?

Ответить
Развернуть ветку
Aleksandr Sorokin

Например, когда есть ограничение в ресурсах (времени, деньгах, разработчиках), то есть всегда в реальном мире, а не в сферическом вакууме.

Ответить
Развернуть ветку
Евгений Александров

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

Ответить
Развернуть ветку
Андрей Нефедов

Спасибо за перевод!

Ответить
Развернуть ветку
Velemir Hasidov

Прикольно. А расскажите, я совсем не шарю в мобильной разработке, эти все анимации надо ручками программировать или как-то из коробки настраивается? Типа "по дуге" / "по прямой"?

Ответить
Развернуть ветку
Vasek Romanov

да есть программы где анимация уже заготовлена по шаблону. Но настраивать все равно надо. Хотя и проще, чем с нуля.

Ответить
Развернуть ветку
Антон Запевалов

Аппликацией? Серьезно? Application - все таки наверное это "приложение". И если это перевод, принято указывать источник...

Ответить
Развернуть ветку
Александр

Источник тут: https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Автор, всё тот же.

Ответить
Развернуть ветку
Ибрагим Печкин

Спасибо, хорошая статья!

Ответить
Развернуть ветку
Дмитрий Толкунов

Просто чудеснейшие абстрактные примеры анимации!

Ответить
Развернуть ветку
Vasek Romanov

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

Я к тому же делаю все в фигме, откуда только картинками можно все перенести в афтер, а если слоев много, то это просто тот еще геморой. А хочется то ведь все красиво сделать.

Спасибо за статью . Буду учиться.

Ответить
Развернуть ветку
Denis Lukov

Годно. Какие список приемов годный, так и анимированные примеры

Ответить
Развернуть ветку
Александр Бычковский

Спасибо, хорошая статья!

Ответить
Развернуть ветку
Sviatoslava Ptitsa

Прекрасная статья, большое спасибо за проделанную работу! И примеры анимаций выше всяких похвал. Хоть я и не занимаюсь дизайном, но читать, примерять на себя-как-на-пользователя и делать выводы было очень интересно.
Надеюсь увидеть новые статьи от вас!

Ответить
Развернуть ветку
Алена Придеина

В начале статьи по ссылке на "Material Design Guidelines" - 404
https://material.io/design/motion/speed.html%20%20%20%20%20%20%20%20#duration, поправьте, пожалуйста

Ответить
Развернуть ветку
16 комментариев
Раскрывать всегда