平移指南

平移或滚动允许用户在单个视图中导航,以显示不适合视区内的视图的内容。 视图示例包括计算机的文件夹结构、文档库或相册。

重要 APIWindows.UI.InputWindows.UI.Xaml.Input

宜忌事项

平移指示标识和滚动条

  • 在将内容加载到应用中之前,请确保可以平移/滚动。

  • 显示平移指示器和滚动条以提供位置和大小提示。如果你提供自定义导航功能,请隐藏它们。

    注意 与标准滚动条不同,平移指示器纯粹是信息性的。 它们不会暴露给输入设备,并且无法以任何方式进行操作。

     

单轴平移(一维溢出)

  • 对于超出一条视口边界(垂直或水平)的内容区域使用单轴平移。

    • 垂直平移一维项目列表。
    • 项目网格的水平滑动。
  • 如果用户必须能够在对齐点之间平移和停止,请不要将强制对齐点与单轴平移。 强制对齐点保证用户将在对齐点上停止。 请改用邻近对齐点。

自由平移(二维平面溢出)

  • 对于超出两条视口边界(垂直和水平)的内容区域使用双轴平移。

    • 重写默认轨道行为,并为用户可能向多个方向移动的非结构化内容使用任意多边形平移。
  • 自由平移通常适用于在图像或地图中进行导航。

分页视图

  • 当内容由离散元素组成或要显示整个元素时,请使用强制性的对齐点。 这可以包括书籍或杂志的页面、一个栏目或单个图像。

    • 应将捕捉点放置在每个逻辑边界。
    • 应调整每个元素的大小以适应视图。

逻辑点和关键点

  • 如果用户可能停止的内容中存在关键点或逻辑位置,请使用邻近对齐点。 例如,章节标题。

  • 如果定义了最大和最小大小约束或边界,请使用视觉反馈来演示用户何时达到或超过这些边界。

链接嵌入内容或嵌套内容

  • 在文本和基于网格的内容中,采用单轴平移(通常是水平方向)和列布局。 在这些情况下,内容通常会在列之间自然地换行和流动,以便让用户体验在 Windows 应用中保持一致且容易发现。

  • 不要使用嵌入式平移区域来显示文本或项列表。 由于仅当区域中检测到输入联系人时才会显示平移指示器和滚动条,因此它不是直观或可发现的用户体验。

  • 如果两个可平移区域都在同一方向平移,请勿将一个可平移区域链接或置于另一个可平移区域内,如下所示。 这可能会导致在到达子区域边界时,无意间平移父区域。 请考虑使平移轴垂直。

    显示嵌入的可平移区域的图像,其滚动方向与容器相同。

其他使用指南

使用带有一个或多个手指的轻扫或滑动手势进行触摸平移就像使用鼠标滚动一样。 平移交互最类似于旋转鼠标滚轮或滑动滚动框,而不是单击滚动条。 除非在 API 中进行了区分或某些特定设备的 Windows UI 有此要求,否则我们将这两种交互统一称为“平移”。

Windows 10 Fall Creators Update - 行为更改 默认情况下,活动笔现在在 Windows 应用中滚动/平移(如触摸、触摸板和被动笔),而不是文本选择。 如果应用依赖于以前的行为,则可以替代笔滚动并还原到以前的行为。 有关详细信息,请参阅 ScrollViewer 类的 API 参考主题。

根据输入设备,用户使用以下方法之一在可平移区域中平移:

  • 鼠标、触摸板或主动笔/触控笔用于单击滚动箭头、拖动滚动框或在滚动条内单击。
  • 用于模拟拖动滚动框的鼠标滚轮按钮。
  • 如果鼠标支持扩展按钮(XBUTTON1和XBUTTON2)。
  • 使用键盘箭头键模拟拖动滚动框,或使用页面键模拟在滚动条内单击。
  • 通过触摸、触摸板或被动式笔或触控笔,按照所需方向滑动或轻扫手指。

滑动是指将手指沿着横向方向缓慢移动。 这会导致一对一关系,其中内容以与手指相同的速度和距离平移。 轻扫动作涉及快速地滑动并抬起手指,这样会将以下物理效果应用于平移动画:

  • 减速(惯性):抬起手指会导致平移开始减速。 这类似于在湿滑的表面上滑行然后停下。
  • 吸收:在减速过程中,如果到达对齐点或内容区域边界,平移的动力会导致轻微的回弹效果。

