Иконка гамбургер: Иконки «Hamburger» — скачивайте бесплатно в PNG, SVG, GIF

Содержание

Иконки гамбургер меню - примеры сайтов и анимации, скрипты

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

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

Примеры сайтов с гамбургер меню

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

Star Wars

Интересная модификация меню с тематикой фильма Звездных Воен.

The Deepend Design

Outdated Browser

NewtonRunning

Brianhoff Design

Brooklyn Bridge Park

Часто при клике на «иконку гамбургера» полоска или блок меню выезжает сбоку или сверху. Эффект простой, но смотрится неплохо.

The Design Museum

Illusion

Xander

DeModern

Hooch Creative

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

Lalignerouge

Michaelvilleneuve

Chapoleone

Brand Junkie

Cofa Media

eWebDesign

Lequipe

Digital Deadly Sins

Buildin Amsterdam

Анимация и иконки гамбургер-меню

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

Hamburger Button

Burger Menu2

MOARRRR

The Real Hamburger MenuIcon

Hamburger Icon

Wave

Menu Icon by Dave Gamez

BurgerIcon

Hi I’m Hamburger

Buttons by Nick Meloy

Hamburger Transformation

Open Close

HamburgerMenu by Tamas Kojo

Interactive Hamburger

Close Icon Animation

Dribbble Menu

Simple HamburgerMenu Animation

IconinFramer

Hamburger Icon Music

Menu Thing

Hamburger by Christian

OpenDADA

Это лишь часть материалов, на Dribbble их гораздо больше — заходите на сайт и ищите по ключу «

hamburger«, можно даже без приставки «menu«. Напоследок парочка дополнительных сайтов.

TheNounProject

Про Noun Project мы когда-то уже писали в посте с необычными наборами иконок. Там содержится достаточно много монохромных объектов из любых сфер жизни.

Iconfinder

Когда будете использовать поиск иконок Iconfinder обязательно выбирайте в левом меню «Free» в графе Price, то есть бесплатную стоимость изображений.

Stickpng

Еще один интересный сервис — Stickpng, где публикуются PNG клипарты на прозрачном фоне. Не смотря на то, что картинок здесь мало, возможно, кому-то нужен именно PNG формат.

Скрипты гамбургер меню CSS / Javascript

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

21 Hamburger Animations Menu

15 Hamburger Icons in CSS 

Code My UI

CSS Animated Hamburgers

Font Awesome

Кстати, подходящая иконка есть и в популярном наборе Font Awesome.

Можете почитать заметку про использование шрифта Font Awesome в WordPress, если ваш проект реализован на этой CMS. Практически во всех остальных случаях из подборок вы найдете код и описание как сделать гамбургер меню в CSS и JS (в частности jQuery).

Вот парочка наиболее интересных решений:

Gooey Menu

Menu Toggle SVG Animation

Hamburger Icon + Morphing Menu

Pure CSS off-canvas Menu + flexbox

UI/UX Improvements with CSS

Toggle Menu by Vladislav

Итого в статье мы постарались собрать много разных материалов по теме: начиная с примеров сайтов с гамбургер меню, графическими наработками дизайнеров и заканчивая реальными скриптами гамбургер меню на CSS и Javascript. Всего вышло около 60-ти полезных ссылок. Надеемся вам они пригодятся.

Иконка-гамбургер / Хабр

Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.

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


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

The Atlantic

,

TechCrunch

,

The Next Web

и

Nielsen Norman Group

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

Учитывая мое положение в качестве дизайнера в команде сайта m.booking.com, и использование нами этой иконки для показа выдвигающегося меню, я решил исследовать этот объект. А начал я с изучения происхождения значка, чтобы попытаться понять его путь к позору.

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

Gizmodo

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

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

Постоянные читатели этого блога не будут удивлены, узнав, что нашим следующим шагом было задать эти вопросы в форме A/B теста. Как и все остальное, иконка-гамбургер был подвержен воздействию наших многочисленных клиентов, которые, путем взаимодействия с меню, должны определить, был ли этот значок лучшим решением. К этому времени я прочитал достаточно статей и информационных данных, чтобы быть уверенным, что отсутствие консенсуса или другие результаты не были следствием поведения покупателей, для которых разрабатывался дизайн. Я решил последовать методу, описанному Джеймсом Фостером, на который многие ссылаются, в том числе один из наших лучших мобильных специалистов — Люк Вроблевски.

Ранее мы протестировали несколько мест размещения и стилей значка (с рамкой, без рамки, с иконкой, разных цветов и так далее), но никогда не тестировали слово «Меню» — из-за сложностей, связанных с нашим желанием провести испытания на сорок одном языке, поддерживаемом нами. Тем не менее, мы двинулись вперед, найдя переводы с помощью нашей команды экспертов по языкам и запустили тест:

Базовый вариант

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

Альтернативный вариант

Слово «Меню» внутри блока с белой рамкой с закругленными углами, также выравнивается по левому краю.

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

Так каков конечный результат? Слово победило фастфуд, как это было в эксперименте Джеймса Фостера, или победит булочка с котлетой?

Результаты

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

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

Несомненно, это урок для всех нас о сущности A/B тестирования. Вы никогда не тестируете элементы UI, модель или функцию в целом. Вы тестируете эти вещи на очень конкретной пользовательской аудитории при определенных и конкретных сценариях. То, что работает для Booking.com, может не работать для вас или ваших пользователей. Это одна из причин, почему мы провели свое A/B тестирование. Выводы других экспертов, данные с других сайтов или гипотезы, придуманные в пабе, поедая гамбургер, все будут недоказанными, пока они не проверены на наших клиентах и на нашей платформе.

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

Наше мнение

Всегда надо тестировать свои идеи и смотреть, что вам говорят полученные данные и, какие вопросы возникают. Мой совет? Откусите и посмотрите, что произойдет.

МЕНЮ-ГАМБУРГЕР, коллекция из 10+ анимированных иконок

Иконка-гамбургер — стала наиболее популярным решением для отображения меню на мобильных устройствах. Благодаря компактности и оригинальным анимациям, пользоваться таким меню не только удобно, но и приятно. Здесь я буду собирать самые интересные на мой взгляд готовые решения. В будущем, список иконок для мобильного меню будет пополняться. Я постарался собрать разнообразные иконки по форме, цвету и анимации. Если вы обладаете базовыми навыками верстки, интегрировать на свой сайт не составит большого труда.

Меню Header Navigation

Одна из особенностей иконки - анимация выполнена на чистом CSS.

Демо

Скачать

Click me! Hamburger menu

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

Демо

Скачать

Atomic Hamburger Menu CSS

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

Демо

Скачать

Hamburger Menu Elastic

Особенность этой иконки - нижний элемент выполнен в виде текста. Смотрится очень оригинально.

Демо

Скачать

Animated Menu Icon

Анимирован не только сам переключатель, но и рамка.

Демо

Скачать

Simple Navbar Toggle To X (Vanilla JS)

Простая анимация, основанная на исчезновении/появлении средней линии и смене угла наклона верхней и нижней.

Демо

Скачать

Drawn Hamburger Transition

Плавный переход иконки из одного состояния в другое.

