触摸交互指南

Applies to Windows and Windows Phone

描述

创建具有直观且独特用户交互体验的 Windows 应用商店应用,它针对触摸进行了优化,但在各种输入设备上功能一致。

充分利用 Windows 的具有吸引力的交互功能。这些指南将为你提供帮助。

请将此操作功能视为我们的应用功能大全系列的一部分。:  用户交互操作:触摸屏输入等

应做事项和禁止事项

  • 设计将触摸交互作为预期的主要输入方法的应用程序。
  • 为所有类型的交互(触摸、笔、触笔和鼠标等)提供视觉反馈
  • 通过调整触摸目标大小、接触几何体、清理和摇动来优化定位。
  • 使用吸附点和带方向性的“围栏”优化精确度。
  • 对于紧凑的 UI 项目,提供工具提示和句柄以帮助提高触摸精确度。
  • 尽量不要使用计时的交互(适当使用的示例:长按)。
  • 尽量不要使用用于区别操作的手指数量。

其他使用指南

首先,以“触摸将是用户的主要输入方法”的初衷设计应用。如果你使用平台控件,不要求额外编程,即可支持触摸板、鼠标和笔/触笔,因为 Windows 8 免费提供此类支持。

但是请记住,为触摸优化的 UI 并非总是优于传统 UI。两者都具有特定于技术和应用的优缺点。在转换到主要使用触摸的 UI 时,重要的是了解触摸(包括触摸板)、笔/触笔、鼠标和键盘输入之间的核心差别。不要认为熟悉的输入设备属性和行为会理所当然地出现,因为 Windows 8 中的触摸所做的不仅仅是模拟此类功能。

你将发现在这些指南中触摸输入需要采用设计 UI 的不同方法。

对比触摸交互要求

下表显示了设计为触摸而优化的 Windows 应用商店应用时应该考虑的一些输入设备之间的不同。

因素触摸交互鼠标、键盘、笔/触笔交互触摸板
精度指尖的接触区域大于单个 x-y 坐标,这样便增加了无意中激活命令的几率。鼠标和笔/触笔提供了精确的 x-y 坐标。与鼠标相同。
接触区域的形状在整个移动过程中不断变化。 鼠标移动和笔/触笔笔划都提供精确的 x-y 坐标。键盘焦点非常清晰。与鼠标相同。
没有鼠标光标来帮助确定目标。鼠标光标、笔/触笔光标以及键盘焦点都可以帮助确定目标。与鼠标相同。
人体解剖学指尖移动并不精确,因为使用一个或多个手指沿直线移动非常困难。这是由于手关节的曲率和运动涉及的关节数量导致的。使用鼠标或笔/触笔进行直线移动就很容易,因为控制它们的手所移动的物理距离要比光标在屏幕上移动的物理距离短。与鼠标相同。
由于手指的姿势以及用户对设备的控制,显示设备触摸表面上的某些区域可能很难接触到。鼠标和笔/触笔可以达到屏幕的任何一个部分,同时任何控件都应该可以通过键盘按照 Tab 键顺序进行访问。手指姿势和抓握可能产生问题。
一个或多个指尖或用户的手可能会遮住对象。这称为封闭。间接输入设备不会造成封闭。与鼠标相同。
对象状态触摸使用两个状态的模型:显示设备的触摸表面为已触摸(打开)或未触摸(关闭)。没有可以触发其他视觉反馈的悬停状态。

鼠标、笔/触笔以及键盘全都显示三种状态的模型:向上(关闭)、向下(打开)以及悬停(聚焦)。

悬停允许用户通过与 UI 元素关联的工具提示来了解信息。悬停和聚焦效果都可以传达哪些对象是交互对象,并且还可以帮助确定目标。

与鼠标相同。
丰富交互支持多点触摸:触摸表面上的多个输入点(指尖)。支持单一输入点。与触摸相同。
通过手势(点击、拖动、滑动、收缩和旋转)支持对象的直接操作。不支持直接操作,因为鼠标、笔/触笔以及键盘为间接输入设备。与鼠标相同。

 

注意  

