使用英语阅读

通过


导航导轨

大屏幕Android设备具有比手机外形规格更多的导航元素空间。 材料设计团队最近添加了 导航铁路 组件,用于较大的屏幕和可折叠设备。

此组件提供了一种在较大屏幕上导航和支持三种不同对齐方式(顶部、中心和底部)的符合人体工学的方法。 导航铁路应该不超过八个选项。

Navigation Rail with three variants aligned – top, center, and bottom

下面显示了使用 Navigation Rail 组件的示例应用程序在 Surface Duo 上运行。 在双纵向方向中,导航栏坚持到屏幕左侧,当屏幕处于打开状态时,可以轻松访问导航元素。 此行为也适用于平板电脑等大屏幕设备。

Sample app spanned across two screens, using Navigation Rail on the left screen with five icon elements. Photos of plants are shown on the left screen and a single plant is selected on the right screen, with descriptive text also showing

由于可折叠设备通常还提供在完全折叠或关闭时 (显示较小的屏幕区域的功能,因此应用) 应用应切换到适合屏幕大小的导航选项,例如底部导航:

Example bottom navigation bar with five icon elements

下面显示了一个包含底部导航的完整示例:

Sample app on a single screen showing the bottom navigation bar being used instead of Navigation Rail

具有底部导航的现有Android手机应用应考虑在适应较大的屏幕和可折叠屏幕时添加 Navigation Rail。

何时使用

对于主要导航选项,在可折叠和大屏幕显示器上使用 Navigation Rail,遵循以下准则:

  • 需要在应用中任意位置访问的顶级目标
  • 应用中的三到八个主要目标

导航铁路不应用于:

  • 较小的屏幕大小 (考虑使用底部导航,而不是)
  • 单个任务活动,例如查看列表或线程
  • 辅助导航

示例Android应用

可以使用 Kotlin 和 XML 布局 以及 Jetpack Compose 的 Navigation Rail 示例应用:

Jetpack Compose example of Navigation Rail sample app

设计组件

有关导航铁路布局的视觉指导,请参阅 设计工具包

Design Kit screenshot showing six different Navigation Rail alignments