ВЕБ-ДИЗАЙН І АНІМАЦІЯ, Flash, Інтернет-технології, статті

www.diogenes.ru

“Давайте будемо ходити реально ногами по життю.”
Е. Лахова, лідер руху “Жінки Росії”

Резюме

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


Ще недавно анімація у веб-дизайні була дуже популярна. Вважалося, що велика кількість анімованих елементів при розробці веб-дизайну є показником кількості праці (читай “грошей”), вкладених у розробку сайту. І це дійсно так. Створити гарну анімовану картинку дуже непросто. Мало того, що вона повинна виглядати красиво – її “вага” не повинен бути занадто великим. Інакше вона буде занадто довго грузиться – користувач просто не стане чекати закінчення завантаження.
Аналогічна ситуація зараз відбувається з флеш-роликами. Флеш-ролики – це та ж анімація, але виконана на сучасному рівні. Безумовно, все це виглядає дуже ефектно. І для створення презентаційних сайтів, розрахованих на користувачів з якісними лініями зв’язку, флеш-анімація у веб-дизайні просто незамінна.
Але давайте спробуємо розібратися в доцільності використання анімованих картинок на сайтах інформаційної спрямованості.
.
Безумовно, рухомі картинки приваблюють набагато більше уваги, ніж звичайні, статичні. Відповідно, користувач гірше сприймає все інше зміст сторінки, так як основна його увагу приділено саме рухомим картинкам.
Коріння цього явища криються в нашому далекому минулому. Тоді периферійний зір, гостро реагує на рухомий предмет, часто рятувало життя людині. Наприклад, коли на нього полював якийсь звір. Зараз цей інстинкт для нас не так важливий (хоча і безумовно корисний, особливо на дорозі). Тим не менш, він є – ми чуйно реагуємо на рух, вловлює периферійним зором.
Тому, якщо ми читаємо текст на сторінці, а в кутку “ворушиться” маленька картинка, це нас дуже відволікає. І часто дратує.
Періодично наші Замовники просять нас зробити веб-дизайн з елементами анімації. Особливо подобаються анімовані логотипи. І нам доводиться довго розмовляти і переконувати Замовника, що робити цього ні в жодному разі не можна. Особливо щодо логотипу. І, як правило, нам вдається переконати своїх Замовників і розробити веб-дизайн без анімації або з її мінімальним використанням.
Тим не менше, використання анімації у веб-дизайні в деяких випадках не тільки виправдано, але й дуже корисно. Але, перш ніж почати розробку анімації, слід задати собі питання – чи можна того ж ефекту в веб-дизайні добитися і без анімації?

Випадок 1. За допомогою анімації веб-дизайнер передає перехідний процес.

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

Випадок 2. Зміна відображуваної інформації.

Дуже зручно використовувати анімацію у веб-дизайні для відображення декількох інформаційних елементів в одній і тій же області екрану.
Наприклад, відображення пояснень до карти. Коли миша наводиться на певну ділянку карти, в кутку екрану з’являється інформація, що відноситься до цієї ділянки.
Також має сенс використовувати анімацію у веб-дизайні для відображення активних областей (наприклад, на тій же карті). При наведенні миші активна область починає якось виділятися (наприклад, блимати). Такий ефект в веб-дизайні позначає зрозумілою користувачеві мовою, що при натисканні на область щось станеться. А ось що саме – повинно бути вказано в підказці.
Важливо при цьому, щоб ефект анімації проявлявся тільки при наведенні миші на область, а не був присутній весь час. Уявіть собі, що на карті всі активні області будуть постійно блимати і переливатися різнокольоровими вогниками. З такою картою буде дуже важко працювати.

Випадок 3. Відображення об’ємних структур.

Екран комп’ютера дає тільки двовимірне уявлення про об’єкт. Тому зображення тривимірних структур ставить перед веб-дизайном непросту задачу. Звичайно, щоб дати користувачеві повне уявлення про такий об’єкт, можна об’єкт представити в різних проекціях. Але часто ефективнішим (і ефектним) є анімоване зображення об’єкта, що дозволяє користувачеві вивчити його з усіх сторін. При цьому рух об’єкта повинно бути досить повільним – щоб користувач міг спокійно розглянути його. Кращим варіантом, звичайно, є керована анімація – коли користувач сам може повертати об’єкт як йому потрібно. Але це вже досить складна анімація, яка виконується засобами флеш-програмування. Та й “вага” такої картинки буде вельми не малий.

Випадок 4. Слайд-шоу.

Дуже популярний останнім часом прийом у веб-дизайні, що дозволяє користувачеві переглядати серію зображень, не перегортаючи при цьому веб-сторінки. Як правило, слайд-шоу забезпечується якимось “пультом управління “, який дозволяє як переглядати зображення по одній картинці, так і запустити процес безперервного показу змінюються ілюстрацій.
Цей прийом веб-дизайну можна віднести до анімації лише з деякою натяжкою.

Випадок 5. Залучення уваги.

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

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

Розглянемо флеш-анімацію.
Це дуже потужний інструмент, що дозволяє робити веб-сайти, які не тільки чудово виглядають, але й зручні для користувача. Але:
• Жодна російська пошукова система поки не індексує текст в флеш-роликах таких веб-сайтів (а значить, зміст такого флеш-сайту буде недоступне для пошуку). Яндекс робить тільки перші кроки в цьому напрямку.
• Більшість відвідувачів веб-сайтів сьогодні користуються низькошвидкісних модемним входом. А значить, вся ця краса Вашого веб-сайту їм буде просто недоступна. Варіант виготовлення веб-сайту в двох версіях – Звичайною і флеш – обходиться замовникові занадто дорого.
Тому ми не рекомендує своїм Клієнтам захоплюватися флеш. Але при цьому скрупульозно відстежуємо інформацію, присвячену розширенню застосування флеш в розробці веб-сайтів. І як тільки Яндекс оголосить про початок індексації флеш-роликів, настане час більш активного використання технології флеш в розробці веб-сайтів.
Висновок зі сказаного наступний. Якщо анімацію вживати з конкретними цілями і не зловживати нею, то це цілком прийнятно. Проблеми з’являються, коли анімовані зображення використовують просто так – Щоб показати, що веб-дизайнер це вміє робити. Або застосовуються в такій кількості, що користувач без роздратування вже дивитися на них не може. Навіть якщо ці картинки – твори мистецтва. Важливо пам’ятати: все таки користувач прийшов на Ваш веб-сайт отримати інформацію, а не милуватися майстерністю веб-дизайнера.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*