Поиск

Статьи » Web-дизайнИспользование анимации в Web-дизайне

Написал: Alex V, 8 июля 2006 | Мнений 0 | Просмотров: 4007
Рейтинг: 


Использование анимации в Web-дизайне
Автор: Александр Белоликов

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-------------------------------------
Александр Белоликов - специалист Веб-студии "Диогенес".
Источник: (Oborot.ru): "Использование анимации в веб-дизайне

Советуем обратить внимание на похожие новости

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

10 советов по созданию рекламных баннеров
Предприниматели часто обращаются ко мне с вопросом о том, как создать эффективно работающий рекламный баннер. Чтобы ответить на него широкой общественности, я решил написать эту статью, объединив в ней 10 лучших на мой взгляд приемов делового дизайна.

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


Комментарии пользователей
Для того чтобы оставить комментарий нужно залогиниться

Добавить комментарий

Ваше Имя:
Ваш E-Mail:
Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Введите код:

Френдзона


Видео материалы



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

4 модели высокоприбыльного онлайн-бизнеса...
Меня постоянно одолевают вопросами: \"Какую модель онлайн-бизнеса мне стоит выбрать? Может...

Как избавиться от каши в голове / Урок 4...
Видеоурок # 4. Синхронизация Google календаря с программой SunbirdВ четвертом уроке мы с ...

Как избавиться от каши в голове / Урок 3...
Видеоурок # 3. Доступ к календарю с мобильникаВ третьем уроке мы с вами узнаем как можно ...

Как избавиться от каши в голове / Урок 2...
Видеоурок # 2. Работа с Google календаремКак понятно из названия, во втором видео мы с вам...

Как избавиться от каши в голове / Урок 1...
Видеоурок # 1. Простой рецепт \"свежей\" головыВ первом видеоуроке мы с вами познакомимся....

Конкуренция в интернет-бизнесе: достойная...
Видео-подкаст о том, почему волнение о конкуренции это полный идиотизм....

Формула Толстокожести Или Как Себя Вести,...
Успех в интернет-бизнесе имеет побочный эффект. Он может кому-то не понравится… Вы мо...

ВИДЕО: Секреты e-mail маркетинга прямиком...
Факт! Если бы моя мама вела свой интернет-бизнес, в e-mail копирайтинге она бы переплюнула...


Информация

Нам часто пишут и задают один и тот же вопрос, "Работа в сети это реально?" или "С чего начать свой заработок в сети?"... Уважаемые! Для этого и был создан этот сайт, пожалуйста пользуйтесь поиском и читайте заметки и статьи. Советую начать с раздела "Работа в интернете", там находиться больше +250 статей и больше +500 способов заработка в интернете. С какого начать? Где больше денег? Это уже решать Вам! Работайте там - где Вам интересно работать и тогда у Вас все получиться. А если, что-то не понятно комменируйте статьи и мы ответим на ваши вопросы! Удачного начала!


Это интересно


Новое


Опрос

Оцените Дизайн Сайта

Лучше Всех
Отлично
Очень Хорошо
Хорошо
Так себе
Даже незнаю


Топ комментов

Alex V
Работа и труд, все перетрут!
ICQ: 206983285
комментариев: 83

Mhz-Serge
Жизнь - это хорошо сделанное 3D
ICQ: 318057
комментариев: 29

rombel
Все будет хорошо
ICQ: 393549222
комментариев: 13

Alem

ICQ: 444688221
комментариев: 5

Yury_md

ICQ:
комментариев: 4