Реакция на взаимодействия с помощью мыши (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

В приложениях Магазина Windows на C++, C# или Visual Basic вы можете отвечать на ввод мышью, обрабатывая те же базовые события указателя, которые используются для сенсорного ввода и ввода с помощью пера.

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

Совет Информация в этом разделе относится к разработке приложений Магазина Windows на JavaScript.

О разработке приложений Магазина Windows на C++, C# или Visual Basic можно узнать из раздела Реакция на взаимодействия с помощью мыши (XAML).

О разработке приложений Магазина Windows на C++ с DirectX можно узнать из раздела Разработка элементов управления для мыши (DirectX и C++).

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

Создание первого приложения Магазина Windows на JavaScript

Схема создания приложений Магазина Windows на JavaScript

Дополнительные сведения о событиях см. в разделе Краткое руководство: добавление элементов управления HTML и обработка событий.

Компоненты приложения от начала до конца: Дополнительные сведения об этой функциональности см. в нашей серии Компоненты приложения от начала до конца.

Взаимодействие с пользователем от А до Я (HTML)

Настройка взаимодействия с пользователем от А до Я (HTML)

Рекомендации по взаимодействию с пользователем:

Библиотеки элементов управления платформы (HTML и XAML) предоставляют все механизмы взаимодействия с пользователем, используемые в Windows, в том числе стандартные взаимодействия, анимированные физические эффекты и визуальную обратную связь. Если вы не планируете настраивать механизмы поддержки взаимодействий, используйте стандартные элементы управления.

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

Примеры: Примеры использования этой функциональности см. в коллекции примеров приложений Магазина Windows.

Пример "User interaction customization, start to finish"

Ввод: пример возможностей устройства

Пример "Input: Instantiable gestures"

Ввод: жесты и манипуляции с GestureRecognizer

Общие сведения

Взаимодействия с помощью мыши лучше всего подходят для приложений, требующих точного указания и щелчков. Эта точность естественным образом поддерживается пользовательским интерфейсом Windows 8, который оптимизирован для неточных по своей природе сенсорных взаимодействий. Оптимизируйте свое приложение Магазина Windows для сенсорного ввода, и вы получите базовую поддержку мыши по умолчанию.

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

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

Рекомендации по поддержке взаимодействий с помощью мыши

Ниже приведены некоторые рекомендации по поддержке взаимодействий с помощью мыши.

Язык мыши Windows 8

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

Термин	Описание
Обучение при наведении	Наведите указатель на элемент, чтобы показать подробную информацию или визуальные обучающие элементы (например, подсказку), не выполняя никакого действия. Подробнее см.: Добавление подсказок.
Щелчок левой кнопкой для основного действия	Щелчок левой кнопкой вызывает основное действие (например, запуск приложения или выполнение команды).
Прокрутка для изменения представления	Отображение полос прокрутки для перемещения вверх, вниз, влево и вправо в пределах области содержимого. Для прокрутки содержимого можно щелкать на полосах прокрутки или вращать колесо мыши. Полосы прокрутки могут обозначать расположение текущего представления в пределах области содержимого (сдвиг касанием отображает аналогичный пользовательский интерфейс).
Щелчок правой кнопкой мыши для выбора и выполнения команды	Щелчок правой кнопкой мыши для отображения панели приложения с глобальными командами. Щелчок правой кнопкой мыши на элементе для его выделения и отображения контекстных команд для выбранного элемента. Примечание Щелчок правой кнопкой мыши для отображения контекстного меню, если выбор или команды панели приложения не являются допустимыми вариантами поведения пользовательского интерфейса. Однако настоятельно рекомендуется для всех вариантов поведения команд использовать панель приложения.
Команды пользовательского интерфейса для масштабирования	Отображение команд пользовательского интерфейса на панели приложения (например, + и -) либо нажатие клавиши CTRL и вращение колеса мыши для эмуляции жестов увеличения и уменьшения масштаба.
Команды пользовательского интерфейса для поворота	Отображение команд пользовательского интерфейса на панели приложения либо нажатие клавиш CTRL+SHIFT и вращение колеса мыши для эмуляции жеста поворота. Чтобы повернуть весь экран, поверните само устройство.
Щелчок левой кнопкой мыши и перетаскивание для изменения взаимного расположения элементов	Щелчок левой кнопкой мыши и перетаскивание элемента для его перемещения.
Щелчок левой кнопкой мыши и перетаскивание для выделения текста	Щелчок левой кнопкой мыши в пределах доступного для выделения текста и перемещение для выделения текста. Двойной щелчок для выделения слова.
Использование мыши при выборе углов и краев экрана для системных команд	Перемещение мыши в правый верхний или нижний угол в системах с письмом слева направо (или в левый угол — в системах с письмом справа налево) для появления чудо-кнопок с системными командами. Перемещение мыши в левый верхний угол в системах с письмом слева направо (или в правый верхний угол — в системах с письмом справа налево) для отображения эскиза приложения, использовавшегося последним. Щелчок левой кнопкой мыши или щелчок с перетаскиванием для перебора запущенных приложений и переключения на них либо перетаскивание для прикрепления приложения (если поддерживается разрешением экрана). Перемещение мыши в левый нижний угол при использовании раскладки в системах с письмом слева направо (или в правый нижний угол при использовании раскладки в системах с письмом справа налево) для отображения эскиза приложения на начальном экране. Щелчок левой кнопкой мыши и перетаскивание от верхнего края к нижнему краю экрана для закрытия текущего приложения. Щелчок левой кнопкой мыши и перетаскивание от верхнего края вниз к левому или правому краю для прикрепления текущего приложения к этой стороне экрана.

Оборудование

Запрашивайте возможности мыши (MouseCapabilities), чтобы определить, к каким аспектам пользовательского интерфейса вашего приложения аппаратная часть мыши может получать доступ напрямую. Дополнительные сведения о запросе возможностей устройств см. в разделе Краткое руководство: распознавание устройств указания.

Некоторые мыши снабжены пятью кнопками. Четвертая и пятая кнопки, которые называются X-кнопками, обычно служат для перемещения вперед и назад в веб-браузерах, таких как Windows Internet Explorer. Сопоставьте эти кнопки с соответствующим пользовательским интерфейсом (с кнопками "Назад" и "Вперед") вашего приложения.

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

Колесо прокрутки должно активировать масштабирование (если такая возможность предоставлена) при нажатии пользователем клавиши-модификатора CTRL.

Визуальная обратная связь

Обнаружив мышь (при помощи событий перемещения или наведения), отображайте пользовательский интерфейс для мыши, чтобы показать функциональность, которую предоставляет элемент. Если мышь не перемещается в течение определенного времени или если пользователь инициирует взаимодействие касанием, сделайте так, чтобы пользовательский интерфейс для мыши постепенно исчезал с экрана. В этом случае пользовательский интерфейс будет аккуратным, не загроможденным лишними элементами.
Не используйте курсор для обратной связи при наведении, для этого достаточно обратной связи от элемента (см. ниже раздел "Курсоры").
Не отображайте визуальную обратную связь, если элемент не поддерживает взаимодействие (например, статический текст).
Не используйте прямоугольник фокуса для взаимодействий с помощью мыши. Оставьте их для взаимодействий с использованием клавиатуры.
Отображайте визуальную обратную связь одновременно для всех элементов, представляющих одну и ту же цель ввода.
Предусмотрите кнопки (например, + и -) для эмуляции манипуляций касания, таких как сдвиг, поворот, масштабирование и пр.

Дополнительные общие рекомендации по визуальной обратной связи см. в разделе Руководство по визуальной обратной связи.

Курсоры

Для указателя мыши предусмотрен набор стандартных указателей. Они указывают на основное действие элемента.

С каждым из стандартных указателей сопоставлено изображение по умолчанию. Пользователь или приложение могут в любое время замещать изображение по умолчанию любым другим стандартным курсором. Приложения Магазина Windows определяют изображение курсора при помощи функции PointerCursor.

Если требуется настроить курсор мыши:

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

Система команд

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

Связанные разделы

Реакция на взаимодействие с пользователем

Поделиться через