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

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

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

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

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

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

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

Люди, которые понимают это лучше, чем кто-либо, составляют легионы блестящих аниматоров, которые работали на 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: смягчение начала и завершения движения

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

Добавление кадров в самом начале и в конце движения создает иллюзию присутствия инерции.

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

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

Прокрутка на дисплее iPhone: и опять, увеличение количества кадров в начале и в конце создают эффект наличия инерции.

Принцип 7: Дуги

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

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

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

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

Пример движения одущевлённых (органических) объектов: рыбки и вода в приложении для iPhone движутся по арочной траектории.

Элементы интерфейса на платформе Android двигаются по прямой линии, оставляя ощущение чего-то механического.

Принцип 8: дополнительное действие

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

Первичное действие этой анимации — движения тела белки и её ног. Движения хвоста белки являются вторичным действием. Вместе они делают анимацию более реалистичной.

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

Переход, который происходит, когда пользователь кликает на URL-адрес в электронной почте — активация браузера на iPhone, является примером вторичного действия. Основное действие в окне браузера остаётся в поле зрения. Вторичное действие (запуск приложения электронной почты) отходит на задний план. Оба действия происходят одновременно, но вторичные действия не отвлекают внимание пользователя.

Пример вторичного действия: анимированные переходы между окнами браузера.

Принцип 9: расчёт времени

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

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

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

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

Скорость перемещения элементов в программе для обработки фотографий для Ipad сродни быстрой перетасовке колоды карт. Она выражает легкость и помогает достигнуть реалистичности.

Принцип 10: преувеличение

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

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

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

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

Преувеличение на примере приложений для IPad.

Принципы 11 и 12: принцип профессионализма и внешней привлекательности

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

Профессианальный рисунок всегда анатомически точен и учитывает баланс света и тени.

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

Способы передачи движения в дизайне

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

• Эскиз.
• Кадрирование и создание каркаса.
• Тестовый вариант (прототип).

Эскиз

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

Пример работы над эскизом для приложения ITunes.

Создание каркаса, кадрирование

Создание каркаса является следующим в процессе проектирования двигающихся элементов. Все движения должны вписываться в рамки самого экрана и открытых окон.

Пример создания каркаса документа.

Тестовый вариант дизайна

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

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

Советы по применению принципов анимации в сфере UX дизайна

1. Не переусердствуйте. Мало что раздражает больше, чем чрезмерное количество анимации. Анимированные элементы — это весело и интересно, но не стоит слишком увлекаться. Положитесь на своё чувство вкуса.
2. Все принципы дополняют друг друга. Будь то сцена в мультфильме или переходы между закладками на экране мобильного устройства, принципы анимации редко существуют изолированно друг от друга. Эффективнее всего применять их в совокупности. Чем больше будет ваш опыт в создании анимации — тем более искусно вы научитесь сочетать эти принципы.
3. Анимация всегда рассказывает какую-либо историю. Это справедливо как для мультфильмов, так и для UX дизайна. Анимация должна дополнять программный продукт, помогать пользователю, но не перетягивать внимание на себя.

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

Подведем итог:

Хотя принципы анимации изначально были разработаны для анимационных фильмов и телевидения, они также справедливы и для UX дизайна. Перечислим 12 основных принципов, которые легли в основу книги “Иллюзия жизни”:

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

• Три ключевых момента в процессе разработки дизайна: эскиз, создание каркаса и работа с прототипом (тестовым вариантом) дизайна.

(AL)

Примечание редактора: эта статья всего лишь отображает личное мнение автора и охватывает экспериментальные UX методы, которые не считаются наиболее оптимальными. Вы согласны или не согласны с описанными методами? Можете ли вы предложить более подходящие решения? Дайте нам знать об этом в комментариях к статье!

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

Читать далее →