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

项目
12/11/2015

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

受 Windows 应用商店应用支持的输入设备

你可以创建直观且吸引人的自定义用户交互，同时在所有输入设备上保持高效和一致。遵循此处描述的指南、最佳实践和示例，来为你的 Windows 应用商店应用定义这些用户体验。

注意我们建议你尽可能使用平台控件库（HTML 和 XAML）。这些库中的控件提供完全 Windows 8.1 用户交互体验，包括标准交互、动态显示的物理效果、视觉反馈和辅助功能。如果你不需要自定义的交互支持，请使用这些内置控件。

Windows 应用商店应用可以处理来自各种源的输入，包括触摸、触摸板、鼠标、笔/触笔以及键盘。它们还可以处理来自各种输入设备模式的输入，例如触摸键盘、鼠标滚轮和钢笔橡皮擦。尽管其他平台主要关注于触摸输入，但你可以毫无约束地构建各种 Windows 应用商店应用：消耗型应用、提高工作效率的应用，以及 PC、笔记本电脑、平板电脑和许多其他任意形式的（包括尚未应用的）电脑上的创新性混合应用。

如果你需要有关平台控件及其交互行为的详细信息，请参阅用户交互详细信息 (HTML)。

先决条件

此处提供的指南、任务和样本代码特定于使用 JavaScript 开发 Windows 应用商店应用。有关使用 C++、C# 或 Visual Basic 版本的 Windows 应用商店应用的信息，请参阅用户交互自定义 (XAML)。

如果你还不熟悉使用 JavaScript 开发 Windows 应用商店应用，则阅读这些主题来熟悉此处讨论的技术。

使用 JavaScript 开发 Windows 应用商店应用

在使用 JavaScript 的 Windows 应用商店应用中，熟悉从“开始”屏幕到 UI 布局和控件的所有内容。
创建第一个采用 JavaScript 的 Windows 应用商店应用

结合使用 JavaScript 和 HTML5 以及级联样式表 (CSS) 构建 Windows 应用商店应用。

用户交互示例

除了包含在我们参考的以下主题中的示例和代码段，我们还使用自定义用户交互示例。此示例显示如何在 Windows 应用商店应用中使用或适应各种交互功能和概念。该示例包含用于自定义控件、UI 辅助功能和自定义交互的原则、建议和实现详细信息。查看我们如何将我们的指南用于实践！

下面是示例的简要描述

在本示例中，我们制作一个颜色混合程序。它在一个方形对象的表格中，可从触摸屏、触摸板、鼠标、笔/触笔或键盘直接输入。它使用此数据来指定 RGB 颜色和旋转角度，并转换为相应的红色、绿色或蓝色级别。

该示例演示以下功能：

自定义控件
用户交互行为的基本自定义支持（HTML 和 XAML）
自定义的笔势检测、识别和处理

下面是一个线框图表，你可以从中了解此示例的工作原理和该示例实现的用户交互功能。

该示例包含三页（从左至右）主页、第二页（包含支持基于 DOM 旋转的自定义控件）和第三页（包含通过 Windows.UI.Input GestureRecognizer API 实现附加功能的自定义控件）。

现在，我们提供任务的松散纲要来帮助你构建应用，该应用遵循 Windows 应用商店应用中用户交互的最佳实践。每项任务链接到 Windows 应用商店应用开发人员中心中的相应信息。

如果你不熟悉 Windows 应用商店应用开发，或者不熟悉用户交互、可用性和辅助功能，则最好查看每个步骤。你将看到组合在一起的用户交互开发的相关方面。

规划你的应用

在你开始设计和开发应用之前，先计划你的应用。花点时间来考虑一下你的受众是谁，你的应用支持哪些功能和活动。

