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

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

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

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

Начните с целей и чувств

ЦЕЛЬ

Как и у многих элементов в дизайн-системе, у анимаций должна быть цель. Чтобы интегрировать анимацию, начните с осмотра своего интерфейса — подумайте, как и почему вы используете анимации в этом конкретном продукте и бренде. Например, в FutureLearn мы заметили, что преимущественно используем анимацию тремя способами: чтобы обозначить изменение состояния, чтобы сделать акцент или чтобы показать дополнительную информацию.

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

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

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

Не существует «стандартных» категорий для целей анимаций. В некоторых продуктах используются самостоятельные анимации — например, анимированные туториалы. В некоторых из них используются переходы между слайдами, в некоторых — нет. Некоторые компании делают индивидуальность и бренд частью каждой анимации, а некоторые выносят их в отдельную категорию, как дизайн-система Salesforce Lightning.

Типы анимаций в Salesforce Lightning Design System структурированы не так, как в FutureLearn.

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

ОЩУЩЕНИЯ

Анимация не только помогает юзерам понять, как работает продукт, но также и выразить индивидуальность бренда. Поэтому другой аспект для раздумий — какие чувства должна вызывать анимация. В своей книге «Проектируя анимацию интерфейса» Вал Хэд объясняет, какие прилагательные, описывающие качества бренда, можно использовать для определения движений. Например, быстрое мягкое прыгучее движение может восприниматься как живое и энергичное, тогда как ровные ease-in-outs ощущаются уверенно и решительно.

Характеристики бренда, транслируемые через motion

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

Всплывающее меню на примере Marvel (слева) и FutureLearn (справа).

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

Устройте ревизию имеющихся анимаций

Когда у вас есть общее представление о роли анимации в вашем интерфейсе и о том, как она должна ощущаться, следующий шаг — стандартизировать уже существующие анимации. Как и в «инвентаризации интерфейса» вы можете вести список, сфокусировавшись только на анимациях. Начните со сбора всех имеющихся у вас анимаций. Их можно снять с помощью QuickTime или других приложений, осуществляющих запись с экрана. В то же время, ведите записи о них в Google Doc, Keynote или в файле Excel — где вам удобнее.

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

Пример первичного сбора анимаций по категориям в Google Doc.

Для каждой анимации добавьте:

• Эффект: сначала может быть непросто его описать (будет ли это «рост» или «масштаб», «покачивается» или «колеблется»?) Не беспокойтесь пока о том, как правильно подобрать слово, просто описывайте то, что видите — можно будет подумать над этим позже.

• Пример: Здесь должен быть скриншот анимированного элемента с ссылкой на видеоклип или встроенную гифку.

• Тайминг и изинг: Запишите значения для каждого примера: двухсекундный ease.

• Параметры: Запишите точные значения, которые меняются, такие как цвет или размер.

• Ощущения: В заключение, добавьте ощущения к анимации — она спокойная или энергичная, усложненная и сбалансированная, или может неожиданная и игривая?

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

Страница «Изменение состояния» из проверки анимаций на FutureLearn, созданная в Google Doc.

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