UI/UX

Руководство по анимации

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

Зачем нужна анимация

Анимации заполняют пробелы между действием и результатом. Они соединяют части интерфейса в единое целое и помогают быстрее в нём освоиться.

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

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

Основные принципы

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

Стейджинг — это анимация, которая предшествует основной. Её задача — привлечь внимание пользователя и подготовить его к изменениям.

chap2fig5

Follow-through — это пружинящая анимация. Объект слегка перескакивает точку, на которой он должен остановиться, а потом возвращается обратно. Такой эффект помогает оживить анимации.

В Android есть OvershootInterpolator, который помогает добиться эффекта follow-through, но анимация получается слишком резкой. Лучше закодить его вручную с помощью пары дополнительных анимаций или написать кастомный Inerpolator.

Rows-Appearing

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

Email-App

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

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

Stagger-Rows

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

Работа в команде

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

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

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

Выводим анимацию на новый уровень

Хорошая анимация помогает сфокусироваться на основной задаче и не перетягивает внимание на себя.

Всегда нужно искать неочевидные способы привнести человечность в интерфейс.

Скачать полную версию руководства.

Источник: Guideline