Bottom navigation - 底部导航栏

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. - 底部导航栏使您可以轻松地在顶级视图之间切换。

Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.

Bottom navigation is primarily for use on mobile. To achieve a similar effect for desktop, use side navigation.

【翻译】
轻触底部导航图标可直接进入相关联的视图或刷新当前活动的视图。
底部导航主要用于移动设备。要实现类似效果的桌面，使用侧导航。

Usage - 用法
Three to five top-level destinations
Destinations requiring direct access

【翻译】
三到五个顶级目的地
需要直接访问的目的地

Color - 颜色
Tint the active icon with the app’s primary color. Use black or white if the bottom navigation bar is already colored.

【翻译】
使用应用程序的主颜色来调整活动图标。如果底部导航栏已经着色，请使用黑色或白色。

Specs - 规格
Width of each action: The width of the view divided by the number of actions (with a max of 168dp and a minimum of 80dp)
Height: 56dp
Icon: 24 x 24dp

【翻译】
每个动作的宽度：视图的宽度除以动作数（最大为168dp，最小为80dp）
高：56dp
图标：24 x 24dp

Usage - 用法

Bottom navigation provides quick navigation between top-level views of an app. It is primarily designed for use on mobile.

Larger displays, like desktop, may achieve a similar effect by using side navigation. For instance, the compact “rail” treatment displays navigational icons by default.

【翻译】
底部导航提供应用程序的顶级视图之间的快速导航。它主要设计用于移动。

较大的显示器，例如桌面，可以通过使用侧面导航来实现类似的效果。例如，紧凑的“轨道”处理默认显示导航图标。

The bottom navigation bar on mobile

【翻译】
移动设备底部的导航栏

Left navigation on a larger display, such as tablet or desktop

【翻译】
在较大的显示器（例如平板电脑或桌面）的左侧导航

When to use - 何时使用
Bottom navigation should be used for:
Three to five top-level destinations of similar importance (alternative: a persistent navigation drawer accessible from anywhere in the app)

Destinations requiring direct access from anywhere in the app (alternative: tabs for only one or two destinations)

【翻译】
底部导航应用于：
三到五个类似重要性的顶级目的地（替代方法：从应用程序的任何地方访问的永久性导航抽屉）
需要在应用中的任何位置直接访问的目标（替代方法：仅一个或两个目的地的标签）

正确的示范

Do.
The bottom navigation bar exposes the three to five top-level destinations of an app.

【翻译】
正确的示范
底部导航栏显示应用程序的三到五个顶级目标。

错误的示范

Don't.
If there are fewer than three destinations, consider using tabs instead.

【翻译】
错误的示范
如果目标少于三个，请考虑使用标签。

If your top-level navigation has more than six destinations, provide access to destinations not covered in bottom navigation through alternative locations, such as a navigation drawer.

【翻译】
如果您的顶级导航具有六个以上的目的地，请通过其他位置（例如导航栏）访问底部导航中未涵盖的目的地。

争取的示范

Do.
Views are fixed in a bottom navigation bar.

【翻译】
正确的示范
视图固定在底部导航栏中。

错误的示范

Don't.
Avoid scrollable content in the bottom navigation bar.

【翻译】
错误的示范
避免在底部导航栏中滚动内容。

正确的示范

Do.
Use up to five top-level destinations in a bottom navigation bar.

【翻译】
正确的示范
在底部导航栏中最多使用五个顶级目标。

Don't.
Avoid using more than five destinations in bottom navigation as tap targets will be situated too close to one another.

【翻译】
避免在底部导航中使用超过五个目的地，因为点击目标将彼此太靠近。

Bottom navigation and tabs - 底部导航和标签

Be cautious when combining bottom navigation with tabs, as the combination may cause confusion when navigating an app. For example, tapping across both tabs and bottom navigation could display a mixture of different transitions across the same content.

【翻译】
组合底部导航与标签时，请谨慎，因为在导航应用程序时，组合可能会导致混乱。 例如，点击两个标签和底部导航可以在同一内容中显示不同转换的混合。

Style - 样式

Icons and text - 图标和文本
Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.

【翻译】
由于底部导航操作显示为图标，因此它们应用于可以与图标进行适当通信的内容。

Style each action according to the following conditions:
When the view is in focus, display that view’s icon and text label
When there are only three actions, display both icons and text labels at all times
If there are four or five actions, display inactive views as icons only

【翻译】
根据以下条件对每个操作进行风格：
当视图焦点对准时，显示该视图的图标和文本标签
当只有三个操作时，始终显示图标和文本标签
如果有四个或五个操作，则仅将非活动视图显示为图标

Color - 颜色

Tint the current bottom navigation action (including the icon and any text label present) with the app’s primary color.

【翻译】
使用应用程序的主颜色来调整当前底部导航操作（包括图标和任何文本标签）。

正确的示范

Do.
Use the app’s primary color to indicate the view in focus.