非直接输入的优点是可以使用 25 年以上。设计诸如悬停触发的工具提示之类的功能,是为了解决触摸板、鼠标、笔/触笔以及键盘输入特有的 UI 浏览。此类 UI 功能已针对触摸输入提供的丰富体验进行了重新设计,不会对这些其他设备的用户体验产生负面影响。

用户触摸反馈

与应用交互期间适当的视觉反馈可帮助用户识别、了解以及适应应用和 Windows 8 解释其交互的方式。视觉反馈可以指示成功交互、延迟系统状态、加强控制感觉、减少错误、帮助用户了解系统和输入设备并鼓励交互。

当用户依赖触摸屏输入来进行要求基于位置的准确活动时,视觉反馈非常重要。无论何时何地检测到触摸输入都显示反馈,以帮助用户了解应用及其控件定义的任何自定义目标启发。

创建沉浸式交互体验

以下技术将改善 Windows 应用商店应用的沉浸式体验。

目标

通过以下方式优化目标:

  • 触摸目标大小

    清晰的大小指南确保应用程序提供舒适的 UI,即 UI 中包含的对象和控件都很容易确定目标并且非常安全。

  • 接触几何图形

    手指的整个接触区域可以确定最可能的目标对象。

  • 推移

    通过将手指在组中的项之间拖动可以很容易改变目标(例如,单选按钮)。释放触摸时激活当前项。

  • 摇摆

    密集项目(如超链接)可以通过下压手指(无滑动),然后来回摇摆并停在项目上方来轻松改变目标。 由于存在封闭,当前项通过工具提示或状态栏来标识,并且释放触摸时会被激活。

准确性

使用以下方式设计草率交互:

  • 用户与内容交互时使用吸附点可以轻松在所需位置停止。
  • 使用方向“围栏”可帮助进行垂直或水平平移,甚至手出现轻微弧度的移动时都可以。 有关详细信息,请参阅平移指南

封闭

通过以下方式避免出现手指和手封闭:

  • UI 的大小和位置

    使 UI 元素足够大,以便指尖接触区域无法完全覆盖。

    将菜单和弹出窗口尽可能放在接触区域上方。

  • 工具提示

    当用户在对象上保持手指接触时,显示工具提示。这对于描述对象功能非常有用。用户可将指尖拖动到对象外,以避免调用工具提示。

    对于小型对象,偏移工具提示以便指尖接触区域不会将对象覆盖。这对于确定目标非常有用。

  • 精确句柄

    有精度要求时(例如文本选择),提供偏移选择句柄以提高准确性。有关详细信息,请参阅选择文本和图像的指南

定时

在直接操作时,避免定时模式更改。直接操作模拟对象的直接、实时的物理处理。对象随着手指移动作出响应。

另一方面,定时交互发生在触摸交互之后。定时交互通常依赖看不见的阈值(如时间、距离或速度)来确定要执行的命令。定时交互在系统执行操作之前没有视觉反馈。

与定时交互相比,直接操作提供了很多优势:

  • 交互期间即时视觉反馈使用户感觉更吸引人、更自信并且控制力更好。
  • 直接操作比浏览系统更安全,因为这些操作是可逆的—用户可以采用逻辑和直观的方式轻松倒退其操作。
  • 直接影响对象的交互以及模拟现实的交互更直观、更容易发现并且更不容易忘记。它们不依赖于模糊或抽象的交互。
  • 定时交互可能难以执行,因为用户数量必须达到任意且不可见的阈值。

此外,还强烈建议遵循以下规则:

  • 不应该按使用的手指数量来区分操作。
  • 交互应该支持复合操作。例如,在拖动手指进行平移时收缩即可缩放。
  • 不应按时间来区分交互。相同的交互应该具有相同的结果,而与执行该操作所花费的时间无关。基于时间的激活功能为用户引入了强制延迟,因此影响了直接操作的沉浸式特性以及系统响应的感知。

    注意  其中的一个例外是使用特定的定时交互来帮助了解和探究(如长按)。

  • 正确的描述以及视觉提示对高级交互的使用有巨大影响。

相关主题

对于设计人员
响应用户交互
手势、操作和交互
触摸交互设计
十字滑块指南
视觉缩放和调整大小指南
平移指南
旋转指南
语义式缩放指南
选择文本和图像的指南
目标指南
视觉反馈指南

 

 

显示:
© 2014 Microsoft