触摸

备注

此设计指南是针对 Windows 7 创建的,并且尚未更新 Windows 的更新版本。 本指南中的大部分内容仍适用,但演示和示例并不反映我们 当前的设计指导

所有 Microsoft Windows 应用程序都应具有良好的触摸体验。 创建此类体验比您想像的要简单。

触摸指的是,使用一个或多个手指通过设备显示提供输入,并与 Windows 和应用程序进行交互。 触摸优化的应用程序具有一个 UI 和交互模型,旨在容纳触摸设备的更大、不太精确的接触区域、触控设备的各种外形规格以及使用触摸设备时可能采用的许多 postures 和手柄用户。

用户使用触控与平板电脑交互

每个输入设备都有其优势。 键盘最适用于文本输入,并提供具有最小手动运动的命令。 鼠标最适用于高效、精确的指向。 触控最适用于对象操作并提供简单的命令。 画笔最适用于自由手写和绘图的任意形式的表达式。

Windows 8.1 经过优化,可用于触摸的响应能力、准确性和易用性,同时完全支持传统输入法 (例如鼠标、笔和键盘) 。 传统输入模式提供的速度、准确性和 tactile 反馈对于许多用户而言非常熟悉且非常有吸引力,并且可能更适合特定的交互方案。

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

当你考虑你的应用程序的交互体验时:

不要假设如果 UI 非常适合鼠标,则它也可以很好地用于触摸。 虽然良好的鼠标支持是一种开始,但良好的触摸体验也有一些额外的要求。

请注意,如果 UI 非常适合使用手指,它也很适合用于笔。 使您的应用程序可触摸提供良好的笔支持。 主要区别在于,手指具有 blunter 的提示,因此它们需要更大的目标。

利用 touch,你可以直接操作对象和 UI,这使你可以更快、更自然、更有吸引力地体验。

提供出色的触摸体验

你应确保用户可以使用触控输入有效地执行关键任务和重要任务。 但是,特定的应用程序功能(如文本或像素操作)可能不适用于触摸,可以为最适合的输入设备进行保留。

如果你没有开发触控应用程序的经验,最好通过执行此操作。 获取支持触摸的计算机,将鼠标和键盘放在一边,只使用手指与应用进行交互。 如果您有 tablet,请尝试将其放在不同的位置,例如,在重叠上,在某个表上,或在您的手中进行。 尝试以纵向和横向方向使用。

最适合触摸交互的触摸优化应用通常是:

  • 自然和直观。 交互的设计与用户与现实世界中对象的交互方式相对应。
  • 入侵性更小。 使用触摸是无提示的,因而与键入或单击相比,干扰性更小。
  • 机型. 触摸设备更为紧凑,因为可以在不使用键盘、鼠标、笔或触摸板的情况下完成很多任务。 它们也更灵活,因为不需要工作图面。
  • 直接参与。 触摸会使您感到直接在屏幕上操作对象。
  • 不太准确。 与鼠标或笔相比,用户无法与触摸精确地定位对象。

触摸可提供一种自然的现实世界,以进行交互。 直接操作和动画通过赋予对象一个逼真的动态运动和反馈,来完成这一印象。 例如,考虑一下纸牌游戏。 不仅能使用手指方便轻松地拖动卡,而且当你可以对卡进行抬起、glide 和旋转时,体验就会经历一个生动的感受。 当您尝试移动不能移动的卡时,获得卡的体验就更好了,而不是阻止移动,并在发布时就地恢复,清楚地表明该操作已被识别,但无法完成。

