预测性返回设计

预测性返回是手势导航操作的结果,其中用户已向后滑动以预览其返回手势的目的地,然后才完全完成它。这让用户可以决定是继续——换句话说,是“提交”返回手势——还是停留在当前视图中。

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

如果您的应用设计要求为自定义过渡和关键时刻的动画提供返回导航,请遵循此页面的设计指南。

预测性返回支持

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

选择启用后,您的应用将拥有内置动画,例如返回主屏幕、跨活动和跨任务。

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

确保您的应用支持边缘到边缘

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

图 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 边距:两侧宽度(与 3 中描述的表面区域相关)的 5%

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 边距

缩放

90%

窗口大小的最小缩放比例

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

手势进度插值

线性进度值可以从用户的手势中得出,但不应直接用于预览动画。相反,反馈应该根据有助于用户在向后操作期间的因素进行定制。使用 STANDARD_DECELERATE 标记PathInterpolator(0f, 0f, 0f, 1f) 为进度值提供输入,以便手势在开始时更加明显。这种反馈增强了手势开始时的运动检测,并采用减速来以视觉上令人愉悦和清晰的方式控制反馈。

提交操作

视频 5。提交滑动示例

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

当用户快速执行手势时,通常将其解释为“甩动”。这种交互会对屏幕元素施加高速,因此在返回预览的上下文中,系统通过暂时将表面动画到其最大预览状态,然后运行提交动画来吸收该速度。

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

取消操作

视频 6。取消操作示例

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