Графика и дизайн -> Разное -> Веб-дизайн и анимация

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: www.diogenes.ru