Визуализация спецификаций в моушн-дизайне: как анимационный граф поможет дизайнерам и разработчикам
Дизайнер Пол ван Ойен рассказывает об удобном инструменте взаимодействия при работе над motion дизайном.
Движение является неотъемлемым элементом современного дизайна. Давно миновали те дни, когда моушн-дизайном интересовались только аниматоры и специалисты по векторной графике. Сегодня крупные компании вроде Google и IBM отводят ему едва ли не ключевую роль в своих рекомендациях по проектированию. Дизайнеры всего мира пришли к пониманию, что моушн-дизайн может стать не просто интересным дополнением к пользовательскому интерфейсу, а невероятно мощным инструментом воздействия на пользователя.
Анимация оживляет интерфейс и помогает объяснить пользователю, что именно происходит до, во время и после его действия.
— IBM
Информационный разрыв
Осознание невероятных возможностей моушн-дизайна привело к тому, что главные страницы дизайнерских сайтов наполнились многочисленными анимированными изображениями с движущимися или меняющими свой масштаб элементами. Так и хочется воплотить все эти идеи в собственном проекте. И вот вы уже создаёте прототип с помощью Principle, Flinto, After Effects или любого другого инструмента, и после нескольких часов (или дней) работы получаете очень симпатичную анимацию, которая отлично вписывается в ваш проект.
Вы делаете рендеринг, дважды проверяете, всё ли движется так, как надо, а затем сохраняете видеоролик в надёжном месте. Остаётся только передать его команде разработчиков, которая займётся его реализацией. Всё идёт отлично! А теперь поставьте себя на место разработчика. Вместе с видеороликом, который длится от силы несколько секунд, он в лучшем случае получает довольно расплывчатое описание будущей анимации. И, как правило, никаких инструкций кроме: «Сделайте, чтобы было похоже на это!».
Чаще всего именно так и бывает. Всё, что получают разработчики, — видео или гифка плюс указание воспроизвести анимацию. Неудивительно, что даже самые опытные из них не любят связываться с моушн-дизайном, ссылаясь на то, что это занимает слишком много времени и не стоит потраченных усилий. И это действительно так. Представьте, что вам дали кисточку, краски, холст и не слишком разборчивую репродукцию Пикассо. Вам нужно нарисовать «что-то похожее». Явно вы будете не в восторге.
Спасительный граф
Любой дизайнер или разработчик, у которого есть командный опыт работы с моушн-дизайном, проходил нечто подобное. Возможно, вы удивитесь, но для организации такой работы есть лучшее решение. То, которое позволит вам передавать друг другу вашу анимацию в ходе совместной работы. Это анимационный граф.
Анимационный граф (или моушн-граф) — это визуальное представление вашей анимации на шкале времени. Вы можете разместить на этом графике всё, что угодно. Это очень дотошный помощник, который сильно упрощает понимание деталей. График позволит вам быстро и просто ответить на множество вопросов, касающихся вашей анимации, например:
- Какой элемент претерпевает изменения?
- Какое свойство элемента (прозрачность, координаты, угол) подвергается воздействию?
- Когда начинается и заканчивается анимация?
- Какой тип анимационной кривой применим в данном случае?
Даже при беглом взгляде на этот график вы можете получить массу полезной информации, и при этом не нужно углубляться в запутанные детали того инструмента прототипирования, который вы использовали.
Пример из практики
Допустим, у нас есть видео (или анимация), демонстрирующее процесс выбора какой-то опции из списка.
В данном случае это видео (GIF-анимация) несёт в себе основную информацию о том, что вы хотите получить на выходе. Именно к ней вы будете постоянно обращаться по мере создания или обсуждения анимации со своими коллегами.
График фактически служит компаньоном анимации, поскольку передаёт основные моменты вашего моушн-дизайна. Он позволяет разработчикам выделить самую суть анимации без обращения к инструментам прототипирования или шкале времени After Effects. И здесь не нужно, чтобы всё совпадало до пикселя. График нужен для того, чтобы понять, какие элементы анимации претерпевают изменения и не упустить какие-нибудь важные детали.
С помощью таких графиков можно установить целый ряд значимых вещей, например:
- Анимация идёт нелинейно. Например, распадается на две отдельных части, которые начинаются соответственно в 0 мс и 250 мс.
- К элементам движения применяются три разных временных кривых: ускорение, замедление и стандартная кривая.
- Воздействию подвергаются четыре элемента этой анимации: две радио кнопки, заголовок второй карточки и содержание второй карточки.
- В данной анимации мы воздействуем на четыре свойства: наполнение, прозрачность, позиция по оси Y и масштаб.
Если эти кривые заданы заранее, разработчикам остаётся лишь установить начало и длительность перехода, а также выбрать нужную кривую и тот элемент, который подвергается воздействию.
Следует отметить, что график не задаёт точные границы изменений (то, что прозрачность меняется с 0% до 100%, а координата по Y — с 450 до 550). Такие вещи должны быть специально определены дизайнером или примерно установлены разработчиком. Но в любом случае, такой подход работает лучше, чем «сделайте, чтобы было похоже на это!».
© vc.ru
