—»     —»   Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы
  Раздел: Меню и Навигация   Комментариев: 1  

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

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

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

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

1. Используйте понятные и знакомые тексты для ссылок

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

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Impulse Development

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

За исключением совсем уже особых случаев, не стоит называть вашу ссылку «О нас», как «Информация о компании», или ссылку «Услуги», как «То, что вы предлагаем». Люди на подсознательном уровне ищут скорее знакомые им слова, и часто избегают дизайнов, в которых имена данных ссылок как-то творчески обыграны.

2. Четко разграничивайте основные и вторичные разделы

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

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

Рассмотрим следующий пример:

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Edwards & Hampson

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

Схожий пример:

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Deliciouslyorkshire

На сайте Deliciouslyorkshire основные ссылки находятся на ровне с, казалось бы, средними по значимости ссылками (Рецепты, Акции, Полезные ссылки). Оба типа ссылок одинаково оформлены и ничем друг от друга не отличаются.

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

С другой стороны, есть два вот таких примера сайтов, в которых как раз реализовано визуальное отличие между ссылками, однако, ссылки средней важности всё же лег доступны:

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Designers Couch

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

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

J Taylor Design

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

3. Располагайте ссылку «Акция» с правой стороны

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

Вот вам несколько примеров таких сайтов, в которых такого рода ссылки размещены по правую сторону навигационного меню:

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Sharify

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Xero

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

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

- Не забывайте про поле поиска

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

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

На сайте Washtenaw Community College строка поиска размещена с правой стороны навигационной панели:

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Washtenaw Community College

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Westcoast Poppin

4. Избегайте внезапных выпадающих меню

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

Ниже приведено несколько хороших примеров таких горизонтальных навигаций с выпадающими меню:

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

QN5 Music

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Kinder-aktuell

К сожалению, встречаются сайты, на которых не применяется даже такой простенький маркер. Ниже приведем несколько примеров сайтов с «сюрпризными» выпадающими меню:

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

webstudios

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

billoneil.com

5. Различные тенденции и ходы

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

- Горизонтальная навигация с вкладками

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Owltastic

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Inkd

- Горизонтальная навигация без панели

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Full Cream Milk

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

My Favorite Thing

- Горизонтальное меню под основной шапкой сайта

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

The Mindset Game

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Lanbruk’s Gunya

- Горизонтальная навигация с пиктограммами и текстом

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Mission Bicycle Company

- Горизонтальная навигация с пронумерованными ссылками

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Glocal Ventures

- Горизонтальная навигация, ссылки выровнены по левому краю

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Twitshirt

- Сгруппированные ссылки под горизонтальной навигацией

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Render

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Auditude

- Полупрозрачная горизонтальная панель навигации

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Wetaskiwin Regional Public Schools

- Текст описания под ссылками в горизонтальной навигации

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Eyemagine

- Резиновое горизонтальное меню с центрированными ссылками

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Jupiter Underfloor Heating

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Cambridge Shakespeare Festival

- Горизонтальные ссылки, разделенные графическим изображением

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Arca lui Noe Hotel

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

The Art of Non-Conformity

- Горизонтальная навигация внизу страницы

Горизонтальные навигационные меню: Тенденции, варианты и лучшие образцы

Lorem Ipsum

6. Заключение

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

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

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

Автор статьи © Louis Lazaris
Русский перевод © CoolWebmasters.Com 2009
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Mysterious Master   Прочитано (раз): 28792   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 21 ноября 2010 @ 19:14
Написал: Михаил — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Горизонтальный скролл (навигация) на русскоязычном сайте:

http://agentnata.ru/
http://www.contrast-interactive.com
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2023    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728