平移类型

Windows 支持三种类型的平移:

  • 单轴:仅支持一个方向的平移操作(水平或垂直)。
  • Rails - 滑动轨道支持所有方向的平移。 但是,当用户在特定方向越过距离阈值后,平移将限制为该轴。
  • 自由格式 - 支持所有方向的平移。

平移 UI

平移的交互体验对于输入设备来说是唯一的,同时仍然提供类似的功能。

根据检测到的输入设备,有两种平移显示模式:

  • 触摸用的平移指示器。
  • 其他输入设备的滚动条,包括鼠标、触摸板、键盘和触笔。

注意 仅当触摸接触位于可平移区域中时,平移指示器才可见。 同样,仅当鼠标光标、笔/触笔光标或键盘焦点位于可滚动区域中时,滚动条才可见。

 

平移指示器 平移指示器类似于滚动条中的滚动框。 它们指示显示的内容与可平移区域总数的比例,以及可平移区域中显示的内容的相对位置。

下图显示了两个不同长度的可平移区域及其平移指示器。

显示两个不同长度的可平移区域及其平移指示器的图像。

平移行为捕捉点 在触摸接触抬起时,平移与轻扫手势将惯性行为引入交互。 使用惯性时,内容会继续平移,直到达到某些距离阈值,而无需用户直接输入。 使用定位点修改此惯性行为。

捕捉点用于在应用内容中指定逻辑停止点。 从认知上看,对齐点充当用户的翻页机制,并最大限度地减少用户因在大型可平移区域中过度滑动或轻扫而产生的疲劳。 借助它们,你可以处理不精确的用户输入,并确保在视区中显示特定的内容或关键信息子集。

有两种类型的对齐点:

  • 接近 - 当接触消失后,如果惯性在捕捉点的距离阈值之内停止,则选择一个捕捉点。 平移仍可在邻近对齐点之间停止。
  • 必需 - 所选择的对齐点是接触移开前越过的最后一个对齐点紧前或紧后的那个具体位置,选择取决于手势的方向和速度。 平移必须在强制对齐点上停止。

平移对齐点对于像 Web 浏览器和相册这样的应用程序非常有用,它们可以模拟分页内容,或者具有项目的逻辑分组,这些分组可以动态重新组合以适应视区或显示。

以下图例显示了如何平移到某个点并释放会使内容自动平移到逻辑位置。

显示可平移区域的图像。

轻扫以平移。

显示可平移区域向左移动的图像。

移开触摸接触。

一幅图像显示可平移区域已在逻辑对齐点停止平移。

可平移区域在对齐点停止,而不是解除触摸接触的位置。

Rails 内容可以比显示设备的尺寸和分辨率更宽、更高。 因此,通常需要二维平移(水平和垂直)。 Rails 通过强调沿运动轴(垂直或水平)平移来提高用户体验。

下图演示了铁路的概念。

带有限制平移的导轨的屏幕图

链接嵌入内容或嵌套内容

当用户在另一个可缩放或可滚动元素内嵌套的元素上达到缩放或滚动限制后,可以指定该父元素是否应继续在其子元素中开始缩放或滚动作。 这称为缩放或滚动链式动作。

链式滚动用于在包含一个或多个单轴或自由形式平移区域的单轴内容区域中进行平移(当触摸接触位于其中一个子区域时)。 当子区域在特定方向上到达其平移边界时,将在同一方向激活父区域的平移功能。

当一个可平移区域嵌套在另一个可平移区域内时,必须为容器和嵌入的内容之间留出足够的空间。 在下图中,一个可平移区域放置在另一个可平移区域内,每个区域都按垂直方向排列。 用户在每个区域中有足够的空间进行平移。

演示嵌入式可拖动区域的图像。

如果没有足够的空间,如下图所示,嵌入的可平移区域可能会干扰容器中的平移,并导致一个或多个可平移区域出现意外平移。

显示嵌入式可平移区域的填充不足的图像。

本指南还适用于支持单个图像或地图内不受约束平移的应用,同时支持相册中的单轴平移(到上一张或下一张图像)或详细信息区域等应用。 在提供与任意多边形平移图像或地图对应的详细信息或选项区域的应用中,我们建议页面布局以详细信息和选项区域开头,因为图像或地图的不受约束的平移区域可能会干扰平移到详细信息区域。

示例

存档示例