触控

注意

此设计指南是为 Windows 7 创建的，尚未针对更高版本的 Windows 进行更新。 原则上大部分准则仍适用，但演示和示例没有反映我们的当前设计准则。

所有 Microsoft Windows 应用程序都应具有出色的触控体验。 创建这样的体验比你想象的要容易。

触控是指使用一根或多根手指通过设备显示屏提供输入，并与 Windows 和应用进行交互。 触控优化应用具有一个 UI 和交互模型，旨在适应范围更大、不太精确的触控区域，各种外形规格的触控设备，以及用户在使用触控设备时可能采用的许多手势和握持方式。

每台输入设备都有自身的优势。 键盘最适合文本输入，用最少的手部动作发出命令。 鼠标最适合高效、精确的指向。 触控最适合对象操作和发出简单的命令。 触笔最适合自由表达，与手写和绘图一样。

Windows 8.1 针对触控的响应性、准确性和易用性进行了优化，同时完全支持传统输入法（例如鼠标、触笔和键盘）。 传统输入模式提供的速度、准确性和触觉反馈对许多用户来说很熟悉且很有吸引力，可能更适合特定的交互场景。

可在单独的主题中找到与鼠标、触笔和辅助功能相关的准则。

考虑应用的交互体验时：

不要想当然地认为，如果 UI 适用于鼠标，它也适用于触控。 虽然良好的鼠标支持是一个开始，但良好的触控体验另外还有一些要求。

一定要假设，如果 UI 适用于手指操作，它也适用于触笔。 让应用具有可触控性，这对提供良好的触笔支持大有裨益。 主要的区别是手指指尖更钝，因此需要更大的目标。

通过触控，你可以直接操作对象和 UI，从而获得更快、更自然且更具吸引力的体验。

提供出色的触控体验

应确保用户能够使用触控输入高效地执行关键、重要的任务。 然而，特定的应用功能（例如文本或像素操作）可能不适合触控，而且能保留给最合适的输入设备。

如果你没有太多开发触控应用的经验，最好边操作边学习。 获取启用了触控的计算机，将鼠标和键盘放到一边不用，而是只使用手指与应用交互。 如果你有平板电脑，试着用不同的姿势拿着它，比如用在腿上、平放在桌子上，或者在站着时抱在怀里。 尝试在纵向和横向方向使用它。

最适合触控交互的触控优化应用通常是：

• 自然且直观的。 交互的设计符合用户在真实世界中与对象交互的方式。
• 干扰较小。 使用触控是无提示的，因此与打字或单击相比更少分心。
• 可移植。 触控设备更紧凑，因为许多任务可以在没有键盘、鼠标、触笔或触控板的情况下完成。 它们也更加灵活，因为不需要工作台面。
• 直接且吸引人。 触控让你感觉你是在直接操作屏幕上的对象。
• 不太准确。 用户使用触控时没法像鼠标或触笔那样准确地瞄准对象。

触控提供了一种自然、真实的交互感觉。 直接操作和动画为对象提供真实、动态的动作和反馈，让你有了这种印象。 例如，请思考一下纸牌游戏。 用手指拖动卡片不仅方便简单，而且当你可以像玩实际卡牌一样掷牌、滑牌和转牌时，体验就有了一种吸引人的真实的感觉。 当你试图移动一张没法移动的纸牌时，让纸牌抵抗但不阻止移动，在松手时纸牌回到原位，清楚表明系统识别了但没法完成该操作，这带来的体验更好。

幸运的是，如果你的应用已经设计得很好，很容易就能提供出色的触控体验。 为此，设计良好的程序具有以下特征：

