Лекция Тема: общие принципы создания web-узла icon

Лекция Тема: общие принципы создания web-узла

Реклама:



НазваниеЛекция Тема: общие принципы создания web-узла
страница3/7
Дата конвертации15.12.2012
Размер0.96 Mb.
ТипЛекция
источник
1   2   3   4   5   6   7
1. /3 курс/Засоби якост_ знань.doc
2. /3 курс/Конспект лекций_3курс.doc
3. /3 курс/Методические указания курсовая.doc
4. /3 курс/Робоча програма_3 курс.doc
5. /3 курс/Самост_йна робота.doc
Рег. № Засоби з контролю якості знань студентів
Лекция Тема: общие принципы создания web-узла
Методичні вказівки до виконання курсових робіт з дисципліни Комп'ютерні технології для студентів
Перший проректор Рогальський Ф. Б
Самостійна робота №1 Реалізація ефекту rollover| за допомогою css|

Модульная сетка в веб-дизайне


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









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

Модульные сетки


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

Веб-страница фактически рассматривается как набор прямоугольных блоков, которые выкладываются в определенном порядке. При этом, как правило, данные располагаются по колонкам, поэтому при верстке применяют термин одно-, двух-, трехколонный макет и т.д. Для примера рассмотрим главную страницу сайта deviantart.com (рис.3.2).



Рис. 3.2. Главная страница deviantart.com

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



Рис. 3.3. Модульная сетка для главной страницы deviantart.com

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

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



Рис. 3.4. Обозначение текста и изображений в макетах

Далее эти обозначения будем применять при рассмотрении наиболее распространенных модульных сеток.
Одноколонная сетка

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

Замечание. Академический дизайн характеризуется минимализмом оформления и даже аскетизмом. Основной упор делается на содержательную часть, а дизайну как таковому практически не уделяется внимания. Преимущественно академический дизайн встречается в научной среде.

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



Рис. 3.5. Одноколонная модульная сетка

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



Рис. 3.6. Главная страница сайта victoriassecret.com

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



Рис. 3.7. Модульная сетка для главной страницы сайта victoriassecret.com
Двухколонная сетка

Это один из самых распространенных вариантов при использовании на сайтах. При такой модульной сетке используется две колонки - одна отводится под основной текст, а вторая используется для навигации и другой полезной информации (рис. 3.8).



Рис. 3.8. Двухколонная модульная сетка

Принципиального значения не имеет, слева или справа располагается колонка с навигацией, встречается и тот и другой вариант.

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

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

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



Рис. 3.9. Трехколонная модульная сетка

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

Трехколонная сетка обеспечивает больше простора для дизайна, ведь в некоторых местах можно объединять колонки, разбивать материал на отдельные фрагменты и визуально отделять один блок от другого. Макет при этом может получиться достаточно сложным, но результат обычно того стоит. Возвращаясь к главной странице сайта deviantart.com, приведем более детальную модульную сетку (рис. 3.10). Отдельные блоки выделены разным цветом.



Рис. 3.10. Модульная сетка для главной страницы deviantart.com

На сайте deviantart.com применяется три колонки, две из них часто объединяются для получения более широкой области. Это оправданно, поскольку требуется разместить 5 фотографий или три колонки с текстом.

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

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

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

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

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

КОНТРОЛЬНЫЕ ВОПРОСЫ.

  1. Перечислите основные модули для представления страницы.

  2. Что такое модульная сетка?

  3. Как рассчитываются пропорции для сетки из двух колонок?

  4. Перечислите принципы построения модульной сетки.

  5. Какие недостатки у двух- и трехколоночной модульной сетки?

Лекция 4.

Тема: ВИЗУАЛЬНОЕ ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ ПРОЕКТА

