Анимация в Веб-Дизайне при создании сайтов

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

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

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

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

Анимация в Веб-Дизайне при создании сайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Компьютер и Windows

Главная сайта | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 473 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 |





@Mail.ru