подписка
Подписаться
Александр Белоликов
16/09/2004

Использование анимации в веб-дизайне

Источник: Веб-студия Диогенес

"Давайте будем ходить реально ногами по жизни."
Е. Лахова, лидер движения "Женщины России"

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

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

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


Случай 1. Иллюстрация переходного процесса

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


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

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

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


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


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

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


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

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

Этот прием можно отнести к анимации лишь с некоторой натяжкой.


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

Иногда в веб-дизайне анимацию можно и нужно использовать для привлечения внимания. Если, например, мы хотим выделить в меню название страницы, на которой находится пользователь, мы можем поставить мигающую кнопку. Но "мигнуть" она должна всего несколько раз – только, чтобы обратить внимание. Впоследствии ей достаточно немного изменить цвет.

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


Плюсы и минусы флэш-анимации

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

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


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


Вариант изготовления веб-сайта в двух версиях – обычной и флэш – обходится заказчику слишком дорого.


Подытожим сказанное.

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

Прокомментировать
Читайте также
PTE
05/09/2006
Недорогие но эффективные способы раскрутки интернет магазина? 105
кстати, насколько знаю по амвею, его запрещено рекламировать и продавать как через СМИ так и интернет, запрещено владельцем компании
Форум Удержание клиентов Дизайн и usability
20/09/2004
Беларусь выбирает свои лучшие интернет-магазины
Лучшие электронные магазины Беларуси будут названы по итогам специального конкурса, который уже во второй раз состоится в рамках выставки "ТИБО – цифровой дом 2004", запланированной на декабрь... Подробнее
Главная Новости Удержание клиентов Контент
14/09/2004
Новая технология поможет интернет-торговцам уменьшить возвраты
Особенно полезной в сфере электронной коммерции может стать программа Click2Touch (www.click2touch.com), созданная специалистами Ноттингемского университета (Nottingham Trent University). Назначением данной программы является имитация поведения различных типов тканей: с помощью виртуальных трехмерных образов пользователи смогут "ощупывать" ткань, используя указатель мыши. По словам разработчиков, Click2Touch позволяет детально воспроизвести текстуру той или иной ткани, а также ее поведение, скажем, при сминании или расчесывании
... Подробнее
14/09/2004
Rambler обновляет свой новостной сайт
Портал Rambler представил обновленную версию своего новостного проекта, который к тому же сменил имя и теперь называется Rambler Mass Media (вместо прежнего Rambler Media)
... Подробнее
Главная Новости Удержание клиентов Дизайн и usability
Сергей
30/05/2004
Озон сменил дизайн 22
У Озона максимальная скидка 15% для постоянных клиентов, также товар можно лияно забрать в курьерской службе и не платить за доставку. Если покупать со скидкой, то цена по некоторым книжным позициям выгодней, чем в "Москве" Свернуть
У Озона максимальная скидка 15% для постоянных клиентов, также товар можно лияно забрать в курьерской службе и не платить за доставку. Если покупать со скидкой, то цена по некоторым книжн Еще...
Форум Удержание клиентов Дизайн и usability