Цель: изучение принципов построения гипертекстовых информационных систем, определение роли языка гипертекстовой разметки HTML в построении сайтов глобальной компьютерной сети Internet, определение формата и структуры HTML-документов.

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

  • Ссылки-цепочки;

  • Двойные закладки;

  • Метанавигация;

  • Раздельная навигация;

  • Дублирование меню;

  • Ссылка наверх;

  • Поуровневое разделение;

  • Меню-завлекалочки;

  • Комбинированные меню;

  • Выпадающие меню;

  • Каталоги;

  • Иерархические меню;

  • Прокручивающиеся меню;

  • Быстрый переход;

  • Графические меню;

  • Экскурсия.
В зависимости от структуры навигации:

  • Глобальная навигация;

  • Глобальная ссылка "Начало";

  • Цепочные ссылки;

  • Использование многоаспектной классификации;

  • Ссылки на дочерний элемент;

  • Ссылки на "внучатый" элемент;

  • Ссылки на элемент этого же уровня;

  • Ссылки на "родительский" элемент;

  • Цвет ссылок, оформление и поведение ролл-оверов.

Одним из таких методов, на который стоит обратить пристальное внимание, является волшебное правило "семь плюс минус два (7±2)". Этот принцип очень часто применяется для того, чтобы определить количество пунктов в меню навигации на веб-сайте. Рассмотрим подробно представление ссылок в веб-проекте в зависимости от внешнего вида.

Ссылки цепочки.


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



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

Примеры:























Двойные закладки.


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

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

Примеры:





Мета-навигация.


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

Как правило блок мета-навигации состоит из некоторых навигационных элементов и элементов связи. В число навигационных элементов входят Начало (Home), Поиск (Search), Карта сайта (Sitemap) и Индекс (Index). Также в некоторых случаях там располагаются ссылки на сайт главного отделения компании, либо ссылки на сайты верхнего уровня, если данный сайт является частью какой-то тематической группы сайтов. Элементы связи содержат ссылки на страницы, из которых посетители могут узнать о владельце сайта и о том, как с ним связаться. Обычно такие ссылки оформляются как О нас (About Us), Контакты (Contact), Отзывы (Feedback). Блок мета-навигации располагается в верхней части страницы так, чтобы он всегда был видим посетителям. На многих небольших сайтах блок мета-навигации совмещается с блоком основной навигации.

Примеры:







Раздельная навигация.


Иерархическая структура сайта может состоять из 4 уровней. Материалы сайта располагаются на 2 - 4 уровнях. Раздельная навигация - это частный вариант Каталога. В иерархической структуре важно быстро перемещаться между 3 и 4 уровнями, но нет необходимости быстро перемещаться между 1 и 2 уровнем, так как на 1-ом уровне отсутствует контент.

Вся иерархия делится на начальную страницу и тематические страницы. Начальная страница показывает 1 и 2 уровни иерархии (ссылки). Щелкнув по ссылке, посетитель может сразу перейти на 2 уровень - страницу определенной темы. Эта тематическая страница содержит список 3 и 4 уровней. Вся текстовая информация выводится на тематических страницах. Посетители переходят между 3 и 4 уровнями с помощью ссылок в списке. В дополнение можно использовать ссылки-цепочки, чтобы показать структуру и дать посетителям возможность быстро перейти на первую страницу.

Начальная страница



Тематическая страница




Дублирование меню.


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

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

Примеры:








Ссылка наверх.


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

Выберите удобное место на странице и поместите там ссылку "наверх страницы" или просто "наверх". Оформите ее как текст, либо используйте пиктограмму. Удобным местом, как правило, является конец абзаца или смыслового блока текста. Ссылка ссылается на "якорь" (), помещенный в начале страницы.

Примеры:





Поуровневое разделение.


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

Предложите пользователю способ поиска нужной информации путем последовательного наложения фильтров.

При первом показе выведите все данные, которые удовлетворяют условиям фильтра по умолчанию. Этим условием может быть и условие "фильтр выключен". Предоставьте пользователю изменить условие в фильтре и выведите результат фильтрации еще раз. По мере наложения фильтра за фильтром показывайте как предыдущие фильтры, так и фильтры, которые пользователю еще предстоит выбрать.


