手势、操作和交互 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

借助触摸交互,你的应用转换并使用物理手势模拟直接操作 UI 元素。

触摸交互可在用户与屏幕上的元素进行交互时提供自然的真实体验。相比之下,通过某个对象属性窗口或其他对话框与该对象交互被认为是间接操作。 Windows 还支持在各种输入模式和设备上的触摸交互,包括触摸、鼠标和笔。

Windows 运行时平台 API 通过以下三种类型的交互事件支持用户交互:指针、手势和操作。

  • 指针事件用于获取基本的接触信息(如位置和设备类型)、扩展信息(如压力和接触几何图形)以及支持更复杂的交互。
  • 手势事件用于处理静态单指交互,例如,点击和长按(双击和右击是从这些基本手势派生的)。
  • 操作事件用于动态多点触摸交互(如收缩和拉伸)以及使用延时和速度数据的交互(如平移/滚动、缩放和旋转)。注意  由操作事件提供的信息不能标识交互。它指定输入数据(如位置、平移增量和速度)。此数据随后用来确定操作并执行操作。  

有关详细信息,请参阅下面的快速入门主题:

接下来,我们介绍手势、操作和交互之间的关系。

手势

手势是在输入设备(单个手指、多个手指、笔/触笔、鼠标等)上或者通过这些设备进行的实际操作或运动。例如,要启动、激活或调用命令,你可以使用单个手指点击触摸屏或触控板设备(相当于使用鼠标单击、使用笔点击或按键盘上的 Enter 键)。

下面是一组用于操作 UI 并执行交互的基本触摸手势。

名称 类型 描述
点击 静态手势 用一个手指触摸屏幕,然后抬起手指。
长按 静态手势 用一个手指触摸屏幕并保持不动。
滑动 操作手势 用一个或多个手指触摸屏幕并向着同一方向移动。
轻扫 操作手势 用一个或多个手指触摸屏幕并向着同一方向移动较短距离。
转动 操作手势 用两个或多个手指触摸屏幕并沿着顺时针或逆时针的弧线移动。
收缩 操作手势 用两个或多个手指触摸屏幕,然后将手指并拢在一起。
拉伸 操作手势 用两个或多个手指触摸屏幕,然后将手指分开。

 

操作

操作是对象或 UI 对某个手势的直接持续反应或响应。例如,滑动和轻扫手势通常会使元素或 UI 以某种方式移动。

操作的最终结果、对象出现在屏幕上以及 UI 中的方式就是交互。

交互

交互依赖操作的解释方式以及源自该操作的命令或操作。例如,对象既可以通过滑动手势又可以通过轻扫手势移动,但是结果会因是否超过了距离阈值而异。滑动可用于拖动对象或平移视图,而轻扫可用于选择项或显示 AppBar

本节描述了一些常见交互。

了解

长按手势显示详细的信息或指导性可视化内容(例如,工具提示或上下文菜单),而不会执行某个操作或命令。如果在显示可视化对象时启动了滑动手势,则仍然可以使用平移。有关详细信息,请参阅视觉反馈指南

了解交互

命令

点击手势调用主要操作,例如,启动某个应用程序或执行某个命令。

命令交互

平移

滑动手势主要用于平移交互,但也可用于移动、绘制或书写。 平移是一种用于在一个视图(如计算机的文件夹结构、文档库或相册)中导航短距离和少量内容的触摸优化技术。平移相当于使用鼠标或键盘进行滚动,但只有当视图中的内容数量导致内容区域溢出可视区域时才有必要进行平移。有关详细信息,请参阅平移指南

平移交互

缩放

收缩和拉伸手势用于三种类型的交互:视觉缩放、调整大小以及语义缩放。

视觉缩放和调整大小

视觉缩放调整整个内容区域的放大级别,以获得更详细的内容视图。相比之下,调整大小是一种用于调整内容区域中一个或多个对象的相对大小,而不会更改内容区域视图的技术。此处上面的两个图像显示了视觉缩放,下面的两个图像显示了屏幕上矩形的大小调整,而未更改任何其他对象的大小。有关详细信息,请参阅视觉缩放和调整大小指南

视觉缩放交互

调整大小交互

语义缩放

语义缩放是一种触摸优化技术,用于在一个视图中呈现和导航结构化数据或内容(如计算机的文件夹结构、文档库或相册),而不需要平移、滚动或树视图控件。语义缩放提供了相同内容的两个不同视图,从而可以随着放大和缩小查看更多或更少的内容。有关详细信息,请参阅语义式缩放指南

语义缩放交互

旋转

旋转手势模拟在平整表面上旋转一张纸的体验。执行该交互的方法是将两个手指放在对象上,一个手指围绕另一个手指转动或者两个手指都围绕一个中心点转动,并往所需方向转动整只手。你可以使用同一只手的两个手指,或者每只手一个手指。有关详细信息,请参阅旋转指南

旋转交互

选择和移动

滑动和轻扫手势用于横向滑动操作,即垂直于内容区域平移方向的移动。这解释为选择交互,如果超过距离阈值,则解释为移动(拖动)交互。此图描述了这些过程。有关详细信息,请参阅横向滑动指南

选择和拖放交互

显示命令栏

轻扫手势显示各种命令栏或登录屏幕。

从屏幕底部或顶部边缘处轻扫可显示应用命令。使用 AppBar 显示应用命令。

显示应用命令

从右边缘轻扫可显示系统命令,从左边缘轻扫可显示最近使用的命令,从上边缘轻扫到下边缘可显示停靠或关闭的命令。

显示系统命令

相关主题

概念

响应用户交互

触摸交互设计

参考

Windows.UI.Core

Windows.UI.Input

Windows.UI.Xaml.Input

示例 (DOM)

HTML 滚动、平移以及缩放示例

输入:DOM 指针和手势处理示例

输入:可实例化手势示例

示例(Windows 应用商店应用  API)

输入:使用 GestureRecognizer 的笔势和操作

输入:XAML 用户输入事件示例

XAML 滚动、平移以及缩放示例

示例 (DirectX)

DirectX 触控输入示例

输入:操作和手势 (C++) 示例