• 确保可以使用手指高效执行大多数重要的任务（至少是没有涉及大量打字或详细像素操作的任务）。
• 对触控使用大型控件。 常见控件的最小大小为 23x23 像素 (13x13 DLU)，最常用的控件至少为 40x40 像素 (23x22 DLU)。 为了避免无响应的行为，UI 元素之间应至少有 5 个像素（3 个 DLU）的空间。 对于其他控件，请确保它们至少有 23x23 像素 (13x13 DLU) 的点击目标，即使它们的静态外观要小得多。 请查看标准控件大小调整。
• 支持鼠标输入。 交互式控件具有清晰可见的提供。 对象具有标准鼠标交互的标准行为（左键单击、左键双击、左键单击、拖动和悬停）。
• 支持键盘输入。 应用提供标准快捷键分配，尤其是对于还可通过触控手势生成的导航和编辑命令。
• 确保易访问性。 使用 UI 自动化或 Microsoft Active Accessibility (MSAA) 为辅助技术提供对 UI 的编程访问。 应用对方向、主题、区域设置和系统指标变化做出适当的响应。
• 消除不必要的交互。 为了防止数据丢失或系统访问，请使用最安全、最可靠的默认值。 如果安全和可靠不是考虑因素，应用会选择最有可能或最方便的选项。
• 为光标悬停提供等效的触控操作。 不要将光标悬停用作执行操作的唯一方式。
• 确保手势立即生效。 在整个手势中保持用户手指下的接触点顺滑，这提供了将手势直接映射到用户动作的效果。
• 尽可能使用标准手势。 自定义手势仅适用于应用特有的交互。
• 确保可撤消或更正不需要或具有破坏性的命令。 使用触控时，更可能出现意外操作。

触控输入准则

通过触控，Windows 应用可使用物理手势来模拟 UI 元素的直接操作。

设计支持触控的应用时，请考虑以下最佳做法：

要创建感觉直接且有吸引力的体验，响应能力至关重要。 为了有直接感觉，手势必须立即生效，并且在整个手势过程中，对象的接触点必须在用户手指下保持顺畅。 触控输入的效果应直接映射到用户的动作，因此例如，如果用户旋转手指 90 度，对象也应旋转 90 度。 任何滞后、响应断断续续、丢失接触或结果不准确都会破坏直接操作的感觉，还会损害质量。

对于创建感觉自然、直观的触控体验来说，一致性至关重要。 用户学会标准手势后，会期望手势在所有应用中都有相同的效果。 为了避免混淆和沮丧，切勿向标准手势分配不标准的含义。 而是要对程序特有的交互使用自定义手势。

接下来，我们将介绍 Windows 触控语言，但在开始之前，这里有一个简短的基本触控输入术语列表。

• 手势

  手势是在输入设备上或由输入设备执行的物理操作或动作（一根手指、多根手指、触笔/触控笔、鼠标等）。 例如，若要启动、激活或调用命令，请用一根手指点击触控或触控板设备（相当于使用鼠标左键单击、使用触笔点击或使用键盘上的 Enter）。

• 操作

  操作是对象或 UI 对手势的即时、实时反应或响应。 例如，滑动或轻扫手势通常会导致元素或 UI 以某种方式移动。

  操作的最终结果（即对象在屏幕上或 UI 中操作的表现）是交互。

• 交互

  交互取决于操作的解释方式以及操作产生的命令或操作。 例如，可以使用滑动或轻扫手势移动对象，但结果根据是否超过距离阈值而有所不同。 滑动可用于拖动对象或平移视图，而轻扫可用于选择项或显示应用栏。

Windows 触控语言

Windows 提供了一组简洁的触控交互，在整个系统中使用。 一致地应用此触控语言会让你的应用对用户已经知道的内容来说感觉熟悉。 这会让你的应用更容易学习和使用，从而增强用户的信心。 若要了解有关触控语言实现的详细信息，请查看“手势、操作和交互”。

长按可学习

长按手势会显示详细信息或教学视觉对象（例如工具提示或上下文菜单），不用执行操作或命令。 如果在显示视觉对象时开始滑动手势，仍可能平移。

重要

在启用了水平和垂直平移的情况下，可以长按进行选择。

进入状态：一根或两根手指接触屏幕。

动作：无动作。

退出状态：最后一根手指抬起，结束手势。

效果：显示详细信息。

长按手势。

悬停

