Главная » Статьи » Дополнения

Навигация в меню. Современные тренды.

62

0



Все мы видели навигацию и полноэкранные выпадающие списки онлайн ссылок. Они сильно распространены в Интернете и особенно полезны на сайтах имеющих множества ссылок.

 

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

 

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

 

Категории глубокого уровня

 

Самый ценный стиль дизайна для навигации - это структура столбцов. 

 

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

 

 

Современные тенденции навигации в веб дизайне

 

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

 

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

 

Мега Меню

 

 

Так же другой известный интернет-магазин спортивной одежды Puma имеет аналогичную столбчатую структуру.

 

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

 

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

 

Раскрытие на всю ширину.

 

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

 

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

 

 

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

 

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

 

У Digital Spy есть кое-что очень похожее, и их навигация также включает разрывы категорий. 

 

 

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

 

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

 

 

Вы даже можете объединить структуру столбца и полноэкранный эффект в один дизайн. 

 

Это то, что вы видите на веб-сайте OARS, и это великолепный пример отличного дизайна. 

 

Смешивание изображений и текста

 

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

 

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

 

Сайт Sears разбивает свою навигацию на многоуровневые категории с ссылками и изображениями. 

 

 

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

 

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

 

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

 

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

Оцените материал:
Не забудьте поделиться с друзьями:
Комментарии
Войдите: