Structure - 結構

UI regions - UI區域

For guidance on arranging elements in z-space to achieve the correct behavior and shadows, see the Environment and Elevations and shadows sections.

【翻譯】
有關在z空間中排列元素以實現正確行為和陰影的指導，請參閱環境和高程和陰影部分。

Mobile structure - 移動設備結構

This structure includes a permanent app bar and floating action button. An optional bottom bar can be added for additional functionality or action overflow. Side nav menus overlay all other structural elements.

【翻譯】
該結構永久包括應用欄和浮動動作按鈕。可以添加可選的底部欄用于附加功能或操作溢出。側導航菜單覆蓋所有其他結構元素。

Tablet structure - 平板電腦

This structure shows a permanent app bar with a floating action button. The app bar absorbs elements from the tablet and mobile bottom bars. An optional bottom bar can be added for additional functionality or action overflow. A side nav overlays all other structural elements. A right nav menu can be accessed temporarily or pinned for permanent display.

【翻譯】
此結構顯示具有浮動操作按鈕的永久應用欄。 應用欄吸收平板電腦和移動底部欄中的元素。 可以添加可選的底部欄用于附加功能或操作溢出。 邊導航覆蓋所有其他結構元素。 可以臨時訪問右側導航菜單或固定以永久顯示。

Tablet structure
Top left to right: Side nav, app bar/primary toolbar, content canvas (below the app bar/primary toolbar), and right nav
On the bottom: bottom bar

【翻譯】
平板電腦結構
從左到右：側導航，應用欄/主工具欄，內容畫布（在應用欄/主工具欄下方）和右導航
在底部：底部欄

Desktop structure - 桌面結構

The desktop structure contains a permanent app bar with a floating action button. The app bar absorbs elements from the tablet and mobile bottom bars. Where possible, the window controls are absorbed into the app bar.

【翻譯】
桌面結構包含一個具有浮動操作按鈕的永久應用欄。應用欄吸收平板電腦和移動底部欄中的元素。在可能的情況下，窗口控件被吸收到應用欄中。

Side navigation menus can take up the full height of the screen size (including under the app bar) and be accessed temporarily or pinned for permanent display. Side nav menus, as well as the content canvas, can have their own secondary toolbars for tabs, palettes, or secondary actions.

【翻譯】
側邊導航菜單可占據屏幕大小的整個高度（包括應用欄下方），可臨時訪問或固定以便永久顯示。 側導航菜單以及內容畫布可以有自己的輔助工具欄，用于選項卡，選項板或輔助操作。

Desktop structure
Top left to right: App bar/primary toolbar
Second row from left to right: Toolbar, secondary toolbar, and toolbar
Third row from left to right: side nav, content canvas, and right nav
On the bottom: floating action button

【翻譯】
桌面結構
從左到右：應用欄/主工具欄
第二行從左到右：工具欄，輔助工具欄和工具欄
第三行從左到右：側導航，內容畫布和右導航
在底部：浮動操作按鈕

**UI regions - UI區域 **

Define a primary horizontal or vertical divider.

【翻譯】
定義基本的水平或垂直的分割線。

Vertical divider

【翻譯】
垂直分割線

Horizontal divider

【翻譯】
水平分割器

Avoid slicing up the interface into too many regions which can cause L shapes. Instead, use whitespace to delineate secondary areas.

【翻譯】
避免將界面切成太多可導致L形的區域。相反，使用空格來描繪輔助區域。

正確的示范

Do.
Use whitespace.

【翻譯】
正確的示范
使用空格

錯誤的示范

Don't.
Avoid creating too many regions.

【翻譯】
錯誤的示范
避免創建過多的區域。

Break edges with cards and floating action buttons.

【翻譯】
卡和浮動行動按鈕會打破邊緣。

Card breaking an edge

【翻譯】
卡片打破邊界

Floating action button breaking an edge

【翻譯】
浮動行動按鈕會打破邊緣

