Structure - 結(jié)構(gòu)

UI regions - UI區(qū)域

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

【翻譯】
有關(guān)在z空間中排列元素以實現(xiàn)正確行為和陰影的指導(dǎo)春哨，請參閱環(huán)境和高程和陰影部分卿闹。

Mobile structure - 移動設(shè)備結(jié)構(gòu)

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.

【翻譯】
該結(jié)構(gòu)永久包括應(yīng)用欄和浮動動作按鈕烘嘱。可以添加可選的底部欄用于附加功能或操作溢出茬缩。側(cè)導(dǎo)航菜單覆蓋所有其他結(jié)構(gòu)元素。

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.

【翻譯】
此結(jié)構(gòu)顯示具有浮動操作按鈕的永久應(yīng)用欄吼旧。 應(yīng)用欄吸收平板電腦和移動底部欄中的元素凰锡。 可以添加可選的底部欄用于附加功能或操作溢出。 邊導(dǎo)航覆蓋所有其他結(jié)構(gòu)元素圈暗。 可以臨時訪問右側(cè)導(dǎo)航菜單或固定以永久顯示掂为。

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

【翻譯】
平板電腦結(jié)構(gòu)
從左到右：側(cè)導(dǎo)航，應(yīng)用欄/主工具欄员串，內(nèi)容畫布（在應(yīng)用欄/主工具欄下方）和右導(dǎo)航
在底部：底部欄

Desktop structure - 桌面結(jié)構(gòu)

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.

【翻譯】
桌面結(jié)構(gòu)包含一個具有浮動操作按鈕的永久應(yīng)用欄勇哗。應(yīng)用欄吸收平板電腦和移動底部欄中的元素。在可能的情況下寸齐，窗口控件被吸收到應(yīng)用欄中欲诺。

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.

【翻譯】
側(cè)邊導(dǎo)航菜單可占據(jù)屏幕大小的整個高度（包括應(yīng)用欄下方），可臨時訪問或固定以便永久顯示渺鹦。 側(cè)導(dǎo)航菜單以及內(nèi)容畫布可以有自己的輔助工具欄扰法，用于選項卡，選項板或輔助操作毅厚。

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

【翻譯】
桌面結(jié)構(gòu)
從左到右：應(yīng)用欄/主工具欄
第二行從左到右：工具欄塞颁，輔助工具欄和工具欄
第三行從左到右：側(cè)導(dǎo)航，內(nèi)容畫布和右導(dǎo)航
在底部：浮動操作按鈕

**UI regions - UI區(qū)域 **

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.

【翻譯】
避免將界面切成太多可導(dǎo)致L形的區(qū)域殴边。相反憎茂，使用空格來描繪輔助區(qū)域。

正確的示范

Do.
Use whitespace.

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

錯誤的示范

Don't.
Avoid creating too many regions.

【翻譯】
錯誤的示范
避免創(chuàng)建過多的區(qū)域锤岸。

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.

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

Cards

【翻譯】
卡片

Cards

【翻譯】
卡片

Toolbars - 工具欄

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

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

Full-width, default height app bar

【翻譯】
全寬度馋评，默認(rèn)高度應(yīng)用欄

Full-width, extended height app bar

【翻譯】
全寬度，增加高度應(yīng)用欄

Column-width toolbars at multiple levels of hierarchy

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

Flexible toolbar and card toolbar

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

Floating toolbar

【翻譯】
浮動工具欄

Detached toolbar palette

【翻譯】
分離的工具欄調(diào)色板

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

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

Bottom toolbar shelf

【翻譯】
底部工具欄架

App bar - 應(yīng)用欄

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.

【翻譯】
應(yīng)用欄（以前稱為Android中的操作欄）是一種特殊類型的工具欄留特，用于制作品牌，導(dǎo)航玛瘸，搜索和操作蜕青。

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.

【翻譯】
應(yīng)用欄左側(cè)的導(dǎo)航圖標(biāo)可以是：
1、打開導(dǎo)航欄的控件渺绒。
2贺喝、向上箭頭，用于向上瀏覽應(yīng)用程序的層次結(jié)構(gòu)宗兼。
3躏鱼、如果不需要從此屏幕導(dǎo)航可以完全省略。

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.