Примеры:



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



После того, как выбраны "grill (жареная)" и "hors d'ouvre", пользователю выводится окончательный результат:


Меню-завлекалочки.


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

Покажите часть меню с дополнительной "расширяющей" ссылкой.

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


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

Примеры:





Комбинированные меню.


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

Совместите все меню в одном вертикальном меню. Для различных частей меню используйте не подзаголовки и просто различные визуальные оформления

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

Примеры:





Выпадающие меню.


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

Воспользуйтесь выпадающим меню.

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

Примеры:





Каталог.


Существует несколько групп пунктов меню. Пользователю надо выбрать один пункт из группы, при этом ему надо показать, какие другие пункты в этой группе присутствуют.

Сведите вместе первый и второй уровень ссылок.

Разместите все пункты второго уровня под заголовками первого уровня. Укажите числом, сколько пунктов в каждой группе присутствует. Если пользователь выбирает какой-либо пункт, на странице укажите непременно все остальные пункты этой же группы, чтобы пользователь мог быстро перейти на другой пункт. Выбранный пункт должен быть визуально выделен.

Примеры:





Иерархические меню.


Сайт имеет неглубокую структуру, как правило, 5-6 уровней, в то время как каждый уровень содержит множество элементов.

Покажите пройденный по структуре путь.

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

Примеры:





Прокручивающиеся меню.


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

Покажите картинку в виде прокручивающегося меню.


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

Примеры:









Быстрый переход.


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

Предоставьте посетителям возможность сделать выбор с помощью выпадающего списка (combobox).

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

Примеры:





Графические меню.


Место на странице под меню ограничено.

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



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

Примеры:





Экскурсия.


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

Покажите посетителям, как выполнить операцию, на наглядном интерактивном пошаговом примере.

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

Примеры:



Рассмотрим теперь структуру пользовательского интерфейса в зависимости от структуры навигации.

Глобальная навигация.


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

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

Примеры:




Глобальная ссылка "Начало".


Для представления данного вида ссылки на главную страницу; применяются четыре основных способа: ссылкой на главную страницу был логотип, плюс к тому явная ссылка "Home" в верхней части страницы; логотип ссылался на главную страницу; логотип являлся ссылкой на главную страницу, плюс к тому явная ссылка "Home" в нижней части страницы; логотип связан с главной верхнеуровневой страницей.




Использование многоаспектной классификации.


В отличие от обычной (простой) иерархической схемы, многоаспектная классификация даёт пользователю возможность искать нужный элемент более чем по одной категории. Например, некоторые покупатели драгоценностей могут быть более заинтересованы в просмотре специфических категорий (серьги, ожерелья), в то время как другим более интересен просмотр по материалам (золото, серебро). "Материал" и "тип" - примеры граней/аспектов; серьги, ожерелья, золото и серебро - примеры содержимого граней.



Многогранная классификация может быть использована в интерфейсе расширенного поиска и/или быть составной частью навигационного интерфейса всего сайта.





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

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

При использовании основных и второстепенных граней следует придерживаться следующих аспектов:

  • Расположить наиболее значимые грани на самом видном месте на странице;

  • Отобразить на странице лишь первичные (основные) грани, в то время как вторичные грани представлены либо ссылками на их значения, либо помещены в выпадающее меню.

Ссылки на дочерний элемент.




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




Ссылки на "внучатый" элемент.




Ссылки, позволяющие опуститься на два уровня ниже текущей страницы; дают возможность быстрого перехода к подразделам текущей категории. Стиль исполнения: простой список, навигационная панель, всплывающее меню, выпадающее меню.

Положение на странице





Ссылки на элемент этого же уровня.




Ссылки предоставляющие пользователям доступ к страницам, имеющим того же "родителя"; позволяют пользователю перемещаться по текущему уровню иерархии сайта. Стиль исполнения: простой список, навигационная панель, всплывающее меню, выпадающее меню.