Use cards to organize content when specific behaviors are needed or if groupings of information need more separation than what whitespace or dividers can provide.

【翻譯】
需要特定行為時，或者如果信息分組需要比空格或分隔符可提供的更多分隔，則使用卡片來組織內容。

Cards

【翻譯】
卡片

Cards

【翻譯】
卡片

Toolbars - 工具欄

Toolbars are versatile and can be used in many different ways.

【翻譯】
工具欄是通用的，可以以許多不同的方式使用。

Full-width, default height app bar

【翻譯】
全寬度，默認高度應用欄

Full-width, extended height app bar

【翻譯】
全寬度，增加高度應用欄

Column-width toolbars at multiple levels of hierarchy

【翻譯】
在多個層次級別的列寬工具欄

Flexible toolbar and card toolbar

【翻譯】
靈活的工具欄和卡工具欄

Floating toolbar

【翻譯】
浮動工具欄

Detached toolbar palette

【翻譯】
分離的工具欄調色板

Bottom toolbar that launches to a shelf and clings to the top of the keyboard or other bottom component

【翻譯】
底部工具欄，其啟動到上并貼在鍵盤或其他底部組件的頂部

Bottom toolbar shelf

【翻譯】
底部工具欄架

App bar - 應用欄

The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.

【翻譯】
應用欄（以前稱為Android中的操作欄）是一種特殊類型的工具欄，用于制作品牌，導航，搜索和操作。

The nav icon at the left side of the app bar can be:

1、A control to open a navigation drawer.
2、An up arrow for navigating upward through your app’s hierarchy.
3、Omitted entirely if no navigation is required from this screen.

【翻譯】
應用欄左側的導航圖標可以是：
1、打開導航欄的控件。
2、向上箭頭，用于向上瀏覽應用程序的層次結構。
3、如果不需要從此屏幕導航可以完全省略。

The title in the app bar reflects the current page. It can be an app title, page title, or a page filter.

Icons on the right side of the app bar are app-related actions. The menu icon opens the overflow menu, which contains secondary actions and menu items like help, settings, and feedback.

【翻譯】
應用欄中的標題反映了當前頁面。 它可以是應用標題，網頁標題或網頁過濾器。
應用欄右側的圖標是與應用相關的操作。 菜單圖標打開溢出菜單，其中包含輔助操作和菜單項，如幫助，設置和反饋。

App bar structure
On the left: Nav icon, title, and filter icon
On the right: Action and menu icons

【翻譯】
應用欄結構
在左側：導航圖標，標題和過濾器圖標
右側：操作和菜單圖標

Light

【翻譯】
亮色

Dark

【翻譯】
暗色

Colored

【翻譯】
彩色

Transparent

【翻譯】
透明

Title color - 標題顏色

In an app bar, all icons should be the same color.

The title can have a distinct color from the icons if increased visual hierarchy is needed. Distinct title colors work best on backgrounds with enough contrast for both white and black glyphs.

【翻譯】
在應用欄中，所有圖標應為相同顏色。 如果需要增加可視層次結構，則標題可以具有與圖標不同的顏色。不同的標題顏色在背景上工作效果最好，具有足夠的白色和黑色字形對比度。

Single color (default)

【翻譯】
單色

Distinct title color

【翻譯】
不同的標題顏色

**Metrics - 指標 **
Default heights: - 默認高度
Mobile Landscape: 48dpMobile Portrait: 56dpTablet/Desktop: 64dp
For extended app bars, the height is equal to the default height plus content increment(s).

【翻譯】
移動景觀：48dp
移動肖像：56dp
平板電腦/桌面：64dp
對于擴展應用欄，高度等于默認高度加上內容增量。

App bar height: 56dp
App bar left and right padding: 16dp
App bar icon top, bottom, left padding: 16dp
App bar title left padding: 72dp
App bar title bottom padding: 20dp

【翻譯】
應用欄高度：56dp
應用欄左右填充：16dp
應用欄圖標頂部，底部，左填充：16dp
應用程序欄標題左填充：72dp