【翻譯】
應(yīng)用欄中的標(biāo)題反映了當(dāng)前頁面针炉。 它可以是應(yīng)用標(biāo)題挠他，網(wǎng)頁標(biāo)題或網(wǎng)頁過濾器。
應(yīng)用欄右側(cè)的圖標(biāo)是與應(yīng)用相關(guān)的操作篡帕。 菜單圖標(biāo)打開溢出菜單殖侵，其中包含輔助操作和菜單項，如幫助镰烧，設(shè)置和反饋拢军。

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

【翻譯】
應(yīng)用欄結(jié)構(gòu)
在左側(cè)：導(dǎo)航圖標(biāo)，標(biāo)題和過濾器圖標(biāo)
右側(cè)：操作和菜單圖標(biāo)

Light

【翻譯】
亮色

Dark

【翻譯】
暗色

Colored

【翻譯】
彩色

Transparent

【翻譯】
透明

Title color - 標(biāo)題顏色

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.

【翻譯】
在應(yīng)用欄中怔鳖，所有圖標(biāo)應(yīng)為相同顏色茉唉。 如果需要增加可視層次結(jié)構(gòu)，則標(biāo)題可以具有與圖標(biāo)不同的顏色。不同的標(biāo)題顏色在背景上工作效果最好度陆，具有足夠的白色和黑色字形對比度艾凯。

Single color (default)

【翻譯】
單色

Distinct title color

【翻譯】
不同的標(biāo)題顏色

**Metrics - 指標(biāo) **
Default heights: - 默認(rèn)高度
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
對于擴(kuò)展應(yīng)用欄，高度等于默認(rèn)高度加上內(nèi)容增量懂傀。

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

【翻譯】
應(yīng)用欄高度：56dp
應(yīng)用欄左右填充：16dp
應(yīng)用欄圖標(biāo)頂部趾诗，底部，左填充：16dp
應(yīng)用程序欄標(biāo)題左填充：72dp

應(yīng)用欄標(biāo)題底部填充：20dp

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

【翻譯】
應(yīng)用欄顯著增加高度的突出
應(yīng)用欄高度：128dp

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

【翻譯】
響應(yīng)區(qū)高度：56dp
標(biāo)題區(qū)高度：80dp
標(biāo)題區(qū)域底部填充：8dp
描述區(qū)域高度：72dp
描述區(qū)域底部填充：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

【翻譯】
增量關(guān)鍵點由應(yīng)用欄高度設(shè)置蹬蚁，高度為64dp恃泪，決定關(guān)鍵點增量。
應(yīng)用欄左右內(nèi)容填充：24dp
應(yīng)用欄圖標(biāo)頂部和底部填充：20dp

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

【翻譯】
突出的應(yīng)用欄高度：128dp
應(yīng)用欄左右圖標(biāo)填充：24dp
應(yīng)用欄左內(nèi)容填充：80dp

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

【翻譯】
當(dāng)鼠標(biāo)和鍵盤是主要輸入方法時犀斋，測量可以被壓縮以適應(yīng)更密集的布局贝乎。

【翻譯】
桌面上的密集應(yīng)用欄
應(yīng)用欄高度：48dp
應(yīng)用欄左右內(nèi)容填充：24
應(yīng)用欄左內(nèi)容填充：80dp
觸摸目標(biāo)的圖標(biāo)高度：40dp

【翻譯】
密集突出的應(yīng)用欄
密集突出的應(yīng)用欄高度：96dp
應(yīng)用欄左右內(nèi)容填充：24dp
應(yīng)用欄左內(nèi)容填充：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.

【翻譯】
菜單是一張總是與應(yīng)用欄重疊的臨時工作表，而不是作為應(yīng)用欄的擴(kuò)展叽粹。

Example of an app bar

【翻譯】
應(yīng)用欄示例

Example of menu in an app bar

【翻譯】
應(yīng)用欄中的菜單示例

System bars - 系統(tǒng)欄

