«Липкое» меню, фиксированная липкая навигация, появляющаяся панель меню – существует очень много названий у одной только тенденции. При этом смысл её заключается в том, что какой бы длинной страница не была и как долго пользователь не прокручивал бы её, строка меню будет всегда следовать за ним, всегда будет на виду.
Не всем пользователям, впрочем, как и веб-дизайнерам, нравится такой стиль, поскольку меню отнимает каждый раз некоторое пространство на странице, которое можно занять чем-то…иным. Но зато с точки зрения пользовательского опыта «липкое» меню предоставляет пользователям быстрый и простой доступ ко всем ссылкам навигации, к информации на сайте из любой точки страницы. На практике это удобно, хотя в теории кажется, что можно и пожертвовать таким дизайнерским решением.
В то же время «липкое» меню отлично подходит для мобильных версий веб-сайтов, так как такие сайты более узкие. Как результат, более длинные, а значит, доступ к ссылкам и навигации должен быть перед глазами.
Тем не менее, сама идея фиксированного прилипающегося меню хоть и предполагает наличие строки с ссылками всегда перед глазами, веб-дизайнеры реализовывают её совершенно по-разному. В этом материале мы и посмотрим на изысканные и оригинальные примеры создания навигации и на некоторые его особенности.
Ascensión Latorre
Можно совершенно не знать испанского языка, но при этом восторгаться дизайном сайта Ascensión Latorre. На самом верху страницы существует логотип, название и ссылки. Но как только пользователь начинает прокручивать страницу, то навигация остается на месте, а изображение и текст исчезают.
Оно маленькое и потому занимает мало места, а значит – идеальный вариант для тяжелых графических вариантов меню. Дополнительно можно было бы сделать небольшую анимацию уменьшения логотипа – Пегас все равно был бы различим и видим, но места стало бы еще чуть больше. Такие варианты мы приведем далее в статье.
Search Engine Journal
Это потрясающая идея и реализация. Мы имеем блог и строку меню, которая всегда перед глазами. Но здесь можно увидеть и анимации, и переходы и разные вариации дизайна строчки с ссылками. Если посетить домашнюю страницу, то вверху можно видеть анимированный логотип, представляющий собой при этом кнопку ссылки для загрузки номера журнала. При прокручивании страницы вы заметите и еще другую анимацию, появление логотипа слева и сдвиг ссылок вправо.
Такое смещение ссылок немного оживляет композицию и визуальную составляющую. Это, действительно, классно придумано. Не слишком, прям, вот «эпично», но совсем легко и воздушно. При этом сами ссылки и выпадающие списки меню сделаны самыми обычными и «скучными». В любом ином варианте на экране перед глазами пользователей создавалась бы визуальная «каша» и казалось бы, что дизайнеры решили включить в один дизайн сайта все тренды и возможности.
AWD Agency
Посетив первый раз этот сайт, может создаться впечатление, что меню тут нет, а вся информация только на первой странице. Выбираете фотографию модели и читаете инфу. Все.
Но давайте обратим внимание на логотип слева. Он просто есть. Логотип. Нет – меню. Вертикальный столбец меню, который всегда на глазах и всегда есть, но скрыт иконкой логотипа. Такая вариация удобна для использования и на РС, и на мобильных устройствах, даже на мониторах с разрешением в 4К. Меню всегда сбоку и всегда имеет один и тот же вид.
Это наиболее простой способ реализации фиксированного липкого вертикального меню, отойдя от идеи и тренда «уже надоевших» иконок-гамбургеров. Здесь и логотип, и меню – все в одном.
Novotel Hotels
Сайтов отелей и гостиничного бизнеса много, о них мы отдельно уже говорили в блоге и подробно рассматривали особенности дизайна и UX. Но сайт Novotel Hotels может поразить многих своим удобством и чувством стиля. Как только пользователь попадает на сайт, то может заметить вверху полоску меню с логотипом и авторизацией. Но когда он начинает прокручивать страницу, то строка с заказом билетов (ниже находящаяся) прилепляется к строке меню и они уже вдвоем сопровождают пользователя во время изучения страницы. Это круто! И это удобно.
Более того, такая конструкция помогает повысить количество клиентов и подтолкнуть посетителей к совершению заказа, поскольку процесс бронирования на этом сайте гораздо выше, чем на аналогах.
FHOKE
Сайт агентства FHOKE имеет вполне себе самую обычную навигацию и самую обычную реализацию эффекта «липкого» меню. Но если посмотреть на сайт воочию, то как долго бы пользователь не листал страницу вниз, логотип и иконка меню всегда остаются видимыми. И все. Никаких ссылок, никакой анимации.
Но вся прелесть реализации идеи в том, что в самой строке навигации нет цвета. Она прозрачная и сливается с фоном любой секции страницы или видео, изображения. Таким образом, дизайнеры создали контраст между элементами и сделали акцент именно на контенте, а не на строке навигации, что всегда перед глазами и буквально «кричит» – как много контента, откройте, почитайте, посмотрите. Нет, здесь все более тонко и изящно. Если нужен доступ к ссылкам, то достаточно поднять взгляд в правый верхний угол экрана и увидеть слово MENU, которое также меняет свой цвет в зависимости от фона.
Brit + Co
В данном варианте дизайнеры решили еще немного пофантазировать и добавили к «липкому» меню и автоскрытие. Как только пользователь пролистывает страницу вниз за пределы границы окна браузера, строка меню исчезает и не появляется. Это не мешает изучению контента, не отвлекает и не навязывается: «открой меня».
Но как только прокрутка страницы совершается в обратном направлении, меню сразу же и появляется.
Другая весьма интересная вещь на сайте – функция поиска, которая присутствует в строке меню только в виде иконки, когда как на деле это «выезжающее» окно со строкой поиска. Эффект в действительности неимоверно простой, но он способен захватить воображение и внимание, восхитить взгляд человека.
Prollective
Простая реализация «липкого» вертикального меню, которая смотрится на фоне стандартов и обыденности настолько мило, что даже не хочется покидать сайт, хотя информация на нем может многим и не потребоваться. Посетите сайт Prollective и посмотрите на верхний правый угол. Здесь самые обычные ссылки-меню, размещенные в столбик.
Все. Нет прокрутки логотипа, нет строки поиска, если вы начнете пролистывать страницу, то ничего не увидите, кроме контента и… этих ссылок. Если у вас есть небольшой сайт с несколькими страничками, то такая вариация фиксированной навигации может стать отличным решением.
Благодаря этому методу хорошо экономится место, нет верхней панели или боковой, но пользователи все равно получают доступ к важным и основным ссылкам из любого места страницы. Минимализм, простота, классика и строгость – все тонкости и нюансы стилей в одном дизайне.
И в завершение вариантов реализации еще один анимационный и очень красивый проект.
Paramos y Valles
Интерактивный проект поражает сразу же своей анимацией, графичностью, художественностью и прочим, и прочим. Но посмотрим на строку навигации. Она красиво выполнена в виде обрывка бумаги. При этом полностью предоставлены не только разделы меню, но и ссылки, что входят в эти самые разделы.
Но стоит начать прокручивать страницу (любую на сайте), строка меню буквально съеживается, уменьшается. Логотип не становится маленьким сам по себе, но в результате того, что исчезает свободное пространство вокруг него, он визуально становится более мелким. Ссылки меню тоже исчезают и перед глазами пользователей остаются только ссылки на разделы.
Иными словами, в обычном состоянии навигация выглядит широкой полоской с большим набором ссылок. При пролистывании страниц, все пустое пространство сверху и снизу удаляется и остается небольшая узенькая полосочка. Выглядит очень красиво и необычно, даже ново, поскольку аналогов, как таковых, найти на каждом втором-третьем сайте в интернете невозможно.
Когда необходимо фиксированное меню
«Плавающее» меню, по факту, не является ярко-выраженной тенденцией. Оно просто или есть, или его нет. Его несложно создавать, да и во многих готовых темах и шаблонах оно уже есть по умолчанию. Поэтому – нет, особо важной тенденцией оно не является. Но при этом вариативность фиксированной липкой навигации открывает простор для фантазии веб-дизайнера.
Если сайт большой и много ссылок, разделов, информации, то, разумеется, такой вариант отлично подходит, дабы не перегружать сайт небольшими ссылками по углам страницы или размещать частями вверху и внизу, и так далее. И да, такое меню позволяет пользователям дольше пребывать на сайте, а значит, конверсии увеличиваются, удобство создается, популярность растет.
Но главное, что нужно помнить – строка меню не должна занимать много места. Если уж так получись, что оно большое, то в дальнейшем должно уменьшиться. Пользователи приходят на сайт, в первую очередь, за контентом, а значит, навигация не должна блокировать содержимое, закрывать его собой.
Например, сайт журнала US Magazine, имеет не маленькую строку навигации. Но при прокрутке страницы панель навигации уменьшается, логотип тоже. Да, в этом случае логотип меняет свой размер. О чем мы и упоминали в начале материала. Таким образом, меню становится менее навязчивым. Пользователи и без того знают, на каком сайте находятся, но иметь ссылки для перехода по страницам под рукой – надо.
Завершение
Фиксированная прилипающая навигация, «липкое» меню – удобный и красивый эффект, тренд, элемент в веб-дизайне. Он способствует созданию прекрасного UX, он позволяет проявить дизайнерам креативности и придумать самые невероятные вариации анимации и реализации. Но также такое меню может великолепно служить и иным задачам.
В общем и целом, навигация, следующая за пользователем, не так часто встречается, как, возможно, стоило бы видеть его, но там, где это есть, в большинстве случаев, это удобно. Иногда, разумеется, попадаются сайты, где это меню не прилипает к верхней границе окна браузера, а имеет между собой и границей «зазор» в несколько сантиметров (визуально, "на глазок"). Это может раздражать, так как контент перекрывается такой строкой и изучать его становится попросту неудобно. Такого нужно избегать.
Прелесть фиксированной навигации в минимализме, кажущейся простоте и функционале. А если такая навигация дополнительно немного, совсем чуть-чуть анимирована, то это добавляет трендовости дизайну, эстетики, законченность.