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

Его можно найти, например, в приложении YouTube и Facebook. введите описание изображения здесь введите описание изображения здесь

86 голосов | спросил Lenar Hoyt 14 Jpm1000000pmMon, 14 Jan 2013 12:06:18 +040013 2013, 12:06:18

9 ответов


81

Я считаю, что название для него - это Hamburger Menu , как ссылка на значок, который обычно используется для него ( ux-hamburger-drawer-icon.333-tr.s20 , аналогично символу Unicode ≡ U+2261 Identical To) , а также сложный характер элементов в ящике. Ярлык гамбургера и Боковая панель гамбургера также будут узнаваемы для сообщества UX.


Немного о том, что я считаю правильным использованием термина:

Меню само по себе ничего нового; меню боковой панели со ссылками на различные части приложения /сайта использовались таким образом с раннего веб-сайта (и, возможно, в другом месте, возможно, раньше). Кроме того, кнопки, которые переключают скрытый контент или, возможно, позволяют перетаскивать, чтобы показать контент, также существовали для многих дольше, чем сенсорные смартфоны; ящик в старых версиях QuickTime Player и ящик для выбора цвета OS X .

Этот шаблон лучше всего описывается как комбинация меню выдвижного ящика и шаблонов кнопок «открыть /скрыть» таким образом, чтобы:

  • Основное содержимое скользит в сторону или остается визуально снизу, показывая ящик нажатием кнопки или перетаскиванием,
  • Содержимое ящика представляет собой метаконтент, предназначенный для временного доступа (кнопки навигации, список контактов чата и т. д.),
  • Нажатие на частично видимую основную область содержимого закрывает ящик,
  • Кнопка активации всегда видна и отображается в верхнем /нижнем колонтитуле «navigation» непосредственно рядом со стороной, на которой появится ящик.

Существуют (разумеется) варианты, которые сгибают вышеуказанные рекомендации - некоторые реализации могут разрешать только нажатие (не перетаскивание) кнопки, или можно отключить функциональность tap-to-restore-main-content при представлении одного и того же приложения на устройстве с большим экраном, или ящик может быть странно использован для чего-то без кликабельности. Из-за этого вышеописанные пункты описывают идеализированную и распространенную форму шаблона, который быстро стал популярным и широко распространенным.

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


Первое, что я помню, увидев, что ящик боковой панели такого типа был в нетрадиционном приложении Tweetie для iPad. У webOS также были такие выдвижные ящики довольно долгое время, но я не думаю, что либо использовал кнопку «гамбургер», либо размер ящика фиксированной ширины. У меня нет определенного ответа для вас на этом, но . номер . . открыть . источник . библиотеки . для . создание . эти . вид . . боковая панель . меню . на GitHub, похоже, все указывают на приложение iOS для Facebook, как вы уже упоминали, и на Path.

Я полагаю, что Facebook /Path-Style Sidebar /Menu /Drawer можно считать текущим сроком для него, хотя я предсказываю, что ссылки на названия компаний устаревали бы до слишком долгого времени.

ответил Slipp D. Thompson 14 Jpm1000000pmMon, 14 Jan 2013 13:14:53 +040013 2013, 13:14:53
23

Боковая панель Как упоминалось в приложении

  

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

ответил FrankL 14 Jpm1000000pmMon, 14 Jan 2013 12:49:32 +040013 2013, 12:49:32
22

Сам шаблон макета (а не значок гамбургера) известен как « Off Canvas ». Об этом писал Люк Вроблевски в статье о Шаблонах макетов нескольких устройств .

  

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

Он реализован в рамках Zurb Foundation .

  

Если вы использовали приложение iPhone Facebook (или «Путь» или любое количество приложений   что теперь следуют этому соглашению), то вы видели панель off canvas   в родном приложении. Вы нажмете кнопку, и панель сместится слева   (или в зависимости от того, как вы смотрите на него, основная панель выходит из   путь).

И в таких статьях, как Off The Beaten Canvas: Изучение потенциала Отложного холста от Smashing Magazine:

  

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

ответил Matt Obee 15 Maypm13 2013, 13:01:19
18

Чтобы изложить то, что написал @matt_d_rat,

Здесь отличная запись здесь об этом, но он был первоначально разработан Norm Cox для рабочей станции Xerox Star в 1981 году ! Этот значок примерно такой же старый, как и концепция самого GUI!

Чтобы увидеть его в действии просмотрите это видео и пропустите примерно 21 минуту.

Рабочая станция Xerox Star - меню гамбургера!

ответил Chris Barr 30 J000000Wednesday14 2014, 18:10:27
12

В соответствии с сайтом разработчиков Android и Спецификация дизайна Google он известен как Навигационный ящик .

ответил Shruti 27 J0000006Europe/Moscow 2013, 13:05:21
8

Из связанного обсуждения, начатого на Quora , Джефф Алдай немного углубился в происхождение самой иконы, и обнаружил, что Норм Кокс - человек, которому приписывают дизайн значка для Xerox Star персональная рабочая станция, которая была представлена ​​в 1981 году.

В рассылке по электронной почте между Cox и Олдей, Кокс показывает, как появилась иконка, и конструктивные ограничения, над которыми они работали. Хотя сегодня икону с любовью называют иконой гамбургера, Кокс раскрывает собственную шутку Xerox для иконы;

  

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

ответил matt_d_rat 2 PMpWed, 02 Apr 2014 14:23:43 +040023Wednesday 2014, 14:23:43
4

Боковая навигация - это один предлагаемый термин, как указано здесь: http://www.androiduipatterns.com/2012/06 /emerging-ui-pattern-side-navigation.html

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

В нем также перечислены другие кандидатские термины:

  • Меню приложений Fly-in
  • Выдвиньте навигацию
  • Раздвижная панель навигации
  • Меню слайдов
ответил Dvir Adler 22 PMpMon, 22 Apr 2013 17:36:14 +040036Monday 2013, 17:36:14
3

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

ответил Tom 26 J0000006Europe/Moscow 2013, 02:01:46
2

Это будет называться «меню гамбургеров».

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

ответил BrianMojo 15 Maypm13 2013, 12:27:17

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132