Веб-студия: создание сайта, раскрутка сайта, веб-дизайн, редизайн, продвижение сайта, оптимизация сайта

Создание сайтов. Продвижение сайтов. Оптимизация сайтов

8-916-134-36-30; 8-903-125-43-31

 

Анимационные кнопки

  На главную

 

 

Поиск по сайту

Вверх
Анимационные кнопки
Восприятие графики
Градиентные фоны
Графические форматы
Оформление таблиц
Дизайн сайта 1
Дизайн сайта 2
Дизайн сайта 3
Дизайн сайта 4
Дизайн сайта 5
Зачем нужна графика
Мозаичные фоны
Обрамление фото 1
Обрамление фото 2
Обрамление фото 3
Обрамление фото 4
Обрамление фото 5
Плавные кривые
Плавные кривые 2
Плавные кривые 3
Плавные кривые 4
Плавные кривые 5
Применение теней
Прозрачность
Псевдографика
Псевдографика (2)
Псевдофоновый рисунок
Стили веб-дизайна
Сжатие графики
Специфика веб-графики
Фон сайта
Фотоблог
Вопросы и ответы

  

 

Как создаются графические анимационные кнопки (меняющиеся кнопки). О недостатках графических кнопок.

  • При создании дизайна сайта систему навигации (гиперссылки) часто выполняют в виде графических анимационных кнопок (меняющихся кнопок). Иногда их называют "ролловерами" (англ. rollover).


 

 

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

 

 

Исходная кнопка

 

При наведении 

 

При нажатии

 

Результат

             

создание сайта. веб-дизайн

+

создание сайта. веб-дизайн

+

создание сайта. веб-дизайн

=

Веб-дизайн

3,938 Кб 

 

3,692 Кб 

 

4,169 Кб 

 

11,799 Кб 

 

Графическая кнопка может быть выполнена с применением одного, двух или трёх различных графических рисунков. В последнем случае одна анимационная кнопка имеет три состояния (исходное, при наведении указателя мыши и при нажатии клавиши мыши).

 

Примеры 1-4 графических анимационных кнопок (меняющихся кнопок).

 

1

2

3

4

Веб-дизайн Веб-дизайн Веб-дизайн Веб-дизайн

 

  • В примерах 1-4 для создания 4 анимационных кнопок используются 16 различных рисунков общим размером ≈ 60 Кб.

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

Основные недостатки

применения графических анимационных кнопок (меняющихся кнопок) при создании дизайна веб-сайта:

  1. Поддержка (просмотр без ошибок) осуществляется не всеми Интернет-обозревателями (браузерами).

  2. Значительное увеличение времени загрузки страниц сайта.

    Примечание: данная страница сайта имеет время загрузки 43 сек. при скорости соединения 28.8 Кбит/с (23 сек. при 56 Кбит/с).

  3. Большая, по сравнению с текстовыми гиперссылками, сложность обновления кнопок при изменении сайта (добавление и удаление веб-страниц, изменение названия страниц, изменение расположения веб-страниц в системе навигации и т.д.).

  4. Трудоёмкость изготовления кнопок для сайта с большим количеством веб-страниц.

  5. Занятие кнопками большого пространства на страницах сайта.

  6. Отвлечение внимания посетителей сайта от основного содержания сайта: товаров и услуг.

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

  8. Чем сложнее геометрическая форма анимационной кнопки, тем больше вероятность затруднения размещения на ней текстового названия страницы сайта при развитии сайта (при увеличении общего числа html страниц сайта).

 

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

 

Количество графических кнопок и соответствующих им графических рисунков в зависимости от числа базовых html страниц (усредненное):

 

Число базовых html страниц сайта

Число графических кнопок, не менее

Число графических рисунков кнопок, не менее

10

10

30

50

50

150

100

100

300

150

150

450

200

200

600

300

300

900

400

400

1 200

500

500

1 500

 

 

Предпосылки при расчётах:

  1. Одна анимационная кнопка имеет три состояния: исходное, при наведении указателя мыши и при нажатии клавиши мыши.

  2. Сайт соответствует требованиям технического задания на разработку сайта. Предполагается, что с каждой страницы сайта будет обеспечен переход на любую другую страницу сайта не более чем через один переход (через одну гиперссылку). С каждой страницы сайта должен быть обеспечен переход (установлена гиперссылка) на головную страницу сайта.

  3. Головная страница сайта должна содержать гиперссылки, обеспечивающие переход с нее на не менее чем 90% страниц сайта, но не более чем 150 гиперссылок.

  4. Глубина сайта оптимальна.

 

Примечание 

  • На практике число графических кнопок будет больше на 30% и более. Например, для сайта из 200 базовых html страниц число кнопок будет не 200, а 250-300. Связано это с тем, что для обеспечения быстрой и удобной системы навигации сайта приходится создавать дополнительные кнопки, т.е. усложнять систему навигации сайта.

  • Экспериментальным путём при исследовании формы символов выявлено, что наиболее быстро и точно распознаются символы, контур которых имеет резкие перепады.

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

О целесообразности использовании текстовых ролловеров в системе навигации бизнес-сайта...

 

 

Резюме

 

Заказывать графические анимационные кнопки (меняющиеся кнопки) при создании дизайна сайта или при редизайне сайта следует, лишь имея на то веские основания.

 

 

Создание сайта. Веб-дизайн

Основные разделы

 

О веб-студии
Услуги
Прайс-лист
Бизнес-планы
Бизнес-проекты
Веб-дизайн
Графика сайта
Договор на сайт
Задание на сайт
Заказать сайт
Интернет-конкурсы
Интернет-магазин
Интернет-маркетинг
Интернет-реклама
Ключевые слова
Контент сайта
Научный веб-дизайн
Оптимизация сайта
Поддержка сайта
Поисковая система
Портфолио
Раскрутка сайта
Редизайн
Рейтинг сайта
Рекомендации
Сайты для бизнеса
Сайт по недвижимости
Создание сайта
Справочник
Стоимость сайтов

 

 

 

Пыхтин Сергей Владимирович

(автор сайта)

 


 

 

Rambler's Top100 Rambler's Top100

 

 

 

 

 Skype: antula-moscow | antula@antula.ru

Создание видеороликов | Архитектурные проекты | Заказать сайт

Copyright © 2002-2017 Сергей Пыхтин