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

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

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

Хороший веб-сайт не может обойтись без навигации по следующим причинам:

  1. Она помогает понять, чему посвящен сайт, не просматривая все страницы.
  2. Благодаря навигации сайт выглядит логичным и упорядоченным, повышается его юзабилити.
  3. Навигация призывает пользователя задержаться, чтобы изучить другие разделы.
  4. Хорошая навигация полезна для SEO, потому что помогает поисковым роботам индексировать содержимое сайта.

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

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

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

В виде вкладок:

Пример горизонтального меню с вкладками

В виде ссылок с тем или иным оформлением:

Пример горизонтального меню с пунктами в виде ссылок c подчеркиванием

Пример горизонтального меню в сером цвете

Пример горизонтального меню в зеленом цвете

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

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

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

Горизонтальное меню с выделением текущего раздела

То же самое касается пункта, на который наведен курсор. В этом примере он на Notes:

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

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

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

Сайт с фиксированным меню

Сайт с фиксированным меню после прокрутки страницы

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

Сайт с двумя меню

А здесь присутствуют два горизонтальных меню, причем «раскрывается» только один из подпунктов верхнего меню — последний. Это не случайно, ведь больше всего внимания привлекают первые и последние пункты, Features и Resources:

Меню с одним раскрывающимся пунктом

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

Одновременное использование горизонтального и вертикального меню

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

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

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

Вертикальное меню с вкладками

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

Меню с группированием ссылок, меню-аккордеон

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

Меню с иконками в свернутом виде

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

Раскрывающееся меню

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

Большое раскрывающееся меню

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

Меню-гамбургер на несколько пунктов

Или же полный набор разделов и подразделов:

Большое меню-гамбургер

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

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

Выпадающее меню с тремя точками

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

Меню с подразделами

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

Раскрывающееся горизонтальное меню с использованием изображений

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

Раскрывающееся вертикальное меню с использованием изображений

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

Инновационный дизайн меню для сайта магазина

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

Инновационный дизайн меню для мобильных устройств

Идея выезжающего меню интересно реализована в теме Wordie для Wordpress:

Инновационное меню для блога

Инновационное меню в теме для Wordpress

Инновационное меню для Wordpress

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

Инновационное меню c окнами

Меню для сайта с использованием окон

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

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

Об авторе

Дизайнер
Олег работал в студии в 2011-2016 годах и за это время успел поучаствовать во множестве проектов в качестве UI/UX дизайнера.

Похожие статьи

Вернуться к списку записей К списку записей