Share via

用户交互详细信息 (HTML)

  • 项目

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

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

使用 Windows 应用商店应用平台控件的内置交互行为提供直观和吸引人的用户体验，而且在所有输入设备上都保持高效和一致。 遵循此处描述的指南、最佳实践和示例，来为你的 Windows 应用商店应用定义这些用户体验。

这些平台控件可以处理和响应来自各种源的输入，包括触摸、触摸板、鼠标、笔/触笔以及键盘。它们还可以处理来自各种输入设备模式的输入，例如触摸键盘、鼠标滚轮和钢笔橡皮擦。

尽管其他操作系统主要关注于触摸输入，但 Windows 使你不论使用哪种输入设备都能够构建所需类型的应用：消耗型应用、提高工作效率的应用，以及 PC、笔记本电脑、平板电脑和许多其他任意形式的（包括尚未应用的）电脑上的创新性混合应用。

借助这些平台控件，你可以支持最广泛的功能和首选项、使你的应用尽可能地可用、可便携和可访问，以及在 Windows 应用商店中吸引最大数量的潜在受众。

若需要有关自定义交互行为的更多信息，请参阅用户交互自定义详细信息 (HTML)。

先决条件

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

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

用户交互示例

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

下面是示例的简要描述

在本示例中，我们制作一个颜色混合程序。它在一个方形对象的表格中，可以通过该表格进行间接输入，并使用此数据来指定 RGB 颜色和旋转角度，该角度转换为相应的红色、绿色或蓝色级别。

该示例演示以下功能：

  • 表格遍历
  • 嵌入式平移/滚动行为
  • 触摸键盘行为
  • 平台控件和内置用户交互支持

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

示例应用的线框
该示例包含两个页面（从顶部到底部）：主页和其中包含一个窗体的另一页，该窗体中具有各种平台控件和颜色混合器。

 

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

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

规划你的应用

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

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

开始图标

选择最适合于你的应用及其内容的导航模式。有关详细信息，请参阅导航模式。

在支持此教程的用户交互示例中，我们从基础平面导航模板开始。下载模板并遵循此处的步骤进行试用，或者直接使用模板开始设计和开发自己的应用。
步骤图标

Windows 应用商店应用 UI 详细信息 (HTML)。

设计和布置 UI 元素和内容，例如应用窗口、浮出控件、对话框和应用栏。

我们使用指南、最佳实践和示例来帮助你充分利用 Windows 8.1 的 UI 功能，并创建直观且与其他 Windows 应用商店应用一致的 UI。
步骤图标

响应用户交互。

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

用户如何与输入设备交互。

比较常用交互以及它们如何映射到触摸、触摸板、鼠标和键盘上的笔势。

 

输入设备

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

步骤图标

响应鼠标交互。

鼠标交互最适合那些需要精确指向和单击的应用。
步骤图标

响应键盘交互。

对于残障人士，或者只是认为键盘是与应用交互的最有效方法的用户而言，键盘非常重要。
步骤图标

响应笔和触笔交互。

笔或触笔既可用作指针设备，也可以用作绘图设备。它通常与数字墨迹功能相关。
步骤图标

响应触摸板交互。

触摸板结合多点触控输入和指针设备（如鼠标）的精确输入。这种组合使触摸板既适用于 Windows 8.1 触摸优化的 UI，也适用于工作效率应用和桌面环境的较小目标。

 

设计交互

在这里，我们了解一些包含在用户交互示例中的 UI 和功能的细节。

其中一些细节可能不适用于你的应用。根据需要进行选择。

步骤图标

表单布局指南。

设计提供出色交互体验和最大程度减少滚动的表单。 考虑用户将如何填写表单、哪里可能需要滚动，以及如何处理触摸键盘和内联错误通知的外观。
步骤图标

文本输入指南

选择正确的控件：何时使用单行或多行文本输入控件（具有你从未了解过的应做事项和禁止事项）。
步骤图标

触摸键盘和手写面板指南。

为没有硬件键盘或其他外围键盘设备的外形规格支持文本输入。

当用户点击可编辑的输入字段时，系统即会调用触摸键盘，当输入字段丢失焦点时，系统会隐藏触摸键盘。
步骤图标 平移指南

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

测试应用的辅助功能。

使用包含在面向 Windows 8 的 Windows 软件开发工具包 (SDK) 的辅助功能测试工具、检查和 UI 辅助功能检查器 (AccChecker) 来帮助你验证应用的辅助功能。

如果你要在 Windows 应用商店中将你的应用声明为辅助应用，则应启用辅助富 Internet 应用程序 (ARIA) Web 验证来解决由 AccChecker 报告的优先级为 1 的所有错误。

请记住:  Narrator 支持一组自定义触摸笔势（在本主题中描述），用于导航和阅读应用的内容。

 

处理用户交互

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

步骤图标

快速入门：添加 HTML 控件和处理事件

大多数应用需要控件，例如按钮、复选框和下拉列表。此示例包括一个表单，该表单包含在静态颜色混合器中设置属性的各种控件。
步骤图标

显示和编辑文本

向你的 Windows 应用商店应用添加文本输入控件。
步骤图标

触摸键盘

调用和解除触摸键盘。
步骤图标

实现键盘辅助功能。

许多失明或存在移动障碍的用户依靠键盘作为导航应用 UI 以及访问其功能的唯一途径。如果应用未提供良好的键盘访问，则这些用户在使用应用时会存在困难，或者可能根本无法使用该应用。

 

包装

应用商店要求图标

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

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

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

坐下来享受你的成功吧。

 

希望了解更多信息？

规划 Windows 应用商店应用

了解有关希望为用户提供何种体验的详细信息。

辅助功能设计

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

不同外观规格设计

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

UX 指南索引

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

示例