【翻译】
正确的示范
使用应用程式的主要颜色指示焦点。

错误的示范

Don't.
Avoid using different colored icons and text labels.

【翻译】
错误的示范
避免使用不同的彩色图标和文本标签。

If the bottom navigation bar is colored, make the icon and text label of the current action black or white.

【翻译】
如果底部导航栏是彩色的，请使当前操作的图标和文本标签为黑色或白色。

正确的示范

Do.
Use black or white iconography if the bottom navigation bar is colored.

【翻译】
正确的示范
如果底部导航栏有颜色，请使用黑色或白色图标。

错误的示范

Don't.
Avoid pairing colored icons with a colored bottom navigation bar.

【翻译】
错误的示范
避免将彩色图标与彩色底部导航栏配对。

**Text Labels - 文本标签 **

Text labels provide short, meaningfully definitions to bottom navigation icons. Avoid long text labels as these labels do not truncate or wrap.

【翻译】
文本标签为底部导航图标提供简短，有意义的定义。避免使用长文本标签，因为这些标签不会截断或换行。

正确的示范

Do.
Use short labels

【翻译】
正确的示范
使用短标签

错误的示范

Don't.
Avoid labels with wrapping text

【翻译】
错误的示范
避免使用包装文字的标签

错误的示范

Don't.
Avoid truncating text labels as doing so may prevent comprehension.

【翻译】
错误的示范
避免截断文字标签，因为这样做可能会妨碍理解。

错误的示范

Don't.
Avoid shrinking text labels to fit on a single line.

【翻译】
错误的示范
避免缩小文本标签以适合单个行。

Behavior - 行为

Tapping on a bottom navigation icon takes you directly to the associated view, or refreshes the currently active view.

Each bottom navigation icon must lead to a destination, and may not open menus or other pop-ups.

On Android, the Back button does not navigate between bottom navigation bar views.

【翻译】
点击底部导航图标可直接转到相关联的视图，或刷新当前活动的视图。
每个底部导航图标必须连接到目的地，并且可能无法打开菜单或其他弹出窗口。
在Android上，“后退”按钮不会在底部导航栏视图之间导航。

Tapping on the active action in the bottom navigation bar will navigate the user to the top of the view.

【翻译】
点击底部导航栏中的活动操作将导航用户到视图的顶部。

Navigation through the bottom navigation bar should reset the task state.

【翻译】
通过底部导航栏导航应该重置任务状态。朕在这个地方有所质疑

The bottom navigation bar can appear and disappear dynamically upon scrolling:

Scrolling downward hides the bottom navigation bar
Scrolling upward reveals it

【翻译】
底部导航栏可以在滚动时动态显示和消失：
向下滚动隐藏底部导航栏
向上滚动显示它

The bottom navigation bar can disappear and reappear to allow immersive content views.

【翻译】
底部导航栏可以消失并重新显示，以允许沉浸式内容视图。

The bottom navigation bar remains in view when navigating through the app’s hierarchy.

【翻译】
在浏览应用程序层次结构时，底部导航栏仍保持可见。

Using swipe gestures on the content area does not navigate between views.

【翻译】
在内容区域上使用滑动手势不会在视图之间导航。

正确的示范

Do.
Transition between active and inactive views using a cross-fade animation.

【翻译】
正确的示范
使用交叉淡入淡出动画在活动和非活动视图之间切换。

错误的示范

Don't.
Avoid using lateral motion to transition between views.

【翻译】
错误的示范
避免使用横向运动在视图之间转换。

Specs - 规格

Fixed bottom navigation bar - 固定底部导航栏

To calculate the width of each bottom navigation action, divide the width of the view by the number of actions:

Width of action = Width of entire view / Number of actions

For example, if a view is 360dp wide, and there are three actions, each action should be 120dp wide.

Desktop and larger views
Alternatively, make all bottom navigation actions the width of the largest action.

【翻译】
要计算每个底部导航操作的宽度，请将视图的宽度除以动作数：
动作宽度=整个视图的宽度/动作数
例如，如果视图的宽度为360dp，并且有三个操作，则每个操作的宽度应为120dp。
桌面和更大的视图
或者，使所有底部导航操作的最大动作的宽度。

Fixed bottom navigation bar on mobile

【翻译】
在手机上固定底部导航栏

Fixed bottom navigation bar on mobile

【翻译】
在手机上固定底部导航栏

Width minimum and maximum (these values include padding):
Maximum: 168dp
Minimum: 80dp

Height:56dp
Icon: 24 x 24dp
Content alignment: Text and icon are centered horizontally within the view.
Padding:
6dp above icon (active view), 8dp above icon (inactive view)
10dp under text
12dp left and right of text

Text label:
Roboto Regular 14sp (active view)
Roboto Regular 12sp (inactive view)

【翻译】
宽度最小值和最大值（这些值包括填充）：
最大：168dp
最低：80dp
高度：
56dp
图标：
24 x 24dp
内容对齐：
文本和图标在视图中水平居中。
填充：
6dp以上图标（活动视图），8dp以上图标（不活动视图）
10dp下的文本
12dp左右文本
文字标签：
Roboto Regular 14sp（主动视图）
Roboto Regular 12sp（非活动视图）

80dp min width
12dp padding

【翻译】
80dp最小宽度
12dp填充

168dp max width
12dp padding

【翻译】
168dp最大宽度
12dp填充

56dp height
12dp left and right of text
10dp under text

【翻译】
56dp高度

12dp左右文本
10dp下的文本

Example of bottom navigation bar

【翻译】
底部导航栏的示例

Fixed bottom navigation bar on landscape mobile
56dp height
24 x 24dp icon
6dp above icon (active view)
8dp above icon (inactive view)
10dp under text

【翻译】
固定底部导航栏景观移动
56dp高度
24 x 24dp图标
6dp以上图标（活动视图）
8dp以上图标（无效视图）
10dp下的文本

Fixed bottom navigation bar on tablet
56dp height
24 x 24dp icon6dp above icon (active view)
8dp above icon (inactive view)
10dp under text

【翻译】
在平板电脑上固定底部导航栏
56dp高度
24 x 24dp图标
6dp以上图标（活动视图）
8dp以上图标（无效视图）
10dp下的文本

Shifting bottom navigation bar - 移动底部导航栏
Width minimum and maximum (this includes padding):
Active view
Maximum: 168dp
Minimum: 96dp

Inactive view
Maximum: 96dp
Minimum: 56dp

Height:56dp
Icon: 24 x 24dp
Content alignment: Text and icon are centered horizontally within view.
Padding:
6dp above icon (active view), 16dp above and below icon (inactive view)
10dp under text

Text label:Roboto Regular 14sp (active view)

【翻译】
宽度最小值和最大值（包括填充）：
活动视图
最大：168dp
最低：96dp
非活动视图
最大：96dp
最低：56dp
高度：
56dp
图标：
24 x 24dp
内容对齐：
文本和图标在视图中水平居中。
填充：
6dp上方图标（活动视图），16dp上方和下方图标（不活动视图）
10dp下的文本
文字标签：
Roboto Regular 14sp（主动视图）

Shifting bottom navigation bar on mobile
56dp height
24 x 24dp icon
6dp above icon (active view)
10dp under text
6dp below icon
16dp below icon with no title

【翻译】
在移动设备上移动底部导航栏
56dp高度
24 x 24dp图标
6dp以上图标（活动视图）
10dp下的文本
6dp下面的图标
16dp下面没有标题的图标

Shifting bottom navigation bar on mobile

【翻译】
在移动设备上移动底部导航栏

Active view: 96dp min width

【翻译】
活动视图：96dp最小宽度

Active view: 168dp max width

【翻译】
活动视图：168dp最大宽度

Inactive view: 56dp min width

【翻译】
非活动视图：56dp最小宽度

Inactive view: 96dp max width

【翻译】
非活动视图：最大宽度为96dp

Text labels may use the maximum width on the active view.

【翻译】
文字标签可以使用活动视图上的最大宽度。

Text labels may use the maximum width on the active view.

【翻译】
文字标签可以使用活动视图上的最大宽度。

Shifting bottom navigation bar on landscape mobile
56dp height
24 x 24dp icon
6dp above icon (active view)
10dp under text
6dp below icon
16dp below icon with no title

【翻译】
移动横向移动的底部导航栏
56dp高度
24 x 24dp图标
6dp以上图标（活动视图）
10dp下的文本
6dp下面的图标
16dp下面没有标题的图标

Shifting bottom navigation bar on tablet
56dp height
24 x 24dp icon
6dp above icon (active view)
10dp under text
6dp below icon
16dp below icon with no title

【翻译】
在平板电脑上移动底部导航栏
56dp高度
24 x 24dp图标
6dp以上图标（活动视图）
10dp下的文本
6dp下面的图标
16dp下面没有标题的图标

Elevation - 高度

Because snackbars have a lower (6dp) elevation, they appear behind the bottom navigation bar (8dp elevation).

Bottom sheets, navigation drawers, and keyboards appear in front of the bottom navigation bar, temporarily covering it.

【翻译】
因为snackbars有一个较低的（6dp）高度，它们出现在底部导航栏后面（8dp标高）。
底部工作表，导航抽屉和键盘显示在底部导航栏的前面，暂时覆盖它。

Snackbars appear behind the bottom navigation bar.

【翻译】
Snackbars出现在底部导航栏的后面。

Bottom sheets and keyboards appear in front of the bottom nav bar, temporarily covering it.

【翻译】
底部工作表和键盘出现在底部导航栏的前面，暂时覆盖它。

Orthographic view of app structure

【翻译】
切面图