Веб-дизайн и анимация

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

Еще недавно анимация в веб-дизайне была очень популярна. Считалось, что обилие анимированных элементов при разработке веб-дизайна является показателем количества труда (читай “денег”), вложенных в разработку сайта. И это действительно так. Создать хорошую анимированную картинку очень непросто. Мало того, что она должна смотреться красиво – ее “вес” не должен быть слишком большим. Иначе она будет чересчур долго грузиться – пользователь просто не станет дожидаться окончания загрузки.

Аналогичная ситуация сейчас происходит с флэш-роликами. Флэш-ролики – это та же анимация, но выполненная на современном уровне. Безусловно, все это смотрится очень эффектно. И для создания презентационных сайтов, рассчитанных на пользователей с качественными линиями связи, флэш-анимация в веб-дизайне просто незаменима.

Но давайте попробуем разобраться в целесообразности использования анимированных картинок на сайтах информационной направленности.

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

Корни этого явления кроются в нашем далеком прошлом. Тогда периферийное зрение, остро реагирующее на движущийся предмет, зачастую спасало жизнь человеку. Например, когда на него охотился какой-то зверь. Сейчас этот инстинкт для нас не так важен (хотя и, безусловно, полезен, особенно на дороге). Тем не менее, он есть – мы чутко реагируем на движение, улавливаемое периферийным зрением.
Поэтому, если мы читаем текст на странице, а в углу “шевелится” маленькая картинка, это нас очень отвлекает. И часто раздражает.

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

Тем не менее, использование анимации в веб-дизайне в некоторых случаях не только оправданно, но и весьма полезно. Но, прежде чем начать разработку анимации, следует задать себе вопрос – можно ли того же эффекта в веб-дизайне добиться и без анимации?

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

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

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

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

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

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

Случай 3. Отображение объемных структур.
Экран компьютера дает только двумерное представление об объекте. Поэтому изображение трехмерных структур ставит перед веб-дизайном непростую задачу. Конечно, чтобы дать пользователю полное представление о таком объекте, можно объект представить в разных проекциях. Но часто более эффективным (и эффектным) является анимированное изображение объекта, позволяющее пользователю изучить его со всех сторон. При этом движение объекта должно быть достаточно медленным – чтобы пользователь мог спокойно рассмотреть его. Лучшим вариантом, конечно, является управляемая анимация – когда пользователь сам может поворачивать объект как ему нужно. Но это уже довольно сложная анимация, выполняемая средствами флэш-программирования. Да и “вес” такой картинки будет весьма не мал.

Случай 4. Слайд-шоу.
Очень популярный в последнее время прием в веб-дизайне, позволяющий пользователю просматривать серию изображений, не перелистывая при этом веб-страницы. Как правило, слайд-шоу снабжается неким “пультом управления”, который позволяет как просматривать изображения по одной картинке, так и запустить процесс непрерывного показа сменяющихся иллюстраций.
Этот прием веб-дизайна можно отнести к анимации лишь с некоторой натяжкой.

Случай 5. Привлечение внимания.
Несмотря на приведенную выше критику, иногда в веб-дизайне анимацию можно и нужно использовать для привлечения внимания. Но важно, как использовать. Если, например, мы хотим выделить в меню название страницы, на которой находится пользователь, мы можем поставить мигающую кнопку. Но “мигнуть” она должна всего несколько раз. Только, чтобы обратить внимание пользователя на себя. А дальше ей достаточно изменить немного цвет.

Или выплывающий текст. Если какое-то важно сообщение сделано в виде текста, “выплывающего” из-за края экрана – это вполне разумный прием в веб-дизайне для привлечения внимания. Но важно при этом соблюдать меру. Текст должен “выплыть” только один раз. Лишь только для того, чтобы пользователь обратил на него внимание. А дальше текст должен стоять на месте.

Рассмотрим флэш-анимацию. Это очень мощный инструмент, позволяющий делать веб-сайты, которые не только великолепно выглядят, но и удобны для пользователя. Но:

• Ни одна российская поисковая система пока не индексирует текст в флэш-роликах таких веб-сайтов (а значит, содержание такого флэш-сайта будет недоступно для поиска). Яндекс делает только первые шаги в этом направлении.
  
• Большинство посетителей веб-сайтов сегодня пользуются низкоскоростным модемным входом. А значит, вся эта красота Вашего веб-сайта им будет просто недоступна. Вариант изготовления веб-сайта в двух версиях – обычной и флэш – обходится заказчику слишком дорого.

Diogenes studio
dikexxx.narod.ru