Целенаправленная анимация

Файлы к данной лекции Вы можете скачать здесь.

В начале 1990-х удивительный мир мультимедиа впервые пришел на персональные компьютеры с Windows. До этого таким машинам тяжело было воспроизводить аудио и видео и работать с компакт-дисками (помните о них?), и обеспечивать тот богатый опыт взаимодействия, который сегодня мы считаем привычным. Опыт работы с мультимедиа был восхитительно новым, и многие люди от всего сердца отдались ему, в том числе и группа инженеров поддержки в Microsoft, которая специализировалась в этой области. Хотя моя команда (мы занимались пользовательским интерфейсом) была расположена более чем в 100 футах от них, мы могли отлично слышать, - в течение всего дня!, - всякие писки и звонки, исходившие из динамиков их машин на фоне мягких звуков дождя в бассейне Амазонки.

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

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

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

Именно поэтому дизайн приложений для Магазина Windows особое внимание уделяет целенаправленной анимации: если у анимации в вашем приложении нет реальной цели, спросите себя: "Зачем я собираюсь это применять?". Найдите время для того, чтобы посмотреть на то, как Windows 8 и некоторые встроенные приложения используют и не используют анимацию. Обратите внимание на то, как много анимаций предназначены для отслеживания действий, или, иначе, для предоставления немедленной обратной связи при сенсорном взаимодействии. Такой подход целенаправленно помогает пользователям знать, что система восприняла их действия (и, на самом деле, это есть в требованиях сертификации для Магазина Windows). Другие анимации, такие, которые происходят, когда элемент был добавлен в спискок или удален их него, предназначены для привлечения внимания к изменениям, для смягчения их визуального воздействия и создание ощущения плавности. В других случаях вы можете обнаружить приложения, которые, возможно, чрезмерно используют анимацию, просто применяя ее потому что у них есть такая возможность, или пытаясь точно передать поведение физических объектов там, где в этом нет необходимости.

Таким образом, чрезмерная анимация представляет собой, своего рода "визуальное оформление", обладающее тем же эффектом, что и прочие элементы оформления, которые отвлекают пользователя от содержимого, которое ему по-настоящему нужно. (Если вы не можете удержаться от соблазна добавить немного подобных эффектов, предусмотрите, как минимум, возможность для их отключения).Позвольте мне сказать это иначе. Размышляя об анимациях, спросите себя: "О чем они сообщают?". Анимации – это разновидность коммуникации, что-то вроде визуального языка. Я даже рискнул бы сказать (как я решился сделать сейчас), что анимации, на самом деле, лишь сообщают об одном или нескольких событиях следующих трех видов:

• "Спасибо, я услышал", - когда что-то на экране перемещается естественным образом в ответ на жест пользователя. Без подобного "ответа", пользователь может подумать, что система не восприняла его жест, и почти наверняка ткнет в экран пальцем еще раз.
• "Привет" и "Пока", - когда элементы появляются или исчезают, или одни сменяются другими. Без подобной коммуникации, изменения, которые происходят с экранными элементами, могут быть такими же резкими, как мгновенное исчезновение Бильбо Бэггинса из "Властелина колец", который надел Кольцо всевластия. Я не хочу сказать, что все пользователи – это недоверчивые хоббиты, конечно, но идею я вам дал.
• "Эй, посмотри на меня!", - когда что-то перемещается только для того, чтобы привлечь внимание или привлекательно выглядеть.

Если бы я назначил этим трем категориям процентные значения, представляющие то, как часто они используются или могли бы использоваться, я, возможно, дал бы каждой из них, соответственно, 80%, 15% и 5% (хотя некоторые из анимаций служат нескольким целям). Иными словами, первая часть коммуникации заключается в том, чтобы слушать и отвечать, и именно это приложению следует делать большую часть времени. Вторая часть касается вежливости, которая хороша в разумных пределах, так как рукопожатия, объятия и приветствия, если их слишком много, могут вызвать раздражение. Третья часть, которую можно сравнить с взмахом руки, в свою очередь, может быть полезна лишь тогда, когда для ее использования есть реальные причины, в противном случае она становится лишь средством внешнего оформления.

Есть и еще одна веская причина разумному и экономному использованию анимации: потребление электоэнергии. Неважно, как она реализована, основана ли на ресурсах центрального процессора или графического ядра, анимация – это энергозатратный процесс. Каждый ватт, утекающий из батарей устройства пользователя, должен быть направлен на удовлетворение целей, ради которых он использует устройство, а не выброшен на ветер. Именно поэтому данная лекция называется "Целенаправленная анимация", а не просто "Анимация"!

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

В этой необычно короткой лекции, таким образом, мы сначала посмотрим, что предоставляет нам библиотека анимаций WinJS (WinJS Animations Library) – коллекция анимаций, построенных на основе CSS, которые уже воплощают стиль Windows 8 во многих обычно используемых операциях. После этго мы рассмотрим возможности CSS, лежащие в основе этих анимаций, которые вы, конечно, можете использовать напрямую. На самом деле, если не говорить об играх и других приложениях, основное содержимое которых состоит из анимированных объектов, вы, вероятно, можете использовать CSS для удовлетворения большинства потребностей в анимации. Это хорошая идея, так как подсистема CSS очень хорошо оптимизирована для того, чтобы извлекать преимущества из аппаратного ускорения, а при выполнении покадровой анимации средствами самого JavaScript это не так. Тем не менее, мы окончим эту лекцию рассмотрением этого последнего подхода, так как есть некоторые советы и секреты, касающиеся того, как сделать это хорошо в приложениях для Магазина Windows.