将 Windows 应用商店应用的 UI 设计为主要用于触摸交互。与其他通常精确为像素的输入类型相比，触摸输入在本质上是不精确的（要求输入区域）。优化触摸的控件与一组用于基于指针事件处理的平台交互 API 一起，以较少的附加代码在设备中提供等效功能。

	选择最适合于你的应用及其内容的导航模式。有关详细信息，请参阅导航模式。在支持此教程的用户交互示例中，我们从平面导航模板开始。下载模板并遵循此处的步骤进行试用，或者直接使用模板开始设计和开发自己的应用。
	Windows 应用商店应用 UI 详细信息 (HTML)。设计和布置 UI 元素和内容，例如应用窗口、浮出控件、对话框和应用栏。我们使用指南、最佳实践和示例来帮助你充分利用 Windows 8.1 的 UI 功能，并创建直观且与其他 Windows 应用商店应用一致的 UI。
	响应用户交互。了解用户交互平台、输入源（包括触摸、触摸板、鼠标、笔/触笔、键盘）、模式（触摸键盘、鼠标滚轮、钢笔橡皮擦等）以及 Windows 应用商店应用支持的交互。
	用户如何与输入设备交互。比较常用交互以及它们如何映射到触摸、触摸板、鼠标和键盘上的笔势。

输入设备

尽管为触摸输入进行了优化，但该平台完全支持此处列出的其他输入设备。

	响应鼠标交互。将鼠标交互用于需要精确指向和单击的应用。
	响应键盘交互。对于残障人士，或者只是认为键盘是与应用交互的最有效方法的用户而言，键盘非常重要。
	响应笔和触笔交互。笔或触笔既可用作指针设备，也可以用作绘图设备。它通常与数字墨迹功能相关。
	响应触摸板交互。触摸板结合多点触控输入和指针设备（如鼠标）的精确输入。这种组合使触摸板既适用于 Windows 8.1 触摸优化的 UI，也适用于工作效率应用和桌面环境的较小目标。

设计交互

在遵循 Windows UX 用户交互指南时提高创造性。选择你的应用支持哪些输入设备，以及应用如何响应输入。增强用户的跨设备体验，支持最广泛的功能和性能，并吸引 Windows 应用商店中最多的潜在用户。这可最大限度地实现你的应用的可用性、便携性和可访问性。

这些用户交互指南可以帮助你提供一种在各种输入模式上保持一致的令人信服的沉浸式交互体验：

常见用户交互指南

创建在所有设备上功能保持一致的用户交互体验。
十字滑块指南

支持使用轻扫手势进行选择以及使用滑动手势拖动（移动）交互。
视觉缩放和调整大小指南

使用视觉缩放，用户可以放大内容区域中内容的视图（在内容区域自身上使用），而使用调整大小，用户则可以更改一个或多个对象的相对大小，而不更改内容区域的视图（在内容区域中的对象上使用）。
平移指南

考虑平移和滚动如何帮助用户在单一视图中导航，比如计算机的文件夹结构、文档库或相册。还可查看用户如何了解在视口中不合适（无论水平还是垂直）的内容。
旋转指南

使用触摸或通过其他用于鼠标、笔/触笔或键盘的 UI 控件，按圆形方向（顺时针或逆时针）旋转对象。
语义式缩放指南

在单一视图（例如相册、应用列表或地址簿）中显示和导航大量数据或内容。
选择文本和图像的指南

提供内容选择 UI 和功能。
目标指南

通过增强触摸精确性和信心，提高用户对应用的满意度。
视觉反馈指南

帮助用户理解、学习和适应你的应用、系统和输入设备。通过指出交互成功、提高用户的控制感觉、鼓励交互、显示系统状态以及减少错误，你可以做到这一点。视觉反馈（又称为接触可视化或反馈 UI）显示交互是否按照预期方式进行检测、解释和处理。

处理用户交互

在这里，我们介绍用于处理和响应与应用的用户交互的选项。我们将涉及一些包含在用户交互示例中的 UI 和功能的细节。

	快速入门：指针通过指针事件自定义用户交互。
	快速入门：DOM 手势和操作通过文档对象模型 (DOM) 事件自定义用户交互。
	快速入门：静态手势快速入门：操作手势通过 GestureRecognizer 自定义用户交互。
	动态显示你的 UI 通过使用动画（用于指针事件或轻扫手势）的平台动画库套件，将 Windows 8 外观集成到 Windows 应用商店应用，或使用级联样式表级别 3 (CSS3) 过渡、动画和转换自定义动画。
	实现键盘辅助功能。许多存在视力障碍或移动障碍的用户依靠键盘作为导航应用 UI 以及访问其功能的唯一途径。如果应用未提供良好的键盘访问，则这些用户在使用应用时会存在困难，或者可能根本无法使用该应用。
	使触摸事件成为辅助事件。通过将指针连接到鼠标单击事件，使触摸输入成为辅助输入。
	测试应用的辅助功能。使用包含在面向 Windows 8 的 Windows 软件开发工具包 (SDK) 的辅助功能测试工具、检查和 UI 辅助功能检查器 (AccChecker) 来帮助你验证应用的辅助功能。如果你要在 Windows 应用商店中将你的应用声明为辅助应用，则启用辅助富 Internet 应用程序 (ARIA) Web 验证来解决由 AccChecker 报告的优先级为 1 的所有错误。请记住: Narrator 支持一组自定义触摸笔势（在本主题中描述），用于导航和阅读应用的内容。

