|
|||
реклама у нас | |||
*** |
Веб-дизайн: анимацияАвтор: Дмитрий Гиглавый Стремительное развитие технологий анимации привело к тому, что двигать, вращать и масштабировать стали все, что попадется под руку. Эта статья посвящается целесообразности использования анимации на веб-страницах и прежде всего — технологии 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, как живая, шевелится под курсором и по ней еще надо попасть. Но это вовсе не раздражает, наоборот, хочется посмотреть, что дальше будет. Предзагрузчик изображен в виде телевизора, который постепенно заполняется жидкостью. Прогресс загрузки можно отследить наблюдая за всплывающими пузырьками. Навигационная панель возникает как бы из другого пространства. За долю секунды она проявляется из налетевшего вихря и еще некоторое время продолжает колыхаться.
С точки зрения использования анимационных эффектов сайт
безупречен. Однако чтобы уловить все нюансы, его, как хорошее интеллектуальное
кино, надо смотреть несколько раз. Есть о чем задуматься начинающим
Flash-аниматорам. Но все это, как говорится, пыль рядом с классной анимацией. В январе 2001 года сайт был удостоен наград на фестивале Flashforward 2001. Кроме того, он был отмечен еще на нескольких фестивалях. Фирма находится в Италии, креативный директор — наш соотечественник. Сайт стамбульской компании 2999 Technologies http://www.2999.com/ (рис. 2) во многом выигрывает у http://www.estudio.com/, но прикольной анимации там меньше. Сразу видно, что создатель сайта далеко не тинэйджер и на его счету не один десяток законченных анимационных проектов. Он либо уже миновал период страстного увлечения прибамбасами, либо всегда был таким сдержанным и слегка суховатым. Но эта простота по-своему гениальна. И с html-фоном все в порядке — не поленился человек две минуты потратить. Лишний раз убеждаешься, что обилие рюшечек — это скорее плохой вкус, а настоящий стиль — прежде всего, чувство меры. На Flash-сайте красота ни при каком раскладе не должна вытеснять функциональность. Есть четкое разделение: сама по себе Масяня — чистейшей воды мультик (исключение составляют всякие «Масяня-секвенсеры» и тому подобные интерактивные приколы), а сайт www. worldclass.ru — это в первую очередь информационный Интернет-узел. Кстати говоря, на нем здорово сочетается строгость и функциональность анимации (рис. 3). Главное преимущество Flash — возможность делать интерактивные элементы интерфейса. Обыкновенные анимационные файлы (gif или flc) практически не могут взаимодействовать с пользователем. Мультик же, реагирующий на поведение курсора, всегда интереснее. Навигационная панель http://www.worldclass.ru/ — это список, маркеры списка — красные вершины воображаемого куба, который вращается в пространстве фитнес-клуба. Куб — центр композиции. Направление вращения определяет курсор. Если бы еще и тень от шариков синхронно двигалась, было бы вообще идеально.
NB. Некоторым чисто информационным ресурсам просто некуда и незачем вставлять собственную анимацию. Вставишь — не останется места для рекламы, размещенной на взаимовыгодных условиях. Или на главной странице столько своей информации, что даже для баннеров места нет, а о выделяющейся анимационной презентации и вовсе речи быть не может. Корпоративные сайты делятся на два основных типа: сайты производителей и сайты торговых компаний. Главная ценность представительств торговых компаний — не схема проезда и фотографии сотрудников, а online-каталоги по соответствующему профилю. За этим туда и ходят потенциальные заказчики. В качестве заказчика выгоднее обычно иметь торговую компанию, так как у среднего производителя меньше средств на PR в Интернете. Для продвижения торговой марки (создания презентаций, роликов) Flash стал едва ли не панацеей. А продвижением занимаются, как правило, торговцы. Поэтому вероятность найти на сайте торговца интересный ролик, конечно, больше, чем в случае с производителями. Но всё равно далеко не каждый торговец уверен в успехе Flash-рекламы. Еще более изощренное решение для навигационной панели можно увидеть на сайте http://www.x-effects.com/. Маркеры списка летят на фоне звезд и врываются в ослепительно белый прямоугольник. В углу экрана появляется эффектный логотип; вспыхивает луч света, из луча выпрыгивают маркеры, снабженные названиями разделов сайта. Каждое название вращается вокруг своего маркера (рис. 4). Заставку можно пропустить. При нажатии вокруг маркера возникает и медленно тает кольцо, как у Сатурна. Переходим к списку подразделов. Он уже оформлен попроще. Полезный с точки зрения usability прием — нет путаницы, сразу ясно, что мы уже не на главной странице. Казалось бы, элементарнейшая вещь, но далеко не все о ней знают. Подраздел — это просто текст с кнопкой Back (назад). В основе дизайна лежит сияющий астероид (он же маркер). Надо сказать, не самая оригинальная форма. Старовато — где-то конец восьмидесятых. Но выглядит стильно. То же самое можно сказать про html-версию сайта. Чересчур динамичная анимация может восприниматься как полноценный окружающий мир. Это бесспорное достоинство любого ресурса. Когда я где-то с минуту разглядывал мультик на сайте http://www.ultrashock.com/ (рис. 5), меня по-настоящему укачало. Надписи выскакивают, пролетают, резко останавливаются, камера в трехмерном пространстве слегка сошла с ума. Над мультиком висит нервная навигационная панель. Больше добавить нечего. Лучше один раз увидеть. Из той же оперы назойливый курсор на сайте http://www.air-atlantis.com/. Ценителям необычных эффектов будет интересен сайт http://www.motiongraphiks.com/. Здорово, сделано на уровне классной телевизионной заставки. Видно, что последовательность появления элементов каждой страницы была тщательно продумана. Некоторые графические вставки (например, глаз) выглядят на мониторе почти как настоящие. При наведении курсора фон кнопок изысканно переливается. Даже уходить не хочется. Воистину нестандартное решение системы навигации можно найти на сайте одной немецкой киностудии по адресу http://www.hielscher.de/ (рис. 6). Здесь Flash незаменим. Достойной альтернативы для решения такой задачи не найти. На первый взгляд — обычная картина: - Компьютер с работающим радаром вместо монитора, стилизованный
под телефон начала прошлого века. Помню, такие агрегаты мастерили подростки в
детской компьютерной школе на Полянке году в восемьдесят пятом. Вокруг каждого элемента при наведении курсора возникает сияние, в углу выскакивает полупрозрачная статусная строка с подсказкой. Теперь поочередно подводим курсор: - Если нажать на компьютер, камера подъезжает ближе к компьютеру. Радар позволяет послать письмо руководителю киностудии (с помощью почтового клиента). Клавиатура выводит контрольную панель со ссылками в свободном пространстве картинки. В начале статусной строки неизменно присутствует кнопка «Назад». Ведь браузер не воспринимает кадры анимации как отдельные страницы. Поэтому такая кнопка должна находиться на каждом, если можно так выразиться, экране ролика. - Нажатие на неопознанное устройство, как и в случае с
компьютером, соответствующим образом меняет положение камеры. Кнопка Phone
выводит на черный дисплей номер телефона, Fax — номер факса. Панель с кнопками
поможет разобраться в особенностях набора номера — в верхнем углу выскакивает
подсказка. - Ящик стола выдвигается до упора. В нем — газета. Кликаешь по газете — начинается коротенький мультик, затем идет страница новостей. В углу страницы — логотип; он, если подвести курсор, выводит альтернативную, более традиционную панель навигации — для чопорных зануд. И это не бросается в глаза. Умение вынести самое главное на первый план определяет успех проекта. Хорошее не должно идти раньше простого и посредственного.
Wildest hits Чрезмерная любовь к темным тонам может плохо отразиться на результатах работы дизайнера. Зайдите на сайт http://www.blue.mondo.pl/, и вы поймете, что я имею в виду. Сначала интересная, достаточно сложная анимация. Но Якоб Нильсен2 просыпается и кричит: «Мама!» Именно поэтому скриншот не помещаю, так как композиция практически целиком черного цвета, и на бумаге все это великолепие будет выглядеть, как «Черный квадрат». Создатели, мягко говоря, не позаботились о минимальных удобствах. И на первый взгляд вообще не ясно, сайт это или не сайт. Анимация видна только в самом начале, потом все застывает. Здесь уже палку немного перегнули, и даже грамотная анимация не спасает положения. Ощущение такое, что цветовую гамму выбирал программист, работающий на DOS-платформах с монохромным монитором. Напрягаешься и нажимаешь на что-то типа ссылки, ничего не происходит. То есть, наверное, черный предзагрузчик выписывает черные кренделя на черном фоне, после чего загружается черная страница с черным текстом и так далее. К сожалению, многие Flash-сайты имеют такие хронические болячки. В последнее время Flash используют и по поводу и без повода. У начинающих есть выбор, Flash или просто HTML. Выбирают, разумеется, Flash. При этом, приступая к работе, новичок может не знать основ дизайна и анимации, и его выбор, как правило, не связан с профессиональными качествами. Аниматоров с образованием и просто опытных специалистов среди любителей этой технологии максимум один процент. Прежде чем делать анимационную рекламу на веб-странице, надо сто раз все взвесить, просмотреть сотни готовых решений. Если без рекламы можно обойтись, а ее вопреки всему делают, в итоге получается либо плохо, либо заурядно. А настоящее креативное решение само просится на экран! 1 Утверждение о том, что у большой части пользователей Сети Flash-плейер не
установлен, не соответствует действительности. По данным прошлого месяца,
Flash-плейер версии 5 стоит на 98% компьютеров, имеющих доступ к Сети. Плейер
версии 6 — на 89%. Это официальные данные компании Macromedia. 2 Один из ведущих специалистов по usability, автор книги «Веб-дизайн». Перевод его статьи «Flash неприемлем на 99%» можно найти на www.webmascon.com/topics/designdetails/14a.asp. Источник: http://www.computerra.ru/ |
*** |
*** |
|
Copyright © "Internet Zone", info@izcity.com. Условия использования материалов |