Взаимодействие указателей

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

Основные выводы при адаптации к вводу данных с настольного компьютера.

  1. Add hover states and interactions to your existing system.
  2. Account for right-click interaction for added efficiency.
  3. Размеры мишеней должны быть более точными.

Основной клик

Основной щелчок мыши, или в большинстве случаев щелчок левой кнопкой мыши, является главным способом взаимодействия с курсором, на который полагается пользователь настольного компьютера. Общее правило таково: пользователь должен иметь возможность выполнять все основные действия с помощью одних только основных щелчков мыши. Нескрытие функциональности от основных щелчков мыши не только улучшает доступность, но и имеет решающее значение для вспомогательных технологий, таких как Switch Access .

Вторичный клик

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

Right-clicking a card to show a context menu for more options
Right-clicking a card to show a context menu for more options.

Ховер

In addition to cursor icon change, interactivity can also be indicated by changing an element's visual state on hover. For design guidance, learn more at states .

Hover can also reveal supplementary information or actions, such as tooltips or list actions nested in context menus or overflow menus.

Here hover is used to show additional information in a tooltip and more interactions
Here hover is used to show additional information in a tooltip and more interactions.

Перетаскивание

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

Альтернативный вариант взаимодействия — перетаскиваемые карточки.

Выбор

Streamline selection interactions for the desktop experience by providing a dedicated click target.

Instead of touch & hold to reveal selection options, desktop allows for checkboxes on hover.

Целевой размер

When sizing UI elements for cursor interactions, avoid buttons that are overly large or have intrinsic touch targets beyond the element's visual boundaries.

Set a max width for buttons and their targets when using a pointer device.
Allow buttons to expand full width or maintain intrinsic touch targets.

Pointer targets can be smaller than the standard 48 x 48 dp touch target, for alternative cursor interactions, such as an archive on hover that appears primarily after the item is selected.

For more on designing for inputs, learn more on Material Design inputs . Learn how to implement with Mouse and touchpad support .