Инструкция по моушн-дизайну: как преподносить анимации разработчикам

В настоящее время статического UI дизайна, используемого в приложениях, будет недостаточно. Моушн-дизайн больше не является будущим UX, ведь теперь он представляет собой неотъемлемую часть создания веб-сайтов и приложений. Если вы занимаетесь разработкой анимации и интеракции, вам просто необходимо знать, каким образом подготовить инструкцию по моушн-дизайну для front-end разработчиков.

Что такое UI моушн-дизайн

Моушн (или графика движения) — это элемент UX дизайна, который в буквальном смысле оживляет интерфейсы ваших веб-сайтов и приложений. Однако анимация не должна стать отражением вашего полета фантазии. Вам следует воспринимать ее как часть UX дизайна, благодаря которой пользователи могут видеть конечный продукт.

Главная задача моушн-дизайна — показать, что произойдет и помочь пользователю увидеть конечный результат, а также подчеркнуть отношения между элементами. Помимо этого, анимация должна скрывать содержимое фона и, в конце концов, просто радовать глаз.

Инструменты дизайнера

При создании UI графики дизайнер может пользоваться различными инструментами.

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

Тем не менее, существуют приложения, которые были созданы специально для анимированного прототипирования.

Первым следует упомянуть Facebook Origami Studio. Данный инструмент позволяет создавать высококлассную анимацию, которая успешно имитирует приложение.

Другим не менее интересным приложением является Flinto. С его помощью можно создать интерактивные прототипы с анимированными переходами, режимами, действиями и прокруткой.

Для macOS одним из самых легких в использовании является приложение Principle. Оно было разработано с целью создания прототипов со множеством анимаций и интеракций буквально за пару минут. Одним из преимуществ Principle является невероятно четкое управление последовательностью анимаций на временной шкале.

Kite Compositor — это одно из новейших и мощнейших инструментов на рынке для создания анимации и прототипирования. Особенно интересным он покажется тем, кто планирует создавать моушн-дизайн преимущественно для macOS и iOS.

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

Как разработчики видят анимации

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

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

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

Как подготовить инструкцию по моушн-дизайну

Далеко не всегда дизайнеры и разработчики способны понимать друг друга. Иногда для создания дизайна просто необходимо перекодировать визуальную картинку в нужные параметры.

Когда я подыскивал наиболее эффективный способ для подготовки дизайна для разработчиков, у меня было что-то вроде озарения. Я смотрел выступление на конференции Google I/O 2016 и видел методики, которые помогли команде профессионалов из Google разработать прекрасно анимированные приложения в Material Design. Дизайнеры из Google поработали на славу.

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

1. Время — наше все


Любая анимация и интеракция требует какого-то количества времени. Разработчики Android или iOS предпочитают отображать время в миллисекундах (1с = 1000мсек). Поэтому и дизайнеры подготавливают параметры дизайна в таком виде.

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

Разработчики Google также советуют не создавать действие, которое длится более 300мсек. Переходы, длящиеся более 400сек, могут показаться медленными.

2. Плавность помогает действию ожить

Зачастую линейная скорость перехода может показаться неестественной. Чтобы действие стало более реалистичным, необходимо поработать с кривыми плавности.

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

iOS и Android предоставили разработчикам несколько предустановленных кривых плавности, что сделает процесс создания анимации в разы быстрее. Если вам интересно, какими кривыми вы можете воспользоваться, то более подробную информацию вы найдете на сайтах Material Design и iOS.

Конечно, любая плавность, так или иначе, представляет собой математическое уравнение-многочлен. Front-end разработчики должны уметь создавать в своем коде все виды кривых. В блоге Виктора Ласкина вы сможете найти несколько полезных примеров.

Сегодня знания о кривых плавности, используемых для создания анимации — это настоящий маст-хэв в разработке.

3. От выбранного способа трансформации зависят доступные возможности

Для создания хорошего действия необходимо знать о способах аффинных преобразований, доступных в UI дизайне:

• Translation (смещение) — изменение позиции на оси X или Y;
• Scaling (масштабирование) — изменение длины, ширины или обоих показателей объектов;
• Rotation (поворот) — поворот объекта вокруг оси X, Y или даже Z.

Также существует возможность изменения прозрачности (альфа свойств) и цвета объекта.

Сочетание данных способов может привести к невероятным результатам. В вашу инструкцию для разработчиков должно входить описание способа трансформации.

4. В зависимости от параметров преобразования могут возникнуть некоторые ограничения

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

Желательно указывать эти значения в пунктах при смещении (pt для iOS и dp для Android), в процентах (например, при масштабировании или непрозрачности), а также в градусах или радианах (при повороте).

Старайтесь всегда спрашивать у ваших коллег, какими величинами им будет удобнее пользоваться.

5. Нельзя обойтись без анимированного объекта

Наконец, ваша инструкция должна содержать краткую информацию об элементе, который в определенный момент выполняет определенное действие.

Образец инструкции по моушн-дизайну

Когда вы напишите все необходимые параметры, вероятно, вам захочется представить вашу инструкцию в виде графика.

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

Таким образом, мы покажем, сколько времени занимает каждый элемент анимации.

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

Что касается способа трансформации (смещение, масштабирование, поворот и непрозрачность), то значения должны быть обязательно указаны в нужных величинах (пункты, проценты или градусы в зависимости от способа).

Также рядом с длительностью необходимо указать название или описание анимированного объекта.

Если вы укажете все значения в одном графике, разработчику будет проще выполнить поставленную задачу.

Рыночный стандарт?

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

Как я упомянул выше, Google в своих приложениях славно постарались в плане инструкций по моушн-дизайну. А упомянутый на конференции Google I/O способ создания таких инструкций должен вдохновить каждого дизайнера на подобную работу.

Заключение

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