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

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

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

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

6 принципов создания лучших анимаций перехода

1. Затухание и исчезновение с помощью непрозрачности
2. Масштабирование для придания живости
3. Сохранение постоянной направленности
4. Сбалансированная скорость
5. Расставление приоритетов, упорядоченность и группирование
6. Создание пространственности

1. Затухание и исчезновение с помощью непрозрачности

Непрозрачность - это базовый, но мощный принцип. Один только этот прием может существенно изменить ситуацию. При переходе от текущего экрана к следующему вы можете обеспечить лаконичную обратную связь, убрав неактуальные элементы и позволив следующей части затухать. Этого можно добиться, изменив значение непрозрачности со 100 на 0 (или с 0 на 100) в любом инструменте дизайна/прототипирования.

Рисунок 1-1

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

Рисунок 1-2

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

Рисунок 1-3

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

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

Рисунок 1-4

Слой «Profile view» плавно перемещается при переходе в следующее состояние.

Рисунок 1-5

Такой плавный переход был достигнут благодаря использованию двух слоев «Profile view» - маленького и большого. Благодаря эффекту масштабирования и плавному перетеканию между двумя слоями переход выглядит так, как будто единственный слой заголовка плавно соединяет оба состояния экрана.

2. Масштабирование для придания живости

Масштабирование привносит в переходы динамику, живость и направленность. Например, при переходе к следующему экрану можно уменьшить масштаб существующих компонентов и слоев со 100 % до 90 %, а также применить эффект затухания. Например, при отображении оверлея можно уменьшить масштаб текущего экрана. При этом создается впечатление, что наложение сползает с вышележащего слоя, подчеркивая связь между состояниями. Значение масштабирования можно изменять в большую или меньшую сторону по желанию. Масштабирование обычно используется вместе с первым принципом: затухание/исчезновение.

Рисунок 2-1

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

Рисунок 2-2

Вот несколько примеров использования эффекта масштабирования для текстовых слоев.

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

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

Рисунок 2-3

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

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

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

3.Сохранение постоянной направленности

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

Рисунок 3-1

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

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

Рисунок 3-2

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

(Слева) Как и ожидалось, вы можете просматривать сообщения, проводя пальцем вверх и вниз.

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

Рисунок 3-3

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

(Слева) Открытие меню указывает на вертикальную ориентацию приложения.

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

4.Сбалансированная скорость

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

Рисунок 4-1

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

Рисунок 4-2

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

5.Расставление приоритетов, упорядоченность и группирование

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

Рисунок 5-1

Если бы все элементы на этом экране анимировались одновременно, он казался бы перегруженным и сложным. Именно поэтому здесь используется каскадный переход, приоритет которого определяется важностью. В этом приложении первичными элементами должны быть «Profile view» и вспомогательная диаграмма, поскольку эти элементы существуют в обоих состояниях. Затем могут следовать вторичные элементы, которые менее важны, чем первичные.

Рисунок 5-2

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

Рисунок 5-3

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

(Справа) После сворачивания экрана появляется новый слой заголовка. Таким образом, он не отвлекает внимание от элементов плеера и анимации масштабирования обложки.

6.Создание пространственности

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

Рисунок 6-1

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

Рисунок 6-2

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

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

Рисунок 6-3

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

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

Источник: Medium