Демо

Скачать

Animated Hamburger Menu

Анимация заключается в слиянии полос иконки и смены угла их наклона.

Демо

Скачать

SVG CSS3 Menu / Burger Button

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

Демо

Скачать

Hamburger Animation

Menu «Hamburger» Icon Animations

Сразу два варианта реализации.

Демо

Скачать

новые способы использования / Тренды / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

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

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

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

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

Сегодняшняя коллекция включает в себя 20 различных вариаций иконки-гамбургера.

Hamburger Menu Icon 

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

Wave Menu Icon 

А эту иконку с океанскими волнами разработал Мэт Уокер. Она отлично будет чувствовать себя на различных проектах, посвященных морю. Голубой в качестве основного цвета и рамка вокруг делают этот значок эксклюзивным.

Hamburger Icon by Vanessa Grass 

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

Hamburger Buttons by Nick Meloy 

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

Burger To Fries by Ryan Doggendorf 

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

Star Wars 

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

Burger Menu 

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

MOARRRR Hamburgers! by Kylie Timpani 

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

Hamburger Menu Icons  

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

Hamburgers by Ragnar Vorel  

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

Minimalistic Hamburger Icon 

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

Menu Icon Animation 

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

Burger Menu 

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

What is the Hamburger Icon? 

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

Open & Close Menu by Romain Passelande 

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

Hamburger Menu by Liam Spradlin 

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

Burger Icon vs. Word “Menu” by Andrey Drobitko 


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

Open / Close by Armantas Zvirgzdas 

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

Animated Menu Icon – The Process by Sebastiano Guerriero 

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

Итоги

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

 

Источник 

Иконка-гамбургер: повышаем конверсию сайта | Блог UseTest

Важной, если не основной, частью проектирования UX сайта является использование нужных элементов в нужном месте. В частности, если речь идет об упрощении внешнего вида страниц, то можно использовать различные иконки вместо старых приевшихся кнопок с подписями. Сегодня, наверно, не осталось пользователя, который не сталкивался бы с иконкой-гамбургером (гамбургер-меню). Популярность она набрала на протяжении последних пяти лет, в том числе и благодаря использованию в мобильном приложении Facebook. Не будем вдаваться в историю ее происхождения, но все же согласимся с тем, что гамбургер преимущественно ассоциируют со спрятанным меню – при клике на кнопку гамбургера открывается все меню. Создавалась она преимущественно для мобильных устройств, которые испытывают нехватку жилплощади на экране, но прекрасно зарекомендовала себя и на десктопных устройствах, поскольку способствует повышению конверсии на сайте. Не верите? Читайте дальше!

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

Согласно исследованию CatalystGroup 52% людей старше 45 лет вообще не понимают значения этой иконки – и это на западном рынке – рынке бургеров и продвинутых бабушек 🙂 У нас же показатель “незнания” скорее всего будет еще выше. Поэтому кликать такой посетитель на гамбургер станет либо после некого обучения на стороннем сайте, либо из интереса, что тоже вряд ли. Однако, у этой фичи существует и ряд сильных сторон, о которых мы и поговорим дальше.

Согласно концепции минимализма нужно делать вещи понятными и простыми. Поэтому часто с помощью гамбургера можно прятать лишние элементы меню. Это в первую очередь способствует концентрированию пользователей на контенте страницы. Если данный контент содержит конверсионный элемент, то уменьшение количества отвлекающих факторов способствует повышению конверсии. Кроме того, спрятав навигацию за иконку гамбургера, вы избавляете пользователей от проблем выбора и дезориентации – им приходится полностью фокусироваться на содержимом этой страницы, на заранее приготовленном вами пути. “Каком таком пути?” – спросите вы. Не забываем, что существование каждой страницы должно приследовать определенную цель, поэтому всегда четко фокусируйтесь на том, что должен сделать пользователь на странице в процессе достижения макро- (микроконверсии). Используйте понятные и заметные призывы, чтобы подтолкнуть посетителя к нужному действию, но чтобы выглядело это так, будто он сам принял решения. Мы считаем использование меню-гамбургеров уместным, если:

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

Для примера представим созданный для продвижения авторского семинара небольшой сайт. На нем четко описаны все компетении автора, преимущества на фоне аналогов, предоставляются скидки и естесственно есть огромная “красная кнопка” заказа или скачивания бесплатной демо-версии семинара. Скажите на милость, зачем здесь отвлекать пользователя еще и менюшкой от изучения всех вышеуказанных материалов перед принятием решения о покупке? Гамбургер прекрасно спрячет ненужные в данный момент элементы навигации (меню). На другом сайте такая техника может не подойти, поэтому важно проектировать странички сайта под специфику своего бизнеса. В любом случае только юзабилити тестирование позволит вам определить, насколько понятно гамбургер-меню вашей аудитории.

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

Иконка «гамбургер» для навигации меню сайта – хорошо или плохо

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

 

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

Иконка скрытого меню «гамбургер» имеет некоторые недостатки, если рассматривать с точки зрения юзабилити, а именно:

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

 

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

 

  • Ну и последний недостаток, это то, что иконка «гамбургер» не имеет возможности показа посетителю сайта, где он сейчас находится.

 

Хочется отметить  тот момент, что согласно статистике: молодое поколение пользователей интернета (14-35 лет) понимают, что следует ожидать от символа с тремя горизонтальными полосками, когда старшее поколение очень часто просто не замечают этот элемент навигации, особенно когда иконка «гамбургер» имеет необычный и непривычный вид.

 

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

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

Какими бывают иконки «гамбургер».

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

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

 

 

Все кнопки «гамбургеры» показали существенный прирост посетителей, увеличили конверсию.

Но самой эффективной оказалась кнопка с надписью (MENU) – эта иконка увеличила продажи на 5% по сравнению с другими кнопками.

 

  • Как пример хочу привести вам эксперимент известной компании Booking.com. они использовали в своей мобильной версии два варианта кнопок «гамбургер», простые три полоски и иконка с надписью (MENU) взятой в рамку.

 

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

 

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

 

 

Меню - ☰

Символ меню гамбургера, значок навигации, значок раскрытия / свертывания, контекстное меню и символ из трех точек.

Нажмите на значок, чтобы скопировать в буфер обмена ▼

☰≡Ξ㊂≣⁝⋮︙⦙⁞⋯…∷▲▼▶△▽▷⌃⌄︿﹀︽︾⌵𓏬𓃑𓏧⸬

※ Все символы являются символами Юникода, а не изображением или комбинированными символами. Но вы также можете комбинировать их самостоятельно. ※

символ текста смысл Копировать / Вставить
значок гамбургер Копировать
значок меню гамбургер Копировать
Ξ оригинальная функция Римана Си. Копировать
строго эквивалентный символ. четыре линии символа Копировать
три вертикальные черные точки Копировать
вертикальный символ многоточия Копировать
четыре вертикальных черных круга Копировать
четыре вертикальных черных квадрата Копировать
срединный горизонтальный символ многоточия Копировать
горизонтальный символ многоточия Копировать
символ пропорции. четыре точки в квадрате. Копировать
черный треугольник Копировать
черный треугольник, направленный вниз Копировать
черный правый треугольник Копировать
белый треугольник Копировать
белый треугольник, направленный вниз Копировать
белый правый треугольник Копировать
символ стрелки вверх Копировать
символ стрелки вниз Копировать
︿ символ шеврона указывает вверх Копировать
символ шеврона указывает вниз Копировать
удвоить угол наведения Копировать
двойной угол наклона вниз Копировать
𓏬 три вертикальных белых кружка Копировать
𓃑 девять точек Копировать

