Рoмaн Шeлexoв, рукoвoдитeль группы рaзвития кoрпoрaтивныx элeктрoнныx кaнaлoв в Бaнкe ВТБ и мaгистр Гильдии вoльныx прoeктирoвщикoв, спeциaльнo для «Нeтoлoгии» aдaптирoвaл статью Paul van Oijen о визуализации требований к анимации.
«Анимация заряжает интерфейс энергией и позволяет пользователю узнать, что происходит до, во время и после действия» — IBM
Сегодня динамика — неотъемлемая часть дизайна. Интерактивный дизайн больше не прерогатива аниматоров или специалистов по визуальным эффектам. Крупные компании, такие как Google и IBM, рассматривают проектирование анимации как ключевую часть своих методологических рекомендаций по дизайну.
Дизайнеры по всему миру осознали, что анимация — нечто большее, нежели причудливое дополнение к создаваемому интерфейсу. Это невероятно мощный инструмент, который сопровождает и направляет пользователя по необходимому маршруту внутри интерфейса.
Заполняем пробелы в знаниях
Использование интерактивного дизайна существенно улучшает пользовательский опыт. Именно поэтому стартовые страницы дизайн-ориентированных сайтов наполнены GIF-анимацией и большим количеством анимированных элементов. Это вдохновляет использовать такой подход в работе над собственными проектами.
Несколько часов, а то и дней, вы тратите, усердно собирая анимированные прототипы в Principle, Flinto, After Effects или еще где-то. В конце концов, рождается потрясающая анимация, которая, как вам кажется, идеально подходит для проекта.
После экспорта вы дважды проверяете результат, чтобы убедиться, что все движется верно и с заданным темпом. Наконец, сохраняете видео в безопасном месте. Вот так просто. Получилось. Теперь всего лишь надо отправить видео разработчикам, чтобы они всё сделали в кратчайшие сроки. Отлично!
Зовёте разработчиков и вручаете им видео, которое едва ли длится дольше нескольких секунд. Возможно, добавляете к нему несколько смутных комментариев — вот и всё. Что требуется сделать?
Повторить точь-в-точь!
Вот. Это и всё, что получают разработчики. Видео или GIF-анимация плюс небольшие инструкции — это все, что у них есть, чтобы воспроизвести анимацию в интерфейсе. Неудивительно, что даже самые опытные разработчики часто не хотят работать с моушн-дизайном. Им не по душе тратить много времени, не зная, окупятся ли усилия.
В этом есть смысл. Представьте, что вам вручили кисть, немного краски, чистый холст и зернистую распечатку Пикассо. Что нужно сделать? Повторить точь-в-точь. Вам бы тоже так не понравилось, верно?
Используйте кривую анимации
Любой проектировщик или разработчик, создающий анимацию в команде, вероятнее всего, сталкивался с подобным сценарием.
Наверняка вы задавались вопросом:, а как лучше передать другому специалисту требования для реализации моушн-дизайна? Отличное решение для совместной работы над проектированием и созданием анимации — это…
…использовать кривую анимации.
Навеяно этим потрясающим выступлением
Кривая анимации или моушн-граф — это графическое представление временной шкалы анимации. Кривая анимации — как условные знаки на карте. Это наглядная иллюстрация, которая серьезно помогает понять требования. Кривая отвечает на многие вопросы по анимации:
- Какой элемент анимируется?
- Какое свойство элемента (прозрачность, позиция, угол поворота и т.д.) изменяется?
- Когда начинается и заканчивается анимация?
- Какой вид кривой применяется?
Даже быстрый взгляд на кривую анимации дает немало информации. Это позволяет не тратить время на изучение временной шкалы тех инструментов, которые вы использовали, — ведь она может оказаться еще более запутанной.
Посмотрите на эти симпатичные кривые
(характеристики любезно предоставлены Material Design)
На практике
Видео (или GIF)
Выбор из списка вариантов
Основной инструмент описания моушн-дизайна — это видео или GIF-анимация. При передаче задачи разработчикам, так проще всего продемонстрировать желаемый результат.
Требования к анимации
Погружение в скучные подробности
Кривая — это детализация анимации, скучные подробности движения элементов. Такая наглядность помогает разработчикам понять особенности анимации и не задумываться об особенностях инструментов проектирования или временных шкалах в After Effects. Не придется постоянно стоять у разработчиков над душой, чтобы убедиться, что все идеально до последнего пикселя. Кривая определяет, как и какие элементы будут меняться, — и ни одна деталь не будет упущена.
В этом конкретном случае кривая позволяет определить несколько принципиальных вещей:
- Анимация состоит из двух отдельных частей: первая начинается с отметки 0 мс, а вторая с 250 мс.
- Используются три вида кривых для анимации объектов: «ускорение» (Ease-in), «замедление» (Ease-out) и «стандартное затухание».
- Анимация затрагивает четыре объекта: две радиокнопки (Radio Button #1 и #2), название и содержание раскрывающейся карточки (Option #2).
- Таким же образом затронуты четыре свойства объектов: заливка, прозрачность, позиция по Y и масштаб.
Если предположить, что виды кривых заданы заранее и стандартны для проекта, то разработчикам необходимо только установить начало и длительность анимации, применить вид кривой и выбрать меняющееся свойство объекта.
Кривая не покажет точные значения свойств объектов, например, изменение прозрачности от 0% до 100% или смещение позиции по Y с 450 до 550. Эти значения по-прежнему должны быть документально оформлены дизайнером и изучены разработчиком. Но использование кривых анимации куда нагляднее, чем фраза «повторите точь-в-точь».
Спасибо за внимание!
От редакции
Моушн-дизайн — перспективное направление не только в области «чистого» видео, но и в сфере проектирования интерфейсов. Двигающаяся графика оживляет интерфейс и обогащает пользовательский опыт. Как видно из статьи, компании-трендсеттеры Google и IBM включили моушн-дизайн в свои гайдлайны. Это означает, что «живые» интерфейсы будут набирать популярность и использоваться все чаще и чаще.
Чтобы научиться создавать моушн-графику и освоить профессию моушн-дизайнера, «Нетология» предлагает курс «Моушн-дизайн: графика в движении». Вы научитесь работать в программе Adobe After Effects, изучите основы композиции, колористики и типографики, овладеете основными приемами графического дизайна и сможете создавать рекламные и презентационные ролики, а также использовать моушн-дизайн в анимации интерфейсов. Записывайтесь!
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