應用欄標題底部填充：20dp

The app bar with significantly increased height for prominence
App bar height: 128dp

【翻譯】
應用欄顯著增加高度的突出
應用欄高度：128dp

Action area height: 56dp
Title area height: 80dp
Title area bottom padding: 8dp
Description area height: 72dp
Description area bottom padding: 16dp

【翻譯】
響應區高度：56dp
標題區高度：80dp
標題區域底部填充：8dp
描述區域高度：72dp
描述區域底部填充：16dp

Incremental keyline is set by the app bar height, with a height of 64dp, which determines the keyline increment.
App bar left and right content padding: 24dp
App bar icon top and bottom padding: 20dp

【翻譯】
增量關鍵點由應用欄高度設置，高度為64dp，決定關鍵點增量。
應用欄左右內容填充：24dp
應用欄圖標頂部和底部填充：20dp

Prominent app bar height: 128dp
App bar left and right icon padding: 24dp
App bar left content padding: 80dp

【翻譯】
突出的應用欄高度：128dp
應用欄左右圖標填充：24dp
應用欄左內容填充：80dp

**Density - 密度 **
When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.

【翻譯】
當鼠標和鍵盤是主要輸入方法時，測量可以被壓縮以適應更密集的布局。

【翻譯】
桌面上的密集應用欄
應用欄高度：48dp
應用欄左右內容填充：24
應用欄左內容填充：80dp
觸摸目標的圖標高度：40dp

【翻譯】
密集突出的應用欄
密集突出的應用欄高度：96dp
應用欄左右內容填充：24dp
應用欄左內容填充：80dp

Menus - 菜單

A menu is a temporary sheet of paper that always overlaps the app bar, rather than behaving as an extension of the app bar.

【翻譯】
菜單是一張總是與應用欄重疊的臨時工作表，而不是作為應用欄的擴展。

Example of an app bar

【翻譯】
應用欄示例

Example of menu in an app bar

【翻譯】
應用欄中的菜單示例

System bars - 系統欄

Status bar/window bar - 狀態欄/窗口欄

On Android, the status bar contains notification icons and system icons. On Chrome, the top bar contains the window controls: minimize, full screen, and close. In a Chrome app, the top bar can disappear, and the window controls are then brought into the app bar.

【翻譯】
在Android上，狀態欄包含通知圖標和系統圖標。 在Chrome上，頂部欄包含窗口控件：最小化，全屏和關閉。 在Chrome應用中，頂部欄可以消失，然后窗口控件會進入應用欄。

Android status bar

【翻譯】
安卓狀態欄

Chrome window bar

【翻譯】
chrome 窗口欄

Metrics:
Android status bar height: 24dp
Chrome window height: 32dp

【翻譯】
指標：
Android狀態欄高度：24dp
Chrome窗口高度：32dp

Android status bar on top of the app bar

【翻譯】
Android狀態欄位于應用欄頂部

Chrome window bar on top of the app bar

【翻譯】
Chrome窗口欄位于應用欄頂部

Chrome window controls inside app bar

【翻譯】
Chrome窗口控件位于應用欄內

Full screen - 全屏

Some content is best experienced in full-screen mode, such as videos, games, books, and slides. Full-screen mode increases engagement with content by minimizing visual distraction from controls and protecting users from escaping the app accidentally.

Full-screen mode comes in several types:

Lean back
Immersive
Lights Out

【翻譯】
某些內容最好在全屏模式下體驗，例如視頻，游戲，書籍和幻燈片。 全屏模式通過最大限度地減少對控件的視覺分散，并保護用戶不會意外逃脫應用程序，增加了與內容的互動。
全屏模式有多種類型：
精益背部
沉浸
熄燈

Lean back - 精益背部
Lean back mode is best suited to watching content with limited screen interaction, such as a video.
**Interaction: **Touch the screen anywhere to bring back the system bars.

