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

【翻譯】
切面圖