跨页指南

重要的应用程序接口(API)

使用跨划手势来支持通过轻扫手势进行选择,并通过滑动手势实现拖动(移动)交互。

应该做和不应该做的事

  • 对于单方向滚动的列表或集合,请使用横向滑动手势。
  • 当点击交互用于其他用处时,使用 cross-slide 进行项目选择。
  • 不要使用滑动手势将项目添加到队列。

其他使用指南

选择和拖动仅限于只能在一个方向(垂直或水平)平移的内容区域内进行。 要使任何一个交互工作正常,必须锁定一个平移方向,并且手势必须在垂直于平移方向的方向上执行。

在这里,我们演示如何使用交叉幻灯片选择和拖动对象。 左侧的图像显示,如果在抬起手指并释放对象之前,轻扫手势未超过距离阈值,则如何选择项。 右侧的图像显示一个滑动手势,该手势跨越距离阈值,并导致对象被拖动。

显示选择和拖放进程的关系图。

下图显示了滑动交互使用的阈值距离。

显示选择和拖放进程的屏幕截图。

为了保留平移功能,在激活选择或拖动交互之前,必须先超过 2.7mm(目标分辨率约 10 像素)的小阈值。 此小阈值可帮助系统区分交叉滑动与平移,还有助于确保点击手势与交叉滑动和平移区分开来。

此图像显示用户如何触摸 UI 中的元素,但在接触时将手指稍微向下移动。 如果没有阈值,由于初始垂直移动,交互将被解释为跨滑动。 借助阈值,可以将移动正确解释为水平平移。

显示选择或拖放消除歧义阈值的屏幕截图。

在应用中包括跨页面功能时要考虑的一些准则如下。

使用跨滑动功能用于单向滚动的列表或集合。 有关详细信息,请参阅 添加 ListView 控件

注意 在内容区域可以平移两个方向(如 Web 浏览器或电子阅读器)的情况下,应使用按住计时交互来调用图像和超链接等对象的上下文菜单。

水平滚动,二维列表

水平滚动的二维列表。 垂直拖动以选择或移动项。

垂直滚动,一维列表

垂直滚动的一维列表。 水平拖动以选择或移动项。

选择

选择是一个或多个对象的标记,无需启动或激活。 此操作类似于在一个或多个对象上单击鼠标,或按住 “Shift” 键再单击鼠标。

通过触摸一个元素并在短距离拖动后释放来实现横滑选择。 这种选择方法免除了专用选择模式和其他触摸接口所需的按住计时的交互,也不会干扰通过点击进行的激活交互。

除了距离阈值外,交叉滑动选择还限制为 90° 阈值区域,如下图所示。 如果对象拖在此区域之外,则不选中它。

显示选择阈值区域的示意图。

跨滑动交互由按住并保持计时的交互补充,也称为“自我揭示”交互。 此补充交互将激活一个动画,该动画指示可以对对象执行的操作。 有关消除歧义 UI 的详细信息,请参阅 视觉反馈指南

以下屏幕截图演示了自我揭示动画的工作原理。

  1. 按住以启动自我显示交互的动画。 项目的选中状态会影响动画显示的内容:如果未选中则显示复选标记,如果选中则不显示复选标记。

    显示未选择状态的屏幕截图。

  2. 使用轻扫手势(向上或向下)选择项目。

    显示所选动画的屏幕截图。

  3. 现在已选择该项。 使用幻灯片笔势替代选择行为以移动项目。

    显示拖放动画的屏幕截图。

在应用程序中,仅在其为唯一主要操作时,使用单击进行选择。 显示跨滑动自揭示动画,以消除此功能与激活和导航标准点击交互之间的歧义。

选择篮子

选择篮是应用程序中从主列表或集合中选择的项的直观而动态的表示形式。 此功能可用于跟踪所选项,应供以下应用程序使用:

  • 可以从多个位置选择项目。
  • 可以选择许多项。
  • 操作或命令依赖于选择列表。

选择篮的内容在各个操作和命令中保持不变。 例如,如果你从图库中选择一系列照片,对每张照片进行颜色更正,并以某种形式共享照片,这些项目将保持选中状态。

如果在应用程序中未使用选择篮,则应在一个操作或命令后清除当前选择。 例如,如果从播放列表中选择一首歌曲并对其进行评分,那么所选项目应被清除。

不使用选择篮且激活列表或集合中的其他项时,也应清除当前选定内容。 例如,如果选择收件箱消息,则会更新预览窗格。 然后,如果选择第二封收件箱邮件,则会取消上一封邮件的选择,并更新预览窗格。

Queues

队列不等同于选择框列表,不应被视为相同。 主要区别包括:

  • 选择篮中的项目列表仅是一种视觉呈现形式;队列中的项目是为特定目的而组合的。
  • 项目只能在选择篮中表示一次,但在队列中可多次表示。
  • 选择篮中的项顺序表示所选内容的顺序。 队列中的项顺序与功能直接相关。

出于这些原因,不应使用跨幻灯片选择交互来将项添加到队列中。 相反,应通过拖动作将项添加到队列中。

Drag

使用拖动将一个或多个对象从一个位置移动到另一个位置。

如果需要移动多个对象,允许用户选择多个项,然后一次性全部拖动。

Samples

档案样本