【翻譯】
精益背部模式最適合觀看具有有限屏幕互動的內容，例如視頻。
互動：在任何地方觸摸屏幕，帶回系統欄。

Touch the screen anywhere to bring back the system bars

【翻譯】
觸摸屏幕任何地方帶回系統欄

Immersive - 沉浸
Immersive mode is best when users need to interact heavily with the screen, such as playing a game or interacting with an image gallery. You may show and hide your app’s controls along with the system bars as needed.
Interaction: Swipe from any edge of the screen to make the system bars appear. The first time an app goes full-screen, this swipe gesture is explained.
**Edge swipe exception: **Apps that use the swipe-from-edge gesture to perform actions should also display the system bars when that gesture is used. For example, a drawing app that uses an edge swipe (such as to draw a line) should also display the system bars semi-transparently for a few seconds any time that gesture occurs.

【翻譯】
沉浸式模式是最好的，當用戶需要與屏幕進行大量交互，如玩游戲或與圖像庫交互。 您可以根據需要顯示和隱藏應用程序的控件以及系統欄。
互動：從屏幕的任何邊緣滑動，使系統欄出現。 首次應用程式全螢幕播放時，系統會說明這個滑動手勢。
邊緣滑動異常：使用從邊緣滑動手勢執行操作的應用程序也應該在使用該手勢時顯示系統欄。 例如，使用邊緣滑動（例如繪制線條）的繪圖應用程序也應該在發生手勢時半透明地顯示系統欄幾秒鐘。

Swipe from the any edge of the screen with a hidden bar to bring back system bars.

【翻譯】
使用隱藏欄從屏幕的任意邊緣滑動，以返回系統欄。

**Lights Out - 熄燈 **

In Lights Out mode, the Action Bar and Status Bar fade away and become unavailable after a few seconds of inactivity. The Navigation Bar is still available and responds to touches but appears dimmed.

【翻譯】
在Lights Out模式下，操作欄和狀態欄會消失，并在幾秒鐘不活動后變為不可用。導航欄仍然可用，并響應觸摸，但顯示為灰色。

Dark status bar - 暗色狀態欄

By default, the color of the status or window bar is a darker shade of the app bar color. It can also use color from another element in the layout or be translucent.

【翻譯】
默認情況下，狀態或窗口欄的顏色是應用欄顏色的深色。它也可以使用布局中另一個元素的顏色或半透明。

Color is based on a sample taken from the content

【翻譯】
顏色基于從內容中提取的樣本

Translucent status bar, 20% Black #000000

【翻譯】
半透明狀態欄，20％黑色＃000000

Dark status bar

【翻譯】
暗色狀態欄

Status bar color in a darker tone of the app bar color

【翻譯】
狀態欄顏色在應用欄顏色較深的色調

**Light status bar - 亮色狀態欄 **

The light status bar, with dark icons, better harmonizes with light content and can be used as an alternative to the dark status bar.
亮色狀態欄，帶有黑色圖標，更好地與光線內容協調，并且可以用作黑暗狀態欄的替代。

Light status bar color is based on sample taken from content

【翻譯】
亮色狀態欄顏色基于從內容中獲取的樣本

Translucent light status bar, 70% White #FFFFFF

【翻譯】
半透明亮色狀態欄，70％白色#FFFFFF

Light status bar, default background fill is #E0E0E0

【翻譯】
亮色狀態欄，默認背景填充為＃E0E0E0

Light status bar in darker tone of a light app bar color

【翻譯】
亮色狀態欄在較淺的應用程序欄顏色的色調

**Android navigation bar - Android導航欄 **

The navigation bar in Android houses the device navigation controls: Back, Home, and Overview. It also displays a menu for apps written for Android 2.3 or earlier.

Height: 48dp

【翻譯】
Android中的導航欄包含設備導航控件：后退，首頁和概述。它還顯示為Android 2.3或更早版本編寫的應用程序的菜單。
身高：48dp

Dark

【翻譯】
暗色

Light