悬停交互很有用，它让用户能够在开始操作之前，通过提示获取额外信息。 查看这些提示会让用户感到更自信，并减少错误。

遗憾的是，触控技术不支持悬停，所以用户在使用手指时无法悬停。 这个问题的简单解决方案是充分利用悬停，但只是用执行操作不需要的方式。 实际上，这通常意味着也可通过单击来执行操作，但不一定是以完全相同的方式执行的。

在此示例中，用户可以通过悬停或单击来查看今天的日期。

点击可执行主要操作

点击元素会调用其主要操作，例如启动应用或执行命令。

进入状态：一根手指接触屏幕或触控板，在发生长按交互的时间阈值之前抬起手指。

动作：无动作。

退出状态：手指抬起，结束手势。

效果：启动应用或执行命令。

点击手势。

滑动可平移

滑动主要用于平移交互，但也可用于移送（其中仅限在一个方向平移）、绘图或书写。 滑动还可用于通过擦动（在单选按钮等相关对象上滑动手指）瞄准密集排列的小型元素。

进入状态：一根或两根手指接触屏幕。

动作：拖动，其他手指都相对于彼此保持在相同的位置。

退出状态：最后一根手指抬起，结束手势。

效果：在手指移动时，直接、立即移动手指下的对象。 在整个手势过程中，确保接触点都在手指下方。

平移手势。

轻扫可选择、命令和移动

将手指滑动一小段距离，垂直于平移方向（其中仅限在一个方向平移），这样可选择列表或网格中的对象。 选择对象时，显示带有相关命令的应用栏。

进入状态：一根或多根手指触摸屏幕。

动作：拖动一小段距离，在发生移动交互的距离阈值之前抬起手指。

退出状态：最后一根手指抬起，结束手势。

效果：选择或移动手指下方的对象，或者显示应用栏。 在整个手势过程中，确保接触点都在手指下方。

轻扫手势。

捏合和张开可缩放

捏合和张开手势用于 3 种类型的交互：光学缩放、大小调整和语义缩放。

光学缩放可调整整个内容区域的放大级别，以获取更详细的内容视图。 相对之下，大小调整技术用于在不将视图更改为内容区域的情况下，调整该内容区域种一个或多个对象的相对大小。

语义缩放是一种触控优化技术，用于呈现和导航单个视图中的结构化数据或内容（例如计算机的文件夹结构、文档库或照片相册），而无需平移、滚动或树视图控件。 语义缩放让你在放大时看到更多细节，在缩小时看到更少细节，对相同的内容提供两种不同的视图。

进入状态：两根手指同时接触屏幕。

动作：手指沿轴线分开（张开）或闭合（捏合）。

退出状态：所有手指抬起，结束手势。

效果：当手指在轴线上分开或闭合时，立即直接放大或缩小手指下方的对象。 在整个手势过程中，确保接触点都在手指下方。

缩放手势。

转动可旋转

用两根或更多手指旋转会使对象旋转。 旋转设备本身可旋转整个屏幕。

进入状态：两根手指同时接触屏幕。

动作：一根或两个手指绕着另一根手指旋转，垂直于手指之间的线条移动。

退出状态：所有手指抬起，结束手势。

效果：按手指旋转的幅度旋转手指下方的对象。 在整个手势过程中，确保接触点都在手指下方。

旋转手势。

旋转仅适用于某些类型的对象，因此它不会映射到 Windows 系统交互。

不同的人会用不同的方式执行旋转。 有些人喜欢一根手指绕着另一个手指（作为枢轴点）旋转，而另一些人则更喜欢旋转两根手指做圆周运动。 大多数人搭配使用这两种方式，一根手指比另一根手指移动幅度更大。 虽然最好的交互是平滑旋转到任何角度，但在很多场景中（例如查看照片），最好是设置为当用户松手后旋转近 90 度。 在照片编辑中，可以旋转小幅度来将照片放正。

从边缘轻扫可执行应用命令

从屏幕顶部或顶部边缘轻扫手指一小段距离会显示应用栏中的应用命令。

