Меню для сайта гамбургер: Editor X: Применение гамбургер-меню | Центр Поддержки

Сайт 

Содержание

Editor X: Применение гамбургер-меню | Центр Поддержки

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

Содержание:

  1. Нажмите Добавить в верхнем левом углу редактора.
  2. Нажмите на Меню и поиск.
  3. Нажмите на Гамбургер-меню.
  4. Перетащите нужное меню в подходящее место на странице.
  5. (Необязательно) Создайте новое меню с собственными страницами:
    1. Нажмите на значок меню и выберите Открыть меню.
    2. Выберите вертикальное меню, где отображаются страницы вашего сайта.
    3. Нажмите Настроить.
    4. Нажмите на раскрывающееся меню в разделе Какое меню показать?
    5. Выберите Управлять меню сайта.
    6. Нажмите + Новое меню внизу панели, чтобы создать собственное меню. Подробнее 

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

Настройте кнопку, которую посетители нажимают, чтобы открыть гамбургер-меню. Нажмите на значок

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

Контейнер меню

Откройте контейнер, в котором находится ваше меню, нажав на значок меню и выбрав Открыть меню.

Затем выберите контейнер меню и настройте его, выполнив следующие действия:

Добавьте элементы в контейнер меню

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

Измените цвет фона контейнера

Выберите цвет фона для контейнера и оверлея, нажав на значок Дизайн.

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

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

Измените размер и выравнивание контейнера

Измените размер и выравнивание контейнера, нажав на значок Инспектор в правом верхнем углу:

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


  • Размер: выберите, будет ли ваше меню открываться в виде боковой панели или полноэкранного меню. Регулируя ширину, вы можете сделать так, чтобы меню занимало только часть экрана или растягивалось на всю область просмотра.
    Примечание: минимальная высота для меню автоматически устанавливается на 100vh, поэтому меню полностью покрывает экран по вертикали.

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

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

Это элемент, которое отображает фактическое меню. Нажмите Открыть меню, чтобы выбрать страницы, ссылки и подменю для отображения. Затем измените выравнивание пунктов меню и подменю, нажав на значок Макеты.

Нажмите на значок Дизайн в панели Инспектора, чтобы настроить два состояния меню: В покое и Если выбрано — состояние, когда посетитель выбирает пункт меню.

Создание нескольких гамбургер-меню с помощью промобоксов

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

Выберите опцию ниже, чтобы узнать больше:

Добавьте промобокс в качестве меню

  1. Нажмите Добавить в верхнем левом углу редактора.
  2. Нажмите Для лейаута.
  3. Нажмите на вкладку Промобоксы.
  4. Выберите пресет боковой панели, например:


  5. Настройте промобокс:
    1. Нажмите Настроить триггеры.
    2. (Необязательно) Дайте промобоксу имя, по которому вы сможете опознать его в дальнейшем.
    3. Выберите Нет в разделе Показывать автоматически?
  6. Удалите ненужные элементы из промобокса. Не удаляйте значок «X».
  7. Добавьте в промобокс вертикальное меню и настройте его по своему усмотрение.
  8. Нажмите Готово в разделе Редактирование: промобокс.

Добавьте ссылку на меню промобокса

  1. Нажмите Добавить в верхнем левом углу редактора.
  2. Откройте вкладку Оформление.
  3. Нажмите Больше основных фигур.
  4. Введите слово «меню» в строку поиска и нажмите клавишу Enter на клавиатуре.
  5. Выберите фигуру и нажмите Добавить на сайт.
  6. Свяжите кнопку с промобоксом:
    1. Выберите нужную кнопку в редакторе.
    2. Нажмите на значок
      ссылки       .
    3. Выберите Промобокс слева.
    4. Выберите промобокс с меню в раскрывающемся меню в разделе Какой промобокс?
  7. Нажмите Сохранить.

Гамбургер-меню для адаптивных сайтов: использовать или нет?

Адаптивный дизайн — это инновационное решение для правильного отображения сайта на экранах с разным разрешением. Но самый спорный вопрос в адаптивном дизайне – это решить, как должно выглядеть меню. В этом посте мы поговорим о 3 вариантах навигационного меню для адаптивного сайта.

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

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

 

 

Что такое адаптивный дизайн?

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

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

 

 

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

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

Гамбургер-меню

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

 

Как появилось гамбургер-меню?

Возникновение этого меню уходит корнями в середину 2000-х годов, когда гамбургер-меню нельзя было не появиться в связи с растущими потребностями UX-, UI веб-дизайнеров:

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

 

Почему UX-дизайнеры стараются не использовать гамбургер-меню?

По результатам тестирований гамбургер-меню UX-специалисты обнаружили следующие проблемы:

  • открываемость становится низкой: некоторые люди не могут найти иконку, если она не дополнена надписью «Меню» или подсказкой. Видимость контента резко сокращается, поскольку пользователи не знают, где искать информацию;
  • гамбургер-меню несовместимо с навигацией по умолчанию на некоторых платформах, причем одна из них iOS. Например, есть сбои в опциях «Назад» и значке «Меню» для отображения в левом углу экрана;
  • увеличение времени поиска нужной информации пользователем: человек должен сделать лишь несколько кликов для посещения желаемой страницы или доступа к требуемой опции. Просмотр нескольких страниц увеличивает общее время навигации по сайту и усложняет задачу, что крайне неудобно для конечного пользователя.

 

A/B тестирование гамбургер-меню: пример от Beamly

Чтобы узнать насколько эффективно гамбургер-меню по сравнению с другими распространенными типами навигации, посмотрим пример веб-сайта «Beamly» (ранее Zeebox), который проводил A/B тестирование пользовательского интерфейса в своих проектах:

A: веб-сайт с боковой панелью навигации (гамбургер-меню).
B: веб-сайт с верхней панелью навигации (видимая навигация).

  • Изучив результаты A/B тестирования на этом сайте, эксперты пришли к выводу: замена верхней навигационной панели боковой панелью с изображением значка гамбургер-меню помогла посетителям получить только половину пользовательского опыта;
  • Еженедельные результаты взаимодействия были значительно выше для верхней навигационной панели в сравнении с боковой панелью.

 

Хотя гамбургер-меню делает сайт более просторным и чистым, это не всегда лучший выбор для адаптивных веб-проектов. После успешного A/B тестирования Beamly продолжили разработку дизайна верхней панели навигации.

 

 

Когда использовать гамбургер-меню: лучшие практики внедрения

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

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

 

Альтернативы гамбургер-меню: вне скрытой навигации

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

 

 

Нижнее меню

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

 

 

Экранный переключатель

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

 

 

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

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

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

 

 

Что стоит учитывать при выборе меню для адаптивного сайта?

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

  • Какой вы видите структуру своего сайта?
  • Где основная область внимания на сайте? Это контент или изображения?
  • Кто ваша целевая аудитория?
  • Соответствует ли навигация целям пользователя при посещении сайта?

 

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

 

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

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

 

 

 

Теги: HTML5, Web

  • 6536