模式 导航过渡

导航过渡

导航过渡是应用内不同状态之间的移动,例如从高层级视图切换到详细视图。

大多数(但不是所有)过渡在本质上是层级性的。这些时刻应当恰当地反映用户在应用各个状态中的路径。

层级与海拔高度

当元素的海拔高度抬升并展开时,表示焦点从父级元素转移到子级元素。

同级过渡发生在同一层级的元素之间,海拔高度不会发生变化。

Material Design 中应用状态间的导航过渡

父级到子级 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

探索应用更深层级的界面,是一段从父级界面开始的层级旅程。用户可以从父级界面进入多个可能的子界面。

在 Material Design 中,海拔高度的变化表示焦点从父级元素转移到子级元素。

海拔高度与扩展

用户触摸的表面应从起点抬升并展开到位。这种扩展和运动遵循 Material 动效曲线,以自然的方式强调从父级离开、向目标(子元素)移动。

父级到子级的过渡动画

父级到子级的过渡动画

同级到同级 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

同级过渡发生在处于同一层级的元素之间,海拔高度不会变化。

静态海拔高度

例如,当用户在选项卡之间导航时,不会发生海拔高度变化。每个选项卡的内容与表面都保持在同一海拔高度。新内容从右侧滑入,同时同级内容向左移出屏幕。

同级过渡

同级过渡动画