10 плюсов и минусов гамбургер-меню (с примерами)

Гамбургер-меню - это элемент навигации, который вы можете найти на веб-сайтах, в приложениях и программах.

Его восхитительное название произошло от его дизайна: он состоит из трех горизонтальных линий, напоминающих гамбургер. Как и его реальный аналог, гамбургер-меню - это механизм экономии места.

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

Салат-латук: погрузитесь в гамбургер-меню и познакомьте с кетчупом мясистой историей, окружающей эту булочку.

Извините, ничего не могу с собой поделать. Я на рулоне .

(ладно, я остановлюсь).

Что такое гамбургер-меню?

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

Он был создан дизайнером взаимодействия Нормом Коксом для персональной рабочей станции Xerox Star в 1981 году как простой способ сообщить пользователям, что кнопка содержит список элементов.

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

«Я разработал этот символ много лет назад как контейнер для выбора контекстного меню», - сказал Кокс в интервью 2014 года. «Это в некоторой степени эквивалентно контекстному меню, которое мы используем сегодня, когда щелкаем по объектам правой кнопкой мыши».

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

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

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

Во время выступления на Всемирной конференции разработчиков в 2014 году дизайнер и евангелист Apple UX Майк Стерн выступил против гамбургер-меню, сказав:

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

«Меню гамбургеров ужасны в обоих случаях, потому что меню не отображается на экране. Не видно. Есть только кнопка для отображения меню ».

Но означает ли это, что вам следует избавиться от печально известного трехстрочного значка или пора перестать беспокоиться и научиться любить гамбургер-меню?

3 плюса гамбургер-меню

Pro # 1: узнаваемый

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

Это даже каким-то образом нашло путь к print .

Привет, @Tesco, кажется, меню на твоей листовке не работает.
Добро пожаловать 👍🏼👍🏼🤓 pic.twitter.com/7X7l6WRLND

- Мартин Рединг (@martynreding) 16 февраля 2019 г.

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

Как написал дизайнер Оливер Макгоу на Usabilla: «Я не вижу причин ненавидеть то, что выполняет свою задачу. Которая настолько широко известна, что имеет собственный стандарт. Зачем убивать вездесущий значок, который наши пользователи знают и понимать, и заменять его новой итерацией, чтобы они могли учиться снова и снова? »

Pro # 2: Очистить

Что может быть хуже грязной веб-страницы? Например,

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

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

Одно исследование, проведенное экспертом по принятию решений Шиной Айенгар, показало, что люди в 10 раз чаще совершают покупки, когда им предоставляется меньше вариантов покупки.

Вот почему гамбургер-меню может быть отличным способом убрать грязную страницу.

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

Pro # 3: вторичный доступ

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

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

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

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

3 минуса гамбургер-меню

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

Con # 1: Делает страницы менее важными

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

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

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

Это подводит нас к следующему минусу:

.

Con # 2: низкая вовлеченность

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

Во-первых, до них трудно добраться. Поскольку с каждым поколением телефоны становятся все больше, становится все труднее добраться до мест, где обычно находится кнопка гамбургера (верхний левый или правый угол).

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

  1. Осознавать, что предпочитаемый пункт меню не отображается
  2. См. Меню
  3. Знайте, что такое гамбургер-меню и что на нем можно щелкнуть
  4. Нажмите
  5. Сканировать список дополнительных пунктов меню
  6. Найдите того, кого они ищут
  7. Нажмите

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

Одно исследование, проведенное Nielsen Norman Group, показало, что при использовании гамбургер-меню открываемость «сокращается почти вдвое, поскольку основная навигация по веб-сайту скрывается». Кроме того, время выполнения задачи увеличивается, а воспринимаемая сложность задачи увеличивается ».

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

Даже крупные игроки, такие как YouTube, осознали влияние гамбургер-меню на их показатели вовлеченности и отошли от него.

Con # 3: Неэффективный

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

Гамбургер-меню делает именно это.

Представьте, что вы ищете, чтобы записаться на тренера по фитнесу, и зашли на их сайт, чтобы узнать больше. Вы бы предпочли, чтобы ссылка / кнопка на страницу контактов была:

  1. A) Прямо на главной странице
  2. B) За гамбургер-меню

Конечно, вы бы предпочли, чтобы он был представлен вам сразу.Это важная информация для тех, кто ищет фитнес-тренера! Вам не нужно искать то, что вы ищете.

8 примеров гамбургер-меню

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

🍔 1. Коачелла

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

🍔 2. Frame.io

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

Плюс, обратите внимание на эту классную иконку гамбургера.

🍔 3. Google Диск

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

🍔 4. Народные ботаники

Народные ботаники

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

🍔 5. Codrops

Очень забавный дизайн гамбургерного меню от ребят из Codrops, блога о дизайне, предлагающего бесплатные обучающие материалы и демонстрации различных дизайнов сайтов.Обратите внимание на более тонкие элементы, например, как гамбургер-меню превращается в X =.

🍔 6. Португальские дымоходы

Гамбургер-меню для веб-сайта, посвященного архитектурным красотам португальских дымоходов. Шутки в сторону.

🍔 7. My Fitness Pal

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

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

🍔 8. Memrise

Знаете ли вы, что гамбургерное меню по-испански - это menú de hamburguesas? С приложением Memrise вы могли бы узнать об этом и многом другом.

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

Memrise работает хорошо, потому что ваше основное действие - следовать вашему курсу, а второстепенным действием может быть переключение курса.

_

Готовы использовать иконку гамбургера в своем собственном дизайне? Попробуйте создать дизайн со значком гамбургера с помощью Velocity - наш набор пользовательского интерфейса, доступный в InVision Studio, Photoshop и Sketch.

Краткая история гамбургера Icon

Мы все видели значок гамбургера . Фактически, большинство из нас, вероятно, использует его ежедневно. Он стал основным продуктом в дизайне веб-сайтов и приложений. Я даже сейчас смотрю на него в правом верхнем углу Google Chrome.

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

Создатель

Значок гамбургера был разработан Нормом Коксом для Xerox Star, первого в мире графического пользовательского интерфейса. Норм Кокс является соучредителем Cox & Hall и консультантом по дизайну взаимодействия / взаимодействия с 1982 года. Ему также довелось разработать значок документа для того же интерфейса. Джефф Алдей - замечательный разработчик программного обеспечения, который искал создателя иконки гамбургера и нашел это видео.

Это было сделано в 1990 году при спонсорской поддержке конференции ACM CHI 1990, чтобы рассказать историю виджетов до тех пор. Источник: Брэд Майерс на Vimeo

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

