Тенденции в построении адаптивной системы навигации

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

Естественное изменение размеров шрифтов

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

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

responsive_nav_trends_01

В интернет-магазине Skinny Ties блестяще реализовано изменение шрифтов и подгон навигации.

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

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

responsive_nav_trends_02

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

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

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

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

responsive_nav_trends_03

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

Для меню навигации, которые содержат в себе ссылки подменю, такие вертикальные макеты освобождают много свободного пространства:

responsive_nav_trends_04

Стиль сайта Nanoc немного отличается от предыдущего, но на удивление он все равно прекрасно работает.

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

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

Переключение панели навигации на экране

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

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

responsive_nav_trends_05

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

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

responsive_nav_trends_06

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

Это отличный пример реализации простого доступа к элементам навигации.

Переключить панели навигации видимая/невидимая

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

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

responsive_nav_trends_07

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

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

responsive_nav_trends_08

Сайт Comedy Central имеет схожее меню, но сделано оно качественнее. Его интерфейс использует JS, а в качестве резервного варианта для мобильных браузеров без поддержки JavaScript используется CSS3.

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

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

Перестройка навигации

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

responsive_nav_trends_09

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

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

responsive_nav_trends_10

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

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

С чего начать

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

Перевод статьи «Responsive Navigation Design Trends» был подготовлен дружной командой проекта Сайтостроение от А до Я.

18 июня 2016 в 11:00
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок