4. Уменьшите визуальный шум

Визуальный шум является одним из основных препятствий для получения легко воспринимаемых Web-страниц. Можно выделить два типа визуального шума:

• 
  Перегруженность
  

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

• 
  Фоновый шум
  

Нет основного главного элемента, отвлекающего внимание, а есть множество элементов визуального шума, которые в совокупности вызывают ощутимое раздражение.
2.Цветовая палитра, шрифты и графика
Цвет, шрифт и графические элементы – основные детали Web-дизайна. Если переусердствовать с одним из них, сайт будет выглядеть неаккуратно. Ниже приведены основные правила эффективного использования цветовой гаммы, шрифтов и графики:

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

• 
  Ограниченная палитра цветов обедняет графику, вследствие чего ускоряет передачу графических элементов по Интернет. Чем меньше используемых цветов, тем меньше размер файла.
  
• 
  Ограниченная палитра смотрится лучше, чем вся радуга. Создайте палитру не больше, чем из семи цветов и последовательно используйте ее для всех страниц сайта.
  

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

Шрифты с засечками – маленькими черточками по краям букв – создают впечатление стабильности, безопасности, профессионализма и долговечности – лучший выбор для серьезного Web-узла. Такие шрифты также хороши для больших фрагментов текста.

Шрифты без засечек создают впечатление передового мышления, чистоты и стремительности – прекрасный выбор для сайта по продаже новейшего оборудования. Эти шрифты подходят для заголовков и небольших фрагментов текста.

4. 
   Используйте шрифты умело. В пределах сайта не обязательно пользоваться шрифтами только одного типа. Лучше всего использовать несколько шрифтов в зависимости от назначения: один – для заголовка, другой – для подзаголовков, и еще один – для основного текста. Но применять больше трех-четырех шрифтов нецелесообразно. Определите стиль для каждого из описанных выше элементов, и последовательно используйте его для всех страниц узла. Например, для заголовка страницы выбирайте всегда один и тот же шрифт одного и того же размера. Например, книга выйдет удачной, если для заголовков использовать шрифт без засечек, а для основного текста – шрифт с засечками.
   
5. 
   Эффективно используйте графические элементы. К графическим элементам относятся и залитые одним цветом области, и линии, и фотографии, и рисунки. В полиграфическом дизайне этими элементами можно пользоваться достаточно свободно, но в Web-дизайне большие фотографии и сложные рисунки, занимающие весь экран, выглядят неуклюже. Кроме того, большие фотографии хранятся в больших файлах, а значит будут долго загружаться. При разработке Web-страниц старайтесь использовать небольшие графические элементы.
   
6. 
   Разбивайте страницу на части с помощью графических элементов. HTML-средства и графические элементы – прекрасный способ разделить страницу на части и привлечь внимание пользователя к отдельным ее деталям.
   

---

3. Текст для Web
1)Опустите лишние слова
Избавьтесь от половины слов на каждой странице, затем уберите еще половину из того, что осталось.

Удаление всех тех слов, которые все равно никто не будет читать, имеет несколько полезных следствий:

1. 
   Это снижает уровень шума на страницах
   
2. 
   Это выделяет то содержание страниц, которое действительно является ценным и полезным
   
3. 
   Это позволяет укоротить страницы так, чтобы пользователи могли видеть каждую из них одним взглядом, не прокручивая экран
   

Есть два особых вида текстов: «общая болтология» и «инструкции».

Никакой «общей болтологии»

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

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

«Общая болтология» напоминает простой светский разговор – так же бессодержательна и существует только ради разговора самого по себе. Но у большинства Web-пользователей нет времени на такие разговоры: они хотят сразу приступить к сути. Поэтому следует устранить как можно больше «общей болтологии».

Никаких «инструкций»

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

Вашей целью должно стать стремление всегда полностью устранять «инструкции», делая все достаточно ясным без лишних объяснений. Если «инструкции» все же действительно необходимы, то сократите их до минимума.
2)Выбор размера шрифта
Избегайте использовать шрифты размером менее 12 пунктов. Некоторые шрифты хорошо работают и при размере в 10 пунктов, но их немного. С другой стороны, буквы не должны быть слишком большими, чтобы Web-страница не смотрелась как таблица для проверки зрения. Всегда используйте четный размер шрифта. Шрифты этих размеров великолепно смотрятся на экране. При использовании нечетных размеров компьютер будет их масштабировать, что непременно отразится на качестве.

---

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

Ниже приведено несколько советов относительно фоновых рисунков.

1. 
   Создайте фоновый рисунок, превосходящий Web-страницу по размеру. Многие рассматривают фоновый рисунок как нечто небольшое, размером примерно 1/1 дюйм, которым как плиткой, выкладывается все пространство страницы. Это совершенно не обязательно! При желании можно создать фоновый рисунок, превышающий по размеру Web-страницу, который будет выходить за пределы окна обозревателя и не будет повторяться по мере пролистывания. Создав такой фон, можно разгрузить Web-страницу.
   
2. 
   Создайте фоновый рисунок в виде полосы, превосходящей по длине ширину Web-страницу. При этом шаблон повторяется рядами по всей странице, но пользователь визуально не может этого определить до пролистывания. Эффект, создаваемый такой техникой, в точности совпадает с эффектом при создании фона целой страницы: можно управлять размещением загруженных и незагруженных областей, не пересекающихся с текстом. При использовании сложного фона упростите другие элементы дизайна (воздержитесь от фотографий) и применяйте как можно меньше цветов, тогда размер файла будет небольшим.
   