【翻譯】
亮色

**Color variants - 顏色變體 **

The navigation bar can be opaque, translucent, or transparent.
導航欄可以是不透明的，半透明的或透明的。

Translucent

【翻譯】
半透明

Translucent over complex image

【翻譯】
半透明復雜的圖像

Transparent

【翻譯】
透明

Transparent over even-toned image

【翻譯】
透明均勻的圖像

Chrome OS shelf - Chrome操作系統架

The shelf houses the app launcher, application icons, and system settings on Chrome OS.

Height: 56dp

【翻譯】
該擱架包含Chrome操作系統上的應用啟動器，應用圖標和系統設置。 身高：56dp

Example of Chrome OS shelf

【翻譯】
Chrome操作系統書架示例

Side nav - 側導航

If present, side nav bars can be pinned for permanent display or float temporarily as overlays. Side navs can be positioned on the left or right side of the screen.
The content appearing in the left nav is ideally navigation- or identity-based. Right nav content should be secondary to the main content on a page.
See also Navigation drawer.

【翻譯】
如果存在，側導航欄可以固定為永久顯示或臨時浮動作為覆蓋。 側導航可以位于屏幕的左側或右側。
出現在左側導航中的內容理想地是基于導航或基于身份的。 右側導航內容應該是網頁上主要內容的輔助。
參見導航抽屜。

Mobile screen

【翻譯】
移動屏幕

Side nav menu

【翻譯】
側導航菜單

Structure - 結構

Side nav bars may be pinned for permanent display, or they can float temporarily as overlays. Temporary nav drawers overlay the content canvas; whereas pinned nav panels are situated alongside or below the content canvas.

Screen size can determine whether a panel is pinned or an overlay. With sufficient space, a panel can be pinned and content adjusted responsively. With insufficient space, a panel has to be an overlay.

【翻譯】
側導航欄可以固定為永久顯示，或者它們可以作為疊加層臨時浮動。 臨時導航抽屜覆蓋內容畫布; 而固定的導航面板位于內容畫布旁邊或下面。
屏幕尺寸可以確定面板是否被固定或覆蓋。 有足夠的空間，面板可以固定和內容調整響應。 如果空間不足，則面板必須是疊加層。

Left nav on mobile

【翻譯】
在移動設備上左導航

Right nav on mobile

【翻譯】
在移動設備上右鍵單擊

****Metrics - 指標****
Mobile - 移動設備:
Width = *Screen width *? 56 dp
Maximum width: 320dp
Maximum width applies only when using a left nav. When using a right nav, the panel can cover the full width of the screen.
Desktop: Maximum width for a left nav is 400dp. The right nav can vary depending on content.

【翻譯】
寬度=屏幕寬度 - 56 dp
最大寬度：320dp
最大寬度僅適用于使用左導航時。 使用右導航時，面板可以覆蓋屏幕的整個寬度。
桌面：左側導航欄的最大寬度為400dp。 右側導航可以根據內容而變化。

Left nav on desktop

【翻譯】
在桌面上左導航

Right nav on desktop

【翻譯】
桌面上的右導航

Whiteframes - 白框

Whiteframes provide a variety of layout structures using a consistent approach to surfaces, layering, and shadows.
For download and other information about whiteframes, seeResources.

【翻譯】
白框提供了各種使用對表面，分層和陰影的一致方法的布局結構。 有關白色框架的下載和其他信息，請參閱參考資料。

Carded content that expands and collapses

【翻譯】
展開和折疊的卡片內容

Overlayed content details with focused app bar on mobile

【翻譯】
覆蓋的內容詳細信息，專注于移動應用欄

Left side nav and one-up stream on mobile

【翻譯】
左側導航和一條流在手機上

Source list

【翻譯】
源列表

Full-screen background image with inset search field and carded search results

【翻譯】
帶有插入搜索字段和梳理的搜索結果的全屏背景圖片

Expandable footer drawer

【翻譯】
展開式頁腳抽屜