Лого vc.ru

Визуализация спецификаций в моушн-дизайне: как анимационный граф поможет дизайнерам и разработчикам

Визуализация спецификаций в моушн-дизайне: как анимационный граф поможет дизайнерам и разработчикам

Дизайнер Пол ван Ойен рассказывает об удобном инструменте взаимодействия при работе над motion дизайном.

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

Анимация оживляет интерфейс и помогает объяснить пользователю, что именно происходит до, во время и после его действия.

Информационный разрыв

Осознание невероятных возможностей моушн-дизайна привело к тому, что главные страницы дизайнерских сайтов наполнились многочисленными анимированными изображениями с движущимися или меняющими свой масштаб элементами. Так и хочется воплотить все эти идеи в собственном проекте. И вот вы уже создаёте прототип с помощью Principle, Flinto, After Effects или любого другого инструмента, и после нескольких часов (или дней) работы получаете очень симпатичную анимацию, которая отлично вписывается в ваш проект.

Вы делаете рендеринг, дважды проверяете, всё ли движется так, как надо, а затем сохраняете видеоролик в надёжном месте. Остаётся только передать его команде разработчиков, которая займётся его реализацией. Всё идёт отлично! А теперь поставьте себя на место разработчика. Вместе с видеороликом, который длится от силы несколько секунд, он в лучшем случае получает довольно расплывчатое описание будущей анимации. И, как правило, никаких инструкций кроме: «Сделайте, чтобы было похоже на это!».

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

Спасительный граф

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

Я создал этот график, вдохновившись данным видео

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

  • Какой элемент претерпевает изменения?
  • Какое свойство элемента (прозрачность, координаты, угол) подвергается воздействию?
  • Когда начинается и заканчивается анимация?
  • Какой тип анимационной кривой применим в данном случае? ​

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

Посмотрите на эти симпатичные кривые, любезно предоставленные Material Design

Пример из практики

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

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

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

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

  • Анимация идёт нелинейно. Например, распадается на две отдельных части, которые начинаются соответственно в 0 мс и 250 мс.
  • К элементам движения применяются три разных временных кривых: ускорение, замедление и стандартная кривая.
  • ​Воздействию подвергаются четыре элемента этой анимации: две радио кнопки, заголовок второй карточки и содержание второй карточки.
  • В данной анимации мы воздействуем на четыре свойства: наполнение, прозрачность, позиция по оси Y и масштаб.

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

Следует отметить, что график не задаёт точные границы изменений (то, что прозрачность меняется с 0% до 100%, а координата по Y — с 450 до 550). Такие вещи должны быть специально определены дизайнером или примерно установлены разработчиком. Но в любом случае, такой подход работает лучше, чем «сделайте, чтобы было похоже на это!».

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

0

Дизайнеры, которые могут в код, так и не стали востребованными на рынке?

0

наоборот, не могут оторваться от компа

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

0

В graph editor все это есть и не нужно ничего рисовать руками. Точные значения изинга для любого ключа также доступны. В чем проблема-то?

Прямой эфир
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления