Стремительное развитие технологий анимации привело к тому, что двигать, вращать и масштабировать стали всё, что попадется под руку. Эта статья посвящается целесообразности использования анимации на веб-страницах. Прежде всего, это касается технологии Flash. Речь пойдет о приколах и фичах. В некоторых случаях без них просто не обойтись, а порой они только мешают нормальному восприятию информации.
Смотря, что за информация. Смотря, как и куда вставлена анимация, сколько она грузится и какую часть экрана она занимает. Руководствоваться будем общедоступными примерами. Но сначала маленький технический абзац:
Проблемы клиентов и исполнителей
Проблема номер один состоит в том, что у большой части посетителей просто не установлен модуль для просмотра Flash. Конечно, с популярностью Масяни многие именно ради неё настроили у себя просмотр Flash-роликов, но все же остался достаточно внушительный процент серьезных корпоративных клиентов, которые ограничиваются стандартным набором программ (MS Internet Explorer и MS Office) и понятия не имеют о современных технологиях. При этом, поскольку в своем деле они профессионалы, им неприятно ощущать собственную некомпетентность в области передовых достижений компьютерной индустрии. Даже если их бизнес далек от информационных технологий. Вроде как, в Windows 2000 и в Windows 98 модуль ставится автоматически. Но далеко не у всех после такой установки можно посмотреть любой Flash-ролик.
Согласитесь, что непросто ещё и обучать чему-то клиента, у которого на тебя и так одна-две минуты его драгоценного времени. По его мнению, он все знает и если что-то у него не работает, то это не его проблема. Можно написать для его клиентов <Если вы не видите прыгающий и улыбающийся электрокардиограф, то сообщите нам, мы приедем, установим специальную программу на Ваш компьютер, и он запрыгает и заулыбается! Почти бесплатно. Вы можете сами, но не факт, что у вас получится:" Можно так написать. Но за такую фразу любой вменяемый заказчик без лишних объяснений порвет вам пасть или откусит ухо (особенно, если он уже заплатил Вам за работу).
Есть альтернатива для патологических мультфильмолюбов, опыт показывает, что не все о ней знают. В выпадающем меню Macromedia Flash есть пункт File/Publish Settings. Во вкладке HTML есть пункт Window Mode, в котором надо выбрать Transparent Windowless. В этом случае фон роликов будет прозрачным и сквозь него будет виден фон ячейки, содержащий изображение в стандартном формате. Таким образом, можно состыковывать векторную анимацию и статическую растровую графику. К тому же, если файл по каким-то причинам грохнулся, то мы увидим только фон со страницы, и впечатление не будет испорчено.
Однако важно учесть, что все это касается только MSIE. В остальных броузерах мы увидим квадрат, который будет закрывать фон, независимо от настроек Window Mode. В этом случае, если клиент из принципиальных соображений пользуется Нетскейпом или Оперой, то вам грозит от уха до всей головы. Но предосторожность с прозрачным фоном никогда не будет лишней. В идеале в html-файл надо вставлять процедуру, которая будет определять наличие модуля просмотра у клиента, и в зависимости от этого выводить либо Flash-заставку, либо аналогичный рисунок.
Одним словом, как бы это не было смешно, делая для клиента Flash по собственной инициативе, дизайнер подвергает себя определенному риску. Поэтому лучше сразу в двух с половиной словах обрисовать клиенту все перспективы. Дескать, скоро без векторной анимации ни одна иконка работать не будет, за нами будущее и так далее.
Показав клиенту все чудеса этой технологии, и убедив его в острой необходимости её использования, можно приступать к работе.
Greatest hits
Если клиент категорически не соглашается, ему можно продемонстрировать несколько flash-сайтов. Например, сайт www.estudio.com (рис. 1). Несмотря на то, что простой текст и ссылки не очень удобны для чтения, сайт, безусловно, выделяется даже на фоне классных Flash-проектов. Самое главное его достоинство - не дизайн, а анимация. Он никогда не привлек бы столь пристального внимания, если бы был реализован просто средствами html, java-script и Photoshop. Весь изюм в том, как элементы интерфейса реагируют на мышь, как выглядит предзагрузчик и что происходит на фоне.
Начинается всё с того, кнопка Enter, как пружинка, колышется под курсором и по ней еще надо попасть. Но это не вызывает негативных эмоций, наоборот хочется посмотреть, что там дальше будет.
Предзагрузчик - это телевизор, который постепенно наполняется жидкостью. А изменяющиеся проценты (неотъемлемый атрибут любого предзагрузчика) не просто стоят на одном месте, а всплывают на поверхность, подталкиваемые пузырьками (рис. 2).
Вся навигационная панель возникает как бы из другого пространства. За долю секунды она проявляется из налетевшего размытого вихря и ещё некоторое время продолжает колыхаться.
|
| Рис. 1 |
|
| Рис. 2 |
|
| Рис. 3 |
|
| Рис. 4 |
|
| Рис. 5 |
Посмотрите на меню (кнопка Work, рис. 1). Если бы меню просто появлялось сразу, как есть, было бы не так оригинально. Задача криэйторов в данном случае состояла в том, чтобы поведение кнопок, пунктов меню и бегущих линий на фоне отличалось оттого, что мы видим каждый день. Если бы возможно было в журнале напечатать 15-20 фаз мультика для меню, стало бы видно, что оно выпрыгивает как пружинка, а потом также запрыгивает обратно. При этом в начале прыжка оно черное и полупрозрачное, а потом становится синим, не теряя некоторой прозрачности (см. рис. 1). Пункты подсвечиваются плавно появляющимися световыми пятнами.
С точки зрения использования анимационных эффектов сайт www.estudio.com просто безупречен. Здесь присутствует эффект хорошего интеллектуального кино - надо смотреть несколько раз, чтобы уловить все ньюансы. Одного раза точно недостаточно - глаз не хватит. Есть о чем задуматься начинающим Flash-аниматорам. В разделе Work/Internet показано, как оформить хорошее портфолио. Работы в нем, конечно, должны быть соответствующими.
В этой ситуации неуместен разговор о недостатках, даже если они откровенно бросаются в глаза. Скажем, кнопка выключения звука (Mute) едва заметна в левом нижнем углу экрана. Выключает она только фоновую мелодию, а все лязганья и шипения, связанные с активными элементами интерфейса, продолжают работать. Когда слушаешь Pink Floyd в mp3, лишние звуки в наушниках раздражают. А закрывать страничку не хочется. Внизу левый угол и кнопки
Но все это, как говорится, пыль рядом с классной анимацией. В январе 2001 года сайт был удостоен нескольких наград на фестивале Flashforward 2001. Кроме этого, в 2001 году сайт был отмечен наградами ещё на нескольких фестивалях. Фирма находится в Италии, креативный директор - наш соотечественник. С одной стороны приятно, с другой стороны жаль, что специалисты такого класса уезжают.
Теперь переедем из Италии в Турцию. Сайт истанбульской компании 2999 TECHNOLOGIES www.2999.com (рис. 3) во многом выигрывает у www.estudio.com, но прикольной анимации там меньше. Сразу видно, что создатель этого сайта уже далеко не тинэйджер и на его счету не один десяток законченных анимационных проектов. Он либо уже прошел период страстного увлечения прибамбасами, либо всегда был таким сдержанным и слегка суховатым. Но эта простота по-своему гениальна. И с HTML-фоном все в порядке - не поленился человек две минуты потратить. Лишний раз убеждаешься, что чрезмерное обилие рюшечек - это скорее плохой вкус, а настоящий стиль - это, прежде всего, чувство меры.
На Flash-сайте красота ни при каком раскладе не должна вытеснять функциональность. Есть четкое разделение: сама по себе Масяня - это чисто мультик (исключение составляют всякие <Масяня-секвенсеры> и тому подобные интерактивные приколы), а сайт www.worldclass.ru - это в первую очередь информационный интернет-узел. Кстати говоря, на этом сайте здорово сочетается строгость и функциональность анимации (рис. 4).
Главное преимущество flash - возможность делать интерактивные страницы. Обыкновенные анимационные файлы (gif или flc)не могут взаимодействовать с пользователем. Мультик, реагирующий на поведение курсора, всегда интереснее. Любому посетителю приятно принимать участие в том, что происходит на экране.
Навигационная панель сайта worldclass - это список, маркеры этого списка - красные шарики воображаемого куба, который вращается в пространстве фитнес-клуба. Клуб - центр композиции. Направление вращения определяет курсор. Если бы еще и тень от шариков на полу синхронно шевелилась, было бы вообще идеально.
Самое главное, что функциональную интерактивную анимацию не портит дизайн HTML-страницы. Если бы в этой работе не было Flash-анимации, то она все равно была бы интересна. Весь дизайн идеально "облегает" центр композиции. Нет ни одной лишней линии. Это не всегда удается даже опытному дизайнеру. Видно, что этому варианту наверняка предшествовало несколько не менее удачных решений. Всем советую сходить и заценить полноценный продукт творчества программиста, аниматора и дизайнера.
N.B. Некоторым чисто информационным ресурсам просто некуда и незачем вставлять собственную анимацию. Вставишь - не останется места для рекламы, размещенной на взаимовыгодных условиях. Или просто столько своей информации на главной странице, что даже для баннеров особо места нет, а о выделяющейся анимационной презентации и вовсе речи быть не может. Пример - сайт www.stormoff.com (рис. 5).
Новостные ресурсы не могут существовать без рекламодателей. А вот корпоративные сайты, которые сами покупают показы, как правило, никого у себя не рекламируют. Разве что выгодных поставщиков и только по собственной инициативе. Большинство систем баннерного обмена - не для крупных корпораций. Руководитель вряд ли обрадуется, неожиданно встретив на главной странице своего сайта баннеры конкурентов - результат такого "обмена". Уж лучше наверняка купить показы там, где хочешь.
Сейчас главная ценность корпоративных сайтов - не схема проезда и фотографии сотрудников, а online-каталоги по соответствующему профилю. За этим туда и ходят потенциальные заказчики. А не за анимированными мониторчиками и мышками. Скажем, каталоги медицинского оборудования лучше искать на сайтах торговых компаний (www.stormoff.com, www.medtehnika.com), а не у производителей. На любом торговом сайте вы получите более наглядную и масштабную картину, чем на сайте одного производителя.
Во-первых, у среднего производителя (особенно отечественного) меньше дополнительных средств на всякие онлайновые дела и даже если что-то есть, он может выкладывать только свое оборудование. Во-вторых, на сайтах крупных торговых компаний собрано множество производителей со всего мира - это заведомо больше, чем у производителя.
Это было увесистое лирическое отступление о том, почему не на всех сайтах анимированная навигация и булькающие кнопки. Анимация - это в первую очередь реклама - явная или скрытая. Реклама не всегда уместна и удобна для глаз. И далеко не каждый дождется её загрузки. Надо об этом помнить всегда.
 |
| Рис. 6 |
 |
| Рис. 7 |
 |
| Рис. 8 |
 |
| Рис. 9 |
 |
| Рис. 10 |
Еще более изощренное решение для навигационной панели можно увидеть на сайте www.x-effects.com. Сначала маркеры списка летят, затем переходят в другую галактику, еще летят, останавливаются перед ослепительно белой призмой. Призма тихо открывается, маркеры залетают внутрь, в углу появляется эффектно выпендривающийся логотип, призма открывается с лязгом, мы видим её слегка рельефную поверхность, вспыхивает луч света, из луча выпрыгивают маркеры, снабженные названиями разделов сайта. Каждое название вращается вокруг своего маркера (рис. 6). Заставку можно пропустить. При нажатии вокруг маркера возникает и растворяется кольцо Сатурна. Мы переходим к списку подразделов. Он оформлен по-другому - более просто. Полезный с точки зрения usability прием - нет путаницы, сразу ясно, что мы уже не на главной странице. Казалось бы, элементарнейшая вещь, но далеко не все о ней знают. Подраздел - это просто текст с кнопкой Back (Назад). В основе всего дизайна лежит сияющий астероид (он же маркер). Надо сказать, не самая оригинальная форма. Немного старо - где-то конец восьмидесятых. Но выглядит стильно. То же самое можно сказать про HTML-версию этого сайта (рис. 7).
Чересчур динамичная анимация может восприниматься как полноценный окружающий мир. Это бесспорное достоинство любого ресурса. Когда я где-то в течение минуты разглядывал мультик на сайте www.ultrashock.com (рис. 8) меня по-настоящему укачало. Не сильно, без глобальных последствий, но ощутимо. Вот это сила искусства! Надписи выскакивают, пролетают, резко останавливаются, камера в трехмерном пространстве слегка сошла с ума. Над мультиком висит нервная навигационная панель. Больше добавить нечего. Эффект в чем-то схож с действием диэтиламида лизергиновой кислоты. Помните "Двери восприятия" Хаксли? Лучше один раз увидеть. Из этой же оперы назойливый курсор на сайте www.air-atlantis.com.
Ценителям необычных эффектов будет интересен сайт www.motiongraphiks.com. Здорово, сделано на уровне классной телевизионной заставки. Видно, что последовательное появление элементов каждой страницы было тщательно продумано. Некоторые графические вставки (например, глаз) выглядят на мониторе почти как настоящие. Это радует просто потому, что после особо усердной оптимизации глаз может выглядеть, как ухо. При наведении курсора фон кнопок изысканно переливается. Уходить с сайта сразу не хочется.
Воистину нестандартное решение системы навигации можно пропалить на сайте одной немецкой киностудии по адресу www.hielscher.de (рис. 9). Здесь Flash незаменим. Достойной альтернативы для решения такой задачи не найти. На первый взгляд - обычная картина:
Вокруг каждого элемента при наведении курсора возникает сияние, в углу выскакивает полупрозрачная статусная строка с подсказкой. Теперь поочередно подводим курсор:
В углу страницы логотип - он, если подвести курсор, выводит альтернативную, более традиционную панель навигации. Это для чопорных зануд. И это не бросается в глаза. Умение вынести самое главное на первый план определяет успех проекта. Хорошее не должно идти раньше простого и посредственного. На сайте киностудии есть, чем полюбоваться, а заодно и озлиться от зависти.
У сайта www.eskedahl.se оригинальная анимированная навигация и по-хорошему строгий дизайн (рис. 10). Единственный весьма существенный недостаток - подбор цветов. Ну нельзя писать белый текст на светлом серо-желто-зеленом фоне! Просто потому что нельзя. И фон такой лучше вообще не подкладывать под текст. Есть определенная группа цветов, которые не годятся для того, чтобы поверх них писать строки и абзацы текста любого цвета. Их немного, и они не ограничивают буйство фантазии, а просто чуть-чуть контролируют его. В связи с этим переходим к брутальному разделу:
Wildest hits
Примечание: Якоб Нильсон - автор книги "Веб. дизайн", один из ведущих специалистов по usability. Перевод его статьи "Flash неприемлем на 99%" можно почитать вот по этому адресу: http://www.webmascon.com/topics/designdetails/14a.asp
Чрезмерная любовь к темным тонам может плохо отразиться на результатах работы дизайнера. Зайдите на сайт www.blue.mondo.pl и вы поймете, что я имею в виду. Сначала интересная, достаточно сложная анимация. Но Якоб Нильсон просыпается и кричит "Мама!". Именно поэтому скриншот не помещаю, так как композиция практически целиком состоит из черного цвета, и на бумаге в колонке текста все это великолепие будет выглядеть, как <Черный квадрат>. Если вглядываться в эту знаменитую картину Казимира Малевича, можно увидеть много интересного. Вы как бы погружаетесь в это засасывающее пространство, после чего вас могут охватить всякие интересные ощущения.
Но сайт Blue Mondo Project в этом смысле гораздо примитивнее. Просто создатели, мягко говоря, совсем не позаботились о минимальных удобствах. И на первый взгляд вообще не ясно, сайт это или не сайт. Анимация видна только в самом начале, потом всё застывает.
 |
| Рис. 11 |
Здесь уже палку немного перегнули и даже грамотная анимация на таком неблагоприятном фоне (фигурально) не спасает положения. Ощущение такое, что цветовую гамму определял программист, работающий по специальности на DOS-платформах с монохромным монитором, когда те только появились. Напрягаешься и нажимаешь на что-то типа ссылки, ничего не происходит. То есть, наверное, чёрный предзагрузчик выделывает чёрные кренделя на чёрном фоне, после чего загружается чёрная страница с чёрным текстом и так далее. К сожалению, многие Flash-сайты имеют такие хронические болячки. На www.xl5design.com (рис. 11) вы увидите примерно то же самое, только в более мягкой форме. И сайт www.spherix.ch страдает тем же недугом. Иногда кажется, что черный текст на темном фоне делают специально, чтобы было незаметно (www.gregor-l.com). Потому что в качественном дизайне нечитаемый текст воспринимается скорее как расчетливый замысел, а не как ошибка.
"Рынок любительского дизайна" и необходимость анимации
В последнее время Flash используют и когда он необходим, и когда без него можно обойтись. У начинающих есть выбор, чисто Flash или просто HTML. Выбирают, разумеется, Flash. При этом начинающий, приступая к работе, совершенно спокойно может не знать основ дизайна и анимации, и то, что он выбрал Flash, как правило, никак не связано с его профессиональными качествами. Аниматоров с образованием и просто опытных специалистов среди любителей этой технологии максимум один процент.
Доверчивых заказчиков часто дурачат. Ситуация на "рынке любительского дизайна" оставляет желать лучшего. Иметь дело с посторонним дизайнером-одиночкой выгодно для любой компании. Зачастую такой подрядчик либо новичок, либо просто любитель. Разница в том, что новичок хочет стать профессионалом, а любителю и так хорошо. С одной стороны его в любой момент можно послать - даже тогда, когда 90 процентов работы уже сверстано по утвержденному дизайну. С другой стороны - надо признать, что его более всего заботит получение денег, а уже потом репутация, качество работы, имя. Короче, с обеих сторон ситуация складывается не очень хорошая. Судя по всему, так делается больше половины всех сайтов.
Профессионалы высокого класса идут в известные студии или собирают свои команды. Их уже нельзя так запросто послать. Их работа в десятки раз дороже. Здесь уже другая проблема - даже "профессиональный" дизайн может быть неинтересным и скучным. Все вроде грамотно, удобно и красиво, а не радует. Бывает так - зайдешь на сайт, увидишь, даже восхитишься, поглядишь на все несколько секунд и, следуя неведомому закону, закрываешь окно. То ли потому что заранее представляешь себе развитие сюжета, то ли просто картинка не в тему. Как говорится, знал бы прикуп, жил бы в Сочи.
Даже остроумный креатив не гарантирует, что автора будут носить на руках. Молодой независимый дизайнер придумал фичу, несколько дней и ночей парился с глюками какой-нибудь пиратской софтины, приходит к заказчику, показывает шедевр, а ему говорят: "Да, правда, прикольно, но лучше убери - не корпоративно". Или наоборот: "Бред, фигня, старо, вставляй - пока сгодится!" Мнение коллег в половине случаев расходится с мнением заказчиков. Общаясь с разными клиентами из разных сфер деятельности можно привыкнуть к любой реакции.
В Германии сняли классный фильм "Виктор Фогель - король рекламы". Там как раз показаны разные заказчики рекламы. Налицо разница между руководством крупнейшей автомобильной компании и средним производителем лесопильного оборудования. Второй - грубый, агрессивный человек, чем-то напоминающий большую бензопилу. Фанатик своего дела. Даже не обладая особой проницательностью, можно догадаться, какая реклама ему понравится. Эксклюзив это или нет - не суть важно в данном случае. Реклама должна быть такая же, как и сам заказчик. Автомобильный магнат - совсем другая песня. Другой подход и совсем другие деньги. Больше работы, больше риска, больше напряжения.
Вы знаете, чем занималась фирма "Селдом"? Скорее всего, нет. Но название ведь наверняка помните? Хотя рекламу уже лет восемь не крутили. И самой фирмы, кажется, уже давно не существует. Автомобилисты, газировщики, телефонисты тратят на рекламу миллионы долларов. А "Селдом" потратила тогда минимум средств на изготовление рекламы, и добилась максимального результата. По крайней мере, в рамках поставленной задачи - заявить о себе. В условиях господства пост-советского креатива (см. ru/kovodstvo, параграфы 36-37) это было одним из величайших достижений отечественной рекламной индустрии.
Прежде чем делать анимационную рекламу на веб-странице, надо сто раз всё взвесить, просмотреть сотни готовых решений. Если без неё можно обойтись, а её вопреки всему делают, то в итоге получается либо плохо, либо заурядно. А настоящее креативное решение само просится на экран! Тема вряд ли в ближайшее время закроется.
Copyright © 1997—2005 Дмитрий Гиглавый | E-mail: giglavy@rambler.ru
|
|