进入状态：一根或多根手指触摸边框。

动作：将手指在屏幕上拖动一小段距离，然后抬起。

退出状态：最后一根手指抬起，结束手势。

效果：显示应用栏。

从边缘轻扫手势。

开发人员：有关详细信息，请参阅 DIRECTMANIPULATION_CONFIGURATION 枚举。

控件用法

在这里，我们提供针对触控用法优化控件的一些准则。

• 使用常见控件。 大多数常见控件设计用来支持良好的触控体验。
• 选择根据设计可支持触控的自定义控件。 可能需要自定义控件来支持程序的特殊体验。 选择具有以下特征的自定义控件：
  • 可以足够大，便于轻松瞄准和操作。
  • 在操作时，像真实世界中的对象移动和反应那样进行移动和反应，例如具有动量和摩擦。
  • 容许失误，允许用户轻松更正错误。
  • 容许单击和拖动时的不准确。 如果在对象目的地附近放下对象，对象应放在正确的位置。
  • 当手指在控件上方时显示清晰可见的反馈。
• 使用有约束的控件。 有约束的控件（例如列表和滑块）在为易于触控的目的设计时，效果比文本框等无约束的控件更好，因为它们减少了文本输入的需求。
• 提供适当的默认值。 默认情况下，选择最安全（为防止数据丢失和系统访问）和最可靠的选项。 如果安全和可靠不是考虑因素，请选择最有可能或最方便的选项，从而消除不必要的交互。
• 提供文本自动补全。 提供最可能的值或最近使用的输入值的列表，让文本输入更加容易。
• 对于使用多种选择的重要任务，如果通常使用标准多选列表，轻提供一个改用复选框列表的选项。

控件大小和触控目标

指尖的表面积很大，可能很难精确定位靠得太近的小控件。

一般情况下，对于任何输入设备，23x23 像素 (13x13 DLU) 这一控件大小都是适合的最低交互式控件大小。 相比之下，15x11 像素的旋转控件太小，没法通过触控有效使用。

请记住，最低大小实际上基于物理区域，而不是像素或 DLU 等布局指标。 研究表明，使用手指进行高效、准确交互的最小目标区域是 6x6 毫米 (mm)。 该区域如下所示转换为布局指标：

字体	毫米	相对像素	DLU
9 磅 Segoe UI	6x6	23x23	13x13
8 磅 Tahoma	6x6	23x23	15x14

此外，研究表明，10x10 毫米（大约 40x40 像素）这一最低大小可提高速度和准确性，还能让用户感觉更加舒适。 在实际情况下，对于用于最重要或最常用命令的命令按钮，请增加这一大小。

目标不是设计巨大的控件，而是易于通过触控使用的控件。

在此示例中，Microsoft Word 对最重要的命令使用大于 10x10 mm 的按钮。

此版本的计算器对其最常用的命令使用大于 10x10 mm 的按钮。

对于触控目标来说，没有完美的大小。 不同的大小适合不同的情况。 具有严重后果的操作（例如删除和关闭）或常用操作应使用大触控目标。 后果较小的不常用操作可使用小目标。

自定义控件的目标大小准则

大小准则	说明
	7x7 mm：建议的最低大小 如果触控错误的目标，但可以用一个或两个手指或在 5 秒内进行更正，那么最低大小 7x7 mm 是适合的。 目标之间的填充与目标大小一样重要。
	当准确性很重要时 后果严重的关闭和删除等操作无法承受意外点击。 如果触控错误的目标时，需要超过 2 个手势、5 秒的时间和一个很大的场景变化才能更正，请使用 9x9 mm 目标。
	当它只是不适合时 如果你发现自己要填充大量的内容，那么只要触控错误的目标时，可以用一个手势来更正，就可以使用 5x5 mm 目标。 在这种情况下，在目标之间填充 2 mm 的空间极其重要。

常见控件的目标大小准则

