Будь в теме! Тренды веб дизайна 2017

Первая глава "Книги трендов веб дизайна 2017"

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

Настолько популярной, что теперь они получили полноэкранное воплощение на десктопах

Всплывающие меню в мобильной среде

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

Незаметное меню помогает контенту получить больше внимания, а когда оно становится необходимо пользователям, меню полностью (или почти полностью) сдвигает видимую область с контентом в сторону.

Facebook
Facebook

Starbucks
Starbucks

Spotify
Spotify

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

Незаметная панель навигации прототипа в UXPin
Незаметная панель навигации прототипа в UXPin

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

Больше места на "первом экране"

Take Your Pulse
Take Your Pulse

Long Story Short Design
Long Story Short Design

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

Studio Rotate
Studio Rotate

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

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

Фокусировка на областях навигации

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

Granny Secret
Granny Secret

Подумайте о том, достаточно ли предоставлено информации вашей аудитории, чтобы она могла легко ориентироваться на сайте. Некоторые дизайнеры используют текстовые подсказки (например, слова «навигация или «меню»), чтобы помочь пользователям идентифицировать значок меню, например, как тот в Granny Secret. И хотя содержимое меню навигации скрыто, путь к меню должен быть хорошо виден. Убедитесь, что в UI можно легко найти меню. В каждом из приведённых далее примеров для облегчения обнаружения пользователями меню используются разные визуальные эффекты.

University of Wisconsin
University of Wisconsin

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

2 am Media
2 am Media

2 am Media использует иконку гамбургера в тонком контуре кнопки в левом верхнем углу (меню выдвигается вправо). Когда меню раскрывается, оно «приостанавливает» энергично движение фона, позволяя пользователям сосредоточиться на списке пунктов меню.

Vandal
Vandal

Vandal использует очень сильно контрастную иконку гамбургерного меню (вверху справа), в противовес фоновому видео в тёмных цветах. Меню в раскрытом виде предстаёт в тёмных, но не менее контрастных цветах.

5 популярных решений дизайна

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

Al Erkyah City
Al Erkyah City

1. Цвет

Хотя первый экран может содержать изображения, видео или любое другое сочетание графических элементов, «экран» навигации часто выглядит как одноцветное меню с текстовым списком элементов. Сайт Al Erkyah City использует зелёный фон меню, чтобы помочь посетителям сайта сосредоточиться на выборе нужно пункта в меню навигации. Этот цвет взят из палитры сайта, но он имеет хороший контраст с белым фоном главной страницы.

Wiesbaden Am Meer
Wiesbaden Am Meer

2. Почти такой же "дизайн"

Хотя дизайн многих из этих сайтов изобилует приятными элементами дизайна, навигация не отличается особой красотой. Большинство выдвигающихся экранов навигации содержат лишь текстовые пункты меню в простом текстовом формате. Wiesbaden Am Meer использует для меню яркий оранжевый фон, не нуждающийся в дополнительном украшении. Яркий и контрастный выбор цвета для фона меню – распространённое решение.

3. Простая, увеличенная типографика

Из-за простоты его текста, этот стиль меню навигации естественно подаёт себя с красивой типографикой. Распространённым решением является простые слишком большие по отношению к занимаемому пространству названия пунктов меню. (Может быть это перенос пропорций из сферы мобильного дизайна или просто попытка заполнить сайты на больших мониторах.) Капитель – ещё одна популярная форма воплощения этого стиля меню навигации, возможно, потому, что пользователи привыкли к меню разделов в шапках сайтов, набранных заглавными буквами.

Bravccel
Bravccel

4. "Гамбургер" открывает, "Х" закрывает

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

Reputation Squad
Reputation Squad

5. Меню "вдавливает", имитируя мобильное

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

Выводы

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

Прототип навигации Fly-in в UXPin
Прототип навигации Fly-in в UXPin

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

Другие тренды не менее интересные, не упустите возможность узнать о них из "Книги трендов веб дизайна 2017". Харбрахабр рекоменует эту книгу. Будьте в тренде!

Купить "Книгу трендов веб дизайна 2017" за 96р.

Больше актуальных книг по дизайну здесь.