幸运的是,如果您的应用程序已设计良好,则提供强大的触摸体验非常简单。 出于此目的,设计良好的程序:

  • 确保最重要的任务可以使用手指有效地执行 , (至少不涉及大量键入或详细像素操作) 的任务。
  • 使用大控件进行触摸。 公共控件的最小大小为23x23 像素 (13x13 Dlu) ,最常用的控件至少为40x40 像素 (23x22 Dlu) 。 若要避免无响应行为,UI 元素应该至少有5个像素 () 3 个像素之间的空格。 对于其他控件,请确保它们至少具有23x23 像素 (13x13 DLU) 单击 "目标",即使其静态外观更小。 请参阅标准控件大小调整。
  • 支持鼠标输入。 交互式控件包含清晰可见的实用。 对象具有标准鼠标交互的标准行为 (单双击、双击、右键单击、拖动和悬停) 。
  • 支持键盘输入。 应用提供标准快捷方式密钥分配,特别是对于还可以通过触摸笔势生成的导航和编辑命令。
  • 确保可访问性。 使用 UI 自动化或 Microsoft Active Accessibility (MSAA) 为辅助技术提供对 UI 的编程访问。 应用会适当地响应方向、主题、区域设置和系统指标更改。
  • 消除不必要的交互。 若要防止数据丢失或系统访问,请使用最安全和最安全的默认值。 如果安全和安全不是因素,则应用会选择最有可能的选项。
  • 为悬停提供触摸等效项。 不要依赖悬停作为执行操作的唯一方法。
  • 确保手势立即生效。 在整个手势中使联系人点在用户的手指上保持不动,这会使手势直接映射到用户的运动。
  • 尽可能使用标准手势。 仅适用于应用独有的交互的自定义手势。
  • 确保可撤消或更正不理想或破坏性的命令。 使用触控时,可能会出现意外操作。

触摸输入准则

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

设计支持触摸的应用时,请考虑以下最佳做法:

响应能力对于创建直接和吸引人的触摸体验非常重要。 若要直接感觉,手势必须立即生效,且对象的联系点在整个手势中必须始终处于用户的手指。 触摸输入的效果应直接映射到用户的动作,例如,如果用户将其手指旋转90度,则对象应同时旋转90度。 任何 lag、不连贯的响应、失去联系或不准确的结果都会破坏直接操作和质量。

一致性是创建具有自然和直观外观的触摸体验的关键所在。 用户了解到标准手势后,会希望该笔势在所有应用中具有相同的效果。 为避免混乱和挫折,切勿为标准手势分配非标准含义。 请改用自定义笔势进行程序的独有交互。

接下来,我们将介绍 Windows touch 语言,但在继续之前,下面是基本触控输入术语的简短列表。

  • 手势

    手势是指在上或通过输入设备 (手指、手指、笔/触笔、鼠标等) 上执行的物理操作或运动。 例如,若要启动、激活或调用命令,请使用一指触摸或触摸板设备的鼠标单击, (等效于鼠标左键,点击一笔,或在键盘) 上 Enter。

  • 操作

    操作是对象或 UI 对笔势的即时、实时反应或响应。 例如,幻灯片和轻扫手势通常会使元素或 UI 以某种方式移动。

    操作的最终结果,其在屏幕上和 UI 中的对象表现方式是交互。

  • 交互

    交互取决于操作的解释方式和操作生成的命令或操作。 例如,可以使用滑动和轻扫手势来移动对象,但结果会因距离阈值是否超出而有所不同。 滑动可用于拖动对象或平移视图,同时轻扫可用于选择项目或显示应用栏。

Windows touch 语言

Windows 提供在整个系统中使用的一组简单的触摸交互。 以一致的方式应用这种触摸语言,使你的应用感到熟悉用户的认识。 这会使您的应用程序更易于学习和使用,从而提高用户信心。 若要了解有关 touch 语言实现的详细信息,请参阅笔势、操作和交互。

按住以了解

按下并保持手势 (例如,) 工具提示或上下文菜单,而不会提交到操作或命令。 如果在显示视觉对象时开始滑动手势,则仍可能进行平移。

重要

如果同时启用了水平和垂直平移,则可以使用按住键进行选择。

输入状态:一个或两个手指联系屏幕。

运动:无运动。

退出状态:上手指上箭头结束手势。

效果:显示详细信息。

触摸 - 按压 - -learn.png

按住手势。

悬停