• 对于常见控件，请使用建议的控件大小。 推荐的空间大小满足 23x23 像素 (13x13 DLU) 这一最低大小，复选框和单选按钮（其文本宽度所有补偿）、旋转控件（不可通过触控使用，但是冗余的）和分割线除外。

  

  推荐控件大小很容易触控。

• 对于用于最重要或最常用命令的命令按钮，请尽可能使用 40x40 像素 (23x22 DLU) 这一最低大小。 这样做可提高速度和准确性，还能让用户感觉更加舒适。

  

  只要可行，就请对重要或常用命令使用更大的命令按钮。

• 对于其他控件：

  • 使用更大的单击目标。 对于小控件，使目标大小大于静态可见的 UI 元素。 例如，16x16 像素图标按钮可以有 23x23 像素的单击目标按钮，文本元素可以有比文本宽 8 像素且高 23 像素的选择矩形。

    更正：

    

    错误：

    

    更正：

    

    在正确的示例中，单击目标比静态可见的 UI 元素大。

  • 使用冗余单击目标。 单击目标可以小于最低大小，前提是该控件具有冗余功能。

    例如，树视图控件的渐进式披露矩形只有 6x9 像素，但它们的功能是冗余的，具有关联的项标签。

    

    树视图矩形太小，没法轻松触控，但它们在功能上是冗余的，具有其更大的关联标签。

    采用系统指标。 不要硬编码大小。 如有必要，用户可以更改系统指标或 dpi 来满足其需求。 但是，请将这用作最后的手段，因为用户通常应该不必调整系统设备来使 UI 可用。

    

    在此示例中，更改了菜单高度的系统指标。

编辑文本

编辑文本是使用手指时最具挑战性的交互之一。 使用有约束的控件、适当的默认值和自动补全可消除或减少输入文本的需求。 但是，如果你的应用涉及编辑文本，你可以通过在使用触控时自动将输入 UI 放大到 150% 来提高用户工作效率。

例如，电子邮件程序可以按正常的可触控大小显示 UI，但将输入 UI 放大到 150% 来撰写邮件。

在此示例中，输入 UI 放大为 150%。

控件布局和间距

控件之间的间距是使控件易于触控的重要因素。 将手指用作指向设备时，定位更快但精确度更低，导致用户在预期目标之外更频繁地点击。 当交互式控件放置得非常近但实际上没有接触时，用户可单击控件之间的非活动空间。 单击非活动空间不会产生结果或可视反馈，所以用户通常不确定出现了什么问题。

根据使用的输入设备动态调整间距。 这对于暂时性 UI（例如菜单和浮出控件）特别有用。

在交互式控件的目标区域之间提供至少 5 个像素（3 个 DLU）的空间。 如果小控件间距太小，用户需要精确点击才能避免点击错误的对象。

使控件之间的间距大于推荐的垂直间距，让组中的控件更容易区分。 例如，高度为 19 像素的单选按钮比推荐的 23 像素这一最低大小要短。 如果有垂直空间可用，你可以通过在标准 7 像素的基础上额外添加 4 像素的间距，获得与推荐大小大致相同的效果。

更正：

良好：

在更好的示例中，单选按钮之间的额外间距让它们更容易区分。

在某些情况下，在使用触控时需要额外的间距，但在使用鼠标或键盘时不需要。 在这种情况下，只有在使用触控开始操作时才使用大小更大的设计。

选择使控件靠近最可能使用它们的位置的布局。 尽可能将任务交互保持在一个小区域中，并使控件靠近最可能使用它们的位置。 避免手部长距离移动，尤其是对于常见任务和拖动操作。

考虑当前指针位置是目标最靠近的位置，让获得它非常容易。 因此，上下文菜单充分利用了菲茨定律，就像 Microsoft Office 使用的迷你工具栏一样。

避免使小控件靠近应用或显示屏的边缘。 边缘附近的小目标可能很难触控（显示屏边框可能会干扰边缘手势）。 为了确保在窗口最大化时容易定位控件，请将它们设置为至少 23x23 像素 (13x13 DLU)，或者使它们远离窗口边缘。

