移动

在驾驶情境中应谨慎呈现运动,以便表达相关概念、品牌信息和元素之间的关系。它应该仅用于帮助驾驶员分心,而不是干扰他们的注意力。

资讯一览

  • 避免用不必要的动作分散注意力
  • 使用动画来增强用户的理解和熟练程度
  • 让您的动作语言足够灵活,适合所有相关硬件
  • 根据您的情况使用建议的动作模式

运动模式

为了在所有应用中提供一致的用户体验,特定的交互模式适用于以下互动:

  • 在应用之间切换
  • 在对等视图之间切换
  • 扩展现有操作
  • 最小化和展开操作
  • 中断操作

这些运动模式基于标准加/减速选项(如 Material Design 中所述),通过快速加速过渡、然后逐渐放慢速度,使焦点侧重于过渡的结束。


在应用之间切换

在应用之间切换时,请使用淡入淡出过渡,这会使一个元素淡入视图,而另一个元素淡出。这种过渡描绘的是从当前应用退出,同时快速进入另一个应用。

在应用之间快速切换
交叉淡入淡出运动让用户在应用之间快速切换

示例

应用切换示例
快速淡入淡出会将用户从导航应用转到媒体应用,然后再回到应用

在对等视图之间切换

在应用中同一层级的视图之间切换(也称为“对等视图”),例如应用栏中的标签页或播放列表中的歌曲时,请使用共享轴过渡。这种横向、横向的横向移动反映了在应用内保持同一水平的状态。

对等转换示例
快速淡入淡出会将用户从导航应用转到媒体应用,然后再回到应用

示例

在媒体应用中切换歌曲时,共享轴运动模式强调了两首歌曲位于同一播放列表中

扩展现有操作

如果用户正在查看或执行操作,然后执行次要的相关操作,则应通过垂直(向上或向下)动作引入该次要操作。此次要操作会显示在主要操作前面且有纱罩背景的全屏叠加层上。通过纱罩呈现主要操作可以强调用户仍在执行操作。

然后,次要操作会沿起始动作的反向方向关闭。完成此反向运动所需的时间应该比原始动作短,因为该操作是完成的。

次要操作叠加层
在这里,次要操作会从叠加层上的主要操作呈现,而主要操作在纱罩后面部分可见

示例

Android Auto 操作叠加层示例
选择媒体控件栏上的溢出按钮后,该控件会在具有纱罩背景的叠加层上垂直展开

最小化和展开操作

进行中的操作可最小化为较小的格式。这种较小的格式可让用户在正在进行的操作在后台运行时同时处理多项任务。

  • 展开:当用户点按最小化的操作时,该操作会采用淡入淡出过渡方式,展开至全屏并填满整个屏幕。

  • 最小化:将正在进行的操作最小化时,使用此动作的反转方向。由于用户要离开,因此最小化动作应比缩短动作所需的时间少。

展开最小化屏幕
最小化操作会在淡入在当前操作之上时展开至全屏

示例

Android Auto 悬浮操作按钮示例
播放悬浮操作按钮(悬浮操作按钮)会展开为完整的播放视图,然后通过向下箭头收起

中断操作

如果某项可选操作需要突然出现在进行中的操作前面,该操作应从屏幕边缘(向上或向下)滑出,并带有部分纱罩。或者,它应该使用完整的纱罩淡出到屏幕中间。从离要显示新操作的位置最近的位置开始移动。

简短操作示例
如果干扰性操作应该出现在屏幕顶部附近,请使用局部纱罩将其从顶部滑入

示例

通知示例
在这个 Android Auto 示例中,有关即将到来的转弯的通知从屏幕顶部向下滑出,部分屏幕显示,使持续显示的媒体内容保持可见