Как называется меню три точки
Перейти к содержимому

Как называется меню три точки

  • автор:

UI-элементы и жесты в мобильных приложениях

Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.

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

Splashscreen — изображение, «заставка», которую пользователь видит во время загрузки приложения.

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

Webview — компонент, который позволяет отобразить страницы веб-сайта в приложении. Например, webview «Как получить бонусы»:

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

Action menu — кнопка, которая представляет собой три точки, и при нажатии (тапе) на которую открывается меню с несколькими action’ами.

Tab — вкладка; обычно переключение между табами осуществляется нажатием (тапом) на нужный таб или смахивание (свайпом) вправо/влево.

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

Progress Bar — индикатор степени выполнения какого-либо действия (например, показывает оставшееся время работы активности «продвижение товара»).

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

AppBar (Android) / NavBar (iOS) — панель инструментов в верхней части экрана, содержащая кнопки управления текущим экраном.

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

Toggle switches/Тумблер — переключатель между двумя состояниями вкл/выкл.

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

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

Строка поиска — поле ввода для поискового запроса.

Placeholder — текстовая заглушка в поле ввода, подсказывающая, что можно туда ввести (на скринах — текст «Поиск объявлений»).

Page Controls — элемент управления, который отображает текущее положение экрана в плоском списке страниц (на скринах — точки над кнопкой, отображающие текущее положение через изменение цвета).

Counter — точка или число, обозначающее количество непросмотренных уведомлений (например, количество непрочитанных сообщений).

Overlay — перекрывающий слой, который позволяет затемнить или осветлить элемент, на который он был наложен.

Tooltip — всплывающее сообщение, которое завязано на элемент и обучает использованию той или иной части приложения.

Onboarding — обучающая функциональность в приложении, появляющаяся при первом запуске для ознакомления пользователя с продуктом.

Suggest List — выпадающий список, состоящий из подсказок; появляется при вводе букв, слов или символов в поле ввода. Или список ранее совершенных поисковых запросов. Отдельный пункт из этого списка — Suggest.

Checkbox — элемент интерфейса, позволяющий выбрать любое количество опций (ни одной, одну или несколько).

Status Bar — строка состояния, содержащая общую информацию об устройстве: время, дату, сеть, уровень заряда и т.п.

Slider — горизонтальная шкала с элементом управления, по которой скольжением пальца можно управлять состоянием или значением характеристики (в нашем случае расстоянием от указанного адреса):

Жесты

Тап — касание, нажатие на сенсорный экран. Чтобы открыть любое приложение на смартфоне — мы тапаем на его иконку.

Double tap — два коротких касания, двойной тап.

Мультитап — три и более тапов подряд по одному элементу.

Лонгтап — нажатие с удержанием на несколько секунд. Позволяет открыть дополнительные опции там, где они есть.

Скролл — вертикальное пролистывание содержимого скольжением пальца по экрану сверху вниз или снизу вверх.

Свайп — смахивание вниз, вверх, вправо или влево. Похоже на скролл, только с «легким», коротким касанием.

Pull to refresh (p2r) — дословный перевод: «потяни для обновления».

Drag&Drop — изменение положения элементов интерфейса с помощью перетягивания: как говорит нам название «тащи и бросай»!

Pinch — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.

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

  • тестирование мобильных приложений
  • тестирование по
  • тестирование приложений
  • ui testing
  • Блог компании Юла
  • Разработка мобильных приложений
  • Тестирование мобильных приложений
  • Дизайн мобильных приложений

Кебаб-меню Kebab-menu

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

Когда использовать

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

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

Если одно-два действия важнее и чаще используются — оставьте их рядом с меню.

Описание работы

Показывайте меню на странице постоянно, а не только по наведению.

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

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

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

Фокус и работа с клавиатурой

При переходе к меню клавишей Tab меню получает фокус — появляется чёрная рамка:

Если нажать клавишу Enter — меню откроется и первый пункт получит фокус:

Клавиши ↓ ↑ переводят фокус между строками списка. Переход между строками не цикличен — с последней строки фокус не переходит на первую, как и с первой на последнюю.

Клавиша Enter выполняет выбранное действие.

Клавиша Esc закрывает меню.

Дизайн

Используйте для меню иконку&nbsp из библиотеки интерфейсных иконок.

Кебаб-меню может быть трех размеров. Используйте большой кебаб в таблицах и крупных списках.

Маркер наведения — черный круг  #000 с прозрачностью 9 %. Прозрачный черный круг одинаково контрастно выглядит на разных фонах.

Как называется меню три точки

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

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

Меню

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

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

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

кнопка humber и смайлики

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

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

Значок «Гамбургер» – меню, символ, кнопка и т. Д. – существует с 1981 года. Его создал Норм Кокс, руководитель отдела графики Xerox Star, первого коммерческого персонального компьютера.

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

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

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

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

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

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

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

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

гамбургер-меню в Gmail

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

значок гамбургера в стартовом меню

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

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

гамбургер значок и гамбургер

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

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

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

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

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

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

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

панель навигации google maps

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

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

значок меню с тремя точками

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

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

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