Положение на странице





Ссылки на родительский элемент.




Ссылки предоставляющие пользователям доступ к менее подробной информации; позволяют переместиться на уровень выше. Стиль исполнения: навигационная панель, простой список, выпадающее меню.

Положение на странице





Цвет ссылок, оформление и поведение ролл-оверов.

Первичный цвет ссылок.




50% Синий

13% Красный

12% Чёрный

12% Серый

6% Зелёный

5% Коричневый

2% Пурпурный

Визуальное выделение.



Поведение ролл-овера: отсутствует, изменение цвета текста ссылки, подчёркивание при наведении мыши на ссылку (в неактивном состоянии подчёркивание отсутствует), изменение фонового цвета ссылки (для HTML-текста), изменение графического изображения (для текста, выполненного графикой).

О мифе "семь плюс минус два".


Одним из таких методов, на который стоит обратить пристальное внимание, является волшебное правило "семь плюс минус два (7±2)". Этот принцип очень часто применяется для того, чтобы определить количество пунктов в меню навигации на веб-сайте. Правило это вошло в практику, чтобы ускорить процесс дизайна, ну и чтобы объективно объяснить принятое решение заказчику.

В 1956 году психолог Георг Миллер опубликовал результаты своего исследования. С тех пор правило 7±2 стало сверхпопулярным среди дизайнеров интерфейсов. Более внимательное изучение работ Миллера показывает, что он не делал в ней никаких выводов, которые можно применить к дизайну веб-навигации.

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

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

Хоть магическое правило Миллера 7±2 и напоминает нам об умеренности, его нельзя применять при проектировании навигации и использовать его как универсальное решение. И уж тем более, это правило не должно восприниматься как абсолютный закон. С другой стороны, заваливать посетителей сотней меню тоже безответственно. Проблема с путаницей и информационной перегруженностью разумеется существует, и наверняка есть определенное число пунктов меню, которые можно показать посетителю на странице, при этом не вызывав у него паники. Но число это никоим образом не вытекает из правила Миллера.

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

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

Исследования показывают, что в общем случае "широкие" структуры работают лучше, чем "глубокие". Как оказалось, пользователи лучше работают и быстрее находят информацию в "неглубоких" структурах. Естественно, что большинство самых популярных веб-сайтов в современном Web имеют широкую структуру: вполне обычно увидеть на известных порталах и новостных сайтах по 50-100 (а то и больше) ссылок на главной странице.

А теория такова: для постоянного выбора категорий и подкатегорий при работе с глубокой структурой требуется больше усилий, чем для просмотра большого количества ссылок при работе с широкой структурой.

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

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

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

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

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

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

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

Внимание: этот метод может привести к проблемам с юзабилити. Старайтесь не получить в результате меню-загадки. Всегда четко обозначайте на странице такие меню.

5. Сделайте информацию наглядной. Наглядное представление информации - сравнительно новый метод, разрабатываемый такими специалистами по интерфейсам, как Бен Шнайдерман (Ben Schneiderman). Использование пространственных или визуальных методов дизайна позволяет облегчить представление сложных данных и их взаимосвязей. Однако такие методы не везде можно применить, а во многих случаях они даже противопоказаны.

КОНТРОЛЬНЫЕ ВОПРОСЫ.

  1. По каким принципам происходит деление навигации веб-проекта?

  2. Перечислите основные типы навигации.

  3. Какой формат представления навигации вам приемлем и почему?

  4. Существует ли стандарт представления количества пунктов навигации. В чем его преимущества и недостатки?

  5. Основной принцип построения навигации для веб-сайта.

  6. Какие чаще всего используемые методы навигации по широкой структуре вы знаете?

Лекция 5.

Тема: ДИЗАЙН WEB-ПРОЕКТА

Цель: Изучить основные элементы веб-страниц, определить основное направление в оформлении в зависимости от стандартных параметров элементов, уметь анализировать предлагаемые сайты.


