Проекти­рова­ние меню

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

     Однако, мы знаем:

1. экраны мониторов не безразмерны

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

    Несомненно, разбиваем материалы на части. И проектируем меню.

     Для себя я нашла следующий способ:

Обозначим главную страницу прямоугольником Главная. Первые страницы каждого раздела — кругами(рис.1).

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

Рис. 1 Пример схемы меню

Теперь просматривается вид меню.

Приблизительно такое:

Дальше —« твори, выдумывай, пробуй». Хотя неплохо помнить следующее:

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

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

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

     Учитывая требования к мобильным сайтам и к устройствам сенсорного управления, вложенное меню может закрыть всю страницу. Нежелательно использовать javascript в мобильных, а ссылки, использующие правило css hover «скачут» на сенсорных экранах.

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

     Дизайнеру передаем схему после определения того, где, что и как будет отображаться в меню. А уж он или она разукрасят его подходящим образом, надеюсь.

     Принимая схему меню, показанную на рисунке 1, за основную, можно двигаться дальше, создавая сайт.

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

2016-12-22

◄ Назад 

 Вперед ►