Как использовать контекстное меню в дизайне интерфейсов

Виды меню

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

Есть главное меню — для всей операционной системы . В Windows таковое разворачивается при нажатии на кнопку, расположенную на панели задач. В GNU/Linux, если говорить о графических оболочках KDE, XFCE, LXDE, отличия — лишь в логотипах, нарисованных на кнопке. Ну и в названиях программ. А концепция та же самая.

В GNOME 3 меню, — Gnome Shell, — занимает весь экран и является пред светлые очи пользователя при нажатии кнопочки на верхней панели или просто при подведении указателя к левому верхнему углу экрана.

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

Контекстное меню — универсальное. Оно работает и во всей операционной системе, и на панелях, и на ярлыках, и в окнах программ — практически везде. Даже в эмуляторе терминала в GNU/Linux . (Правда, в оболочке GNOME 3 универсальности уже нет.)

Практика

Уразуметь возможности, предоставляемые контекстным меню, можно прямо сейчас. Предположим, вы читаете эту статью на экране ноутбука , удобно устроившись на диване. Мышь не подключена. С помощью тачпада наводим указатель на любую ссылку — и жмём правую кнопку (она под рукой, на том же тачпаде). Появляется меню, в котором выбираем «Открыть в новой вкладке».

То есть, страница с данным текстом останется открытой, её не доведётся загружать заново, если возникнет желание вернуться и продолжить чтение. Удобно? А то!

Теперь предположим, что вы работаете в GNOME 3 и жалуетесь на ограниченность действия правого клика (вот взяло начальство да и поставило на все машины Linux Mint 12). Но в такой ситуации паниковать не нужно, не всё так плохо.

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

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

Локальное контекстное меню

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


  1. Проведите вверх, а затем вправо. В настройках TalkBack можно задать другой жест.
  2. В зависимости от настроек TalkBack меню появляется на экране в виде круга или списка.
    • Меню в виде круга. Чтобы посмотреть пункты меню, проведите по нему. Чтобы выбрать объект, поднимите палец.
    • Меню в виде списка. Чтобы посмотреть пункты меню, проведите по экрану влево или вправо. Чтобы выбрать объект, нажмите на него дважды.

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

  • Навигация. Вам доступны следующие варианты: «По умолчанию», «Символы», «Слова», «Строки», «Абзацы», «Заголовки», «Ссылки», «Элементы управления», «Специализированный контент», «Перемещение по разделам» и «Перемещение по списку».
  • Настройки редактирования. Во время редактирования текста вы можете выбрать нужное действие: «Переместить курсор в начало», «Переместить курсор в конец», «Выбрать все» и «Включить режим выбора текста». Когда текст выделен, также будут доступны следующие пункты: «Вырезать», «Копировать», «Вставить» и «Завершить выбор текста». С помощью клавиш регулировки громкости можно перемещать курсор в окне редактирования.
  • Управление ярлыками. Вы можете добавлять, удалять и изменять ярлыки для контента. На некоторых изображениях они отсутствуют. Чтобы вам было проще распознавать фотографии и другие картинки, создавайте для них ярлыки с помощью TalkBack. Ими можно управлять в настройках TalkBack в разделе Персональные ярлыки.
  • Ползунок. При выборе ползунка (например, предназначенного для регулировки громкости или перехода к определенному моменту видео) вы можете задать значение от 0 до 100.

«Шеф, всё пропало!»

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

Здесь не обойтись без утилиты «regedit», о запуске которой я рассказывал в начале статьи.

После появления на экране редактора предстоит слева «пройтись» к папке:


Кликаем правой кнопкой по последнему элементу, выбираем «Создать» — «Раздел». Присваиваем ему имя «Open With»:

Переходим к только что созданному элементу и справа видим один единственный ключ с названием «По умолчанию». Следует отредактировать его значение (двойной щелчок левой кнопкой или через контекстное меню «Изменить…»), указав следующую строку:


После сохранения изменений (кнопка «ОК»), можно проверять результаты столь изнурительной деятельности!

Уверен, что проблема с исчезновением «Открыть с помощью» устранилась!

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

Будем разбираться вместе.

Анализ интерфейса Medium

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

Контекстное меню обмена пользовательского интерфейса Medium


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

Примечание: Если вы еще не знакомы с терминами модификатор, блок и элемент, вам стоит посмотреть вот этот более ранний урок: введение в методологию БЭМ.

Стили, которые определяют положение контекстного меню в Medium

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

Таким образом, нам нужно будет:

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

С этим читают