模式 导航转换

导航转换

导航转换是在应用的不同状态间移动,例如从高级视图进入详细视图。

大多数(但不是全部)转换都在自然的层次之间。这些时刻应该通过应用的不同状态来反应出用户的前进方向。

层次结构和海拔高度

当元素升高并展开,海拔高度的改变指示出了焦点从父级移动到了子级

同级转换出现在处于同一层次结构的元素之间,没有海拔高度的变化。

Material Design 中的导航转换在不同状态间移动

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

探索应用更深层的视图,是从父屏幕开始不断深入探索的层级之途。在那里,用户可以探索多个可能的子屏幕,也就是父屏幕的子屏幕。

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

海拔高度和扩展

用户触摸的表面应该从原来的地方升高并展开。这种扩展和动画使用了材料运动曲线,在自然的运动中强调了离开了父级,向目标(子元素)移动。

父级到子级的转换动画

父级到子级的转换动画

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

同级转换出现在处于同一层次结构的元素之间,没有海拔高度的变化。

固定海拔高度

例如,当用户通过选项卡来导航时,是不会发生海拔高度变化的。每个选项标签的内容都和表面在同一海拔高度。新内容从右侧滑入,同时同级的内容向左移动到屏幕外。

同级转换

同级转换的动画