预测返回设计

预测返回是手势导航操作的结果,在该操作中,用户已向后滑动以预览其返回手势的目标位置,然后再完全完成该操作。这允许用户决定是否继续(换句话说,是否“提交”返回手势)或停留在当前视图中。

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

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

支持预测返回

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

选择加入后,您的应用将具有内置动画,例如返回主页、跨活动和跨任务。

您还可以将 Material 组件依赖项升级到 MDC Android 的 1.10.0-alpha02 或更高版本,以接收以下 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 边距:每侧宽度 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 边距

缩放

90%

窗口尺寸的最小缩放比例

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

插值手势进度

可以从用户的手势中得出线性进度值,但它不应直接用于预览动画。相反,反馈应针对在向后操作期间帮助用户的因素进行调整。使用STANDARD_DECELERATE 令牌PathInterpolator(0f, 0f, 0f, 1f)为进度值提供反馈,以便手势在开始时更加明显。此反馈增强了手势开始时的运动检测,并使用减速来以视觉上令人愉悦且清晰的方式控制反馈。

提交操作

视频 5. 甩动手势提交的示例

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

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

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

取消操作

视频 6. 取消操作的示例

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