Hi-Tech

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

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

В закладки

Поделиться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если элементы будут появляться медленнее, это может раздражать пользователя. Однотипный контент (карточки с новостями, список электронной почты и так далее) должен иметь очень короткую задержку между появлением каждого следующего элемента — от 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 — движется сначала направо, а потом вниз. Способ движения объекта вдоль кривой должен совпадать с основной осью скроллинга интерфейса. Обратное движение происходит наоборот, то есть карта сначала поднимается вертикально и заканчивает движение горизонтально.

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

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

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

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

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

Выводы

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

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

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

Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть