Веб-дизайн: анимация
АрхивРаспространено мнение, что у большой части посетителей Интернета не установлен модуль для просмотра Flash-роликов1. Таким образом, выбирая в качестве технического решения Flash-анимацию, вы сужаете круг пользователей, которые смогут ознакомиться с содержимым сайта.
Дмитрий Гиглавый — дизайнер, выпускник Лицея информационных технологий №1533 по специальности компьютерная графика (1996). В 2001 году окончил факультет информатики РГГУ. Домашняя страничка: zr.az.ru/giglavy.
Стремительное развитие технологий анимации привело к тому, что двигать, вращать и масштабировать стали все, что попадется под руку. Эта статья посвящается целесообразности использования анимации на веб-страницах и прежде всего — технологии Flash.
Дизайнер, заказчики и посетители
Распространено мнение, что у большой части посетителей Интернета не установлен модуль для просмотра Flash-роликов1. Таким образом, выбирая в качестве технического решения Flash-анимацию, вы сужаете круг пользователей, которые смогут ознакомиться с содержимым сайта.
Если Flash используется для анимации отдельных элементов веб-страницы, можно поступить следующим образом. В выпадающем меню Macromedia Flash есть пункт File/Publish Settings, а во вкладке HTML — пункт Window Mode, в котором надо выбрать Transparent Windowless. В этом случае фон роликов станет прозрачным и сквозь него будет виден фон ячейки, содержащий изображение в стандартном формате. Таким образом можно состыковывать векторную анимацию и статическую растровую графику.
Однако важно учесть, что все это касается только MS IE. В других браузерах мы увидим квадрат, который будет закрывать фон независимо от настроек Window Mode. В идеале в html-файл надо вставлять процедуру, которая будет определять наличие модуля просмотра у клиента и в зависимости от этого выводить либо Flash-заставку, либо аналогичный рисунок.
Одним словом, делая для клиента Flash по собственной инициативе, дизайнер подвергает себя определенному риску. Поэтому лучше сразу в двух словах обрисовать клиенту все перспективы. Дескать, скоро без векторной анимации ни одна иконка работать не будет, за ними будущее и так далее. Показав клиенту все чудеса этой технологии и убедив его в острой необходимости ее использования, можно приступать к работе.
Greatest hits
Если клиент категорически не соглашается, ему можно продемонстрировать несколько Flash-сайтов, например www. estudio.com (рис. 1). Сайт, безусловно, выделяется даже на фоне классных Flash-проектов. Самое главное его достоинство — не дизайн, а анимация. Он никогда не привлек бы столь пристального внимания, если бы был реализован только средствами HTML и JavaScript. Изюминка сайта в том, как элементы интерфейса реагируют на мышь, как выглядит предзагрузчик и что происходит в это время на фоне.
Начинается все с того, что кнопка Enter, как живая, шевелится под курсором и по ней еще надо попасть. Но это вовсе не раздражает, наоборот, хочется посмотреть, что дальше будет. Предзагрузчик изображен в виде телевизора, который постепенно заполняется жидкостью. Прогресс загрузки можно отследить наблюдая за всплывающими пузырьками.
Навигационная панель возникает как бы из другого пространства. За долю секунды она проявляется из налетевшего вихря и еще некоторое время продолжает колыхаться.
Посмотрите на меню (кнопка Work, рис. 1). Если бы оно просто появлялось сразу как есть, было бы не так оригинально. Задача создателей в данном случае состояла в том, чтобы поведение элементов интерфейса сайта отличалось от того, что мы видим каждый день. Если бы можно было в журнале напечатать 15–20 фаз мультика для меню, стало бы видно, что оно выпрыгивает, как пружинка. При этом в начале прыжка меню черное и полупрозрачное, а потом синеет, не теряя прозрачности. Пункты подсвечиваются плавно появляющимися световыми пятнами.
С точки зрения использования анимационных эффектов сайт безупречен. Однако чтобы уловить все нюансы, его, как хорошее интеллектуальное кино, надо смотреть несколько раз. Есть о чем задуматься начинающим Flash-аниматорам.
Не хочется говорить о недостатках, но истина дороже. Скажем, кнопка выключения звука (Mute) в левом нижнем углу экрана почти не видна. Выключает она только фоновую мелодию, а лязг и шипение, связанные с активными элементами интерфейса, остаются. Когда слушаешь Pink Floyd в mp3, посторонние звуки в наушниках раздражают. А закрывать страничку не хочется. Внизу левый угол и кнопки Contact и Job как будто обрублены. Здесь логичным продолжением был бы фон html-страницы, совпадающий с фоном Flash-окошка.
Но все это, как говорится, пыль рядом с классной анимацией. В январе 2001 года сайт был удостоен наград на фестивале Flashforward 2001. Кроме того, он был отмечен еще на нескольких фестивалях. Фирма находится в Италии, креативный директор — наш соотечественник.
Сайт стамбульской компании 2999 Technologies www.2999.com (рис. 2) во многом выигрывает у www.estudio.com, но прикольной анимации там меньше. Сразу видно, что создатель сайта далеко не тинэйджер и на его счету не один десяток законченных анимационных проектов. Он либо уже миновал период страстного увлечения прибамбасами, либо всегда был таким сдержанным и слегка суховатым. Но эта простота по-своему гениальна. И с html-фоном все в порядке — не поленился человек две минуты потратить. Лишний раз убеждаешься, что обилие рюшечек — это скорее плохой вкус, а настоящий стиль — прежде всего, чувство меры.
На Flash-сайте красота ни при каком раскладе не должна вытеснять функциональность. Есть четкое разделение: сама по себе Масяня — чистейшей воды мультик (исключение составляют всякие «Масяня-секвенсеры» и тому подобные интерактивные приколы), а сайт www. worldclass.ru — это в первую очередь информационный Интернет-узел. Кстати говоря, на нем здорово сочетается строгость и функциональность анимации (рис. 3).
Главное преимущество Flash — возможность делать интерактивные элементы интерфейса. Обыкновенные анимационные файлы (gif или flc) практически не могут взаимодействовать с пользователем. Мультик же, реагирующий на поведение курсора, всегда интереснее.
Навигационная панель www.worldclass.ru — это список, маркеры списка — красные вершины воображаемого куба, который вращается в пространстве фитнес-клуба. Куб — центр композиции. Направление вращения определяет курсор. Если бы еще и тень от шариков синхронно двигалась, было бы вообще идеально.
Самое главное, что функциональную интерактивную анимацию не портит дизайн html-страницы. Если бы в этой работе не было Flash-анимации, она все равно была бы интересна. Весь дизайн идеально «облегает» центр композиции. Нет ни одной лишней линии. Это не всегда удается даже опытному дизайнеру. Видно, что окончательному варианту предшествовало несколько не менее удачных решений.
NB. Некоторым чисто информационным ресурсам просто некуда и незачем вставлять собственную анимацию. Вставишь — не останется места для рекламы, размещенной на взаимовыгодных условиях. Или на главной странице столько своей информации, что даже для баннеров места нет, а о выделяющейся анимационной презентации и вовсе речи быть не может.
1 (назад) Утверждение о том, что у большой части пользователей Сети Flash-плейер не установлен, не соответствует действительности. По данным прошлого месяца, Flash-плейер версии 5 стоит на 98% компьютеров, имеющих доступ к Сети. Плейер версии 6 — на 89%. Это официальные данные компании Macromedia.
Мнение, приведенное в статье, лишь славная традиция, не имеющая никаких обоснований на данный момент. К сожалению, данное мнение наносит немалый вред развитию Интернет-технологий (в том числе и у нас). Так, например, многие баннерные сети не принимают Flash-баннеры в ротацию, ссылаясь на отсутствие Flash-плейера у многих пользователей, хотя сейчас это не имеет под собой никаких оснований. Скачать плейер версий 5 или 6 не составляет труда: их размер — 200 и 800 Кбайт соответственно. Кстати, разработчики все еще предпочитают стиль версии 5, потому никаких проблем с доступностью плейера быть не может.
Корпоративные сайты делятся на два основных типа: сайты производителей и сайты торговых компаний.
Главная ценность представительств торговых компаний — не схема проезда и фотографии сотрудников, а online-каталоги по соответствующему профилю. За этим туда и ходят потенциальные заказчики. В качестве заказчика выгоднее обычно иметь торговую компанию, так как у среднего производителя меньше средств на PR в Интернете. Для продвижения торговой марки (создания презентаций, роликов) Flash стал едва ли не панацеей. А продвижением занимаются, как правило, торговцы. Поэтому вероятность найти на сайте торговца интересный ролик, конечно, больше, чем в случае с производителями. Но всё равно далеко не каждый торговец уверен в успехе Flash-рекламы.
Еще более изощренное решение для навигационной панели можно увидеть на сайте www.x-effects.com. Маркеры списка летят на фоне звезд и врываются в ослепительно белый прямоугольник. В углу экрана появляется эффектный логотип; вспыхивает луч света, из луча выпрыгивают маркеры, снабженные названиями разделов сайта. Каждое название вращается вокруг своего маркера (рис. 4). Заставку можно пропустить. При нажатии вокруг маркера возникает и медленно тает кольцо, как у Сатурна. Переходим к списку подразделов. Он уже оформлен попроще. Полезный с точки зрения usability прием — нет путаницы, сразу ясно, что мы уже не на главной странице. Казалось бы, элементарнейшая вещь, но далеко не все о ней знают. Подраздел — это просто текст с кнопкой Back (назад). В основе дизайна лежит сияющий астероид (он же маркер). Надо сказать, не самая оригинальная форма. Старовато — где-то конец восьмидесятых. Но выглядит стильно. То же самое можно сказать про html-версию сайта.
Чересчур динамичная анимация может восприниматься как полноценный окружающий мир. Это бесспорное достоинство любого ресурса. Когда я где-то с минуту разглядывал мультик на сайте www.ultrashock.com (рис. 5), меня по-настоящему укачало. Надписи выскакивают, пролетают, резко останавливаются, камера в трехмерном пространстве слегка сошла с ума. Над мультиком висит нервная навигационная панель. Больше добавить нечего. Лучше один раз увидеть. Из той же оперы назойливый курсор на сайте www.air-atlantis.com.
Ценителям необычных эффектов будет интересен сайт www.motiongraphiks.com. Здорово, сделано на уровне классной телевизионной заставки. Видно, что последовательность появления элементов каждой страницы была тщательно продумана. Некоторые графические вставки (например, глаз) выглядят на мониторе почти как настоящие. При наведении курсора фон кнопок изысканно переливается. Даже уходить не хочется.
Воистину нестандартное решение системы навигации можно найти на сайте одной немецкой киностудии по адресу www.hielscher.de (рис. 6). Здесь Flash незаменим. Достойной альтернативы для решения такой задачи не найти. На первый взгляд — обычная картина:
- Компьютер с работающим радаром вместо монитора, стилизованный под телефон начала прошлого века. Помню, такие агрегаты мастерили подростки в детской компьютерной школе на Полянке году в восемьдесят пятом.
- Странное на вид устройство с переключателем Phone/Fax.
- Несколько коробок с кинопленкой, печать.
- Все это расположено на столе, ящик которого чуть-чуть выдвинут.
Вокруг каждого элемента при наведении курсора возникает сияние, в углу выскакивает полупрозрачная статусная строка с подсказкой. Теперь поочередно подводим курсор:
- Если нажать на компьютер, камера подъезжает ближе к компьютеру. Радар позволяет послать письмо руководителю киностудии (с помощью почтового клиента). Клавиатура выводит контрольную панель со ссылками в свободном пространстве картинки. В начале статусной строки неизменно присутствует кнопка «Назад». Ведь браузер не воспринимает кадры анимации как отдельные страницы. Поэтому такая кнопка должна находиться на каждом, если можно так выразиться, экране ролика.
- Нажатие на неопознанное устройство, как и в случае с компьютером, соответствующим образом меняет положение камеры. Кнопка Phone выводит на черный дисплей номер телефона, Fax — номер факса. Панель с кнопками поможет разобраться в особенностях набора номера — в верхнем углу выскакивает подсказка.
- Печать взлетает и отпечатывает крупным планом адрес студии.
- Ящик стола выдвигается до упора. В нем — газета. Кликаешь по газете — начинается коротенький мультик, затем идет страница новостей.
В углу страницы — логотип; он, если подвести курсор, выводит альтернативную, более традиционную панель навигации — для чопорных зануд. И это не бросается в глаза. Умение вынести самое главное на первый план определяет успех проекта. Хорошее не должно идти раньше простого и посредственного.
У сайта www.eskedahl.se оригинальная анимированная навигация и по-хорошему строгий дизайн. Единственный весьма существенный недостаток — подбор цветов. Ну нельзя писать белый текст на светлом серо-желто-зеленом фоне! Просто потому, что нельзя. Есть определенная группа цветов, которые не годятся для того, чтобы поверх них писать строки и абзацы текста любого цвета. Их немного, и они не ограничивают буйство фантазии, а просто чуть-чуть контролируют его. В связи с этим переходим к брутальному разделу…
Wildest hits
Чрезмерная любовь к темным тонам может плохо отразиться на результатах работы дизайнера. Зайдите на сайт www.blue.mondo.pl, и вы поймете, что я имею в виду. Сначала интересная, достаточно сложная анимация. Но Якоб Нильсен2 просыпается и кричит: «Мама!» Именно поэтому скриншот не помещаю, так как композиция практически целиком черного цвета, и на бумаге все это великолепие будет выглядеть, как «Черный квадрат». Создатели, мягко говоря, не позаботились о минимальных удобствах. И на первый взгляд вообще не ясно, сайт это или не сайт. Анимация видна только в самом начале, потом все застывает.
Здесь уже палку немного перегнули, и даже грамотная анимация не спасает положения. Ощущение такое, что цветовую гамму выбирал программист, работающий на DOS-платформах с монохромным монитором. Напрягаешься и нажимаешь на что-то типа ссылки, ничего не происходит. То есть, наверное, черный предзагрузчик выписывает черные кренделя на черном фоне, после чего загружается черная страница с черным текстом и так далее. К сожалению, многие Flash-сайты имеют такие хронические болячки.
В последнее время Flash используют и по поводу и без повода. У начинающих есть выбор, Flash или просто HTML. Выбирают, разумеется, Flash. При этом, приступая к работе, новичок может не знать основ дизайна и анимации, и его выбор, как правило, не связан с профессиональными качествами. Аниматоров с образованием и просто опытных специалистов среди любителей этой технологии максимум один процент.
Прежде чем делать анимационную рекламу на веб-странице, надо сто раз все взвесить, просмотреть сотни готовых решений. Если без рекламы можно обойтись, а ее вопреки всему делают, в итоге получается либо плохо, либо заурядно. А настоящее креативное решение само просится на экран!
2 (назад) Один из ведущих специалистов по usability, автор книги «Веб-дизайн». Перевод его статьи «Flash неприемлем на 99%» можно найти на www.webmascon.com/topics/designdetails/14a.asp.
