响应用户交互 (HTML)

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

了解用户交互平台、输入源(包括触摸、触摸板、鼠标、笔/触笔、键盘)、模式(触摸键盘、鼠标滚轮、钢笔橡皮擦等)以及 Windows、Windows 应用商店应用和 Windows Phone 应用商店应用支持的用户交互。

针对 Windows 8.1 进行的更新: Windows 8.1 针对指针输入 API 引入了多个更新和改善措施。请参阅 Windows 8.1 的 API 更改获取详细信息。

我们将介绍如何使用(采用 JavaScript 的应用、采用 C++、C# 或 Visual Basic 的应用以及使用 DirectX 和 C++ 的应用)内置控件跨语言框架免费提供基本输入和交互功能,如何跨语言框架共享交互模式,以及如何自定义用户交互体验。

我们通过指南、最佳做法以及示例向你介绍如何利用 Windows 的交互功能构建具有直观、吸引人的沉浸式用户体验的应用。

提示  本主题中的信息特定于使用 JavaScript 开发应用。

请参阅响应用户交互 (XAML),以了解使用 C++、C# 或 Visual Basic 的应用。

请参阅响应用户交互 (DirectX and C++) 以了解结合使用 C++ 和 DirectX 的应用。

 

先决条件: 如果你还不熟悉使用 JavaScript 开发应用,请阅读这些主题来熟悉此处讨论的技术。

创建第一个采用 JavaScript 的 Windows 应用商店应用

采用 JavaScript 的 Windows 应用商店应用的路线图

通过快速入门:添加 HTML 控件并处理事件DOM 事件的事件捕获和事件浮升来了解事件。

应用功能详细信息: 更深入地了解此功能以作为应用功能大全系列的一部分

用户交互详细信息 (HTML)

用户交互自定义详细信息 (HTML)

用户体验指南:

平台控件库(HTMLXAML)提供完全 Windows 用户交互体验,包括标准交互、动态显示的物理效果和视觉反馈。 如果你不需要自定义的交互支持,请使用这些内置控件。

如果平台控件不够,那么以下用户交互指南可以帮助你提供一种在各种输入模式上保持一致的令人信服的沉浸式交互体验。这些指南主要侧重于触摸输入,但也有与触摸板、鼠标、键盘和触笔输入相关的一些内容。

示例:应用示例中查看正在使用的功能。

用户交互自定义详细示例

输入:设备功能示例

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

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

输入:可实例化手势示例

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

输入:简化的墨迹示例

输入:墨迹示例

Windows 8 用户交互平台概述

设计应用时考虑触摸交互。支持触摸输入的设备越来越多而且种类多样,触摸交互是基本的 Windows 体验。

因为触摸是 Windows 和 Windows Phone 用户的主要交互模式,所以这些平台已针对触摸输入进行优化以使你的应用具有较高的响应速度和准确度且易于使用。请放心,屡试不爽的真正输入模式(如鼠标、笔和键盘)继续受到完全支持而且其功能与触摸完全一致(请参阅手势、操作和交互)。很多用户熟悉并且喜欢传统的输入模式提供的速度、精确度以及触觉反馈。这些独特的交互体验尚未受到威胁。

使用户交互体验的设计更具创意。支持最广泛的功能和首选项以吸引最多的受众,因此你的应用将吸引更多客户。

从内置控件到完全自定义,该用户交互平台基于以下功能层,其复杂度和功能性逐层增加。

内置控件

利用内置控件提供对大部分 Windows 和 Windows Phone 应用有效的通用用户交互体验。

内置控件一开始就是为触摸优化而设计的,可在所有输入模式间提供吸引人的一致交互体验。它们支持一组完整的手势:长按、点击、滑动、轻扫、收缩、拉伸和转动。当你将其与直接操作(如平移、缩放、旋转、拖动以及逼真的惯性行为)一起使用时,它们将提供引人注目的沉浸式交互体验,该体验在整个 Windows 平台上都遵循最佳做法。

有关控件库的详细信息,请参阅添加控件和内容

视图

通过应用视图的平移/滚动和缩放设置来调整用户交互体验。应用视图指示用户访问和操作你的应用及其内容的方式。应用视图还提供一些行为,如延时、内容边界回弹和吸附点。

平移和滚动设置指示用户在视图内容太多而无法放在视区中时,如何在单个视图内进行导航。例如,单个视图可以是杂志或书的某一页、计算机的文件夹结构、文档库或相册。

缩放设置适用于光学缩放和 SemanticZoom 控件。语义式缩放是一种触摸优化技术,它在一个视图内呈现和导航大量的相关数据或内容集。它使用两个不同的分类模式(或缩放级别)进行工作。 这类似于在单个视图中平移和滚动。 平移和滚动可以与语义式缩放一起使用。

使用应用视图和以下级联样式表 (CSS) 属性、文档对象模型 (DOM) 属性以及 DOM 事件来修改平移/滚动和缩放行为。这可以比处理指针和手势事件提供更流畅的交互体验。

API 平面CSS 属性DOM 属性DOM 事件
touch-action 指定给定区域是否可以通过平移或缩放被操作。
平移/滚动

-ms-overflow-style

-ms-scroll-chaining

-ms-scroll-limit

-ms-scroll-limit-x-max

-ms-scroll-limit-x-min

-ms-scroll-limit-y-max

-ms-scroll-limit-y-min

-ms-scroll-rails

-ms-scroll-snap-points-x

-ms-scroll-snap-points-y

-ms-scroll-snap-type

-ms-scroll-snap-x

-ms-scroll-snap-y

-ms-scroll-translation

scroll

scrollHeight

scrollLeft

scrollTop

scrollWidth

onscroll

缩放

-ms-content-zoom-chaining

-ms-content-zooming

-ms-content-zoom-limit

-ms-content-zoom-limit-max

-ms-content-zoom-limit-min

-ms-content-zoom-snap

-ms-content-zoom-snap-points

-ms-content-zoom-snap-type

msContentZoomFactor onmscontentzoom
两者 onmsmanipulationstatechanged

 

有关应用视图的详细信息,请参阅定义布局和视图

有关缩放的详细信息,请参阅光学缩放和大小调整指南语义式缩放指南

有关平移/滚动的详细信息,请参阅平移指南

DOM 指针和手势事件

指针是使用统一事件机制的泛型输入类型。它可以显示活动输入源(触摸屏、触控板、鼠标或笔)的基本信息(例如,屏幕位置)。 手势范围从简单、静态交互(如点击)到更复杂的操作(如缩放、平移和旋转)。 有关详细信息,请参阅手势、操作和交互

注意  

静态手势事件是在交互完成之后触发的。 操作手势事件表明一个持续的交互。操作手势事件在用户触摸元素时开始引发,一直持续到用户抬起手指或者操作被取消时。

 

对指针和手势事件的访问使你能够将 Windows 8  触摸交互设计语言用于以下内容:

  • 游戏
  • 自定义控件和反馈视觉效果
  • 自定义交互

可利用通过以下这些 DOM 手势事件提供的内置手势识别功能:

类型 DOM 手势事件
常规事件 MSManipulationStateChanged
指针事件

gotpointercapture

lostpointercapture

pointercancel

pointerdown

pointermove

pointerout

pointerover

pointerup

静态手势事件

MSGestureHold

MSGestureTap

操作手势事件

MSGestureChange

MSGestureEnd

MSGestureStart

MSInertiaStart

 

有关处理指针和手势事件的详细信息,请参阅快速入门:指针处理快速入门:基本的 DOM 手势处理

自定义用户体验

通过 Windows 运行时  API 可完全自定义并控制应用的交互体验。借助这些 API,你可以启用自定义用户交互,还可处理其他配置选项和硬件功能,例如具有右键、滚轮、斜轮或 X 按钮的鼠标设备,以及具有筒状按钮和橡皮头的笔设备。

大多数交互 API 都由 Windows.UI.CoreWindows.UI.InputWindows.UI.Input.Inking 类型提供,输入设备数据通过 Windows.Devices.Input 显示。

你将发现 GestureRecognizerPointerPointPointerPointProperties 类对处理手势和操作十分有用。

在通过全新或修改的手势和操作提供自定义的交互体验前,请考虑以下问题:

  • 现有手势确实提供你的应用需要的体验?在你可以简单地改编你的应用以支持或解释现有手势时,请不要提供自定义手势进行缩放或平移。
  • 自定义手势是否导致应用间潜在的不一致?
  • 手势是否需要特定的硬件支持,例如接触数?
  • 是否存在提供所需的交互体验的控件(如 SemanticZoom)?如果控件本来就可以处理用户输入,是否还需要自定义手势或操作?
  • 自定义手势或操作是否产生顺畅自然的交互体验?
  • 该交互体验是否有意义?如果交互依赖诸如接触数、速度、时间(不推荐)和惯性等条件,请确保这些限制和依赖项的一致性和易操作性。例如,用户理解的快慢可以直接影响你的应用的功能和用户对体验的满意度。
  • 用户的身体能力是否影响手势或操作?是否好用?
  • 应用栏命令或其他某些 UI 命令是否够用?

简而言之,仅当要求清楚、定义良好且没有基本手势可支持你的方案时才创建自定义手势。

有关自定义交互的详细信息,请参阅快速入门:静态手势快速入门:操作手势

相关主题

概念

开发 Windows 应用商店应用(JavaScript 和 HTML)

触摸交互设计