Его графический дизайн должен был быть очень простым «дорожным знаком», функционально запоминающимся и имитировать внешний вид отображаемого списка меню. С таким небольшим количеством пикселей, с которыми нужно было работать, он должен был быть очень четким, но простым.Я думаю, что у нас было только 16 × 16 пикселей для рендеринга изображения. (или, возможно, 13 × 13… точно не помню)

Однако после Xerox Star значок гамбургера на некоторое время исчез.

Воскресение

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

Голосовые заметки из iOS

Похоже, это самое старое появление (за исключением Xerox) значка гамбургера в качестве кнопки меню.Он вышел 17 июня 2009 года и был доступен для iPhone 3Gs. При нажатии на нее открывается список записей и параметров. Apple уже позаимствовала мышь и рабочий стол у Xerox, когда создавала Macintosh, маленький значок не имел большого значения.

Tweetie для iPad

Tweetie было первым приложением для Twitter, созданным Лореном Брихтером, который в то время работал в Apple. Он вышел в 2008 году и использовал значок гамбургера для списков. Кажется, это не случайно, что дизайнер Apple использовал этот значок.

Facebook делает это трендом

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

И, наконец, в 2010 году эта сетка стала полосами.
Facebook уже использовал боковое меню, и все, что они сделали, это подключили эту сетку. Кажется, это одно из самых запоминающихся первых наблюдений за изображением гамбургера .
Похоже, Apple стала главной причиной возрождения значка гамбургера.Они подняли вопрос о смартфоне и о необходимости компактного дисплея. Они уже были поклонниками идей Xerox и начали использовать их в своем интерфейсе. Оттуда его взяли на себя огромные приложения для социальных сетей, и все остальные последовали его примеру.
В настоящее время он используется для представления боковых меню на веб-сайтах и ​​в приложениях, а также в виде списков. Вот несколько крупнейших приложений, которые его используют:

Reeder

Reeder использует значок для перехода к спискам подписок.

Путь

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

Вы также можете найти его на Twitters Bootstrap и Starbucks для навигации.

Он появляется в большинстве приложений и стал отраслевым стандартом для отображения дополнительных опций.

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

А вот и с сайта строительной компании.

Будущее

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

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

Источник: Techcrunch

Где вы впервые увидели ☰?

Сообщите нам об этом в комментариях ниже.



Создание приложения-убийцы - не конец пути

Теперь, когда вы закончили с техническими деталями и окончательным дизайном вашего приложения, пришло время всей вашей тяжелой работе увидеть свет. Индустрия приложений - одна из самых конкурентных сфер бизнеса, и чтобы ваше приложение выделялось из толпы, вы должны научиться продвигать его, как профессионалы. Узнайте, как максимально эффективно использовать свое приложение для iOS или Android в нашей категории «Маркетинг приложений» в блоге, от создания макетов до продвижения на Facebook и загрузки правильных снимков экрана iOS в iTunes Connect - мы вам поможем.

Сделайте мокап для вашего приложения

Сотни бесплатных подарков в высоком разрешении Только для вас!

Наша халява постоянно обновляется!

51 CSS Hamburger Menu Icons

Free HTML and CSS hamburger menu icons . Обновление коллекции за март 2019 года. 13 новинок.

  1. Значки и наборы значков CSS
  2. Значки пунктирного меню CSS
  3. CSS Иконки социальных сетей
  4. Иконки погоды CSS
О коде

Анимированное меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Взаимодействие с SVG (стрелка влево)

Меню для взаимодействия со стрелкой влево с использованием анимации SVG и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Микаэль Айналем
О коде

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

Простое гамбургерное меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Билал.Ризваан
О коде

Преобразование меню гамбургеров

Переход значка меню «Гамбургер» с использованием CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Флорин Поп
О коде

Анимация движущегося гамбургера

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Адам Кун
О коде

Неприятный бургер

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Микаэль Айналем
О коде

Гамбургер

Гамбургер-меню, римейк дриббля Аарона Икера, который выстрелил, - римейк Леонида Арестова.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Гималай Сингх
О коде

Гамбургер Анимация

Анимация гамбургера и тройной цвет фона с использованием CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Гималаи Сингх
О коде

Кнопка меню

Кнопка меню и анимация преобразования горизонтального многоточия.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Минимальная анимированная иконка меню на чистом CSS

Минимальный анимированный значок меню с чистым CSS, также может использоваться с JS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Аарон Икер
О коде

Гамбургер 3D анимация переключателя CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Сделано с использованием
  • HTML (мопс) / CSS (Sass) / JS
О коде

Гамбургер Меню v2

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор
  • Микаэль Айналем
О коде

Сочные бургеры Flippin '

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Гималаи Сингх
О коде

Взаимодействие кнопок меню гамбургера

Взаимодействие кнопок меню «Гамбургер» на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Аарон Икер
О коде

Гамбургер Анимация

Переход значка «Гамбургер» / «Закрыть».

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Рис Мэтью П
Сделано с использованием
  • HTML / CSS (SCSS) / JavaScript
О коде

Щелкните маркер на кнопке меню Использование: после

Используя : после псевдоэлемента на кнопке меню, мы можем добиться эффекта подсветки щелчка.Подобно тому, как в Материальном дизайне Google.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Елица Димитрова
О коде

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

Простой значок меню гамбургер с небольшим jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор
  • Сил ван Дипен
О коде

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

Меню только эффекты CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: svd-full.css

Автор
  • Микаэль Айналем
О коде

Переворачивая бургеры

Набор анимаций открытия / закрытия гамбургер-меню в SVG, HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • rosalieelphick
О коде

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

Анимации меню гамбургеров, все с чистым CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Тамино Мартиниус
О коде

Анимация меню гамбургеров

Четыре различных анимации меню для переключения кнопки меню между гамбургером, крестиком и значком «Назад».

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Кнопка навигации

Анимированная навигационная кнопка (отдельный элемент со стилем рисования) с использованием CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Значок меню с вращением

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Иконка-гамбургер с флажками

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Ахмад Эмран
О коде

Гамбургер Иконки Анимации

CSS-иконок-гамбургеров с отличными состояниями наведения и анимацией.

Автор
  • Райан Маллиган
Сделано с использованием
  • HTML / Мопс
  • CSS / SCSS
  • JavaScript
О коде

Перелистывание переключателя меню

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

Автор
  • Криста
Сделано с использованием
  • HTML
  • CSS / SCSS
  • JavaScript (jquery.js)
О коде

Холодный гамбургер с тумблером

Эффект переключения креативного гамбургера.

Автор
  • Родриго Соуза
Сделано с использованием
  • HTML
  • CSS
  • JavaScript (jquery.js)
О коде

Кнопка для гамбургера

Сексуальная кнопка для гамбургера.

Сделано с использованием
  • HTML
  • CSS
  • JavaScript (jquery.js)
О коде

Гамбургер Open Animation

Открытая анимация гамбургера HTML, CSS и JS.

О коде

Анимация меню SVG

Анимация гамбургерного меню с элементом svg.

Сделано с использованием
  • HTML
  • CSS
  • JavaScript (jquery.js)
О коде

Гамбургер Иконка Анимация

Простая CSS-анимация значков гамбургера с небольшим количеством jQuery.

Автор
  • Валерий Аликин