悬停是一种很有用的交互,因为它允许用户在启动操作之前通过提示获取其他信息。 看到这些提示会使用户感到更加自信,并减少错误。

遗憾的是,touch 技术不支持悬停,因此,用户在使用手指时无法悬停。 此问题的简单解决方案是充分利用悬停,但只能以执行操作所不需要的方式进行操作。 在实践中,这通常意味着也可以通过单击,而不是以完全相同的方式执行操作。

屏幕截图显示了一个单击操作示例旁边的悬停交互的示例。

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

点击以了解主要操作

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

进入状态:一根手指联系屏幕或触摸板,并在按下并保持交互的时间阈值之前提升。

运动:无运动。

退出状态:手指向上结束手势。

效果:启动应用程序或执行命令。

触摸 - 点击 -primary.png

分流手势。

滑动到平移

幻灯片主要用于平移交互,但也可以用于移动 (,其中平移被限制为一个方向() 、绘制或写入)。 还可以 (通过密集将手指滑到相关对象(如单选按钮) 上)来面向小型打包元素。

输入状态:一个或两个手指联系屏幕。

运动:拖动,并在相对于彼此的同一位置中剩余的任何其他手指。

退出状态:上手指上箭头结束手势。

效果:在手指移动时直接和立即移动基础对象。 请确保将联系人点置于手指的整个笔势下。

触控 -slide.png

平移手势。

转到 "选择"、"命令" 和 "移动"

将手指向下移动一小段距离,垂直于平移方向 (在平移限制为一个方向) ,选择列表或网格中的对象。 选择对象时显示带有相关命令的应用栏。

进入状态:一个或多个手指触摸屏幕。

动作:拖动短距离并在移动交互的距离阈值之前抬起。

退出状态:上手指上箭头结束手势。

效果:选中或移动了基础对象,或显示了应用程序条。 请确保将联系人点置于手指的整个笔势下。

d: \ sdkenlistment \ m - ux - design \ m - ux - 设计 \ 图像 \ 触控 -swipe.png

滑动手势。

收缩和拉伸以缩放

"缩小" 和 "拉伸" 笔势用于三种类型的交互:光学缩放、调整大小和语义缩放。

光学缩放调整整个内容区域的放大级别,以获取更详细的内容视图。 与此相反,调整大小是一种方法,用于调整内容区域中一个或多个对象的相对大小,而无需将视图更改为内容区域。

语义缩放是一种触摸优化的技术,用于在单个视图中呈现和导航结构化数据或内容 (例如计算机文件夹结构、文档库或相册) ,无需使用平移、滚动或树视图控件。 语义缩放提供了两个不同的内容视图,通过使您可以在缩小时更详细地放大和缩小细节来查看更多详细信息。

进入状态:两根手指同时与屏幕连接。

运动:手指将 (拉伸) 或沿一个轴 (挤压) 一起移动。

退出状态:任何手指上箭头都将结束手势。

效果:将基础对象直接或横向缩放到轴上的手指分隔或方法。 请确保将联系人点置于手指的整个笔势下。

登陆 -areazoom.png

缩放手势。

转到旋转

使用两个或多个手指旋转将导致对象旋转。 旋转设备本身会旋转整个屏幕。

进入状态:两根手指同时与屏幕连接。

运动:其中一个或两个手指围绕另一个旋转,移动到它们之间的直线。

退出状态:任何手指上箭头都将结束手势。

效果:按手指旋转的相同量旋转基础对象。 请确保将联系人点置于手指的整个笔势下。

触控 -turn.png

旋转手势。

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

旋转通常由不同的人来完成。 有些人喜欢围绕枢形手指旋转一个手指,而另一些人更喜欢在循环动作中旋转这两个手指。 大多数人结合使用这两种方式,其中一根手指移动了。 虽然平滑旋转到任何角度是最佳交互,但在许多情况下,如照片查看,最好是在用户进入后,最接近90度的旋转。 在照片编辑中,可以使用小规模旋转来伸直照片。

在应用命令的边缘上轻扫

将手指从屏幕的下边缘或上边缘短距离到应用栏中的应用命令。

