Выпадающее МЕГА-МЕНЮ: «Да» или «Нет»?

Примеры выпадающих мега-меню сайта
31.01.2016 КОММЕНТАРИИ: 0

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

Преимущества выпадающего меню

Многоуровневое выпадающее меню улучшает опыт взаимодействия пользователя с сайтом (user experience). И вот каким образом:

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

Разумеется, речь не идёт об устаревших выпадающих списках. С точки зрения современного веб-дизайна, они слишком массивны, тяжелы и неуклюжи. Усовершенствованные панели навигации эффективно экономят пространство сайта, удовлетворяя потребности больших и малых экранов. Они быстрее, легче, богаче на иконки и мультимедийные эффекты. Модернизированные выпадающие меню не только отображают структуру сайта, но и искусно потчуют пользователей рекламой, ссылками на страницы бренда в соцсетях и даже микрокарточками товаров с CTA-кнопками «Купить».

Для наглядности приведём подборку 20 многофункциональных мега-списков навигации от Onextrapixel.

Примеры выпадающих меню

Adidas Football

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

Пример выпадающего мега-меню сайта

Boutique Olympique Lyon

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

Выпадающее мега-меню с иконками

Treblecone

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

Компактные блоки выпадающего меню

Le Slip Francais

Первую скрипку в мега-меню Le Slip Francais играют крупномасштабные иконки. Подписи к ним в большинстве случаев излишни: пользователи и по картинке смогут найти нужный раздел. Все иконки выполнены в модном плоском стиле.

Иконочное мега-меню сайта

Belazu

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

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

Gibbston Valley

Ещё один пример выпадающего мега-меню с фото. Это уже практически полноценный карточный дизайн! На сайте Gibbston Valley панель навигации перекрывает почти весь экран.

Карточный дизайн выпадающего меню

SM Seruya

Изобилующий контентом сайт SM Seruya остро нуждается в удобном и доступном способе отображения содержимого. Навигация начинается здесь с классического горизонтального топ-бара и заканчивается огромным выдвигающимся ящиком со ссылками на разделы и промо-изображениями. Жёсткая структура и безупречная организация списков делают меню удобочитаемым.    

Полноэкранное выпадающее меню

Acties

Acties ограничивается выпадающим горизонтальным меню высотой всего в несколько строчек. Каждый пункт визуально подкрепляется контурной иконкой. Приглушённый серый цвет значков и подписей отлично сочетается с белым фоном и общим оформлением сайта.

Горизонтальное выпадающее меню

Reservoir

Элегантное меню Reservoir полностью соответствует эстетике сайта. Несмотря на мелкий шрифт, заголовки разделов легко читаются. А всё благодаря чёткому контрасту, колоночной организации и обилию свободного пространства. Центром меню является промо-изображение. Это всегда первое, на что падает взгляд.

Мега-меню сайта с фото

Luxe

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

красивое выпадающее меню

Dogswelll

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

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

MTV Serbia

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

Выпадающее меню на сайте MTV

THB Hotels

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

Пример идеальной сочетаемости мега-меню и дизайна сайта

GSI Outdoors

Ещё один пример карточного дизайна выпадающего мега-меню. Никаких вложенных подуровней и текстовых нагромождений. Вся ставка — на визуальное воздействие изображений. Они доступнее всего рассказывают о содержании разделов и вовлекают посетителей.

Картиночное раскрывающееся мега-меню сайта

Royal Robbins

На сайте Royal Robbins можно увидеть изысканное полупрозрачное выпадающее меню. Контрастный белый шрифт гарантирует удобочитаемость ссылочного текста на любом фоновом фото.

ВЫпадающее меню с полупрозрачным фоном

Creative3 Design

Пример подавляющего мега-меню можно увидеть на сайте Creative3 Design. Оно здесь гиперинформативно, спорит с основным дизайном и практически полностью перекрывает его. Немного раздражающе, да и нужную ссылку найти не так-то просто, зато более яркого примера выпадающего МЕГА-МЕНЮ не найти.

Подавляющее дизайн сайта выпадающее меню

Nest Designs

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

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

Clipper Round the World

А вот и пример классического выпадающего меню со строго структурированными списками ссылок. Здесь оно чётко вписывается в тон проекта и не перетягивает внимание на себя. Щедрые визуальные эффекты оказались бы не к месту, а вот повысить контрастность (читаемость) шрифтов не помешало бы.

Пример классического выпадающего меню на сайте

Secret Den

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

Мега-меню с запасом

Bracketron

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

Вертикальное выпадающее меню

Заключение

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

 

Добавить комментарий


Защитный код
Обновить