Сделано с использованием
  • HTML
  • CSS / Менее
  • JavaScript (jquery.js)
О коде

Анимация меню

Анимация меню гамбургера.

О коде

Кнопка меню гамбургера

Кнопка гамбургер-меню HTML, CSS и JavaScript.

Сделано с использованием
  • HTML / Haml
  • CSS / SCSS
  • JavaScript (jquery.js)
О коде

3D Гамбургер Transformicon

Преобразование гамбургера в 3D с помощью HTML, CSS и JS.

Демо-изображение: Click Me! Гамбургерное меню

Click Me! Гамбургер Меню

Оригинальный снимок https://dribbble.com/shots/3323188-Experimental-Hamburger-Menue
Изготовил Александр Изуменко
2 марта 2017 г.

Автор
  • Курт Петрек
О коде

Помощник по приготовлению гамбургеров на полсекунды

Витрина гамбургер-меню.

Демонстрационное изображение: Анимация значка гамбургера

Анимация значка гамбургера

12 анимаций значков гамбургера.
Сделано Rosa
6 ноября 2016 г.

Демо-изображение: Atomic Hamburger Menu CSS

Atomic Hamburger Menu CSS

Атомарное гамбургер-меню HTML и CSS.
Сделано Alex Coven
10 октября 2016 г.

Демонстрационное изображение: Анимация значка гамбургера

Анимация значка гамбургера

Анимация значков гамбургера в HTML, CSS и JavaScript.
Сделано Карлосом
13 августа 2016

Демонстрационное изображение: Анимированный бургер / значок меню

Анимированный бургер / значок меню

HTML, CSS и JavaScript анимированный значок бургера / меню.
Сделано Николасом Смитом
31 июля 2016 г.

Демо-изображение: Эластичное меню для гамбургеров

Эластичное меню для гамбургеров

Эластичное меню гамбургера с HTML, CSS и JavaScript.
Сделано Давиде Кантелли
6 июля 2016 г.

Демонстрационное изображение: 20 кнопок меню для гамбургера

20 кнопок меню для гамбургера

Кнопка меню для гамбургера.Стилизовано и анимировано с помощью чистого CSS.
Сделано Иньси Чен
5 июня 2016 г.

Демонстрационное изображение: значок анимированного меню

Значок анимированного меню

Анимированный значок меню, переключающийся между гамбургером для открытия и X для выхода.
Сделано Эриком Гручей
27 мая 2016 г.

Демонстрационное изображение: Простое переключение панели навигации на X (Vanilla JS)

Простое переключение панели навигации на X (Vanilla JS)

Простое решение CSS и JS для превращения стандартного «гамбургера» Navbar в X при нажатии, а затем обратно в гамбургер при нажатии.Не требует зависимостей, написан на ванильном JS.
Сделано Джозефом Дженгареллой
3 апреля 2016 г.

Демонстрационное изображение: Анимация значка меню

Анимация значка меню

Анимация значков меню с помощью HTML, CSS и JavaScript.
Сделано Мариусом Балаем
23 марта 2016 г.

Демонстрационное изображение: CSS (SASS) Анимация гамбургерного меню

CSS (SASS) Анимация гамбургерного меню

Небольшая анимация при наведении курсора на значок меню гамбургера.
Сделано Дереком Морашем
11 января 2016 г.

Демонстрационное изображение: Значок меню SVG

Значок меню SVG

Значок меню SVG Codrops с всплывающим сообщением.
Сделано в Popmotion
12 ноября 2015 г.

Демонстрационное изображение: расширяющийся значок навигации по гамбургеру

Расширяющийся значок навигации по гамбургеру

Расширяющееся меню гамбургера, которое отображает назначение кнопки более четко, чем типичный значок меню гамбургера.
Сделано Райаном Кэнфилдом
11 мая 2015 г.

Демонстрационное изображение: Анимация гамбургерного меню

Анимация гамбургерного меню

Еще одна анимация гамбургер-меню.
Сделано Себастьяном Поппом
2 апреля 2015 г.

Демонстрационное изображение: переход отрисованного гамбургера

Переход отрисованного гамбургера

Больше удовольствия с переходами значков гамбургера.
Сделано Джесси Коуч
4 сентября 2014 г.

Подходит ли навигация по гамбургерам для вашего веб-сайта или приложения?

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

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

Несмотря на то, что гамбургерная навигация добилась значительного успеха, она также вызывает споры. Значок гамбургера подвергся критике в сообществе пользовательского интерфейса (UI) / взаимодействия с пользователем (UX) из-за его использования в дизайне рабочего стола. Они говорят, что это вкусно, но вредно для вас. Публичный имидж гамбургера изменился от говядины Кобе, откормленной травой, до слизистого Биг-Мака, скрывающегося за глянцевой фанерой.Но есть ли случаи, когда имеет смысл использовать гамбургерную навигацию?

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

Краткий урок истории: эволюция размера экрана

Значок гамбургера, созданный бывшим дизайнером продуктов Xerox Нормом Коксом еще в 1981 году, изначально был предназначен для обозначения списка в системе Xerox «Star».

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

Потом появился смартфон. Сохранение площади экрана стало приоритетом, и всплывающие меню, запускаемые значком навигации гамбургера, стали la mode du jour . Сначала появилась навигация с вкладками из собственных приложений iOS: обычно четыре-пять значков, прикрепленных к нижней части экрана, представляли основные пункты меню.

Затем, в 2010 году, появился г-н Итан Маркотт, который перевернул индустрию с ног на голову с помощью адаптивного дизайна. Посетителям сайта больше не нужно было дважды нажимать на контент; вместо этого контент был иерархически структурирован в одном столбце полной ширины.Это изменение также потребовало от дизайнеров и разработчиков учета 15-позиционной горизонтальной навигации на рабочем столе. Войдите в гамбургерную навигацию, которая отправила навигацию в какое-то невидимое забвение, только чтобы быть обнаруженной, когда пользователь активно ее искал.

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

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

Функция быстрого питания

Скрытие навигации на рабочем столе вызвало немало споров в сообществе UX.

Неправильное использование гамбургера (как и любого элемента пользовательского интерфейса на вашем сайте) может нанести ущерб вашему UX, так же как Биг Мак может отправить вас прямо в отравленную пищевую кому.Проблема возникает, когда дизайнеру предоставляется слишком сложная панель навигации и служебных программ; Чтобы сайт выглядел чистым, они без особой предусмотрительности размещают значок гамбургера. Отсюда термин «подвал», когда дизайнеры UX говорят о навигации вне холста: он находится под страницей и заполнен дерьмом. Итак, зачем скрывать элементы навигации? Это правильный вопрос, который необходимо изучить и протестировать на этапе создания прототипа сайта.


Мощность в шаблоне

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

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

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


Подходит ли значок гамбургера для вашего веб-сайта?

В те решающие первые месяцы планирования, исследования, картографирования сайта и прототипирования вашей творческой команде нужно будет разбить переменные, которые представляет ваш проект, чтобы принять это всегда важное решение.Нужен ли мне значок веб-сайта гамбургерного меню на рабочем столе или в мобильном приложении? Как максимально эффективно использовать экранную площадь? По данным Localytics, 21% пользователей избавляются от приложений всего за один раз, поэтому важно вовлекать людей с самого начала. Итак, может ли гамбургерная навигация помочь - или будет больно?

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

Сколько у вас пунктов меню?

В идеальном мире все сайты были бы такими же простыми, как сайт агентства - Работа, Услуги, Команда, Блог - но, скорее всего, вам нужно нечто большее.Итак, спросите себя, могу ли я извлечь самое необходимое, а остальное добавить на панель вне холста или во всплывающее меню? Если ваши текущие схемы трафика доказывают, что 80% трафика направляется на страницу с продуктами, зачем размещать страницу компании так же заметно, загромождая ее?

Осторожно: Это общее заявление. Ничто из этого не является черно-белым; все дело в контексте.

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

Вы создаете веб-приложение или простой адаптивный веб-сайт?

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

Какие функции должны присутствовать постоянно?

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

Я структурировал свой контент с помощью надежной стратегии конверсии?

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


Есть ли альтернативы Hamburger Icon?

Один из способов увеличить значок навигации гамбургера - это добавить ярлык. По данным Nielsen Norman Group, пользователи настольных компьютеров открывали скрытое меню в 27% случаев, в отличие от видимой навигации в 48% случаев и комбинированной навигации в 50% случаев. Другими словами, ярлыки могут помочь. Показательный пример: Джеймс Фостер из Exisweb провел эксперимент, чтобы посмотреть, изменит ли что-нибудь изменение значка гамбургерного меню.Результаты, достижения? Пользователи нажимали значки с надписью «Меню» на 20% чаще.

Альтернативы

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

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

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

Как мы уже упоминали, определенно есть альтернативы значку гамбургера, так что у вас есть варианты. Но помните…

Все дело в контексте.

«Нет более сомнительной фразы, чем« исследования показали ». Через пять минут исследования покажут нечто иное ».

- Рэнди Коэн, Нью-Йорк Таймс

Погуглите за десять минут, и вы сможете найти многочисленные примеры из практики, показывающие, какое положительное влияние значок гамбургера может оказать на рентабельность инвестиций вашего сайта.Вы также можете покопаться и найти столько же случаев, когда значок используется неправильно и фактически вредит пользовательскому интерфейсу сайта. ConversionXL провел тест на сайте электронной коммерции, который показал увеличение дохода не менее чем на 4% в зависимости от стиля значка гамбургер-меню. Команда ExisWeb провела аналогичный тест, который дал совсем другие результаты (+ 12%), когда значок гамбургера был заменен словом «Меню».

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

Мы полностью поддерживаем и активно проводим A / B-тестирование наших входящих клиентских проектов, чтобы постоянно оценивать все пути покупателя и повышать конверсию. Поразительно, чему можно научиться за короткий промежуток времени. Эта гигантская навигация, которую вы решили, что ОБЯЗАТЕЛЬНО должны показывать постоянно, просто может работать лучше на холсте.

Итак, возникает вопрос, следует ли мне использовать гамбургер-навигацию на моем следующем сайте?

Вы не узнаете, пока не протестируете.

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

Видите меню Pen Hamburger? Нет, спасибо, я предпочитаю хот-доги. Автор: Шон Демпси (@seanseansean) на CodePen.

Джесси Рэнд - креативный директор и менеджер по дизайну / развитию Опыт Джесси позволил ему работать в индустрии мобильных стартапов Бостона, где он работал дизайнером пользовательского интерфейса и художником-графиком.Затем Джесси перешел в мир веб-дизайна и разработки и создал обширное портфолио интерактивных веб-сайтов. Работая одновременно в качестве дизайнера печати и основного веб-разработчика, Джесси руководит производством всех основных проектов дизайна / разработки в Vital. Джесси имеет степень бакалавра искусств Плимутского государственного университета по специальности графический дизайн. Просмотреть полную биографию

Связанный контент

10 вопросов о дизайне вашего веб-сайта Получите ресурс

Устная история значка гамбургера (рассказанная людьми, которые были там)

Когда несколько лет назад UX и дизайнер продукта Джефф Алдей заинтересовался, кто отвечал за гамбургер-меню, он немного покопался.Он нашел на Vimeo видео с конференции 1990 года, на которой демонстрировалась история виджетов. В разделе, посвященном меню, рассказчик описывает, как в строках заголовков окон Xerox Star вы найдете кнопки меню в виде трех маленьких строк, сложенных в квадрат.

Ранние значки гамбургеров на Xerox Star

Меню гамбургеров… в 1981 году: Алдай стал золотым.

Он пошел искать ведущего специалиста по графике на Xerox Star и нашел Норма Кокса. «Вы сделали домашнее задание», - ответил Норм Кокс.«Вы нашли нужного парня».

Гамбургеры распространены повсеместно. А в декабре прошлого года Кокс получил необычный подарок на 67-й день рождения, когда Reddit и McDonald’s объединились, чтобы сделать меню гамбургеров на обоих мобильных сайтах похожими на настоящие гамбургеры (если вы нажмете на него, вы сможете разместить заказ на Биг Мак). Иными словами, интерес к истории этого маленького символа с приятным названием не ослабевает, в основном потому, что ни тот, ни другой не имеют своей популярности.

Все, кто когда-либо пытался создать простой веб-сайт для мобильных устройств в последнее время (т.е. я, буквально делая именно это в тот день, когда меня попросили написать эту статью), вероятно, использовал один. И каждый достойный UX-специалист, вероятно, задавался вопросом, когда крупные игроки, создающие такие большие вещи, как Chrome или Amazon, перестанут их использовать.

Если недоброжелатели видят в этой бессмертной любви чуму плохой информационной архитектуры (низкая вовлеченность, неэффективность), другие говорят, что именно повсеместное распространение символа делает его хорошим. «Из-за чистой силы, использования и дизайнерской лени», - сказал инженер-программист и дизайнер UX Майкл Дж.Ранее в этом месяце Фордхэм писал на Medium, что гамбургер стал хорошим вариантом. Пользователи во всем мире знают, что означают эти три маленькие линии.

Однако многие не знают , как этот крошечный символ является прямым порталом в истоки персональных компьютеров, где все это началось. Я поговорил с тремя людьми, которые были там - Коксом, Дэвидом Кэнфилдом Смитом и Ральфом Кимбаллом, - о том, как появился гамбургер, о бурных днях основания Xerox Star и о том, как лучше всего продумать дизайн (такой, который дает 40%). летние символы все еще сильны) похоже.

Полный Xerox Star, прорыв в интерфейсах для персональных компьютеров.

Норм Кокс, ведущий дизайнер, подразделение разработки систем Xerox. : Когда Джефф Алдей выследил меня и сказал: «О, вся наша отрасль обеспокоена тем, как использовать это маленькое меню, и я понимаю, что вы его разработали». Я посмотрел на него и подумал: «Черт возьми, я, наверное, сделал это в 8:30 вечера во вторник и никогда не думал об этом дважды».