进入状态:一个或多个手指触摸挡板。

动作:将一个短距离拖到屏幕上并抬起。

退出状态:上手指上箭头结束手势。

效果:显示应用栏。

触摸 - 下轻扫 - -edge.png

触摸 - 式 - -edge.png

从边缘手势中轻扫。

开发人员:有关详细信息,请参阅 DIRECTMANIPULATION _ 配置 枚举。

控件使用情况

在这里,我们提供了一些准则,用于优化触控使用的控件。

  • 使用公共控件。 最常见的控件旨在支持良好的触摸体验。
  • 选择旨在支持触摸的自定义控件。 您可能需要自定义控件来支持您的程序的特殊体验。 选择以下自定义控件:
    • 大小可以调整到足够大,以方便目标和操作。
    • 进行操作时,移动和响应现实世界对象的移动和响应方式,如有势头和摩擦。
    • 包容性,用户可以轻松纠正错误。
    • 通过单击和拖动来表示不精确。 在目标附近放置的对象应位于正确的位置。
    • 当手指位于控件上时,提供清晰的视觉反馈。
  • 使用受约束的控件。 列表和滑块等受约束控件在设计上便于触摸定位时,可能优于文本框等不受约束的控件,因为它们减少了对文本输入的需要。
  • 提供适当的默认值。 默认情况下, (最安全的选项) 或系统访问权限丢失。 如果安全和安全性不是因素,请选择最可能或最方便的选项,从而消除不必要的交互。
  • 提供文本自动完成。 提供最可能的值或最近输入值的列表,使文本输入更加轻松。
  • 对于使用多个选择的重要任务,如果通常使用标准的多选列表,请提供一个选项来改为使用复选框列表。

控件大小和触摸目标

由于手部表面较大,过于靠近的小控件可能难以精确定位。

一般而言,13x13 DLUs (23x23 像素的控件大小) 是任何输入设备的最低交互控件大小。 相比之下,15x11 像素的旋转控件太小,无法有效地用于触摸。

显示向上和向下选择按钮的宽度和高度的屏幕截图,它测量 9 个 DLUs (15 像素) 宽 5 个 DLUS (9 像素) 高。

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

字体 毫米 相对像素 DLUs
9 个点Segoe UI 6x6 23x23 13x13
8 点 Ta分 6x6 23x23 15x14

此外,研究表明,最小大小为 10x10 mm (大约 40x40 像素) 可实现更好的速度和准确性,并且让用户感觉更舒适。 如果可行,请对用于最重要或最常用的命令的命令按钮使用此更大的大小。

目标不是拥有大型控件,而只是可轻松与触控一起使用的控制。

屏幕截图显示了一个Microsoft Word工具栏,突出显示了"A B C 拼写&语法"按钮,其 DLU 高度为 41,DLU 宽度为 40。

此示例中,Microsoft Word命令使用大于 10x10 mm 的按钮。

显示应用程序计算器Windows屏幕截图。

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

触摸目标没有完美大小。 不同的大小适用于不同的情况。 具有严重后果的操作 (例如删除和关闭) 频繁使用的操作应该使用大型触摸目标。 不常使用但具有次要后果的操作可以使用小目标。

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

大小准则 说明
7x7 建议的最小大小
7x7 mm:建议的最小大小
如果可通过一个或两个手势或在五秒钟内更正错误的目标,则 7x7 mm 是一个不错的最小大小。 目标之间的填充与目标大小一样重要。
9x9 建议的大小以确保准确性
当准确性重要时
关闭、删除和其他具有严重后果的操作无法承受意外点击。 如果触摸错误的目标需要两次以上手势、五秒或重大上下文更改来更正,请使用 9x9 mm 目标。
最小大小为 5x5
当它不适合时
如果发现自己正在尝试调整大小,可以使用 5x5 mm 目标,只要触摸错误的目标可以通过一个手势进行更正。 在这种情况下,在目标之间使用 2 mm 的填充非常重要。