Познакомившись с теоретическими основами дизайна, мы можем теперь перейти к вопросам более практическим.

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

Первая страница.

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

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


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


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

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

Отсутствие другого содержимого позволяет вывешивать на сплэш-странице довольно объемистую (иногда до 100 Кб) анимированную графику. Однако и простой, без анимации логотип фирмы в центре пустой страницы прекрасно справится со своей задачей. Кроме психологической артподготовки посетителя, приучения его «малыми дозами» к стилю лежащего впереди сайта, сплэш-страница способна решать и вполне практические задачи: русскоязычные сайты нередко выносят на нее меню выбора языка и/или кодировки, а особо заботливые любят здесь же объявлять о предпочтительных для просмотра этого сайта броузерах и даже указывать оптимальные размеры окна.
1   2   3   4   5   6   7



Реклама:

Похожие:

Лекция Тема: общие принципы создания web-узла iconЛабораторная работа №4 Тема: Шаблоны и модульное построение узла Цель работы: изучить новые функции php: изучить целесообразность, важность и основные принципы использования шаблонов при построении Web узла
Причем, данная страница должна быть реализована посредством трех шаблонов (содержательное наполнение каждого шаблона представлено...

Лекция Тема: общие принципы создания web-узла iconМетодические рекомендации к выполнению лабораторной работы №4 по курсу технология программирования шаблоны и модульное построение узла
Для построения Web-­узла на основе шаблонов необходимо оформить похожие части узла в виде модулей. B настоящей главе описаны основные...

Лекция Тема: общие принципы создания web-узла iconЛабораторная работа №5 Тема: Динамически создаваемые шаблоны Цель работы: изучить новые функции php; изучить целесообразность, важность и основные принципы динамически создаваемых шаблонов
Задание: На основе принципов динамически создаваемых шаблонов при построении Web-узла разработать сценарий с использованием языка...

Лекция Тема: общие принципы создания web-узла iconДокументи
1. /Конспект лекций/Тема 1. Основные понятия теории цепей (лекция 1,2,3).doc
2....

Лекция Тема: общие принципы создания web-узла iconТема 3: Принципы менеджмента
Принцип – основное правило, руководящая идея, основное требование. Принцип определен объективными закономерностями управления, он...

Лекция Тема: общие принципы создания web-узла iconКурс лекций " Менеджмент " Тема 1: Введение в менеджмент. Тема 2: Организация как объект менеджмента. Тема 3 Принципы менеджмента

Лекция Тема: общие принципы создания web-узла iconЛабораторная работа №1 Тема: Динамические Web-страницы Цель работы
Задание: Разработать Web-страницы с динамическим содержимым, обеспечивающим отображение контактной информации о пользователе

Лекция Тема: общие принципы создания web-узла iconЛабораторная работа №6 Тема: Работа с базой данных Цель работы: изучить новые функции php; изучить особенности Mysql по работе с базами данных с помощью интегрированных программных средств
Задание: Разработать фрагмент Web-узла обеспечивающий работу с одной таблицей в соответствии с вариантом. Под работой с таблицей...

Лекция Тема: общие принципы создания web-узла iconJavaServer Pages
Цель jsp состоит в упрощении создания и управления динамическими Web страницами

Лекция Тема: общие принципы создания web-узла iconДокументи
1. /Айзекс С - Dynamic Html Секреты Создания Интерактивных Web-Страниц (2001) Scan.djvu

Лекция Тема: общие принципы создания web-узла icon1. Форсировка двигателя
Нет такого узла двигателя, которым можно было бы пренебречь. Каждая отдельная работа по форсировке, будь то регулировка, тщательная...

Разместите кнопку на своём сайте:
Документы


База данных защищена авторским правом ©zi.zavantag.com 2000-2013
При копировании материала обязательно указание активной ссылки открытой для индексации.
обратиться к администрации
Документы