Дэйв Кэнфилд Смит, главный разработчик Xerox SDD : Это было так тривиально.Одна из вещей, которыми я больше всего горжусь, это то, что у Star было гораздо меньше команд, чем у других компьютеров того времени, и, тем не менее, он мог делать все, на самом деле, он мог больше, чем они. Это гамбургер-меню было способом включить несколько оставшихся команд, которые мы не могли придумать, как сделать лучше.

(Любопытно? Загрузите образец анимации значка гамбургера для использования в InVision Studio. У вас нет Studio? Начните сегодня)

Cox : Это своего рода абсурд, что революция, которую представляет Звезда, именно этот маленький символ - вероятно, наименее продуманная часть всего - стала такой повсеместной особенностью.

«Черт возьми, я, наверное, сделал это в 8:30 вечера во вторник и никогда не думал об этом дважды».

Норм Кокс

Ральф Кимбалл, главный дизайнер Xerox SDD : Я работал в Xerox с 1972 по 1982 год, сначала научным сотрудником исследовательского центра Xerox в Пало-Альто, или PARC, занимался дизайном пользовательского интерфейса, а затем работал над рабочей станцией Star. Наша работа со Star заключалась в интеграции и согласовании многих творческих графических подходов, которые были разработаны до 1976 года в Xerox PARC, а еще раньше - в SRI и Университете Юты (Dynabook Алана Кея).

Смит : SRI наняла меня прямо из Стэнфорда в 1975 году, и именно там я познакомился с Чарльзом Ирби. Он был ведущим дизайнером в команде UI, работая с Дугом Энглебартом. Через год он ушел работать в PARC и вскользь упомянул, как было бы здорово, если бы я тоже мог приехать. Теперь я прошел стажировку в PARC, где Кей была моим научным руководителем. Там я использовал Alto (первый настоящий персональный компьютер) и Small Talk (недавно разработанный Кей язык программирования), чтобы написать свою диссертацию, Pygmalion.Поэтому, когда Ирби сказал, что я должен поехать с ним в PARC, я ухватился за этот шанс. Xerox PARC не была такой большой, как SRI, но она была гораздо более совершенной: вы не могли попасть в дверь, если у вас не было докторской степени.

Cox : Когда я впервые приехал в PARC, на мне был новый костюм-тройка из полиэстера. Секретарша звонит Чарльзу Ирби, который возглавлял группу по разработке пользовательского интерфейса и функциональности продукта Xerox Star. Он спускается по лестнице в своих обрезанных шортах-карго, сандалиях Birkenstock и футболке с принтом галстука.У него был хвост до талии, взлохмаченная борода; этот тощий, маленький парень. Я чувствовал себя таким неуместным. Я очень быстро понял, что на PARC я не ношу костюм-тройку: это были футболки и шорты, килты ... один парень ходил с попугаем на плече. У всех в офисе были мешки с фасолью, неоновые вывески и благовония. Вспомните Калифорнию 1970-х годов.

«Один парень ходил с попугаем на плече».

Норм Кокс, по PARC культуре

Smith: Когда PARC построил Alto (это был инструмент разработки; они сделали всего пару сотен штук) - внезапно появился этот растровый экран, 700 x 1000 точек, каждая точка могла быть индивидуально включена и выключена.Это вызвало взрыв творчества.

Cox : До выхода Star я руководил командой дизайнеров по разработке шрифтов для электронных пишущих машинок, которые Xerox производила в то время. Затем в нашем офисе появился альт - с этой мышью и черно-белым пиксельным дисплеем. Меня всегда восхищало что-то новое: живопись, акварель, столярные изделия, все творческое, любая новая среда. Итак, я начал экспериментировать с этим.

Смит : Когда я пришел в SDD в 1976 году, меня посадили в угол подвала.Мы собирались попробовать продать этот компьютер - «Звезду» в офисы. Офисные работники не разбирались в компьютерах, и, кроме того, в то время считалось, что менеджеры не печатают, а секретари. Так что моя идея заключалась в том, чтобы перенести офисные вещи (картотеки, корзины для бумаг, документы, папки) в компьютерный мир, а не дать офисным работникам компьютерный интерфейс с инструкциями для изучения. И иконки, которые я изобрел в PARC для своей диссертации, были идеальным средством.

Kimball : Революционным достижением стало использование графики в Star, а не клавиатурных команд.

Smith : Я помню, как заполнил стены своего кабинета распечатками: я написал на каждом, какие атрибуты значка и что вы могли с ним использовать. У нас был документ, картотечный шкаф, принтер, часы, почтовый ящик, библиотека (в основном это был интерфейс для поиска информации, как и у Google, только у меня не хватило ума изобрести Google)… В принтере использовалась лазерная печать, а в почтовом ящике - Ethernet - оба изобретения PARC. Мы использовали всю эту технологию PARC, чтобы создать интегрированную офисную систему.

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

Smith : Я сделал первый набор рисунков значков (рис. 3 ниже). Они были дерьмом. Действительно некрасиво. Слава Богу за Норма Кокса. Однако Чарльз был очень тактичен. Он никогда не говорил: «Дэйв, эти фотографии - отстой.Вместо этого он однажды пришел ко мне в офис и сказал: «Мы думаем, было бы неплохо устроить небольшой конкурс дизайнеров для иконок».

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

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

Cox : Знаете, это было началом дизайнерского мышления. Мы узнали, что что-то, что хорошо выглядит, также должно работать. Тестирование на удобство использования открыло нам глаза на многое. И после этого Боуман, Дэйв и Уоллес сказали: «Хорошо, Норм, сделай это». Так я стал официальным дизайнером. Но это были очень командные усилия.

«Это было начало дизайнерского мышления»

Norm Cox

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

Cox : На дисплее Star можно было работать только с 72 точками на дюйм, и с этим вы должны были обмениваться идеями. Мы черпали вдохновение в существующей символике принтеров и копировальных аппаратов Xerox, а также в дорожных знаках…

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

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

Smith : Типичная команда, в которую мы вставили, была «paginate.«Что касается окна документа, то компьютер, который у нас был, не был достаточно быстрым, чтобы справляться с разбивкой на страницы (выравнивание абзацев, текст, обтекающий изображение и т. Д.)« На лету »в реальном времени. Итак, после того, как вы закончите вводить информацию, которую хотите в свой документ, вы нажмете разбиение на страницы, и он разместит весь ваш документ. Но знаете, это была глупая команда; это произошло только потому, что компьютер был недостаточно мощным, чтобы не отставать от него. Никому из нас это не понравилось, поэтому мы поместили его в меню, которое не было в дороге, чтобы люди не видели его все время.То, что мы хотели видеть перед людьми, было важными командами.

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

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

Cox : Другой символ, который вы видите часто используемым сегодня, - вертикальное многоточие - это что-то вроде сокращенной версии того же самого.

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

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

Smith : Нам не нужен беспорядок. Мы хотели, чтобы он был визуально привлекательным: мы чувствовали, что люди будут проводить с ним больше времени, если им понравится.

Cox : Если вы проследите, как дизайн иконок эволюционировал с тех звездных дней через Apple и Microsoft, он перешел от простых линий к фотореализму с тенями, бликами и всем остальным и снова вернулся к очень простым линиям и формам.И на то есть причина. Это просто; он хорошо общается. Людям надоедает слишком много украшений, им просто нужны факты.