常见控件的目标大小准则

  • 对于常见控件,请使用建议的控件大小。 建议的控制大小调整满足 23x23 像素 (13x13 DLU) 最小大小,但复选框和单选按钮除外 (其文本宽度会稍微补偿) 、旋转控件 ((它们不能与触摸一起使用,但是冗余的) 和拆分器)。

    屏幕截图显示了常见控件的示例,包括音频控件、"现在浏览 Internet"按钮和文件资源管理器窗口。

    建议的控件大小易于触摸。

  • 对于用于最重要或最常用的命令的命令按钮,请尽可能使用最小大小为 40x40 像素 (23x22 DLUs) 。 这样做可以提升速度和准确性,并且用户也感觉更舒适。

    显示电子邮件"发送"按钮的多个大小的屏幕截图,其中最小到最大大小从左到右开始。

    如果可行,请对重要命令或常用命令使用较大的命令按钮。

  • 对于其他控件:

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

      正确:

      显示具有正确目标大小的工具栏的屏幕截图。

      不正确:

      显示目标区域大小不正确的 U I 树的屏幕截图。

      正确:

      显示目标区域大小正确的 U I 树的屏幕截图。

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

    • 使用冗余单击目标。 如果单击目标具有冗余功能,则单击目标可小于最小大小。

      例如,树视图控件使用的渐进式披露三角形只有 6x9 像素,但其功能与关联的项标签是多余的。

      显示具有冗余单击目标的 U I 树的屏幕截图。

      树视图三角形太小,无法轻松触摸,但它们具有更大的关联标签,在功能上是冗余的。

      遵守系统指标。 不要对大小进行硬编码。 如有必要,用户可以更改系统指标或 dpi 以满足其需求。 但是,由于用户通常不需要调整系统设置来使 UI 可用,因此,请认为这是最后一种手段。

      显示左侧标准菜单高度的屏幕截图,右侧显示更大的菜单高度。

      本示例更改了菜单高度的系统指标。

编辑文本

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

例如,电子邮件程序可以正常可触摸大小显示 UI,但将输入 UI 缩放到 150% 以撰写消息。

显示电子邮件 U I 的屏幕截图。

本示例将输入 UI 缩放到 150%。

控件布局和间距

控件之间的间距是使控件易于触摸的一个重要的因素。 将手指用作指向设备时,目标更快但不太精确,导致用户更经常点击其预期目标之外。 当交互式控件非常靠近但不实际触摸时,用户可能会单击控件之间的非活动空间。 由于单击非活动空间没有结果或视觉反馈,因此用户通常不确定问题是什么。

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

在交互式控件的目标区域之间提供至少5个像素 (3 个) 的空格。 如果小控件间距太大,则用户需要点击 "精确",以避免点击错误的对象。

使用超过控件之间建议的垂直间距,使组中的控件更易于区分。 例如,高为19像素的单选按钮比建议的最小大小为23像素。 如果有可用的垂直空间,则可以通过向标准7像素添加额外的4像素间距来实现与建议大小大致相同的效果。

正确:

屏幕截图,显示控件之间垂直间距的标准示例。

良好:

显示具有更垂直间距的控件示例的屏幕截图。

在更好的示例中,单选按钮之间的额外间距使它们更易于区分。

在某些情况下,使用触控时可能需要额外的间距,而不是使用鼠标或键盘时。 在这种情况下,仅当使用触控启动操作时,才使用更 spacious 的设计。

选择将控件放置在最有可能使用的位置的布局。 尽可能地在较小的区域内保持任务交互,并找到靠近它们最有可能使用的控件。 避免长距离移动,特别是对于常见任务和拖动。

请注意,当前指针位置是最接近目标的位置,这使其不太容易获得。 因此,上下文菜单充分利用了 Fitts 的法律,这与 Microsoft Office 使用的微型工具栏相同。

屏幕截图显示了 Microsoft Office 并行的上下文菜单和小工具栏的示例。

避免将小控件放置在应用程序或显示的边缘附近。 接近边缘的小型目标很难触摸 (显示 bezels 可能会干扰边缘手势) 。 若要确保在窗口最大化时控件易于定位,请将它们设置为至少23x23 像素 (13x13 Dlu) 或将其置于窗口边缘之外。

使用建议的间距。 建议的间距为触控。 但是,如果你的应用程序可以从更大的大小和间距中获益,则请考虑建议在适当的时候调整大小和间距。

为交互式控件之间至少 (3 个像素提供) 空间。 这样做可以防止用户点击其目标目标之外时出现混淆。

请考虑添加超出控件组(例如,命令链接、复选框和单选按钮)以及组之间建议的垂直间距。 这样做会使它们更易于区分。

当使用触控启动操作时,请考虑动态添加超过建议的垂直间距。 这样做可以使对象更易于区分,但在使用键盘或鼠标时无需占用更多空间。 增大间距,使其正常大小或至少8像素。

image

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

交互

使用正确的控件只是为了获得触摸优化的应用程序的一部分,还需要考虑这些控件支持的整体交互模型。 下面是一些可帮助你解决此情况的准则。

  • 使悬停冗余。 大多数触控技术不支持悬停,因此具有此类 touchscreens 的用户无法执行需要悬停的任何任务。

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

    • 为用户输入提供适当的默认值。
    • 适当时提供自动完成建议。

    备注

    开发人员:有关集成触摸键盘的详细信息,请参阅 ITextInputPanel

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

  • 随时随地提供平滑的响应平移和缩放。 在平移或缩放后快速重绘以保持响应状态。 这样做的目的是使直接操作感觉真正直接。

  • 在平移或缩放过程中,请确保每个手势的接触点都位于手指下方。 否则,平移或缩放很难控制。

  • 由于手势是缘故的,因此请为它们分配在应用之间保持一致的含义。 不要对具有固定语义的手势提供不同的含义。 改为使用合适的特定于应用的手势。

Forgiveness

直接操作使触摸自然、引人入胜、高效和吸引人。 但是,在存在直接操作的情况下,可能会发生意外的操作,因此需要 forgiveness。

Forgiveness 可以轻松地撤消或更正不需要的操作。 您可以通过提供 undo 来包容性触摸体验,提供良好的视觉反馈,在常用的命令与破坏性命令之间提供清晰的物理隔离,并使用户能够轻松地纠正错误。 与 forgiveness 关联的是阻止不需要的操作在第一处发生,你可以通过使用受约束的控件并确认具有意外后果的风险操作或命令来执行此操作。

  • 提供 "撤消" 命令。 最好提供一种简单的方法来撤消所有命令,但你的应用程序可能会有一些无法撤消的命令。

  • 如果可行,请在向下手指提供良好的反馈,但不要执行操作,直到出现手指。 这样,用户就可以在进行更改之前纠正错误。

  • 只要可行,用户就可以轻松地纠正错误。 如果操作对手指有效,则允许用户在手指仍关闭时通过滑动来更正错误。

  • 如果可行,则指示无法通过 resisting 移动来执行直接操作。 允许移动发生,但在发布时,对象会就地向后进行结算,以清楚表明已识别该操作但无法完成。

  • 经常使用的命令与破坏性命令之间存在明显的物理分离。 否则,用户可能会意外地触摸破坏性命令。 如果某个命令的作用是广泛的,或者无法轻易撤消,或者该效果不是立即产生的,则该命令会被视为具有破坏性。

  • 确认包含意想不到后果的风险操作或命令的命令。 出于此目的使用确认对话框。

  • 请考虑确认用户在使用触控时可能会意外执行的任何其他操作,并且不会忽略或难以撤消。 通常,这些称为 "例程确认",不建议使用,因为用户通常不会通过鼠标或键盘意外发出此类命令。 若要避免不必要的确认,请仅在使用触控启动命令时才显示这些确认。

    用户经常使用触控进行的交互可接受例程确认。

    开发人员:可以使用 输入 _ 消息 _ 源 API 来区分鼠标事件和触控事件。