Bottom navigation - 底部導(dǎo)航欄

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. - 底部導(dǎo)航欄使您可以輕松地在頂級視圖之間切換。

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.

【翻譯】
輕觸底部導(dǎo)航圖標(biāo)可直接進(jìn)入相關(guān)聯(lián)的視圖或刷新當(dāng)前活動的視圖。
底部導(dǎo)航主要用于移動設(shè)備。要實現(xiàn)類似效果的桌面，使用側(cè)導(dǎo)航。

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.

【翻譯】
使用應(yīng)用程序的主顏色來調(diào)整活動圖標(biāo)。如果底部導(dǎo)航欄已經(jīng)著色，請使用黑色或白色。

Specs - 規(guī)格
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

【翻譯】
每個動作的寬度：視圖的寬度除以動作數(shù)（最大為168dp，最小為80dp）
高：56dp
圖標(biāo)：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.

【翻譯】
底部導(dǎo)航提供應(yīng)用程序的頂級視圖之間的快速導(dǎo)航。它主要設(shè)計用于移動。

較大的顯示器，例如桌面，可以通過使用側(cè)面導(dǎo)航來實現(xiàn)類似的效果。例如，緊湊的“軌道”處理默認(rèn)顯示導(dǎo)航圖標(biāo)。

The bottom navigation bar on mobile

【翻譯】
移動設(shè)備底部的導(dǎo)航欄

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

【翻譯】
在較大的顯示器（例如平板電腦或桌面）的左側(cè)導(dǎo)航

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)

【翻譯】
底部導(dǎo)航應(yīng)用于：
三到五個類似重要性的頂級目的地（替代方法：從應(yīng)用程序的任何地方訪問的永久性導(dǎo)航抽屜）
需要在應(yīng)用中的任何位置直接訪問的目標(biāo)（替代方法：僅一個或兩個目的地的標(biāo)簽）

正確的示范

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

【翻譯】
正確的示范
底部導(dǎo)航欄顯示應(yīng)用程序的三到五個頂級目標(biāo)。

錯誤的示范

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

【翻譯】
錯誤的示范
如果目標(biāo)少于三個，請考慮使用標(biāo)簽。

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.

【翻譯】
如果您的頂級導(dǎo)航具有六個以上的目的地，請通過其他位置（例如導(dǎo)航欄）訪問底部導(dǎo)航中未涵蓋的目的地。

爭取的示范

Do.
Views are fixed in a bottom navigation bar.

【翻譯】
正確的示范
視圖固定在底部導(dǎo)航欄中。

錯誤的示范

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

【翻譯】
錯誤的示范
避免在底部導(dǎo)航欄中滾動內(nèi)容。

正確的示范

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

【翻譯】
正確的示范
在底部導(dǎo)航欄中最多使用五個頂級目標(biāo)。

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

【翻譯】
避免在底部導(dǎo)航中使用超過五個目的地，因為點擊目標(biāo)將彼此太靠近。

Bottom navigation and tabs - 底部導(dǎo)航和標(biāo)簽

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.

【翻譯】
組合底部導(dǎo)航與標(biāo)簽時，請謹(jǐn)慎，因為在導(dǎo)航應(yīng)用程序時，組合可能會導(dǎo)致混亂。 例如，點擊兩個標(biāo)簽和底部導(dǎo)航可以在同一內(nèi)容中顯示不同轉(zhuǎn)換的混合。

Style - 樣式

Icons and text - 圖標(biāo)和文本
Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.

【翻譯】
由于底部導(dǎo)航操作顯示為圖標(biāo)，因此它們應(yīng)用于可以與圖標(biāo)進(jìn)行適當(dāng)通信的內(nèi)容。

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

【翻譯】
根據(jù)以下條件對每個操作進(jìn)行風(fēng)格：
當(dāng)視圖焦點對準(zhǔn)時，顯示該視圖的圖標(biāo)和文本標(biāo)簽
當(dāng)只有三個操作時，始終顯示圖標(biāo)和文本標(biāo)簽
如果有四個或五個操作，則僅將非活動視圖顯示為圖標(biāo)

Color - 顏色

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

【翻譯】
使用應(yīng)用程序的主顏色來調(diào)整當(dāng)前底部導(dǎo)航操作（包括圖標(biāo)和任何文本標(biāo)簽）。

正確的示范

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

【翻譯】
正確的示范
使用應(yīng)用程式的主要顏色指示焦點。

錯誤的示范

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

【翻譯】
錯誤的示范
避免使用不同的彩色圖標(biāo)和文本標(biāo)簽。

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

【翻譯】
如果底部導(dǎo)航欄是彩色的，請使當(dāng)前操作的圖標(biāo)和文本標(biāo)簽為黑色或白色。

正確的示范

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

【翻譯】
正確的示范
如果底部導(dǎo)航欄有顏色，請使用黑色或白色圖標(biāo)。

錯誤的示范

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

【翻譯】
錯誤的示范
避免將彩色圖標(biāo)與彩色底部導(dǎo)航欄配對。

**Text Labels - 文本標(biāo)簽 **

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

【翻譯】
文本標(biāo)簽為底部導(dǎo)航圖標(biāo)提供簡短，有意義的定義。避免使用長文本標(biāo)簽，因為這些標(biāo)簽不會截斷或換行。

正確的示范

Do.
Use short labels

【翻譯】
正確的示范
使用短標(biāo)簽

錯誤的示范

Don't.
Avoid labels with wrapping text

【翻譯】
錯誤的示范
避免使用包裝文字的標(biāo)簽

錯誤的示范

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

【翻譯】
錯誤的示范
避免截斷文字標(biāo)簽，因為這樣做可能會妨礙理解。