«[Дизайн иконок] прошел путь от простых линий до фотореализма с тенями, бликами и другими вещами, и снова вернулся к очень простым линиям и формам. И для этого есть причина ».

Норм Кокс

Smith : Сегодня Mac повсюду использует меню. В Star у нас было выпадающее меню, но пункты меню были отдельными командами.Дело не в том, что у нас не было функций: у нас были мультимедийные документы с текстом, шрифтами, макетом, изображениями, встроенным звуком - с огромным содержанием. Тем не менее, у нас не было необходимости в меню. Вам не кажется, что это довольно изумительно? Мы сделали это не путем исключения команд, а путем их обобщения: понятие универсальных команд, это я придумал. Люди в Apple использовали вырезать, копировать, вставить, отменить и некоторые другие. До этого Star использовала перемещение, копирование, удаление, отмену, отображение свойств, копирование свойств и некоторые другие.

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

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

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

[Примечание: наш разговор с Ральфом Кимбаллом происходил по электронной почте]

Убить кнопку гамбургера - TechCrunch

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

Даже если вы не дизайнер, я настоятельно рекомендую прочитать блестящее глубокое погружение Луиса Абреу в формате GIF: Почему и как избегать гамбургерных меню.Вот краткое изложение его анализа, а также несколько других исследований и некоторый контекст о том, как это происходит в самых популярных приложениях. Есть споры о веб-гамбургерах, но я сосредоточусь на мобильных устройствах с iOS в качестве примеров, и многое из этого применимо к Android.

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

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

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

Одно решение: панель вкладок.

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

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

Вы жертвуете небольшим размером экрана, но оно того стоит. A / B-тест мобильного приложения zeebox, представленный The Next Web, показывает, насколько сильно эти недостатки могут повлиять на уровень взаимодействия с приложением. Шесть месяцев назад zeebox попытался переключиться с панели вкладок на гамбургер, и его показатели упали. Недавно он провел одновременный A / B-тест для двух схем навигации и обнаружил, что панель вкладок обеспечивает среднюю частоту использования в неделю на 55% и среднюю дневную частоту на 8,7% выше.

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

Почему пора развиваться

Похоже, что пользователям нужны одноцелевые мобильные приложения, которые быстро подходят к конкретному варианту использования. Вот почему мы находимся в разгаре «Великого разукрупнения 2014 года». Большие, раздутые приложения пытаются уменьшить и ускорить, добавляя некоторые функции в автономные или сопутствующие приложения. Messenger от Facebook и Swarm от Foursquare - два ярких примера.

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

Слева: старая кнопка навигации Facebook. Справа: новый стиль панели вкладок

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

Другие популярные приложения с панелями вкладок на iOS включают Twitter, Instagram, Pinterest, Uber, Skype, WordPress, Quora и App Store. Многие из них раньше оседлали гамбургеры, но пришли в себя. Gmail, Google Maps, Pocket, собственное приложение TechCrunch и многие другие до сих пор используют устрашающий значок, который Норм Кокс изобрел для Xerox примерно в 1981 году.

Иногда, если приложение уже в значительной степени является одноцелевым, скрытие действительно посторонних функций на боковой панели может иметь смысл.Возьмем, к примеру, Lyft, где в основном вы просто бронируете машину и очень редко нужно посещать свой профиль, информацию об оплате или отправлять приглашения. Но Spotify стреляет себе в ногу, пряча за гамбургером важные функции «Обзор», «Обнаружение», «Радио», «Плейлисты» и «Входящие».

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

[Изображение предоставлено: Caliwood Design Lab, Луис Абреу, Брент Джексон]

Что такое кнопка гамбургера и как она работает?

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

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

Итак, в этом руководстве мы углубимся в детали и поместим кнопку гамбургера под решетку: что такое кнопка для гамбургера? Для чего его использовать? Зачем возиться с этим стилем кнопки и как сделать его с помощью CSS? Давайте копаться.

Что такое кнопка гамбургера?

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

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

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

История кнопки гамбургера

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

Пользователи быстро поняли концепцию: нажмите кнопку, чтобы открыть раскрывающееся меню с навигационными ссылками или ссылками на функции.Однако, помимо первоначального запуска в Xerox, дизайнеры особо не беспокоились о гамбургере - до тех пор, пока Twitter не начал использовать его в 2008 году. Год спустя он появился в iOS, и сегодня это основной продукт веб-дизайна, часто появляющийся в топе. в левом или верхнем правом углу веб-страниц и предоставляет удобное место для хранения больших меню.

Булочки для гамбургеров и недостатки

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

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

Но есть и преимущества развертывания меню на основе булочек на вашем сайте, в том числе:

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

Примеры кнопок для гамбургеров

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

Кнопка гамбургера в приложении для Android

Начнем со стандартного примера гамбургер-меню в приложении. Главный экран приложения Gmail выглядит так - обратите внимание на кнопку гамбургера в левом верхнем углу.

Источник изображения

При нажатии на значок меню появляется слева.

Источник изображения

Кнопка гамбургера на сайте

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

Источник изображения

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

Источник изображения

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

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

См. Меню Pen Animated от Danilo (@ Danilo06) на CodePen.

Как сделать кнопку гамбургера с помощью CSS

К счастью, создать кнопку гамбургера в CSS не так уж сложно.Если вы предпочитаете создавать код CSS в автономном редакторе, попробуйте такие варианты, как RapidCSS или Stylizer. RapidCSS быстрый, легкий и хорошо подходит для пользователей, имеющих некоторый опыт работы с CSS. Stylizer предлагает больший формат графического интерфейса пользователя и поставляется с параметрами немедленного предварительного просмотра, чтобы гарантировать, что код, который вы пишете, дает желаемые результаты.

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

Источник изображения

Перейдите в нижнюю часть нового меню слева и выберите «Дополнительные CSS».

Источник изображения

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

Источник изображения

Пришло время приготовить этот бургер. Допустим, вы хотите создать статический значок. Согласно W3Schools, лучше всего начать с HTML:

.

Этот код является основой для кнопки гамбургера.

Затем добавьте свой CSS:

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

Приготовление динамической иконки кнопки гамбургера с помощью CSS

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

Щелкните, чтобы открыть меню, и оно превратится в следующее:

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

Чтобы создать этот динамический вариант, начните с вашего HTML:

Теперь добавьте свой CSS:

Наконец, добавьте немного JavaScript:

Создание кнопки бургера без кода

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

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

1. Концентратор CMS

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

2. Squarespace

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

3. Webnode

40 миллионов пользователей создали сайты с помощью Webnode - добавляйте или изменяйте контент всего несколькими щелчками мыши и быстро настраивайте размещение и раскрывающиеся параметры любого гамбургер-меню.

4. Зона 123

Simple - это название игры для этого конструктора веб-сайтов. Site123 не является чем-то необычным - он бесплатный и позволяет легко интегрировать гамбургер-меню в ваш веб-дизайн.

Hamming It Up

Не всем нравится кнопка гамбургера.

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

Примечание редактора: этот пост был первоначально опубликован в мае 2020 года и был обновлен для полноты.

.
Оставить комментарий

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.