平移或滚动允许用户在单个视图中导航,以显示在视口内不适合的视图内容。 视图示例包括计算机的文件夹结构、文档库或相册。
重要 API: Windows.UI.Input、 Windows.UI.Xaml.Input
宜忌事项
平移指示标识和滚动条
在将内容加载到应用中之前,请确保可以平移/滚动。
显示平移指示器和滚动条以提供位置和大小提示。如果你提供自定义导航功能,请隐藏它们。
注意 与标准滚动条不同,平移指示器纯粹是信息性的。 它们不会暴露给输入设备,并且无法以任何方式进行操作。
单轴平移(一维溢出)
对于超出一个视口边界(纵向或横向)的内容区域,应使用单轴平移方式。
- 用于一维项列表的垂直平移。
- 用于项网格的水平平移。
如果用户必须在吸附点之间平移和停止,则请勿使用具有单轴平移的强制吸附点。 强制吸附点确保用户将停在某个吸附点处。 转而使用邻近吸附点。
自由平移(二维平面溢出)
对于超出两条视口边界(垂直和水平)的内容区域使用双轴平移。
- 对于用户想在多个方向移动的非结构化内容,覆盖默认围栏行为并使用自由平移。
自由平移通常适用于在图像或地图中进行导航。
分页视图
当内容由分散的元素组成或者你想显示整个元素时,可使用强制对齐点。 这可以包括书籍或杂志的页面、一个栏目或单个图像。
- 吸附点应该放置在每个逻辑边界处。
- 应调整每个元素的大小以适应视图。
逻辑点和关键点
如果内容中存在用户可能停止的关键点或逻辑点,则使用邻近吸附点。 例如,章节标题。
如果定义了最大和最小大小约束或边界,请使用视觉反馈来演示用户何时达到或超过这些边界。
链接嵌入内容或嵌套内容
在文本和基于网格的内容中,采用单轴平移(通常是水平方向)和列布局。 在这些情况下,内容通常会在列之间自然地换行和流动,以便让用户体验在 Windows 应用中保持一致且容易发现。
不要使用嵌入式平移区域来显示文本或项列表。 由于仅当区域中检测到输入联系人时才会显示平移指示器和滚动条,因此它不是直观或可发现的用户体验。
如果平移方向相同,请不要链接或将一个可平移区域放置在另一个可平移区域之内,如此处所示。 这可能会导致达到子区域的边界时无意中平移父区域。 请考虑使平移轴垂直。
其他使用指南
与使用鼠标滚动类似,通过一个或多个手指轻扫或滑动,以使用触控进行平移。 平移交互最类似于旋转鼠标滚轮或滑动滚动框,而不是单击滚动条。 除非在 API 中进行了区分或某些特定设备的 Windows UI 有此要求,否则我们将这两种交互统一称为“平移”。
Windows 10 Fall Creators Update - 行为更改 默认情况下,活动笔现在在 Windows 应用中滚动/平移(如触摸、触摸板和被动笔),而不是文本选择。 如果应用依赖于以前的行为,则可以替代笔滚动并还原到以前的行为。 有关详细信息,请参阅 ScrollViewer 类的 API 参考主题。
根据输入设备的不同,用户使用以下方式之一在可平移区域内进行平移:
- 使用鼠标、触摸板或主动笔/触笔单击滚动箭头、拖动滚动框或在滚动条内单击。
- 用于模拟拖动滚动框的鼠标滚轮按钮。
- 如果鼠标支持扩展按钮(XBUTTON1和XBUTTON2)。
- 使用键盘箭头键模拟拖动滚动框,或使用页面键模拟在滚动条内单击。
- 通过触摸、触摸板或被动式笔或触控笔,按照所需方向滑动或轻扫手指。
滑动是指将手指沿着横向方向缓慢移动。 这将导致一对一的关系,其中内容会随着手指以相同的速度和距离进行平移。 轻扫涉及迅速滑动并抬起手指,将导致对平移动画应用以下物理情景:
- 减速(延时):抬起手指导致平移开始减速。 这类似于在湿滑的表面上滑行然后停下。
- 吸收:在减速期间,如果达到吸附点或内容区域边界,则平移动量导致轻微向后弹的效果。
平移类型
Windows 支持三种类型的平移:
- 单轴:仅支持一个方向的平移操作(水平或垂直)。
- 围栏 - 支持所有方向的平移。 但是,用户超过特定方向的距离阈值后,平移限制在该轴范围内。
- 任意 - 支持所有方向的平移。
平移 UI
平移的交互体验对于输入设备来说是唯一的,同时仍然提供类似的功能。
根据检测到的输入设备,有两种平移显示模式:
- 触摸用的平移指示器。
- 其他输入设备的滚动条,包括鼠标、触摸板、键盘和触笔。
注意 仅当触摸接触位于可平移区域中时,平移指示器才可见。 同样,仅当鼠标光标、笔/触笔光标或键盘焦点位于可滚动区域中时,滚动条才可见。
平移指示器 平移指示器类似于滚动条中的滚动框。 它们指示所显示内容与全部可平移区域的比例以及所显示内容在可平移区域中的相对位置。
下图显示了两个不同长度的可平移区域及其平移指示器。
平移行为对齐点:使用轻扫手势进行平移时,抬起触摸接触点会在交互中引入惯性行为。 使用惯性时,内容会继续平移,直到达到某些距离阈值,而无需用户直接输入。 使用吸附点修改此类惯性行为。
吸附点可以在你的应用内容中指定逻辑停止。 从认知的角度看,在较大的可平移区域中,吸附点为用户充当分页机制,并尽量减少因过度滑动或轻扫而带来的疲劳。 借助它们,你可以处理不精确的用户输入,并确保在视区中显示特定的内容或关键信息子集。
吸附点有两种类型:
- 邻近 - 抬起接触之后,如果延时停止在吸附点的距离阈值之内,则选择该吸附点。 平移仍然可以在邻近吸附点之间停止。
- 强制 - 所选择的吸附点紧跟抬起接触之前划过的最后一个吸附点之前或之后(取决于手势的方向和速度)。 平移必须停止于强制吸附点上。
对于能够模拟分页内容或具有可动态重组以适合视口或显示的项逻辑组的应用程序(如 Web 浏览器和相册),平移吸附点非常有用。
以下图例显示了如何平移到某个点并释放会使内容自动平移到逻辑位置。
轻扫以平移。
移开触摸接触。
可平移区域在吸附点停止,不是在抬起触摸接触的位置停止。
Rails 内容可以比显示设备的尺寸和分辨率更宽、更高。 因此,通常需要二维平移(水平和垂直)。 在此类情况下,围栏可以通过强调沿运动轴(垂直或水平)平移来改善用户体验。
下图演示了铁路的概念。
链接嵌入内容或嵌套内容
当用户在另一个可缩放或可滚动元素内嵌套的元素上达到缩放或滚动限制后,可以指定该父元素是否应继续在其子元素中开始缩放或滚动作。 这称为缩放或滚动链接。
链接用于在包含一个或多个单轴的单轴内容区域或自由平移区域(当触摸点位于这些子区域中的一个子区域内时)中进行平移。 当在特定方向达到子区域的平移边界时,则父区域中会沿同一方向开始平移。
当一个可平移区域嵌套在另一个可平移区域之内时,请务必在容器和嵌入内容之间指定足够的空间。 在下图中,一个可平移区域放置在另一个可平移区域之内,并且平移方向彼此垂直。 每个区域中必须有足够的空间才能供用户进行平移。
如果没有足够的空间,如下图所示,嵌入的可平移区域可能会干扰容器中的平移,并导致一个或多个可平移区域出现意外平移。
本指南还适用于支持单个图像或地图内不受约束平移的应用,同时支持相册中的单轴平移(到上一张或下一张图像)或详细信息区域等应用。 在提供与任意多边形平移图像或地图对应的详细信息或选项区域的应用中,我们建议页面布局以详细信息和选项区域开头,因为图像或地图的不受约束的平移区域可能会干扰平移到详细信息区域。
相关文章
示例
- 基本输入示例
- 低延迟输入示例
- 用户交互模式示例
- 焦点视觉效果示例
- Windows 应用 SDK GestureRecognizer 示例
- WinUI Gallery ScrollViewer 示例
- WinUI Gallery ScrollView 示例
- Win32 触摸命中测试示例
存档示例