3. 
   Чтобы фон быстро загружался, используйте как можно меньше цветов. Чем меньше используется цветов, тем меньше размер файла (не выходите за пределы 15 Кбайт).
   
4. 
   При использовании мелких рисунков позаботьтесь, чтобы составленный из них фоновый рисунок был ненавязчивым. Если фон состоит из повторяющихся мелких элементов, удостоверьтесь, что используемые в них цвета не совпадают с цветом текста и другой помещенной на страницу графики. Сначала создайте рисунок фона, используя по возможности пастельные тона, а затем подберите цвет шрифта, хорошо контрастирующий с фоном.
   

4)Графический и HTML-генерируемый текст
Обычно Web-страницы содержат тексты этих двух типов. HTML-генерируемый текст считается живым, поскольку его можно редактировать в обычном текстовом редакторе

---

, применяя различные гарнитуры шрифтов. Кроме того, этот текст легко обновлять. Чтобы изменить графический текст, придется переделывать графический объект. Графический текст имеет больший размер файла, чем его HTML-эквивалент, а стало быть, будет дольше загружаться.

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

При использовании HTML-генерируемого текста выбор шрифта ограничен, поскольку можно использовать только те шрифты, которые гарантированно будут доступны в системе конечного пользователя. Для заголовка лучше использовать шрифт Arial, а для основного текста – Verdana.


VI. Навигация
Люди не будут пользоваться вашим сайтом, если им не будет понятно, как по нему перемещаться.

Если вы попадаете на сайт, на котором вы не можете найти то, что ищете, или структура которого вам непонятна, то вы не станете пользоваться им долго и, скорее всего, больше на него не зайдете. Каким же образом можно создать «ясную, простую и последовательную» навигацию?
1.Назначения навигации:

1. 
   Помочь пользователю найти то, что он ищет
   
2. 
   Указать текущее местоположение. В Интернете это осуществляется с помощью выделения текущей позиции во всех навигационных меню, линейках и списках, используемых на странице (другими словами, текущие ссылки должны быть выделены). Можно применять сразу несколько способов выделения текущей позиции – например, изменить цвет шрифта и применить жирное начертание. Можно использовать цветовое обозначение разделов. Для каждого раздела применяется свой цвет фона и кнопок, который будет напоминать пользователю о том, где он сейчас находится (используется для больших сайтов, которые содержат множество разделов с огромным количеством страниц в них).
   
3. 
   Навигация дает почву для ног. Заблудиться где-либо – это, как правило, не очень весело. Если навигация разработана правильно, то она дает почву для ног пользователя, а также служит в качестве перил, на которые можно опереться. Используйте «хлебные крошки». Это набор текстовых ссылок, отражающих последовательность перемещения пользователя от домашней страницы к другим страницам Web-узла.
   
4. 
   Навигация помогает понять, что здесь находится. Будучи визуальным образом иерархии, навигация позволяет разобраться в содержании сайта. Другими словами, навигация помогает обнаружить содержание. И эта функция навигации даже более важна, чем функция направления или определения местонахождения.
   
5. 
   Навигация позволяет понять, как пользоваться сайтом. Если навигация разработана правильно, то она самым явным образом показывает пользователю, откуда следует начинать и какие он имеет возможности. Хорошая навигация должна заменить собой все «инструкции» вместе взятые (тем более, что большинство пользователей все равно проигнорирует эти «инструкции»).
   
6. 
   От навигации зависит степень доверия пользователей к разработчикам сайта. Когда мы находимся на каком-то сайте, мы постоянно про себя оцениваем работу дизайнеров. И наша оценка является основным фактором, определяющим наше отношение к сайту. От нее зависит, придем ли мы на этот сайт еще раз или нет.
   

---

2.Условности, применяемые для навигации:

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

Размещение этих элементов в стандартных местах позволяет быстро и без усилий определять их положение, а их унифицированный вид дает возможность быстро их различать на странице.

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

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

Название сайта

• 
  Ссылку на начальную страницу
  
• 
  Ссылку на страницу поиска
  
• 
  Сервис, поиск (для Интернет-магазинов)
  
• 
  Разделы
  

1.Название сайта

Выполняет для сайта ту же роль, что и вывеска на входе в какое-либо учреждение. В Интернете эту «вывеску» нужно видеть на каждой странице. Логотип сайта находится в верхней части страницы, обычно в верхнем правом углу. Это объясняется тем, что логотип представляет весь сайт в целом, и, следовательно, он занимает самую верхнюю позицию в логической иерархии сайта.

• 
  Данный сайт
  

1. 
   Разделы сайта
   

• 
  Подразделы сайта
  

1. 
   Субподразделы сайта
   

• 
  Данная страница
  

1. 
   Области страницы
   

• 
  Элементы страницы
  

В визуальной иерархии каждой страницы можно сохранить эту доминирующую позицию двумя способами: либо сделать логотип самым заметным объектом на странице, либо поместить его так, чтобы он выполнял роль «рамки» для содержания страницы. Конечно, нет смысла делать логотип самым заметным элементом страницы (исключение может составлять только начальная страница сайта). Поэтому лучшее место для него – это верхняя часть страницы.

---

Смотрите также файлы

• Логические парадоксы.docx

• Игра "Права ребенка" Цель знакомство с основными положениями Конвенции о правах ребенка. Задачи.doc

• Научные методы изучения природы.docx

• Публичное акционерное общество новолипецкий металлургический комбинатуправление по обучению и развитию персонала.pdf

• Программа по Пожарной безопасности. Обязательно платное катание на аттракционе. До свиданья, лагерь!.docx