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

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

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òng)的視圖搀矫。
底部導(dǎo)航主要用于移動(dòng)設(shè)備腥泥。要實(shí)現(xiàn)類似效果的桌面躁愿，使用側(cè)導(dǎo)航高镐。

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

【翻譯】
三到五個(gè)頂級(jí)目的地
需要直接訪問的目的地

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)整活動(dòng)圖標(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

【翻譯】
每個(gè)動(dòng)作的寬度：視圖的寬度除以動(dòng)作數(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)用程序的頂級(jí)視圖之間的快速導(dǎo)航。它主要設(shè)計(jì)用于移動(dòng)虫碉。

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

The bottom navigation bar on mobile

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

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

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

When to use - 何時(shí)使用
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)用于：
三到五個(gè)類似重要性的頂級(jí)目的地（替代方法：從應(yīng)用程序的任何地方訪問的永久性導(dǎo)航抽屜）
需要在應(yīng)用中的任何位置直接訪問的目標(biāo)（替代方法：僅一個(gè)或兩個(gè)目的地的標(biāo)簽）

正確的示范

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

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

錯(cuò)誤的示范

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

【翻譯】
錯(cuò)誤的示范
如果目標(biāo)少于三個(gè)习瑰，請考慮使用標(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.

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

爭取的示范

Do.
Views are fixed in a bottom navigation bar.

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

錯(cuò)誤的示范

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

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

正確的示范

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

【翻譯】
正確的示范
在底部導(dǎo)航欄中最多使用五個(gè)頂級(jí)目標(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)航中使用超過五個(gè)目的地滓鸠，因?yàn)辄c(diǎn)擊目標(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)簽時(shí)，請謹(jǐn)慎糜俗，因?yàn)樵趯?dǎo)航應(yīng)用程序時(shí)踱稍，組合可能會(huì)導(dǎo)致混亂。 例如悠抹，點(diǎn)擊兩個(gè)標(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ù)以下條件對(duì)每個(gè)操作進(jìn)行風(fēng)格：
當(dāng)視圖焦點(diǎn)對(duì)準(zhǔn)時(shí)啤挎，顯示該視圖的圖標(biāo)和文本標(biāo)簽
當(dāng)只有三個(gè)操作時(shí)，始終顯示圖標(biāo)和文本標(biāo)簽
如果有四個(gè)或五個(gè)操作卵凑，則僅將非活動(dòng)視圖顯示為圖標(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)用程式的主要顏色指示焦點(diǎn)。

錯(cuò)誤的示范

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

【翻譯】
錯(cuò)誤的示范
避免使用不同的彩色圖標(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)宴抚。

錯(cuò)誤的示范

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

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

**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)簽沥邻，因?yàn)檫@些標(biāo)簽不會(huì)截?cái)嗷驌Q行。

正確的示范

Do.
Use short labels

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

錯(cuò)誤的示范

Don't.
Avoid labels with wrapping text

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

錯(cuò)誤的示范

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

【翻譯】
錯(cuò)誤的示范
避免截?cái)辔淖謽?biāo)簽羊娃，因?yàn)檫@樣做可能會(huì)妨礙理解唐全。

錯(cuò)誤的示范

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

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

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.

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

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

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

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

【翻譯】
通過底部導(dǎo)航欄導(dǎo)航應(yīng)該重置任務(wù)狀態(tài)方庭。朕在這個(gè)地方有所質(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)航欄可以在滾動(dòng)時(shí)動(dòng)態(tài)顯示和消失：
向下滾動(dòng)隱藏底部導(dǎo)航欄
向上滾動(dòng)顯示它

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)時(shí)械念，底部導(dǎo)航欄仍保持可見。

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

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

正確的示范

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

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

錯(cuò)誤的示范

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

【翻譯】
錯(cuò)誤的示范
避免使用橫向運(yùn)動(dòng)在視圖之間轉(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.

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

Fixed bottom navigation bar on mobile

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

Fixed bottom navigation bar on mobile

【翻譯】
在手機(jī)上固定底部導(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)容對(duì)齊：
文本和圖標(biāo)在視圖中水平居中违崇。
填充：
6dp以上圖標(biāo)（活動(dòng)視圖），8dp以上圖標(biāo)（不活動(dòng)視圖）
10dp下的文本
12dp左右文本
文字標(biāo)簽：
Roboto Regular 14sp（主動(dòng)視圖）
Roboto Regular 12sp（非活動(dòng)視圖）

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)航欄景觀移動(dòng)
56dp高度
24 x 24dp圖標(biāo)
6dp以上圖標(biāo)（活動(dòng)視圖）
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)（活動(dòng)視圖）
8dp以上圖標(biāo)（無效視圖）
10dp下的文本

Shifting bottom navigation bar - 移動(dòng)底部導(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)

【翻譯】
寬度最小值和最大值（包括填充）：
活動(dòng)視圖
最大：168dp
最低：96dp
非活動(dòng)視圖
最大：96dp
最低：56dp
高度：
56dp
圖標(biāo)：
24 x 24dp
內(nèi)容對(duì)齊：
文本和圖標(biāo)在視圖中水平居中崖媚。
填充：
6dp上方圖標(biāo)（活動(dòng)視圖）亦歉，16dp上方和下方圖標(biāo)（不活動(dòng)視圖）
10dp下的文本
文字標(biāo)簽：
Roboto Regular 14sp（主動(dòng)視圖）

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

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

Shifting bottom navigation bar on mobile

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

Active view: 96dp min width

【翻譯】
活動(dòng)視圖：96dp最小寬度

Active view: 168dp max width

【翻譯】
活動(dòng)視圖：168dp最大寬度

Inactive view: 56dp min width

【翻譯】
非活動(dòng)視圖：56dp最小寬度

Inactive view: 96dp max width

【翻譯】
非活動(dòng)視圖：最大寬度為96dp

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

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

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

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

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òng)橫向移動(dòng)的底部導(dǎo)航欄
56dp高度
24 x 24dp圖標(biāo)
6dp以上圖標(biāo)（活動(dòng)視圖）
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òng)底部導(dǎo)航欄
56dp高度
24 x 24dp圖標(biāo)
6dp以上圖標(biāo)（活動(dòng)視圖）
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.

【翻譯】
因?yàn)閟nackbars有一個(gè)較低的（6dp）高度肴楷，它們出現(xiàn)在底部導(dǎo)航欄后面（8dp標(biāo)高）。
底部工作表荠呐，導(dǎo)航抽屜和鍵盤顯示在底部導(dǎo)航欄的前面赛蔫，暫時(shí)覆蓋它砂客。

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)航欄的前面呵恢，暫時(shí)覆蓋它鞠值。

Orthographic view of app structure

【翻譯】
切面圖