Я рос в очень религиозной семье.

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

Суббота, наоборот, была свободным от ритуалов днём, когда я мог сполна вкусить прелести “храма” мультфильмов. Каждую субботу, в любую погоду, здоровым или больным, я вскакивал с постели, бежал вниз в гостиную, усаживался перед телевизором и смотрел “Чудо-Женщину”, “Скуби Ду”, “Капитан Кэйвман” и “Смурфики” часами напролёт. И, хотя мои родители были далеко не в восторге от религии, которую я выбрал для себя, они терпели это как компенсацию воскресным посещениям проповедей.

Сейчас я могу с уверенностью сказать, что эти субботние часы фанатичного просмотра “Евангелия от мультфильмов” в конечном итоге сделали из меня настоящего профессионала. Я полагаю, что многие из тех, кто читает эту статью, являются приверженцами той же религии, что и я, и могут объяснить разницу между напечатанной картинкой из мультфильма и анимированными кадрами, которые можно видеть по телевизору. Наверняка среди вас много таких как я, которые каждую субботу завтракали и одновременно принимали причастие перед телевизором. Мы — это те, кто понимает, что достаточно добавить движения плоской картинке, и она оживёт. Движение вдыхает жизнь во всё!

Анимированные мультфильмы, такие как “Чудо-Женщина”, “Скуби Ду” и “Капитан Кэйвман” показали мне, как движение может вдохнуть жизнь в простой рисунок.

Добавить движения к чему-либо, будь то серия рисунков или компьютерные персонажи, совсем не так просто, как “добавить воды”. Это искусство, которое требует терпения, мастерства и тщательного изучения того, как объекты и люди перемещаются в пространстве с течением времени.

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

Люди, которые понимают это лучше, чем кто-либо, составляют легионы блестящих аниматоров, которые работали на Walt Disney. К счастью для нас, двое из них, Олли Джонстон и Фрэнк Томас, решили взяться за перо и поделиться с миром основными принципами анимации, используемой всеми аниматорами Диснея. Они выпустили книгу Иллюзия жизни: Disney Animation.

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

В своей статье я хотел бы рассказать вам о 12 основных принципах анимации, описанных Джонстоном и Томасом в книге Иллюзия жизни: Disney Animation (1981). И, хотя изначально принципы разрабатывались для анимационного кино и телевидения, все они применимы и в сфере мобильных интерфейсов. Если вы обладаете достаточным опытом, художественным вкусом и мастерством, то сможете наделить свою разработку той самой магией, которую вы так ждали по субботам, будучи ребёнком.

Иллюзия жизни: Disney Animation, Фрэнк Томас и Олли Джонстон описывают 12 основных принципов aнимации.

Итак, 12 основных принципов анимации:

1. Принцип сжатия и растяжения.
2. Предвосхищение действия (антиципация).
3. Принцип постановки.
4. Прорисовка каждого движения (компоновка).
5. Принцип последовательности действий (доводка).
6. Принцип смягчения начала и завершения действия.
7. Дуги (использование криволинейных траекторий естественного движения).
8. Дополнительное действие.
9. Принцип расчёта времени
10. Принцип преувеличения.
11. Принцип профессионализма.
12. Принцип внешней привлекательности.

Принцип 1: Сжатие и растяжение

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

Мягкие объекты, например, воздушный шарик, наполненный водой, имеют определённый уровень гибкости. Из-за этого они постоянно изменяют форму. Сжатие и растяжение формы помогает передать это качество объекта зрителям.

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

На первом экране вы видите приложение Flipboard. Поверхность страниц кажется жёсткой и картонной. Обратите внимание на отличие от страниц в IBOOK Apple. Тут можно видеть пример применения принципа сжатия и растяжения. Страницы приобретают гибкость, и у пользователя появляется ощущения, что он листает настоящую книгу.

Принцип 2: Предвосхищение действия (антиципация).

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

• Подготовка к действию.
• Непосредственно действие.
• Результаты действия.

Будь то бейсбол, раскачивающиеся качели или натянутая пружина перед распрямлением. Аниматор подобно дирижёру должен знать, как правильно расставить все компоненты: освещение, композицию и даже форму объектов — для того, чтобы дать зрителю подсказку о том, что сейчас произойдёт.

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

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

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

Иконки пользовательского интерфейса Palm Pre помогают пользователям освоиться с сенсорным управлением.

Анимированная подложка на главном экране Windows Phone 7 использует описанный принцип, предоставляя пользователям возможность выбрать нужное действие.

Принцип 3: Правильная постановка.

Люди, которые заинтересованы в продаже недвижимости часто “обставляют” дом так, чтобы каждая комната смотрелась наиболее выигрышно. Это можно сравнить с принципом правильной постановки в анимации. Правильная постановка объектов позволяет зрителю полностью понять центральную идею анимации. В мире мобильных устройств, принцип постановки является наиболее актуальным, когда дело касается перехода между приложениями и управления ими. Очень важно найти удачное сочетание цвета, композиции, освещения и направления движений анимированных объектов. Хорошая постановка объектов создаёт ощущение лёгкости и реалистичности, в то время как плохая производит впечатление несогласованности движений.

Хорошая постановка объектов (справа) помогает понять основную идею иллюстрации. Плохая же (слева) не создаёт ощущения ясности.

Постановка представляет собой тонкий, но важный фактор при применении анимации в создании мобильных интерфейсов. Следует помнить, что одна из основных задач любого пользовательского интерфейса — качественная подача концепции программного продукта. В результате те пользователи, которые впервые видят данный интерфейс, должны сразу интуитивно понимать, что для чего предназначено и как этим пользоваться. И одним из способов добиться подобного эффекта и является применение принципа правильной постановки анимированных объектов.

Пример хорошей постановки объектов — IPad версия Keynote. Она позволяет пользователям видеть, где именно располагается файл, с которым они работают в настоящее время. Вся файловая структура приложения видна в буквальном смысле “как на ладони”. Безусловно, с таким приложением пользователю будет гораздо комфортнее работать.

Принцип 4: Прорисовка каждого движения (компоновка)

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

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

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

Для большинства популярных игр, таких как Растения против Зомби для Ipad вполне достаточно прорисовки ключевых кадров.

Игры с более сложным движением, как например игра Фрукты Ниндзя для IPad, используется более подробная покадровая прорисовка, чтобы движения получились более динамичными.

Принцип 5: соблюдение последовательности действий (доводка).

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

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

Теперь представьте, что собака идет по тротуару со своим владельцем. Все её тело находится в движении, но скорость движения ног будет отличаться от скорости движения хвоста или головы. Данный принцип анимации учитывает то, что части объекта — такие, как собачья голова, хвост и ноги — будут двигаться с различной скоростью. Благодаря такому подходу объекты кажутся более естественными. Ни одно действие не должно быть полностью завершено до тех пор, пока не начнётся следующее.

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

Windows используют принцип последовательности действий. Прямоугольники движутся не автономно друг от друга, каждое движение одного объекта влияет на положение другого.

Принцип 6: смягчение начала и завершения движения

Будь то автомобиль, который вые� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров