Моушн дизайн википедия: Motion graphic design — Wikipedia – как появился и где применяется

Моушн-дизайн не должен быть сложным — Дизайн на vc.ru

Перевод материала моушн-дизайнера Google в команде Material Design Йонаса Наймарка.

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

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

Сбивает с толку и общий подход к анимации интерфейса и классической анимации. На освоение двенадцати принципов анимации компании Disney можно потратить всю жизнь; значит ли это, что дизайн интерфейсов организован так же сложно?

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

С чего начать

Основная задача анимации — помогать пользователю ориентироваться в приложении, наглядно показывая взаимосвязь элементов интерфейса. Ещё анимация может сделать приложение оригинальнее с помощью динамических иконок, логотипов и карти

Motion Design: немного истории

Motion Design (моушн дизайн) еще называют по старинке Motion graphics. В широком понимании это визуальное оформление для видео, телевидения и кино, которое сегодня создаётся при применении компьютерных технологий.

А ранее он создавался с использованием классических приёмов съёмок на видео, в основном комбинированных или анимационных. Место его использования – видеоклипы, оформление телевизионного эфира, заставок телепередач, титров в кино, рекламных роликов.

Эти термины появились вместе с видеомонтажом, чтобы идти в ногу с новейшими технологиями. Перед тем как компьютеры стали общедоступны, графика движения была дорога и трудоемка, что ограничило ее использование в высоко бюджетном кино и телевидении. В конце 1980-х – середине 90-х дорогие фирменные графические системы британской Quantel были довольно обычным явлением во многих телевизионных станциях. Рабочие станции Quantel такие как Hal, Henry, Harry, Mirage и Paintbox были графическим стандартом вещания своего времени.

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

Термин “графика движения” был популяризован книгой об использовании Adobe After Effects Триша и Криса Мейер (Chris & Trish Meyer), под названием Creating Motion Graphics. Это было началом компьютерных приложений, которые специализировались на производстве видео, но не были редакторами или 3D программами. Эти программы собрали вместе специальные эффекты, композитинг (соединение нескольких изображений для получения одного) и наборы инструментов для цветной коррекции, и первоначально появились между обычным редактированием и 3D технологиями. Этот “посредник” и есть понятие графики движения и конечный стиль анимации, именно поэтому иногда его называют 2.5D.

Motion Design продолжает развиваться как форма искусства, объединяя sweeping camera paths и 3D элементы. Несмотря на их относительную сложность, Maya компании Autodesk и 3D Studio Max широко используются в анимации и дизайне графики движения.

Анимационный дизайн — Википедия

Материал из Википедии — свободной энциклопедии

Графика движения, моушн дизайн или анимационный дизайн (англ. Motion graphics) — визуальное оформление для видео, телевидения и кино. Создаётся в основном при применении компьютерных технологий. Но нередко встречаются и работы созданные при использовании классических приёмов съёмок на видео, в основном комбинированных или анимационных.

Применяется для создания видеоклипов, оформления телевизионного эфира, заставок телепередач, титров в кино, рекламных роликов.

Графика движения, созданная на компьютере.

Термин «графика движения» появился вместе с видеомонтажом, возможно, чтобы идти в ногу с новейшими технологиями. Перед тем как компьютеры были общедоступны, графика движения была дорога и трудоемка, что ограничило ее использование в высокобюджетном кино и телевидении. В конце 1980-х — середине 90-х, дорогие фирменные графические системы британской Quantel были довольно обычным явлением во многих телевизионных станциях. Рабочие станции Quantel такие как Hal, Henry, Harry, Mirage и Paintbox были графическим стандартом вещания своего времени. (Также Ampex ADO и AVA) С уменьшением стоимости производства графики движения на компьютере, она получила более широкое применение. Со способностью таких компьютерных программ как Adobe After Effects, Discreet Combustion и Apple Motion, она стала еще более доступной. Современные символьные генераторы (англ. character generators) от Aston Broadcast Systems и Chyron Corporation включают графику движения.

Термин «графика движения» был популяризован книгой об использовании Adobe After Effects Триша и Криса Мейер (Chris & Trish Meyer), под названием

Creating Motion Graphics. Это было началом компьютерных приложений, которые специализировались на производстве видео, но не были редакторами или 3D программами. Эти новые программы собрали вместе специальные эффекты, композитинг (соединение нескольких изображений для получения одного) и наборы инструментов для цветной коррекции, и первоначально появились между обычным редактированием и 3D технологиями. Этот «посредник» и есть понятие графики движения и конечный стиль анимации, именно поэтому иногда его называют 2.5D.

Графика движения продолжает развиваться как форма искусства, объединяя sweeping camera paths и 3D элементы. Несмотря на их относительную сложность, Maya компании Autodesk и 3D Studio Max широко используются в анимации и дизайне графики движения.

См. также

Примечания

Литература