Status bar/window bar - 狀態(tài)欄/窗口欄

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上览效，狀態(tài)欄包含通知圖標(biāo)和系統(tǒng)圖標(biāo)。 在Chrome上球榆，頂部欄包含窗口控件：最小化朽肥，全屏和關(guān)閉禁筏。 在Chrome應(yīng)用中持钉，頂部欄可以消失，然后窗口控件會進(jìn)入應(yīng)用欄篱昔。

Android status bar

【翻譯】
安卓狀態(tài)欄

Chrome window bar

【翻譯】
chrome 窗口欄

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

【翻譯】
指標(biāo)：
Android狀態(tài)欄高度：24dp
Chrome窗口高度：32dp

Android status bar on top of the app bar

【翻譯】
Android狀態(tài)欄位于應(yīng)用欄頂部

Chrome window bar on top of the app bar

【翻譯】
Chrome窗口欄位于應(yīng)用欄頂部

Chrome window controls inside app bar

【翻譯】
Chrome窗口控件位于應(yīng)用欄內(nèi)

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

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

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.

【翻譯】
精益背部模式最適合觀看具有有限屏幕互動的內(nèi)容，例如視頻匹表。
互動：在任何地方觸摸屏幕门坷，帶回系統(tǒng)欄。

Touch the screen anywhere to bring back the system bars

【翻譯】
觸摸屏幕任何地方帶回系統(tǒng)欄

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.

【翻譯】
沉浸式模式是最好的袍镀，當(dāng)用戶需要與屏幕進(jìn)行大量交互默蚌，如玩游戲或與圖像庫交互。 您可以根據(jù)需要顯示和隱藏應(yīng)用程序的控件以及系統(tǒng)欄苇羡。
互動：從屏幕的任何邊緣滑動绸吸，使系統(tǒng)欄出現(xiàn)。 首次應(yīng)用程式全螢?zāi)徊シ艜r，系統(tǒng)會說明這個滑動手勢锦茁。
邊緣滑動異常：使用從邊緣滑動手勢執(zhí)行操作的應(yīng)用程序也應(yīng)該在使用該手勢時顯示系統(tǒng)欄撑刺。 例如，使用邊緣滑動（例如繪制線條）的繪圖應(yīng)用程序也應(yīng)該在發(fā)生手勢時半透明地顯示系統(tǒng)欄幾秒鐘瓢棒。

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

【翻譯】
使用隱藏欄從屏幕的任意邊緣滑動，以返回系統(tǒng)欄柿祈。

**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模式下珠漂，操作欄和狀態(tài)欄會消失鸣皂，并在幾秒鐘不活動后變?yōu)椴豢捎眉睢?dǎo)航欄仍然可用，并響應(yīng)觸摸，但顯示為灰色缅帘。

Dark status bar - 暗色狀態(tài)欄

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.

【翻譯】
默認(rèn)情況下，狀態(tài)或窗口欄的顏色是應(yīng)用欄顏色的深色。它也可以使用布局中另一個元素的顏色或半透明楼镐。

Color is based on a sample taken from the content

【翻譯】
顏色基于從內(nèi)容中提取的樣本

Translucent status bar, 20% Black #000000

【翻譯】
半透明狀態(tài)欄，20％黑色＃000000

Dark status bar

【翻譯】
暗色狀態(tài)欄

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

【翻譯】
狀態(tài)欄顏色在應(yīng)用欄顏色較深的色調(diào)

**Light status bar - 亮色狀態(tài)欄 **

The light status bar, with dark icons, better harmonizes with light content and can be used as an alternative to the dark status bar.
亮色狀態(tài)欄往枷，帶有黑色圖標(biāo)框产，更好地與光線內(nèi)容協(xié)調(diào)，并且可以用作黑暗狀態(tài)欄的替代错洁。

Light status bar color is based on sample taken from content

【翻譯】
亮色狀態(tài)欄顏色基于從內(nèi)容中獲取的樣本

Translucent light status bar, 70% White #FFFFFF

【翻譯】
半透明亮色狀態(tài)欄秉宿，70％白色#FFFFFF

Light status bar, default background fill is #E0E0E0

【翻譯】
亮色狀態(tài)欄，默認(rèn)背景填充為＃E0E0E0

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