錯誤的示范

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

【翻譯】
錯誤的示范
避免縮小文本標(biāo)簽以適合單個行。

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.

【翻譯】
點擊底部導(dǎo)航圖標(biāo)可直接轉(zhuǎn)到相關(guān)聯(lián)的視圖，或刷新當(dāng)前活動的視圖。
每個底部導(dǎo)航圖標(biāo)必須連接到目的地，并且可能無法打開菜單或其他彈出窗口。
在Android上，“后退”按鈕不會在底部導(dǎo)航欄視圖之間導(dǎo)航。

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

【翻譯】
點擊底部導(dǎo)航欄中的活動操作將導(dǎo)航用戶到視圖的頂部。

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

【翻譯】
通過底部導(dǎo)航欄導(dǎo)航應(yīng)該重置任務(wù)狀態(tài)。朕在這個地方有所質(zhì)疑

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

Scrolling downward hides the bottom navigation bar
Scrolling upward reveals it

【翻譯】
底部導(dǎo)航欄可以在滾動時動態(tài)顯示和消失：
向下滾動隱藏底部導(dǎo)航欄
向上滾動顯示它

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

【翻譯】
底部導(dǎo)航欄可以消失并重新顯示，以允許沉浸式內(nèi)容視圖。

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

【翻譯】
在瀏覽應(yīng)用程序?qū)哟谓Y(jié)構(gòu)時，底部導(dǎo)航欄仍保持可見。

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

【翻譯】
在內(nèi)容區(qū)域上使用滑動手勢不會在視圖之間導(dǎo)航。

正確的示范

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

【翻譯】
正確的示范
使用交叉淡入淡出動畫在活動和非活動視圖之間切換。

錯誤的示范

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

【翻譯】
錯誤的示范
避免使用橫向運動在視圖之間轉(zhuǎn)換。

Specs - 規(guī)格

Fixed bottom navigation bar - 固定底部導(dǎo)航欄

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.

【翻譯】
要計算每個底部導(dǎo)航操作的寬度，請將視圖的寬度除以動作數(shù)：
動作寬度=整個視圖的寬度/動作數(shù)
例如，如果視圖的寬度為360dp，并且有三個操作，則每個操作的寬度應(yīng)為120dp。
桌面和更大的視圖
或者，使所有底部導(dǎo)航操作的最大動作的寬度。

Fixed bottom navigation bar on mobile

【翻譯】
在手機上固定底部導(dǎo)航欄

Fixed bottom navigation bar on mobile

【翻譯】
在手機上固定底部導(dǎo)航欄

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
圖標(biāo)：
24 x 24dp
內(nèi)容對齊：
文本和圖標(biāo)在視圖中水平居中。
填充：
6dp以上圖標(biāo)（活動視圖），8dp以上圖標(biāo)（不活動視圖）
10dp下的文本
12dp左右文本
文字標(biāo)簽：
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

【翻譯】
底部導(dǎo)航欄的示例

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

【翻譯】
固定底部導(dǎo)航欄景觀移動
56dp高度
24 x 24dp圖標(biāo)
6dp以上圖標(biāo)（活動視圖）
8dp以上圖標(biāo)（無效視圖）
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

【翻譯】
在平板電腦上固定底部導(dǎo)航欄
56dp高度
24 x 24dp圖標(biāo)
6dp以上圖標(biāo)（活動視圖）
8dp以上圖標(biāo)（無效視圖）
10dp下的文本

Shifting bottom navigation bar - 移動底部導(dǎo)航欄
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
圖標(biāo)：
24 x 24dp
內(nèi)容對齊：
文本和圖標(biāo)在視圖中水平居中。
填充：
6dp上方圖標(biāo)（活動視圖），16dp上方和下方圖標(biāo)（不活動視圖）
10dp下的文本
文字標(biāo)簽：
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

【翻譯】
在移動設(shè)備上移動底部導(dǎo)航欄
56dp高度
24 x 24dp圖標(biāo)
6dp以上圖標(biāo)（活動視圖）
10dp下的文本
6dp下面的圖標(biāo)
16dp下面沒有標(biāo)題的圖標(biāo)

Shifting bottom navigation bar on mobile

【翻譯】
在移動設(shè)備上移動底部導(dǎo)航欄

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.

【翻譯】
文字標(biāo)簽可以使用活動視圖上的最大寬度。

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

【翻譯】
文字標(biāo)簽可以使用活動視圖上的最大寬度。

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

【翻譯】
移動橫向移動的底部導(dǎo)航欄
56dp高度
24 x 24dp圖標(biāo)
6dp以上圖標(biāo)（活動視圖）
10dp下的文本
6dp下面的圖標(biāo)
16dp下面沒有標(biāo)題的圖標(biāo)

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

【翻譯】
在平板電腦上移動底部導(dǎo)航欄
56dp高度
24 x 24dp圖標(biāo)
6dp以上圖標(biāo)（活動視圖）
10dp下的文本
6dp下面的圖標(biāo)
16dp下面沒有標(biāo)題的圖標(biāo)

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）高度，它們出現(xiàn)在底部導(dǎo)航欄后面（8dp標(biāo)高）。
底部工作表，導(dǎo)航抽屜和鍵盤顯示在底部導(dǎo)航欄的前面，暫時覆蓋它。

Snackbars appear behind the bottom navigation bar.

【翻譯】
Snackbars出現(xiàn)在底部導(dǎo)航欄的后面。

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

【翻譯】
底部工作表和鍵盤出現(xiàn)在底部導(dǎo)航欄的前面，暫時覆蓋它。

Orthographic view of app structure

【翻譯】
切面圖