• Daniel Jenett:
  Motion Design: Darstellung aktueller Projekte GUDBERG Verlag, 2014, ISBN 978-3-943061-12-3
• Tanja Diezmann, Tobias Gremmler: Raster für das Bewegtbild Stiebner, 2005, ISBN 3-8307-1309-6
• Ralf Dringenberg (нем.)русск., Annette Ludwig, Anja Stöffler, Harald Pulch: Moving Types – Eine Retrospektive von den Anfängen des Films bis heute, Ausstellungskatalog Gutenberg-Museum, Mainz 2011, ISBN 978-3-936483-02-4
• Jeff Bellatoni, Matt Woolman: TYPE in MOTION – innovative digitale gestaltung Verlag Hermann Schmidt, Mainz 1999, ISBN 3-87439-477-8

Дополнительно

Национальный день моушн дизайна — 2 Декабря. В связи с тем, что 2D и 3D дизайн традиционно отмечает свой праздник в эти числа, 2 и 3 декабря соответственно.

Анимационный дизайн — Википедия. Что такое Анимационный дизайн

Графика движения, моушн дизайн или анимационный дизайн (англ. Motion graphics) — визуальное оформление для видео, телевидения и кино. Создаётся в основном при применении компьютерных технологий. Но нередко встречаются и работы созданные при использовании классических приёмов съёмок на видео, в основном комбинированных или анимационных.

Применяется для создания видеоклипов, оформления телевизионного эфира, заставок телепередач, титров в кино, рекламных роликов.

Графика движения, созданная на компьютере.

Термин «графика движения» появился вместе с видеомонтажом, возможно, чтобы идти в ногу с новейшими технологиями. Перед тем как компьютеры были общедоступны, графика движения была дорога и трудоемка, что ограничило ее использование в высокобюджетном кино и телевидении. В конце 1980-х — середине 90-х, дорогие фирменные графические системы британской Quantel были довольно обычным явлением во многих телевизионных станциях. Рабочие станции Quantel такие как Hal, Henry, Harry, Mirage и Paintbox были графическим стандартом вещания своего времени. (Также Ampex ADO и AVA) С уменьшением стоимости производства графики движения на компьютере, она получила более широкое применение. Со способностью таких компьютерных программ как Adobe After Effects, Discreet Combustion и Apple Motion, она стала еще более доступной. Современные символьные генераторы (англ.

character generators) от Aston Broadcast Systems и Chyron Corporation включают графику движения.

Термин «графика движения» был популяризован книгой об использовании Adobe After Effects Триша и Криса Мейер (Chris & Trish Meyer), под названием Creating Motion Graphics. Это было началом компьютерных приложений, которые специализировались на производстве видео, но не были редакторами или 3D программами. Эти новые программы собрали вместе специальные эффекты, композитинг (соединение нескольких изображений для получения одного) и наборы инструментов для цветной коррекции, и первоначально появились между обычным редактированием и 3D технологиями. Этот «посредник» и есть понятие графики движения и конечный стиль анимации, именно поэтому иногда его называют 2.5D.

Графика движения продолжает развиваться как форма искусства, объединяя sweeping camera paths и 3D элементы. Несмотря на их относительную сложность, Maya компании Autodesk и 3D Studio Max широко используются в анимации и дизайне графики движения.

См. также

Примечания

Литература

• Daniel Jenett: Motion Design: Darstellung aktueller Projekte GUDBERG Verlag, 2014, ISBN 978-3-943061-12-3
• Tanja Diezmann, Tobias Gremmler: Raster für das Bewegtbild Stiebner, 2005, ISBN 3-8307-1309-6
• Ralf Dringenberg (нем.)русск., Annette Ludwig, Anja Stöffler, Harald Pulch: Moving Types – Eine Retrospektive von den Anfängen des Films bis heute, Ausstellungskatalog Gutenberg-Museum, Mainz 2011, ISBN 978-3-936483-02-4
• Jeff Bellatoni, Matt Woolman: TYPE in MOTION – innovative digitale gestaltung Verlag Hermann Schmidt, Mainz 1999, ISBN 3-87439-477-8

Дополнительно

Национальный день моушн дизайна — 2 Декабря. В связи с тем, что 2D и 3D дизайн традиционно отмечает свой праздник в эти числа, 2 и 3 декабря соответственно.

Почему моушн-дизайн не должен быть сложным

Моушн-дизайн помогает сделать интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, он, пожалуй, наименее понятая из всех дисциплин дизайна. Это может быть связано с тем, что он является одним из новичков в семействе дизайна интерфейсов. Если визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, то моушн-дизайн вынужден был ждать, пока современное оборудование начнет плавно рендерить анимацию. Частичное совпадение моушн-дизайна и традиционной анимации также вносит неразбериху. Можно потратить целую жизнь на освоение 12 принципов анимации Диснея, означает ли это, что моушен-дизайн интерфейсов также сложен? Люди часто говорят мне, что сложно проектировать движение или, что выбор правильных значений неоднозначен. Я утверждаю, что в наиболее важных областях интерфейса, моушен-дизайн может и должен быть простым.