包装

使用 Windows 应用认证工具包验证应用。

运行 Windows 应用认证工具包来帮助确保应用满足 Windows 应用商店要求。当你将主要功能添加到应用时，请执行此操作。

完成了！你的实现结果应与用户交互示例类似。

坐下来享受你的成功吧。

希望了解更多信息？

规划 Windows 应用商店应用

希望向你的用户提供哪些体验？

辅助功能设计

了解大量可用功能、禁用功能以及用户偏好的详细信息。

不同外观规格设计

了解有关不同设备、输入方法和屏幕方向的详细信息。

UX 指南索引

浏览用户体验指南的完整列表。

示例

DOM

Windows 应用商店应用 API

	选择最适合于你的应用及其内容的导航模式。有关详细信息，请参阅导航模式。在支持此教程的用户交互示例中，我们从平面导航模板开始。下载模板并遵循此处的步骤进行试用，或者直接使用模板开始设计和开发自己的应用。
	Windows 应用商店应用 UI 详细信息 (HTML)。设计和布置 UI 元素和内容，例如应用窗口、浮出控件、对话框和应用栏。我们使用指南、最佳实践和示例来帮助你充分利用 Windows 8.1 的 UI 功能，并创建直观且与其他 Windows 应用商店应用一致的 UI。
	响应用户交互。了解用户交互平台、输入源（包括触摸、触摸板、鼠标、笔/触笔、键盘）、模式（触摸键盘、鼠标滚轮、钢笔橡皮擦等）以及 Windows 应用商店应用支持的交互。
	用户如何与输入设备交互。比较常用交互以及它们如何映射到触摸、触摸板、鼠标和键盘上的笔势。

	响应鼠标交互。将鼠标交互用于需要精确指向和单击的应用。
	响应键盘交互。对于残障人士，或者只是认为键盘是与应用交互的最有效方法的用户而言，键盘非常重要。
	响应笔和触笔交互。笔或触笔既可用作指针设备，也可以用作绘图设备。它通常与数字墨迹功能相关。
	响应触摸板交互。触摸板结合多点触控输入和指针设备（如鼠标）的精确输入。这种组合使触摸板既适用于 Windows 8.1 触摸优化的 UI，也适用于工作效率应用和桌面环境的较小目标。

	快速入门：指针通过指针事件自定义用户交互。
	快速入门：DOM 手势和操作通过文档对象模型 (DOM) 事件自定义用户交互。
	快速入门：静态手势快速入门：操作手势通过 GestureRecognizer 自定义用户交互。
	动态显示你的 UI 通过使用动画（用于指针事件或轻扫手势）的平台动画库套件，将 Windows 8 外观集成到 Windows 应用商店应用，或使用级联样式表级别 3 (CSS3) 过渡、动画和转换自定义动画。
	实现键盘辅助功能。许多存在视力障碍或移动障碍的用户依靠键盘作为导航应用 UI 以及访问其功能的唯一途径。如果应用未提供良好的键盘访问，则这些用户在使用应用时会存在困难，或者可能根本无法使用该应用。
	使触摸事件成为辅助事件。通过将指针连接到鼠标单击事件，使触摸输入成为辅助输入。
	测试应用的辅助功能。使用包含在面向 Windows 8 的 Windows 软件开发工具包 (SDK) 的辅助功能测试工具、检查和 UI 辅助功能检查器 (AccChecker) 来帮助你验证应用的辅助功能。如果你要在 Windows 应用商店中将你的应用声明为辅助应用，则启用辅助富 Internet 应用程序 (ARIA) Web 验证来解决由 AccChecker 报告的优先级为 1 的所有错误。请记住: Narrator 支持一组自定义触摸笔势（在本主题中描述），用于导航和阅读应用的内容。

Share via