Жесты, манипуляции и взаимодействия (HTML)

Статья
12/12/2015

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

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

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

API платформы в среде выполнения Windows поддерживают взаимодействия с помощью трех типов событий взаимодействия: указателя, жеста и манипуляции.

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

Подробнее об этом см. в следующих кратких руководствах.

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

Жесты

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

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

Имя	Тип	Описание
Касание	Статический жест	Пользователь прикасается к экрану одним пальцем, затем убирает палец.
Нажатие и удерживание	Статический жест	Пользователь прикасается к экрану одним пальцем и оставляет палец на месте.
Скользящее движение	Жест манипуляции	Пользователь прикасается к экрану одним или несколькими пальцами и двигает их в одном направлении.
Прокрутка	Жест манипуляции	Пользователь прикасается к экрану одним или несколькими пальцами и перемещает их на короткое расстояние в одном направлении.
Вращение	Жест манипуляции	Пользователь прикасается к экрану двумя или несколькими пальцами и двигает их по дуге в направлении по часовой стрелке или против нее.
Уменьшение	Жест манипуляции	Пользователь прикасается к экрану двумя или более пальцами и сдвигает их.
Увеличение	Жест манипуляции	Пользователь прикасается к экрану двумя или более пальцами и раздвигает их.

Манипуляции

Манипуляция — это немедленная, постоянная реакция или отклик объекта или элемента пользовательского интерфейса на жест. Например, жесты скольжения и прокрутки, как правило, приводят объект или элемент пользовательского интерфейса в движение.

Результатом манипуляции, выраженным объектом на экране и в пользовательском интерфейсе, является взаимодействие.

Взаимодействия

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

В этом разделе описаны некоторые общие типы взаимодействия.

Обучение

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

Обучение взаимодействию

Выполнение команд

Жест касания вызывает основное действие, например запуск приложения или выполнение команды приложением.

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

Сдвиг

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

Взаимодействие сдвига

Масштабирование

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

Визуальное масштабирование и изменение размера

При визуальном масштабировании изменяется масштаб всей области содержимого для более детального отображения содержимого. В отличие от этого, изменение размера используется для настройки относительного размера одного или нескольких объектов в области содержимого без изменения самой области содержимого. На двух верхних рисунках показано визуальное масштабирование, а на двух нижних — изменение размера прямоугольника на экране без изменения размера других объектов. Подробнее: Руководство по визуальному масштабированию и изменению размеров.

Визуальное масштабирование

Изменение размера

контекстное масштабирование

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

Контекстное масштабирование

Поворот

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

Поворот

Выделение и перемещение

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

Выделение и перетаскивание

Отображение панелей команд

Жест прокрутки отображает различные панели команд или экрана входа в систему.

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

Отображение команд приложения

Чтобы вывести системные команды, проведите пальцем от правого края экрана влево, чтобы открыть недавно использовавшиеся приложения, проведите пальцем от левого края экрана вправо, а чтобы отобразить закрепленные или закрытые команды, проведите пальцем от верхнего края экрана вниз.

Отображение системных команд