С чего начать

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

Паттерны перехода

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

1. Переходы на основе контейнера
2. Переходы без контейнера.

Переходы на основе контейнера

Такие элементы, как текст, иконки и изображения, группируются внутри контейнеров

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

1. Анимируйте контейнер с помощью стандартной плавности Material design (это означает, что он быстро ускоряется, а затем мягко замедляется). В этом примере размеры контейнера и угловые радиусы анимированы от круглой кнопки до прямоугольника, который заполняет экран.

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

Анимация замедлилась, чтобы проиллюстрировать, как элементы масштабируются и маскируются внутри контейнера

3. Элементы, которые покидают экран во время перехода, исчезают по мере ускорения контейнера. Элементы появляются на экране, когда контейнер замедляется. Плавность ручного эффекта достигается за счет затухания элементов по мере их быстрого перемещения.

Анимация замедлилась, чтобы проиллюстрировать, как элементы покидают и появляются на экране с помощью затухания.

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

Анимация замедлилась, чтобы проиллюстрировать, как начальная и конечная композиции связаны контейнером

Некоторые контейнеры просто перемещаются по экрану с помощью стандартной плавности Material design. Направление перемещения контейнера, определяется местоположением компонента, с которым он связан. Например, нажатие на иконку навигационного ящика в верхнем левом углу приведет к перемещению контейнера слева направо.

Если контейнер входит в границы экрана, он исчезает и масштабируется. Вместо анимирования с масштаба 0%, он начинается с 95%, чтобы избежать чрезмерного внимания к переходу. Масштабная анимация использует плавное замедление Material design, то есть начинается на максимальной скорости и мягко замедляется. Чтобы выйти, контейнер просто затухает без масштабирования. Анимация выхода должна быть более тонкой, чем анимация входа, чтобы сосредоточить внимание на новом контенте.

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

Переходы без контейнера

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

1. Стартовая композиция исчезает затухая, тогда как конечная композиция медленно появляется.
2. Когда конечная композиция появляется, она также тонко масштабируется с помощью плавного замедления Material design. Опять же, масштаб применяется только к появляющейся композиции, чтобы выделить новый контент в отличии от старого.

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

Если исходные и конечные композиции имеют четкую пространственную или последовательную связь, совместное движение может быть использовано для ее усиления. Например, при навигации по пошаговому компоненту стартовые и конечные композиции имеют вертикальное скользящее движение по мере их постепенного затухания. Это усиливает их вертикальную компоновку. При нажатии кнопки «Next» в процессе обучения, композиции имеют горизонтальное скользящее движение. Перемещение слева направо усиливает осознание последовательности. Совместное движение использует стандартную плавность Material design.

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

Лучше практики

Сохраняйте простоту

Учитывая их популярность и тесные связи с юзабилити, навигационные переходы должны в целом уделять больше внимания функциональности, чем стилю. Это не значит, что они никогда не должны быть стилизованными, просто убедитесь, что выбор стиля оправдан брендом. Обычно внимание пользователя обращено к таким элементам, как маленькие иконки, логотипы, загрузчики или пустое состояние. Этот простой пример ниже может и не привлечет к Dribbble много внимания, но сделает приложение удобнее.

Анимация замедлилась, чтобы показать разные стили движения

Выберите правильную продолжительность и плавность

Навигационные переходы должны иметь длительность, которая определяет приоритетность функциональности. Они должны быть быстрыми, но не настолько быстрыми, чтобы дезориентировать пользователя. Длительность выбирается в зависимости от того, в какой части экрана находится анимация. Поскольку навигационные переходы обычно занимают большую часть экрана, длительность 300 мс является оптимальным вариантом. Напротив, небольшие компоненты, такие как переключатель, используют короткую продолжительность 100 мс. Если переход слишком быстрый или медленный, отрегулируйте его продолжительность с шагом 25 мс, пока не добьетесь правильного баланса.

Плавность описывает скорость, с которой анимация ускоряется и замедляется. Большинство навигационных переходов используют стандартную плавность Material design, которая является асимметричным типом плавности. Это означает, что элементы быстро ускоряются, а затем осторожно замедляются, чтобы сосредоточить внимание на конце перехода. Это придает анимации естественность, поскольку объекты в реальном мире не стартуют и не останавливаются внезапно. Если переход кажется жестким или роботизированным, вероятнее всего была ошибочно выбрана, симметричная или линейная плавность.

Анимация замедлилась, чтобы проиллюстрировать различные типы плавности

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

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

Анимация может смягчить разочаровывающую ошибку

Если вы хотите узнать больше о потенциале моушн-дизайна, обязательно прочитайте Material motion guidelines.

Спасибо Brenton Simpson.