Внедрение анимаций в дизайн-систему: часть 2

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

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

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

Разработайте глоссарий с основными терминами для описания эффектов

Бывает непросто описать эффекты анимации словами. Как Рэйчел Нэборс отметила в своей статье «Общение анимациями», иногда люди начинают с «дружелюбных звукоподражаний: вжух, зум, бах, бум», которые можно использовать как начальную точку для создания коллективного словаря анимаций.

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

1. 12 принципов анимации компании Disney в блоге The Illusion of Life.

Глоссарий анимаций в дизайн-системе Salesforce Lightning Design System.

Типы движений в дизайн-языке IBM Design Language.

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

Эффект пульсации в заставке видео в TED (слева) отражен в взаимодействии с кнопкой play (справа).

Определите строительные блоки

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

Тайминг

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

Идея «динамической длительности» в Material Design фокусируется на том, как быстро одному элементу нужно двигаться в сравнении с тем, как много времени ему нужно, чтобы добраться до конечной точки.

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

Sara Drasner, автор книги SVG Animations, предложила уделять такое же внимание таймингу в анимации, какое мы уделяем заголовкам в типографии. Вместо одной величины, начинайте с базы и проводите несколько поэтапных шагов. Поэтому вместо заголовков h1, h2 и h3 вы получите t1, t2, t3.

В зависимости от размера проекта, тайминговая панель инструментов может быть простой или более тщательно продуманной. Большинство анимаций в FutureLearn используют базовый тайминг 0,4. Если этот тайминг кажется неподходящим, скорее всего ваш объект проходит более короткую дистанцию (в этом случае используйте «Меньшее время») или более долгое расстояние (в этом случае используйте «Большее время»).

• Меньшее время: 0,3 с.: короткое расстояние.
• База: 0,4 с.: сновной тайминг.
• Большее время: 0,6 с.: пройденная дистанция длиннее.

Одинаковые идеи, используемые в указаниях к продолжительности для дизайн-системы Carbon Design System, относятся к «величине измерения»:

Указания для продолжительности в Carbon Design System.

Изинг

Разные величины изингов могут сделать ощущения от каждой анимации особенными. Важно специально оговаривать, когда использовать конкретную величину. Панель инструментов исчезаний в Marvel Styleguide дает удобное руководство для использования каждой величины, например, «Ощущается живо. Отлично для привлечения внимания».

Панель инструментов исчезания в Marvel Styleguide.

Панель инструментов может быть более общая и представлять собой набор рекомендаций, как это сделано в Salesforce Lightning Design System, например:

Для FutureLearn мы сделали панель инструментов еще более простой и разграничили её на два типа изингов:

Ease out «для штук, которые движутся» (такие, как изменения масштаба и скольжение вверх/вниз) и
Линейный «для штук, которые не движутся» (такие, как изменения цвета или непрозрачности).

Параметры

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

• непрозрачность
• цвет
• масштаб
• расстояние
• вращение
• размытие
• высота

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

Маленькие: ×0.025

Большие объекты

например, превью изображений

Стандартные: ×0.1

Средние объекты

например, кнопки

Большие: ×0.25

Маленькие объекты

например, иконки

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

Согласуйте руководящие принципы

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

Руководящие принципы для движений в Salesforce Lightning Design System — короткие и простые.

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

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

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

Язык дизайна IBM

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

Руководящие принципы также могут включать пространственные метафоры, которые могут предоставить полезную ментальную модель людям, которые пытаются создавать анимации. Google’s Material Design — отличный пример того, как размышление об интерфейсе как о физических «материалах» может предоставить общие рекомендации для дизайнеров и разработчиков, когда те размышляют о применении моушн-дизайна в своих приложениях.

В Материальном Дизайне «Один материал может вытеснить другой».

В заключение

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