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

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

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

Значок гамбургера — меню, символ, кнопка и т. д. — существует с 1981 года. Он был создан Нормом Коксом, руководителем отдела графики Xerox Star, первого коммерческого персонального компьютера.

Норм разработал символ как контейнер для выбора меню. Горизонтальные линии представляют собой абстрактное изображение вертикального списка. Вы можете увидеть кнопки меню гамбургера в действии на Xerox Star в видео ниже на отметке 21:15.

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

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

История значка гамбургера в мобильных приложениях немного мрачнее. Впервые он был использован приложением Twitter под названием «Tweetie» в 2008 году. Вскоре после этого он начал появляться в операционной системе Apple iOS для iPhone, что, скорее всего, привело к его популярности в дизайне мобильных приложений.

Для чего нужен значок гамбургера?

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

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

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

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

Значок гамбургера — это просто символ, который стал обозначать «меню». Как только вы начнёте искать его, вы увидите его повсюду.

Почему это меню называется «гамбургер»?

Благодаря исследованиям дизайнера Джеффа Алдея история иконки в виде гамбургера довольно подробно изложена. Однако мы действительно не знаем, почему и когда он получил прозвище «гамбургер».

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

По-видимому, люди просто видят еду во многих вещах.

Дело против гамбургер-меню

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

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

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

Панель навигации в Google Maps:

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

(Под кнопкой вы можете увидеть значок меню гамбургера на мобильном веб-сайте. Веб-сайты также часто используют этот дизайн!)

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