Структуру можно построить следующим образом
1. Составьте список содержимого сайта. Это делается на стадии формирования концепции.
2. Сгруппируйте элементы списка. Разбейте содержимое списка на логические группы.
3. Создайте категории. После разделения содержимого на группы станет просматриваться некая схема. Отдельные группы будут похожи, их следует объединить в категории. По возможности число категорий должно быть минимальным.
4. Постройте структуру. Категории представляют собой первый уровень, группы - второй, подгруппы - третий.
Примером может послужить содержание данного реферата:
I. Построение сайта ________ категория
1.Схема сайта ___________ группа
· Построение структуры
· Преобразование структуры в диаграмму _______ содержимое
Структура, созданная на основе хорошо организованного списка содержимого сайта.Лучше иметь 5-7 основных категорий, в каждой из которых содержится не более двух уровней подкатегорий.
Преобразование структуры в диаграмму
Структура - средство, необходимое для создания диаграммыWeb-узла, которая, в свою очередь, ляжет в основу его карты. Создать диаграмму просто. Каждую страницу сайта нарисуйте в виде прямоугольника. В верхней части поместите домашнюю страницу, под ней по горизонтали - основные разделы сайта. Под каждом разделом нарисуйте прямоугольники, соответствующие подразделам структуры. Построив диаграмму, можно приступать к созданию схемы навигации. Можно разделить и содержимое другой страницы. При добавлении такой детализации диаграмма увеличится на один уровень.
Пример:
Рис. 2. ?Диаграмма узла служит эскизом его карты
Созданная диаграмма - лишь основа карты узла. На следующем уровне создания карты сайта необходимо добавить в диаграмму линии со стрелками, обозначающие связи между страницами.
Визуальный интерфейс Web-страниц
Создание страниц для просмотра, а не для чтения
Чтобы добиться лучшего понимания сайта:
· Создайте ясную визуальную иерархию на каждой странице
· Используйте обычаи и условности
· Разбейте страницы на четко разделенные области
· Покажите ясно то, по чему можно щелкать мышью
· Уменьшите визуальный шум
Ясная визуальная иерархия
Нужно организовать внешний вид элементов страницы (визуальных подсказок) таким образом, чтобы они ясно и четко подсказывали отношения между этими элементами - какие элементы связаны между собой, какие являются частями других.
· Чем более важный элемент, тем более он заметен на странице.
Очень важный элемент
Несколько менее важный
Наименее важный
При создании Web-страницы разделите ее на три части: большую - для самой важной информации, среднюю - для менее значимой информации, и малую - для наименее важной информации. Это стратегия «большой, малый, средний». Она не позволяет находиться на странице двум элементам с одинаковым приоритетом и таким образом облегчает ее чтение и перемещение по сайту.
· Элементы, логически связанные между собой, должны быть связаны и визуально.
Например, вы можете показать, что какие-то элементы равнозначны, сгруппировав их под одним заголовком, либо применив к ним одинаковый стиль, либо поместив их в одну четко отделенную область страницы.
| Книги Музыка Спорт Путешествия Увлечения | ххх | |
· Элементы представляются в виде вложений, если они являются частями друг друга.
Например, название раздела «Книги по программированию» будет находиться над заголовком какой-то конкретной книги по этой теме, включая в себя все содержимое части страницы (эта книга является частью данного раздела). Под заголовком этой книги, в свою очередь, будет включено ее описание.
Мы каждый день сталкиваемся с визуальными иерархиями - будь это на бумаге или в Интернете. Но обычно мы воспринимаем их так быстро, что не успеваем это осознать, и начинаем смутно догадываться об их существовании, только когда нам не удается провести их быстрый анализ, т.е. когда их визуальные подсказки (или их отсутствие вынуждают нас задумываться.
Хорошая визуальная иерархия всегда экономит наши усилия по начальному восприятию страницы и помогает организовать и систематизировать содержание таким образом, чтобы мы могли почти мгновенно понять его в целом.