Анимация по правилам UX-дизайна
Сегодня анимацией в дизайне никого не удивишь. Микроитерации связывают экраны различных страниц, эффекты поясняют опции, сопровождают действия пользователей, анимированные интерфейсы помогают установить обратную связь или просто привлекают внимание. Просмотрев достаточно статей про анимацию, я обнаружил, что если не рассматривается частный случай, то даются чересчур обобщенные советы. Ни один веб-ресурс четко не представил принципов и UX-правил применения анимации в дизайне.
Руководство не рассматривает чего-то нового, только принципы & правила анимации дизайна, собранные в одном месте. Так что, приступающим к анимации интерфейсов дизайнерам не потребуется собирать по кусочкам полезную информацию.
Длительность и скорость анимационного эффекта
Когда элемент меняет состояние или положение, задержка перед запуском и продолжительность эффекта должны позволить пользователю заметить изменение, но не заставлять ждать завершения.
Задавайте длительность эффекта правильно. Не слишком быстро, но и не позволяйте пользователю заскучать
Согласно результатам исследований, оптимальная скорость для интерфейсной анимации от 200 до 500 мс. Цифры взяты исходя из особенностей восприятия человеческим мозгом. За время меньшее 100 мс, анимационный эффект вообще не будет замечаться пользователями, а дольше секунды вызовет ощущение задержки.
Предполагаемая длительность эффекта для разных видов анимации
Для анимирования дизайна под мобильные девайсы material.io советует установить ограничение в 200–300 мс. Для планшетов задержка будет на 30% больше (400–450 мс). Объясняется просто: на большем экране у объектов более длинный путь. Для экранов носимых устройств 150–200 мс
На разных экранах разная продолжительность анимации
В вебе анимация работает по-другому. Когда страница открывается быстро, пользователь ждет того же от эффектов. Переходы в WEB-е должны быть в 2 раза быстрее, примерно 150–200 мс. Затянувшийся переход напомнит о возможном зависании или проблемах с соединением.
Это правило не относится к оформительским плюшкам или когда важно акцентировать внимание к элементу, тут можно увеличивать продолжительность анимации.
Экраны больше – анимация должна быть медленней? Никоим образом!
Не забывайте, помимо расстояний на экране, продолжительность анимации должны определять размеры объектов. Малозначительные изменения в легкой анимации должны происходить быстро, и наоборот, чем крупнее объекты, тем лучше смотрятся эффекты с большей задержкой. При равных размерах, первым завершать движение должен тот объект, что прошел меньшее расстояние. При разной величине анимируемых элементов необходимо замедлять меньшие, поскольку для них происходит большее смещение.
Длительность анимации в соответствии с размерами объектов и расстояниями на экране
При анимации столкновения импульс гасится равномерным распределением энергии между объектами, как в физике. Не проектируйте отскок, если это не заложено в идею спецэффекта.
Не допускайте отвлекающих внимание скачков
Любые перемещения объектов должны быть четкими и ясными, без смазанности движения — да простят любители Adobe After Effect. К тому же, сложно реализуемого даже в интерфейсе продвинутых мобильных девайсов.
Не применяйте размытие к анимируемым объектам
Для элементов перечисления нужна совсем небольшая задержка перед их появлением в списке, не более 20 – 25 мс. Иначе, она вызовет раздражение у посетителя.
Анимация элементов перечисления не должна превышать 20-25 мс
Эффект смягчения
С эффектом смягчения анимация выглядит более естественной. Этот важнейший момент в практике анимирования конкретизирован в книге аниматоров Ф. Томаса и О. Джонстона «Иллюзия жизни: анимация Диснея».
Чтобы анимации не напоминали что-то механическое, объектам нужно придавать ускорение и замедление, как это происходит в реальном мире.
Мягкая анимация выглядит естественнее линейной
Линейное перемещение
Без физического воздействия, объекты будут двигаться линейно и с постоянной скоростью. Такое перемещение сразу кажется неестественным.
Любое приложение для анимации использует анимационные кривые. Что это значит? На графике положение объекта (ось Y) изменяется за равные промежутки времени (ось X). Перемещение линейно и в единицу времени объект проходит одинаковое расстояние.
Мягкая анимация выглядит естественнее линейной
Линейное перемещение
Без физического воздействия, объекты будут двигаться линейно и с постоянной скоростью. Такое перемещение сразу кажется неестественным.
Любое приложение для анимации использует анимационные кривые. Что это значит? На графике положение объекта (ось Y) изменяется за равные промежутки времени (ось X). Перемещение линейно и в единицу времени объект проходит одинаковое расстояние.
Линейность можно применять при изменениях цвета или прозрачности объектов, когда не меняется их положение.
Кривая нарастающего ускорения
На графике видно, что вначале перемещение незначительно, но ускорение объекта плавно нарастает. Это разгон (Ease-out).
Этот вид движения стоит применять для объектов вылетающих за пределы экрана, системных сообщений или карточек-уведомлений. Но только в тех случаях, когда объект исчезает с экрана безвозвратно.
График разгона покидающей экран карточки
Анимационная кривая может задавать нужные эмоции. Ниже показано, как при одинаковых расстояниях и длительности эффекта, изгибы кривой меняют настроение. Так можно добиться наиболее естественного восприятия эффекта.
Одинаковые расстояние и время, но разная эмоциональность
Кривая замедления
Этот противоположный Ease-out эффект, когда объект быстро проходит основное расстояние, но в конце пути замедляется, пока не остановится.
Эта кривая перемещения подходит для анимации быстро вылетающих на экран элементов и постепенно замедляющих скорость до полной остановки. Применять можно для карточек и въезжающих извне объектов.
Эффект замедления для красивого вывода карточки на экран
Ускорение с последующим с замедлением (ease-in-out)
Разгон в начале с замедлением в конце – стандартный прием в анимации интерфейсов. Совет новичкам: если не можете подобрать эффект, присмотритесь к плавному скольжению ease-in-out, наиболее дружественной для пользователя анимации.
В руководстве по Material Design рекомендуется ассиметричный тип движения, повышающий реалистичность анимации. Перемещение будет более выраженным, если объект ускоряется быстрее, чем теряет темп в конце. Тогда внимание обращено на завершающую стадию и пользователь готов к восприятию следующего состояния.
Симметричная vs Асимметричная стандартная кривая
Стандартный подход Ease-in-out применяют при перемещении объектов из одной части экрана в другую. В таком случае анимация не должна выглядеть слишком броской.
Перемещение карточки на экране и пример асимметричной кривой
Этот же тип движения используйте для исчезающих с экрана элементов, которые пользователь может вернуть обратно в любой момент (например для навигационной панели).
Боковая панель выдвигается по стандартному варианту анимационного движения
Правило забываемое новичками – начало анимации должно отличаться от завершающей стадии. Например, навигационная панель выпадает с замедлением, а прячется по стандартной кривой. Согласно принципам материального дизайна Google, появлению объекта придается наибольшее внимание и длительность.
Боковая панель появляется с замедлением, а прячется по стандартной кривой
Функция cubic-bezier() описывает кривую. Кубической ее назвали, потому что состоит из четырех точек. Первая с координатами 0;0 (низ слева) и последняя 1;1 (верх справа) уже определены на графике.
Остается найти две точки, задаваемые четырьмя аргументами функции cubic-bezier(): два первых это координаты x и y первой точки, а вторые – координаты x и y второй точки.
Сайты easings.net и cubic-bezier.com упростят понимание. В первом, часто применяемые кривые с параметрами, которые можете скопировать в свой инструмент прототипирования. Во втором, можно поиграть с параметрами кривых и наблюдать результаты.
Хореография в интерфейсной анимации
Как и в балетной хореографии, главная задача – при переходах из одного состояния в другое, заострять пользовательское внимание на изменениях. В интерфейсной анимации есть два типа взаимодействия: равноправное и подчиненное.
Равноправное взаимодействие
При равноправно взаимодействии поведение объектов подчинено единому конкретному правилу. Появление карточек напоминает единый поток – он направляет внимание пользователя сверху вниз. Появления объектов без правил анимирования рассеит внимание. Представленное все сразу, также выглядит не очень.
Пользовательское внимание надо плавно направлять в одном направлении
Что касается табличной структуры, тут все сложнее. Согласно практике Z-просмотра контента, внимание аудитории направлено по диагонали, значит располагать элементы друг за другом не стоит. Если представлять последовательно один за одним, процесс анимирования затянется и пользовательский взгляд перейдет к широким зигзагам, что не желательно.
Диагональное появление при табличном отображении элементов
Подчиненное взаимодействие
В подчиненном взаимодействии один объект привлекает к себе взгляд, остальные элементы подчинены ему. Фокусируя внимание на главном, создает ощущение упорядоченности
С иными подходами у пользователя будет рассредоточенное внимание, которое не удерживается на нужном объекте. Для оживления нескольких элементов потребуется конкретно определенная последовательность и как можно меньше одновременного анимирования.
Главному анимированному объекту подчинены остальные. Иначе не понятно на что следует обращать внимание
В соответствии с руководством по материальному дизайну, меняющие пропорции объекты должны двигаться не прямолинейно, а по дуге. Выглядит естественней. Под сменой пропорций подразумеваются не одновременная (асимметричная) трансформация формы, высоты, ширины. К примеру, когда квадратное превращается в прямоугольное.
Непропорционально изменяющийся объект (из квадрата – прямоугольник) должен двигаться по дуге
Прямолинейность применима к объектам, изменяющимся пропорционально. Реализовать такой эффект значительно проще и «правило дуги» попросту игнорируется. Взгляните на примеры реальных приложений – к прямолинейной анимации обращаются чаще всего.
К пропорционально меняющимся объектам – прямолинейное перемещение
Движение по дуге можно задавать двумя способами: Vertical out – горизонтальное перемещение вначале оканчивается вертикальным, Horizontal out – вертикальное перемещение завершается горизонтальным.
Траектория перемещения объекта по кривой должна совпадать с осью интерфейса прокрутки. На следующем графике карта прокручивается вверх-вниз. Сперва поворачивает вправо, затем идет вниз. И наоборот, реверсный подъем карточки по вертикали заканчивается ее горизонтальным перемещением.
Направленность состояния разворачивания / сворачивания карточки должно совпадать с осью скролл-интерфейса
Когда траектории движения пересекаются, сами объекты не могут проходить один сквозь другой. Замедление и ускорение объектов должно оставлять пространство, чтобы они могли разойтись. Возможен сценарий и с отталкиванием. Дело в том, что предполагается все объекты интерфейса расположены в одной плоскости.
Объекты не должны проходить друг через друга, освобождайте путь иным объектам
В каком-то случае объект может подняться над другими объектами, но не раствориться или пройти через них. Почему так? Соответствуя законам реального мира, твердые тела не способны на такое действие.
Объект можно приподнять для беспрепятственного прохождения анимационного пути
Заключительные мысли
Сделаем важный вывод из всех рассмотренных принципов и правил – анимацию движения следует уподобить свойствам физического мира. Нужно учитывать трение, ускорение и т.д. Имитацией физических движений мы подсказываем людям, как пользоваться интерфейсом.
Продуманная анимация дизайна ненавязчива и не отвлекает от основных задач. Если это не так, эффект необходимо смягчить, либо вообще отказаться от анимирования интерфейса. Это означает, что анимации не должны замедлять работу / перекрывать возможности / отвлекать.
Анимация дизайна это в большей степени искусство, чем наука, потому важно не забывать экспериментировать и тестировать самые различные варианты.