【翻譯】
亮色狀態(tài)欄在較淺的應(yīng)用程序欄顏色的色調(diào)

**Android navigation bar - Android導(dǎo)航欄 **

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中的導(dǎo)航欄包含設(shè)備導(dǎo)航控件：后退屯碴，首頁和概述描睦。它還顯示為Android 2.3或更早版本編寫的應(yīng)用程序的菜單。
身高：48dp

Dark

【翻譯】
暗色

Light

【翻譯】
亮色

**Color variants - 顏色變體 **

The navigation bar can be opaque, translucent, or transparent.
導(dǎo)航欄可以是不透明的导而，半透明的或透明的忱叭。

Translucent

【翻譯】
半透明

Translucent over complex image

【翻譯】
半透明復(fù)雜的圖像

Transparent

【翻譯】
透明

Transparent over even-toned image

【翻譯】
透明均勻的圖像

Chrome OS shelf - Chrome操作系統(tǒng)架

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

Height: 56dp

【翻譯】
該擱架包含Chrome操作系統(tǒng)上的應(yīng)用啟動器，應(yīng)用圖標(biāo)和系統(tǒng)設(shè)置今艺。 身高：56dp

Example of Chrome OS shelf

【翻譯】
Chrome操作系統(tǒng)書架示例

Side nav - 側(cè)導(dǎo)航

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.

【翻譯】
如果存在韵丑，側(cè)導(dǎo)航欄可以固定為永久顯示或臨時浮動作為覆蓋。 側(cè)導(dǎo)航可以位于屏幕的左側(cè)或右側(cè)虚缎。
出現(xiàn)在左側(cè)導(dǎo)航中的內(nèi)容理想地是基于導(dǎo)航或基于身份的撵彻。 右側(cè)導(dǎo)航內(nèi)容應(yīng)該是網(wǎng)頁上主要內(nèi)容的輔助。
參見導(dǎo)航抽屜实牡。

Mobile screen

【翻譯】
移動屏幕

Side nav menu

【翻譯】
側(cè)導(dǎo)航菜單

Structure - 結(jié)構(gòu)

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.

【翻譯】
側(cè)導(dǎo)航欄可以固定為永久顯示陌僵，或者它們可以作為疊加層臨時浮動。 臨時導(dǎo)航抽屜覆蓋內(nèi)容畫布; 而固定的導(dǎo)航面板位于內(nèi)容畫布旁邊或下面创坞。
屏幕尺寸可以確定面板是否被固定或覆蓋碗短。 有足夠的空間，面板可以固定和內(nèi)容調(diào)整響應(yīng)题涨。 如果空間不足偎谁，則面板必須是疊加層总滩。

Left nav on mobile

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

Right nav on mobile

【翻譯】
在移動設(shè)備上右鍵單擊

****Metrics - 指標(biāo)****
Mobile - 移動設(shè)備:
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
最大寬度僅適用于使用左導(dǎo)航時。 使用右導(dǎo)航時搭盾，面板可以覆蓋屏幕的整個寬度咳秉。
桌面：左側(cè)導(dǎo)航欄的最大寬度為400dp。 右側(cè)導(dǎo)航可以根據(jù)內(nèi)容而變化鸯隅。

Left nav on desktop

【翻譯】
在桌面上左導(dǎo)航

Right nav on desktop

【翻譯】
桌面上的右導(dǎo)航

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.

【翻譯】
白框提供了各種使用對表面澜建，分層和陰影的一致方法的布局結(jié)構(gòu)。 有關(guān)白色框架的下載和其他信息蝌以，請參閱參考資料炕舵。

Carded content that expands and collapses

【翻譯】
展開和折疊的卡片內(nèi)容

Overlayed content details with focused app bar on mobile

【翻譯】
覆蓋的內(nèi)容詳細(xì)信息，專注于移動應(yīng)用欄

Left side nav and one-up stream on mobile

【翻譯】
左側(cè)導(dǎo)航和一條流在手機(jī)上

Source list

【翻譯】
源列表

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

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

Expandable footer drawer

【翻譯】
展開式頁腳抽屜