预测性返回设计

预测性返回是手势导航操作的结果,用户在完全完成返回手势之前,通过滑动操作预览其返回的目标。这让用户能够决定是继续操作(即“提交”返回手势),还是保持在当前视图中。

在使用手势导航时,预测性返回提供了更流畅、更直观的导航体验。它利用内置动画来告知用户操作将带他们去往何处,从而减少意外结果。

如果您的应用设计需要在关键时刻为自定义转场和动画提供返回导航,请遵循本页面上的设计指南。

对预测性返回的支持

无论是使用默认返回导航还是自定义返回导航,都可以支持预测性返回。如果您使用的是默认返回导航,可以轻松选择启用此功能。阅读有关支持预测性返回的更多信息。

在您选择启用后,您的应用将内置诸如返回主屏幕、跨 Activity 和跨任务等动画。

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

确保您的应用支持全屏显示 (Edge-to-edge)

为方便用户,预测性返回导航会遵循全屏显示功能中定义的手势内边距。请避免在这些手势区域下方添加触摸手势或拖拽目标。

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

全屏表面

如果您的应用为全屏表面创建了自定义应用内转场,请遵循此设计指南。

视频 1. 全屏表面预测性返回示例。


返回预览

当用户在全屏表面执行返回手势时,随着手势的进行,内部区域应缩小。一旦用户超过提交阈值,内容应通过淡入淡出效果切换到下一个状态,从而告知用户其操作将带他们去往何处。

插值

所使用的插值器可确保屏幕快速退出。参数为 (.1, .1, 0, 1),以匹配 SystemUI 动画所使用的插值器。

取消操作

如果用户在未提交状态下释放手势,内容会迅速返回并缩放回手势开始前的原始状态和大小,从而撤销任何状态更改。

视频 2. 非提交状态和取消操作示例。

运动规格

参数

初始值

目标值

上下文

退出缩放

100%

90%

进入缩放

110%

100%

退出淡出

100%

0%

在 35% 的进度阈值处淡化至目标值

进入淡入

0%

100%

进入淡入从 35% 的进度阈值开始

视频 3. 添加细微的过冲效果,以吸收手势期间积聚的弹簧张力

共享元素转场

如果您的应用为共享元素转场创建了自定义应用内转场,请使用以下设计指南。

当用户在共享元素转场上执行返回手势时,表面在返回预览期间会完全脱离屏幕边缘,并且用户可以直接对其进行操作。但是,设计不应在视觉上向用户暗示完成返回手势会将项目沿返回手势的方向关闭。

例如,在将详情屏幕关闭回列表时,您可以使用共享元素转场,以在视觉上向用户暗示他们正在撤销之前的操作。在视频 3 中,日历事件被关闭回日视图。为了增强触感,设计添加了细微的过冲效果,以吸收手势期间积聚的部分弹簧张力。


返回预览

向用户呈现预测性动画时,应用维护的预提交状态会测量用户何时执行了全屏返回手势但尚未通过松开手来提交。您需要提供适用于此预提交状态的参数。

显示的移动量基于用户从手势开始位置能够移动的最远距离。

视频 4. 返回预览示例

运动规格

共享元素转场直接受到手势开始时的 x 和 y 位移的影响。本节介绍了控制屏幕反馈机制的规范和值。

下图显示了表面动画的推荐运动规格。

图 2:从左边缘滑动时的表面位移、缩放和边距参数"

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

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

3 表面缩放至 90% 大小,留出 10% 用于边距(见 1

4 与屏幕边缘保持 8 dp 的间隙

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

在上图中,屏幕宽度为 1280,使 x 位移为 56 dp。其公式为

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

图 3:从左边缘滑动时的 Y 位移和缩放参数。全屏表面显示返回预览。

1 边缘与设备边距之间可用于 y 位移的空间

2 如果表面移出屏幕,则将表面缩小不超过 50%。

2 表面从垂直居中开始,y 位移定义如下

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

3 一旦表面足够短,保留 8 dp 的边距

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

参数

上下文

X 位移

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

最大位移,留出 8dp 边距

Y 位移

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

最大位移,留出 8dp 边距

缩放 (Scale)

90%

窗口大小的最小缩放比例

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

插值手势进度

可以从用户的手势导出线性进度值,但不应直接将其用于预览动画。相反,反馈应针对有助于用户进行向后操作的内容进行定制。使用 STANDARD_DECELERATE 令牌PathInterpolator(0f, 0f, 0f, 1f) 输入进度值,以便手势在开始时更加明显。此反馈增强了手势开始时的移动检测,并采用减速来以美观且清晰的方式控制反馈。

提交操作

视频 5. 甩动 (Fling) 提交示例

当用户滑动超过提交点并释放时,会显示一个动画,确认操作已完成。

当用户快速执行手势时,这些通常被解释为甩动。这种交互可以对屏幕元素施加高速度,因此在返回预览的上下文中,系统通过在运行提交动画之前将表面短暂地向其最大预览状态进行动画处理,来吸收该速度。

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

取消操作

视频 6. 取消操作示例

视频 6 展示了当用户在达到阈值之前释放时会发生什么,显示了一个确认操作已取消的动画。对于共享元素转场,窗口会迅速移动并缩放回手势开始前的原始全屏状态。