Scott
Контекстное меню полезно, когда у объекта есть второстепенные действия, относящиеся именно к нему, но постоянно видимые кнопки отвлекали бы от основной задачи. Используйте его для переименования, дублирования, перемещения, копирования ссылки или просмотра подробностей. Оставляйте главное действие объекта на виду, открывайте меню понятным триггером и давайте путь через сенсорный экран и клавиатуру, не зависящий от правого клика.
Например, строка списка файлов может открывать файл, а кнопка дополнительных действий — показывать операции для этой строки. Рабочее пространство для совместного UI-дизайна в Pixso позволяет команде сравнить триггер, состояния меню и восстановление на связанных экранах до разработки. Меню работает, если человек понимает, к чему оно относится, выбирает действие и может исправить ошибку без догадок.
Сначала определите задачу, потом поверхность
Начните с действия и его объекта, а не с иконки из трёх точек. Сформулируйте контракт одним предложением: «В строке этого файла меню показывает действия, которые изменяют файл или открывают к нему доступ». Затем проверьте, действительно ли действие контекстное.
- Контекстное: действие относится к объекту рядом с триггером — например, переименовывает один файл или копирует его ссылку.
- Ситуативное: действие нужно иногда, но постоянная кнопка в каждой строке конкурировала бы с главным действием.
- Ограниченное: действие выполняется в коротком меню или ведёт на ясно названный следующий экран.
Не прячьте назначение или обязательный шаг только ради аккуратного меню. Если пользователю нужно проверить уведомления, сменить рабочее пространство или выполнить следующий этап сценария, используйте постоянную навигацию или отдельную страницу. В руководстве по паттернам мобильной навигации разобрана граница между глобальными и контекстными действиями; здесь мы рассматриваем операции, привязанные к одному объекту.
Сделайте триггер заметным, но не навязчивым
Размещайте триггер в той же строке или объекте, которым он управляет. Кнопка рядом с названием файла показывает связь; одно меню в заголовке страницы не объясняет, к какому файлу оно относится. Визуально отделяйте главное действие от контекстного триггера и не открывайте меню по всей строке, если строка одновременно кликабельна.
Если смысл иконки неочевиден, добавляйте видимую подпись. Иконка дополнительных действий подходит знакомой строке файла, но её доступное имя должно называть объект, например «Другие действия для брифа Q3». Подпись не должна меняться при открытии и закрытии меню. Не полагайтесь на подсказку при наведении, если действие необходимо обнаружить для выполнения задачи.
В сенсорном интерфейсе триггеру нужна удобная область нажатия и достаточный отступ от главного действия строки. Если строка узкая, используйте явную кнопку «Ещё» или лист действий вместо точного долгого нажатия. Долгое нажатие может быть дополнительным сокращённым путём, но не единственным способом.
Группируйте действия по частоте и риску
Сначала показывайте безопасные и частые действия, а операции, меняющие владельца, доступ или данные, отделяйте. Люди сканируют меню, а не читают каждый пункт как абзац. Подписи должны быть короткими, конкретными и грамматически параллельными.
| Группа | Действие | Почему здесь |
|---|---|---|
| Частые | Переименовать | Частое обратимое изменение текущего файла. |
| Частые | Дублировать | Создаёт копию, не изменяя оригинал. |
| Поделиться | Копировать ссылку | Даёт ссылку на тот же файл и сохраняет контекст строки. |
| Организация | Переместить в папку | Открывает ограниченный следующий шаг с видимым местом назначения. |
| Рискованные | Архивировать файл | Меняет видимость; покажите путь восстановления до или после действия. |
Используйте разделители и названия групп, только если они ускоряют просмотр, а не превращают меню из пяти пунктов в миниатюрную страницу настроек. Размещайте разрушительное действие последним и объясняйте его словами, а не только цветом. «Удалить файл» понятнее, чем «Убрать», особенно если «Убрать из папки» означает другую операцию.
Отключайте действие только тогда, когда причина понятна и объект нельзя изменить в текущем контексте. Если у пользователя нет разрешения, сообщите «Переименование недоступно: у вас права просмотра» в доступном описании или предложите запросить доступ. Неактивная иконка без объяснения создаёт впечатление неисправности.
Продумайте размещение для мыши, касания и клавиатуры
Правый клик — лишь один жест указателя, а не полноценная модель взаимодействия. Предоставьте те же действия через видимый триггер и явно опишите клавиатурный путь. Меню должно оставаться связанным со своим объектом при изменении области просмотра.
- Указатель: открывайте меню триггером строки или контекстным жестом объекта. Держите его внутри окна и закрывайте, когда фокус или указатель переходят на несвязанную поверхность.
- Сенсорный экран: открывайте доступной кнопкой дополнительных действий или документированным долгим нажатием. Если у края меню получается слишком маленьким, превращайте его в нижний лист или список на всю ширину, сохраняя подписи и порядок.
- Клавиатура: переводите фокус на меню или первый пункт, объявляйте текущий объект, поддерживайте стрелки там, где этого требует выбранный паттерн, закрывайте по Escape и возвращайте фокус на триггер после закрытия.
Проверяйте триггер во всех четырёх углах прокручиваемой панели. Меню, привязанное к документу, а не к контейнеру прокрутки, может оторваться от своей строки. Тестируйте масштаб, длинные подписи, письма справа налево (если они поддерживаются) и окно, которое короче меню. Не закрывайте меню единственное видимое подтверждение выбранного элемента.
Покажите состояние, разрешения и восстановление
Само меню — лишь одно состояние. Полный дизайн объясняет, что происходит до действия, во время выполнения и при неопределённом результате. Это особенно важно для операций, меняющих расположение, общий доступ или видимость файла.
| Состояние | Что должен понять пользователь | Полезный ответ |
|---|---|---|
| По умолчанию | Какой объект связан с меню и какие действия доступны. | Стабильная подпись триггера и сгруппированные действия. |
| Открытие или загрузка | Готовится ли выбранное меню. | Сохранить идентичность строки, не показывать действия другого элемента. |
| Ограничение прав | Почему действие недоступно. | Объяснить ограничение или предложить допустимый путь. |
| Успех | Что изменилось и где теперь искать объект. | Встроенное подтверждение или локальный toast со смысловой ссылкой. |
| Ошибка или тайм-аут | Произошло ли изменение и что можно повторить. | Сохранить контекст объекта, проверить неоднозначный результат и повторить только неудачное действие. |
В учебном примере дизайн-файла выбор «Переместить в папку» открывает компактный выбор места назначения. После успеха строка может сообщить «Перемещено в Research» и на ограниченное время предложить «Отменить перемещение». При тайм-ауте не показывайте сразу второе разрушающее или дублирующее действие. Сначала сверьте текущее расположение, затем сообщите, безопасен ли повтор.
Если действие нельзя отменить, заранее объясните последствие. Подтверждение должно называть файл и эффект, а не задавать абстрактное «Вы уверены?». В руководстве по подтверждению удаления подробнее разобран выбор между отменой, просмотром и диалогом для опасных операций.
Прототипируйте полный сценарий в Pixso
Соберите меню как небольшой набор компонентов, а не как один скриншот. Создайте строку по умолчанию, открытое меню, сфокусированный пункт, действие без разрешения, вариант для узкого экрана и ответы успеха и ошибки. Одинаковые имя файла и подписи действий на всех экранах позволяют рецензенту оценить поведение, а не сопоставлять расходящийся текст.
Размещайте заметки о поведении рядом с компонентом: что открывает меню, где начинается фокус, как оно закрывается, как адаптируется у края и что происходит при сбое операции. Используйте варианты для действительно общих состояний; разделяйте компонент, если он начинает объединять разные семантики — меню, список выбора и диалог.
Попросите рецензента без объяснений выполнить задачу: «Переместите бриф Q3 в папку Research, а затем восстановите исходное состояние, если передумали». Наблюдайте, может ли он определить файл, найти триггер без правого клика, выбрать нужное действие и найти восстановление. Повторите тест только с клавиатурой и в узком окне. Полированное меню, которое не проходит этот сценарий, ещё не готово к передаче в разработку.
Контекстное меню — не ящик для хранения
Держите меню достаточно компактным для быстрого просмотра и достаточно конкретным для объекта, который его открыл. Когда действий становится слишком много, сначала пересмотрите модель объекта и основной поток. Постоянные назначения перенесите в навигацию, длинные настройки — на страницу, а диалог используйте только там, где существенное решение требует сосредоточенного внимания. Руководство по дизайну всплывающих окон помогает классифицировать поверхность, вышедшую за рамки простого меню.
Надёжный UX контекстного меню делает видимыми связь, действие, состояние и восстановление. Дайте второстепенным операциям обнаруживаемый триггер, упорядочьте их по задаче и риску, поддержите мышь, касания и клавиатуру и так же тщательно спроектируйте результат. Затем проверьте полный сценарий в Pixso до начала разработки.
