[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 4, "likes": 12, "favorites": 8, "is_advertisement": false, "section_name": "default", "id": "22791" }
Редакция vc.ru
1 379

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

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

Поделиться

В избранное

В избранном

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#Интерфейсы

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления