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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#Интерфейсы