预测性返回设计

预测性返回是手势导航操作的结果,即用户在完全完成手势之前滑回手势以预览返回手势的目的地。这可让用户决定是继续(换言之,是“提交”返回手势)还是留在当前视图中。

预测性返回可在使用手势导航时提供更顺畅、更直观的导航体验。它利用内置动画告知用户其将在何处执行操作,以减少意外结果。

如果您的应用设计需要为自定义过渡和重要时刻动画提供返回导航,请参考本页中的设计指南。对于大多数应用,您无需实现自定义返回导航,因为内置的预测性返回动画会向用户显示目的地。

支持预测性返回

无论是使用默认还是自定义返回导航,都支持预测性返回。如果您使用的是默认返回导航,则可以轻松选择启用该功能。详细了解如何支持预测性返回

选择启用后,您的应用已内置返回主屏幕、跨 activity 和跨任务等动画。

您还可以将 Material 组件依赖项升级到 1.10.0-alpha02 或更高版本的 MDC Android,以接收以下 Material 组件动画:

手势导航设计

确保您的应用支持全屏

为帮助您的用户,预测性返回导航会遵循无边框功能中定义的手势边衬区。请避免在这些手势区域下方添加触摸手势或拖动目标。

图 1:系统手势边衬区。请避免将触摸目标完全放置在这些区域下方

全屏 surface

如果您的应用针对全屏 surface 创建自定义应用内转换,请使用此设计指南。

当用户在全屏 Surface 上做出返回手势时,该 Surface 在返回预览期间将与屏幕的边缘完全分离,用户可以直接操作它。不过,设计不应在视觉上向用户暗示完成返回手势会沿着返回手势的方向关闭项目。

例如,您可以在将详情屏幕关闭为垂直列表时,使用全屏 surface 过渡,以视觉上提示用户他们正在撤消上一项操作。在视频 1 中,日历活动重新显示为日视图。为了提高触感,该设计添加了一个细微的过冲,以吸收手势过程中产生的一些弹簧张力。

视频 1.添加细微过冲以吸收手势过程中累积的弹簧张力

返回预览

视频 2.返回预览示例

向用户展示预测性动画时,应用维护的预提交状态会测量用户执行了无边框返回手势,但未因松开手指而做出承诺的情况。您需要提供适用于此预提交状态的参数。

显示的移动量取决于用户可以离手势开始位置的最大移动距离。

运动规范

全屏 surface 会直接受手势开始时的 x 轴偏移和 y 轴偏移。本部分介绍了用于约束屏幕反馈机制的规范和值。

下图显示了 Surface 动画的推荐动作规范。

图 2:用于从左侧边缘滑动的 Surface 偏移、缩放和外边距参数”

1 外边距:两侧宽度的 5%(与 3 中所述的表面积相关)

2 计算的偏移(如果将窗口缩放到中心)。 计算所需的 8dp 外边距:((屏幕宽度 / 20)- 8)dp

3 Surface 会缩放至 90% 大小,剩余 10% 用于外边距(请参阅 1

4 与屏幕边缘留出 8dp 的间隙

我们建议保留列出的参数以保持一致的体验,但您可以更改规范以创建自定义动画。

在上图中,屏幕宽度为 1280,x 轴偏移为 56 dp。计算公式如下:

((1280/20)-8)= 56 dp x 偏移

图 3:用于从左侧边缘滑动的 Y 轴偏移和缩放参数。全屏 surface 会显示返回预览画面。

1 边缘和设备外边距之间可用于 y 偏移

2 如果 Surface 偏离屏幕,请将 Surface 缩小不超过 50%。

2 Surface 开始垂直居中,y 轴偏移的定义如下:

  • 限制 y 偏移,使表面永远不会超出 8 dp 的屏幕外边距
  • 为防止 Surface 突然停止,请使用减速插值器并映射到 y 偏移限制

3 当 Surface 足够短时,保留 8 dp 的外边距

对于自定义动画,您必须定义以下所有参数。

参数

语境

X 移

((屏幕宽度 / 20)- 8)dp

最大偏移,保留 8dp 外边距

Y 移

((可用屏幕高度 / 20)-8)dp

最大偏移,保留 8dp 外边距

缩放

90%

窗口大小的最小缩放

使用预测性返回进度 API 实现自定义动画的开发者会使用这些参数。

行动起来

视频 3.“快速提交”的示例

当用户手势越过提交点并释放时,系统会显示一个动画来确认操作已完成。

当用户快速执行手势时,这些手势通常被解释为快速滑动。这种交互可以对屏幕上的元素应用高速操作,因此在返回预览的上下文中,系统会先为 Surface 呈现动画效果,使其接近其最大预览状态,然后再运行提交动画,从而吸收该速度。

快速滑动的强度决定了在运行提交动画之前显示多少预览动画。所显示的动画类型取决于关闭的内容,如视频 2 中所示。

取消操作

视频 4.取消操作的示例

视频 4 举例说明了用户在阈值之前松开手指后会发生的情况,同时播放动画来确认该操作已被取消。对于全屏 surface,在手势开始之前,窗口会快速移动并缩小到原始的无边框状态。