Примеры дизайна меню сайта

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

Вертикальное меню для сайта необходимо, потому что:

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

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

Горизонтальные меню

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

Дизайн с использованием вкладок:

56a74621d05c4

Дизайн с элементами, отображаемыми в виде ссылок или кнопок:

56a746830ef88
56a746b1e277f
56a7472816b33

С использованием иконок:

56a747776a814

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

56a747d147944

То же самое справедливо и для элемента, на который наведен курсор мыши. В этом примере дизайна раздел меню «Примечания» изменяется, когда на него наводится указатель мыши:

56a74853b97d9
56a7485d9c204

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

56a7491db6cba
56a881049771b

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

56a7498854a74

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

56a749fcbfeff

А здесь горизонтальное и вертикальное многоуровневое меню для сайта используются вместе:

56a74a5a1a836

Вертикальные меню

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

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

56a74ade407a1

Но вертикальные меню чаще используют группировку ссылок:

56a74b3f98663

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

56a74b90e224a

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

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

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

56a74be49fa94

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

56a74c268a9ee

Или все разделы и подразделы:

56a74c8441450

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

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

56a74d6fd760a

И при объединении различных типов меню нужно решить, какие части будут раскрываться вниз и представлять дополнительные разделы:

56a74f8c7c433

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

56a74fcf801d4

И в вертикальном меню:

56a7509d2c3f9

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

56a751615dfa4

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

56a7519c85817

Идея всплывающего красивого вертикального меню для сайта хорошо реализована в шаблоне Wordpress Wordie:

56a760dc0f362
56a760f07e23c
56a76106dd78e

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

56a761a19439d
56a761b886abf

Мы надеемся, что эти примеры дизайна меню сайта помогут улучшить навигацию на вашем сайте.

Перевод статьи «Examples of website menu designs» был подготовлен дружной командой проекта Сайтостроение от А до Я.

15 июня 2016 в 14:22
Вам понравился сайт или конкретно эта страница? Поделитесь ею со своими друзьями, нажав на одну из кнопок соцсетей слева или снизу. Желаете быть в курсе последних обновлений сайта — подпишитесь удобным для вас образом:
или поддержите нас, нажав на кнопку "Мне нравится"!
Материалы по теме
Обсуждения
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок