触控板设计指南

设计应用,以便用户可以通过触控板与其交互。 触控板将间接多点触控输入与指向设备的精确输入(如鼠标)相结合。 这种组合使触控板既适合触摸优化 UI,又适合高效办公应用的较小目标。

 

touchpad

触控板交互需要以下三项操作:

  • 标准触控板或 Windows 精确式触控板。

    精确式触控板针对 Windows 应用设备进行了优化。 它们使系统能够在本机处理触控板体验的某些方面,例如手指跟踪和手掌检测,以便在不同设备上获得更一致的体验。

  • 一根或多根手指直接接触触控板。

  • 触控交互移动(或缺乏移动,基于时间阈值)。

触控板传感器提供的输入数据可以是:

  • 解释为直接操作一个或多个 UI 元素的物理手势(例如平移、旋转、调整大小或移动)。 相比之下,通过元素的属性窗口或其他对话框与元素交互被视为间接操作。
  • 识别为替代输入法,例如鼠标或笔。
  • 用于补充或修改其他输入方法的各个方面,例如模糊化用笔绘制的笔划墨迹。

触控板将间接多点触控输入与指针设备的精确输入(如鼠标)相结合。 这种组合使触控板既适合触摸优化 UI,又适合高效办公应用和桌面环境的通常较小的目标。 针对触摸输入优化 Window 应用设计,并在默认情况下获得触控板支持。

由于触控板支持的交互体验趋同,除了对触控输入的内置支持之外,我们还建议使用 PointerEntered 事件来提供鼠标样式的 UI 命令。 例如,使用上一个和下一个按钮让用户翻阅内容页面以及平移内容。

本主题中讨论的手势和指南有助于确保应用以最少的代码顺畅支持触控板输入。

触控板语言

整个系统一致使用一组简洁的触摸板交互。 针对触摸和鼠标输入优化应用,此语言使你的用户立即感到熟悉你的应用,从而提高了用户的信心,并使你的应用更易于学习和使用。

用户可以设置比标准触控板更精确的触控板手势和交互行为。 这两张图分别显示了不同于标准触控板和精确式触控板的“设置”>“设备”>“鼠标和触控板”的触控板设置页。

standard touchpad settings

标准\触控板\设置

windows precision touchpad settings

Windows\ 精确式\ 触控板\ 设置

下面是用于执行常见任务的触控板优化手势的一些示例。

术语 说明

三指点击

用户偏好使用 Cortana 搜索或显示 操作中心

三指滑动

用户偏好打开虚拟桌面任务视图、显示桌面或在打开的应用之间切换。

主操作的单指点击

使用单个手指点击元素并调用其主要操作(例如启动应用或执行命令)。

两指点击以右键单击

用两根手指同时点击元素以选择它并显示上下文命令。

两指滑动以平移

滑动主要用于平移交互,但也可用于移送、绘图或书写。

捏合和张开可缩放

收缩和拉伸手势通常用于调整大小和语义式缩放。

单指按下并滑动以重新排列

拖动元素。

单指按下和滑动以选择文本

在可选择的文本内按下并滑动以将其选中。 双击以选择一个单词。

左、右键单击区域

模拟鼠标设备的左右按钮功能。

 

硬件

查询鼠标设备功能(MouseCapabilities),以确定触控板硬件可以直接访问应用 UI 的哪些方面。 我们建议为触摸和鼠标输入提供 UI。

有关查询设备功能的详细信息,请参阅 识别输入设备

视觉反馈

  • 检测到触控板游标(通过移动或悬停事件)时,显示特定于鼠标的 UI 以指示元素公开的功能。 如果触摸板游标在一定时间内没有移动,或者用户发起触摸交互,则使触摸板 UI 逐渐消失。 这样,UI 将保持干净且整洁。
  • 不要将游标用于悬停反馈,元素提供的反馈已足够(请参阅下面的游标部分)。
  • 如果元素不支持交互(如静态文本),请不要显示视觉反馈。
  • 不要将焦点矩形与触控板交互配合使用。 为键盘交互保留这些内容。
  • 同时显示表示相同输入目标的所有元素的视觉反馈。

有关视觉反馈的更多常规指南,请参阅 视觉反馈指南

游标

一组标准游标可用于触控板指针。 它们用于指示元素的主要操作。

每个标准游标都有一个与之关联的相应默认图像。 用户或应用可以随时替换与任何标准游标关联的默认图像。 UWP 应用通过 PointerCursor 函数指定游标图像。

如果需要自定义鼠标游标:

  • 对于可单击元素,始终使用箭头游标(arrow cursor)。 请勿将指向手游标(pointing hand cursor)用于链接或其他交互元素。 相反,请改用悬停效果(前面已述)。
  • 将文本游标(text cursor)用于可选文本。
  • 当移动是主要操作(例如拖动或裁剪)时,使用移动游标(move cursor)。 不要将移动游标用于主要操作是导航的元素(如“开始”磁贴)。
  • 当对象可调整大小时,请使用水平、垂直和对角调整游标(vertical resize cursorhorizontal resize cursordiagonal resize cursor (lower left, upper right)diagonal resize cursor (upper left, lower right))。
  • 在固定画布(如地图)内平移内容时,使用手掌型游标(grasping hand cursor (open)grasping hand cursor (closed))。

示例

存档示例