ВЕБ-дизайн и анимация

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

В попытках заинтересовать посетителей страниц авторам веб-страниц приходится использовать разнообразные типы содержимого страниц (анимацию, звук, видео). Анимация «освежает» сайт, делает его более динамичным. Но всегда следует учитывать, что анимация должна смотреться органично на странице, не отвлекать, а акцентировать внимание, иными словами ее не должно быть много и она не должна рябить в глазах посетителей. Ведь из-за обилия анимации (GIF и Flash) посетителю будет сложно сосредоточиться на чем-то конкретном, поэтому здесь необходимо чувствовать меру.

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

Случай 1. С помощью анимации веб-дизайнер передает переходный процесс

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

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

Случай 2. Смена отображаемой информации

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

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

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

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

Случай 3. Отображение объемных структур

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

Случай 4. Слайд-шоу

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

Случай 5. Привлечение внимания

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

Дизайн сайта — это долгая кропотливая работа, требующая специальных знаний и навыков, а также идеального вкуса и врожденного чувства стиля.