Почему продуктовые дизайнеры должны изучать моушн-дизайн?

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

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

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

1. Юзабилити и опыт

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

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

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

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

И хотя скеоморфизм давно остался в прошлом, добавить немного “физики” в интерфейс никогда не помешает. Вы можете сохранить минималистичный UI, но при этом сделать его “осязаемым”.

2. Восторг и удовольствие

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

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

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

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

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

Советы

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

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

• Не переусердствуйте. У моушн-дизайна много преимуществ, но это не значит, что каждый компонент и взаимодействие должны запускать череду анимаций по всему экрану. Моушн-дизайн (почти) никогда занимает центральное место, в большинстве случаев он должен быть едва уловимым, тем, что пользователь воспринимает на подсознательном уровне.

• Зачастую лучшее решение — обратиться к классическим принципам анимации, даже если речь идет об оживлении кнопки или иконки.

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

• Узнайте, какие идеи практически осуществимы и как воплотить их в жизнь. Люди будут использовать реальный продукт, а не файл After Effects. Инструменты прототипирования, такие как ProtoPie, Principle или Figma, помогают создавать реалистичные анимации. Но иногда требуется выйти за рамки стандартных решений, если вы действительно хотите придать продукту индивидуальность. В этом случае заранее уточните у команды разработчиков, на какие технологии вы можете положиться — Lottie, Rive (подробнее об этом ниже), Unity или что-то еще. Это понимание поможет вам избежать лишней работы.

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

Некоторые дизайнерские агентства, такие как Cuberto и Tubik (с которыми я имел огромное удовольствие сотрудничать, когда работал в Huawei), сделали себе имя, в том числе благодаря качественному моушн-дизайну.

Инструменты

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

• After Effects + Bodymovin — классическое комбо для создания и экспорта Lottie-анимаций.

• Fable. Относительно новое веб-приложение, которое обещает стать новой Figma для After Effects. В настоящее время это мой любимый инструмент для создания простых Lottie-анимаций, подобных тем, что вы можете найти на моем сайте. Если вы знаете AE, вы легко освоите Fable.

• Cavalry. Еще одна альтернатива AE, которая, как и Fable, отказывается от миллионов функций, не связанных с моушн-дизайном, чтобы сосредоточиться только на нем. Многие операции, которые довольно трудно провернуть в AE, становятся намного проще в Cavalry, поскольку инструмент был разработан специально для моушн-дизайна и лишь для него.

• Rive. Еще один довольно новый инструмент, который подает невероятные надежды. Технология полностью отличается от Lottie, и, как утверждается, она гораздо эффективнее с точки зрения веса анимации. Но самый интересный аспект этого инструмента — интерактивность. Вы можете не просто создавать анимации, которые будут воспроизводиться как кино, но и добавлять к ним взаимодействия, различные состояния и определять, какие движения должны воспроизводиться в каждом конкретном случае.

Вот простой пример того, что вы можете сделать:

Чтобы лучше понять, как работает Rive, посмотрите этот ознакомительный ролик от School of Motion. В видео показан самый базовый пример, но вы можете свободно экспериментировать с функциями и в результате создать практически игровой опыт. Взгляните на этих ребят:

Где учиться моушн-дизайну?

Помимо курсов по моушн-дизайну, которые вы можете найти где угодно, от упомянутой выше School of Motion до Udemy, Skillshare и т.д., есть еще один интересный ресурс, который фокусируется на применении анимации в UX и продуктовом дизайне, — это UXinmotion.com, у них также есть своя колонка на Medium.

Последний совет для моушн-дизайнеров

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