使用推荐的间距。 推荐的间距易于触控。 但是，如果更大的大小和间距更利于你的应用，请考虑在适当的情况下将推荐的大小和间距设置为最小值。

在交互式控件之间提供至少 5 个像素（3 个 DLU）的空间。 这样做可防止用户在预期目标外部点击时造成混淆。

考虑使控件（例如命令链接、复选框和单选按钮）的组中和组之间的间距大于推荐的垂直间距。 这样做可以更轻松地区分它们。

考虑在使用触控开始操作时动态添加超过推荐垂直间距的间距。 这样做会使对象更容易区分，但在使用键盘或鼠标时不会占用更多空间。 将间距增加其正常大小的 1/3 或至少增加 8 个像素。

在此示例中，Windows 7 任务栏跳转列表在使用触控显示时更大。

交互

使用正确的控件只能让你实现触控优化应用的一部分，你还需要考虑这些控件支持的总体交互模型。 下面是一些可帮助你解决此问题的准则。

• 使悬停冗余。 大多数触控技术都不支持悬停，所以拥有这种触控屏的用户没法执行任何需要悬停的任务。

• 对于需要文本输入的应用，请通过以下方式完全集成触控键盘功能：

  • 为用户输入提供适当的默认值。
  • 在适当的情况下提供自动补全建议。

  注意

  开发人员：若要详细了解如何集成触控键盘，请参阅 ITextInputPanel。

• 如果程序具有需要编辑文本的任务，则允许用户缩放内容 UI。 使用触控时，请考虑自动放大到 150%。

• 在适当的情况下提供流畅、响应式的平移和缩放。 在平移或缩放后快速重新绘制以保持响应。 这样做是必要的，可使直接操作感觉是真正直接的。

• 在平移或缩放期间，确保接触点在整个手势的过程中都在手指下方。 否则，平移或缩放难以控制。

• 系统会记住手势，所以请向手势分配跨应用保持一致的含义。 不要为具有固定语义的手势提供不同的含义。 而是使用适当的应用特有手势。

容错性

直接操作让触控很自然、表达信息、高效和吸引人。 不过，只要有直接操作，就可能有意外操作，因此需要有容错性。

容错性是轻松撤消或更正意外操作的能力。 你可以通过提供撤消、提供良好视觉反馈、在常用命令和破坏性命令之间提供明确的物理分隔，以及让用户能够轻松更正错误，来让触控体验具有容错性。 与容错性相关的是首先防止发生意外操作，你可以通过对具有意外结果的风险操作或命令使用有约束的控件和确认来做到这一点。

• 提供撤消命令。 最好提供一种简单的方法来撤消所有命令，但你的应用可能有一些无法撤消其效果的命令。

• 只要可行，就请在放下手指时提供良好的反馈，但在抬起手指之前，无法执行操作。 这样做可以让用户在犯错之前更正错误。

• 只要可行，就允许用户轻松更正错误。 如果在抬起手指时某操作生效，请允许用户在手指仍然放下时进行滑动来更正错误。

• 只要可行，就指示无法通过抵制移动来执行直接操作。 允许发生移动，但让对象在手指松开时回到原位，以清楚表明识别了操作，但无法执行操作。

• 在常用命令和破坏性命令之间进行明确的物理分隔。 否则，用户可能会意外地触摸破坏性命令。 如果某命令的影响范围很广，而且不能轻易撤消，或者影响不立即显现出来，则该命令被视为具有破坏性。

• 对具有意外后果的风险操作或命令的命令进行确认。 为此，请使用确认对话框。

• 考虑确认用户在使用触控时可能不小心执行的任何其他操作，这些操作可能没有被注意到，或者很难撤消。 通常，这些被称为常规确认，而且不鼓励使用，因为我们假设用户不常使用鼠标或键盘意外地发出这类命令。 为了防止不必要的确认，请只在使用触控启动命令时才显示这些确认。

  对于用户经常通过触控意外执行的交互，可以进行常规确认。

  开发人员：你可以使用 INPUT_MESSAGE_SOURCE API 来区分鼠标事件和触控事件。