Responsive UI - 響應(yīng)UI

Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.

【翻譯】
材料設(shè)計(jì)中的響應(yīng)布局適應(yīng)任何可能的屏幕尺寸恋追。 這個(gè)UI指南包括一個(gè)靈活的網(wǎng)格职员，確蔽榛拢跨布局的一致性禁悠，斷點(diǎn)細(xì)節(jié)關(guān)于內(nèi)容如何在不同的屏幕上回流尔邓，以及一個(gè)應(yīng)用程序如何從小到大的屏幕擴(kuò)展的描述偿警。

Breakpoints - 斷點(diǎn)

For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.

【翻譯】
為了獲得最佳的用戶體驗(yàn)绍赛，材料設(shè)計(jì)用戶界面應(yīng)該適應(yīng)以下斷點(diǎn)寬度的布局：480,600,840,960,1280,1440和1600dp分扎。

**1. Summary and detail view content in layouts - **
Layouts under 600dp wide may fill the screen with a single level of content hierarchy (either summary or detail content, but not both).
Layouts over 600dp wide may place two levels of content hierarchy on the screen (both summary and detail content).
2. Max screen widths
Layouts over 1600dp wide may let the layout grow until it hits a max width. At this point, the grid may do one of the following:
Become center aligned with increased margins
Remain left aligned while the right margin grows
Continue to grow while revealing additional content

【翻譯】
1.布局中的摘要和詳細(xì)信息視圖內(nèi)容
600dp以下的布局可以用單級(jí)內(nèi)容層次結(jié)構(gòu)（總結(jié)或詳細(xì)內(nèi)容，但不是兩者）填充屏幕薇搁。
超過600dp的布局可以在屏幕上放置兩級(jí)內(nèi)容層次（包括概要和細(xì)節(jié)內(nèi)容）窟勃。
2.最大屏幕寬度
布局超過1600dp寬可以讓布局增長(zhǎng)，直到它達(dá)到最大寬度栏饮。 此時(shí)笑诅，網(wǎng)格可以執(zhí)行以下操作之一：
成為中心與增加的邊距對(duì)齊
保持左對(duì)齊俊犯，右邊距增長(zhǎng)
繼續(xù)增長(zhǎng)茫舶，同時(shí)顯示更多內(nèi)容

Breakpoint system - 斷點(diǎn)系統(tǒng)
These breakpoints describe column and width specifications for different screens, devices, and orientations.
For some measurements, the values remain the same even if a device is rotated. For that reason the smallest width in either orientation is the defining value.

• 16dp when the smallest width of the device is <600
• Desktop breakpoints are 16dp below the listed values to accommodate variations in browser chrome.

【翻譯】
這些斷點(diǎn)描述了不同屏幕查近，設(shè)備和方向的列和寬度規(guī)格。
對(duì)于某些測(cè)量挤忙，即使設(shè)備旋轉(zhuǎn)霜威，值也保持不變。 因此册烈，任一方向上的最小寬度是定義值戈泼。
16dp，當(dāng)設(shè)備的最小寬度<600
桌面斷點(diǎn)比所列值低16dp赏僧，以適應(yīng)瀏覽器chrome的變化大猛。

Grid - 網(wǎng)格

Material design’s responsive UI is based on a 12-column grid layout. This grid creates visual consistency between layouts, while allowing flexibility across a wide variety of designs. The number of grid columns varies based on the breakpoint system.

【翻譯】
材質(zhì)設(shè)計(jì)的響應(yīng)式UI是基于12列網(wǎng)格布局。這種網(wǎng)格在布局之間創(chuàng)建視覺一致性淀零，同時(shí)允許在各種設(shè)計(jì)之間的靈活性挽绩。網(wǎng)格列的數(shù)量因斷點(diǎn)系統(tǒng)而異。

This animation shows how surfaces and panels can align to influence the 12-column grid.

【翻譯】
此動(dòng)畫顯示表面和面板如何對(duì)齊以影響12列網(wǎng)格驾中。

Margins and Gutters - 邊距與間隔
The responsive grid focuses on consistent margin and gutter widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Margins and gutters can be 8, 16, 24, or 40dp wide.
Margins and gutters don’t need to be equal. For example, it’s acceptable to use 40dp margins and 24dp gutters in the same layout.

【翻譯】
適應(yīng)性欄柵指的是具有恒定的外邊距和間隔寬度琼牧，而不是列寬度。 Material design 中的外邊距和列符合某一 8 dp 的方形基線欄柵哀卫。外邊距和間隔可以是 8,16,24 或 40 dp 寬巨坊。
外邊距與間隔沒必要相等。例如此改，在同一個(gè)布局中使用 40 dp 的外邊距和 24 dp 的間隔是完全可取的趾撵。

This animation shows interactions of the following margin and gutter width variations:

8dp margins and gutters
16dp margins and gutters
24dp margins and gutters
40dp margins and gutters
40dp margins and 24dp gutters

【翻譯】
這個(gè)動(dòng)畫顯示了下面這些寬度的外邊距和間隔的不同搭配：
8 dp 外邊距和間隔
16 dp 外邊距和間隔
24 dp 外邊距和間隔
40 dp 外邊距和間隔
40 dp 外邊距和 24 dp 間隔

Full-width vs Centered - 完全寬度欄柵與居中欄柵對(duì)比
Full-width grids use fluid columns and breakpoints to determine when a layout needs to change.
Centered grids use fixed columns and reflow the layout when all columns (plus a defined margin) no longer fit on screen.

【翻譯】
完全寬度欄柵使用流體列以及斷點(diǎn)來決定一個(gè)布局是否需要變化。
居中欄柵使用固定列共啃，當(dāng)所有列（加上一個(gè)固定的外邊距）不再適應(yīng)屏幕占调，將會(huì)重繪布局。

Full-width grids
Centered grids

【翻譯】
完全寬度欄柵
居中欄柵

Panel Influence on the Grid - 面板對(duì)欄柵的影響
As defined in Navigation patterns, the side nav may be permanent, persistent, or temporary. These behaviors apply to any panel, not just a side nav.

【翻譯】
如導(dǎo)航模式中定義的移剪，側(cè)邊導(dǎo)航可能是永久究珊、持續(xù)或者暫時(shí)的。這些行為適用于任何面板纵苛，不僅僅是側(cè)邊導(dǎo)航剿涮。

Permanent - 永久性
A permanent panel exists outside of the responsive grid. The panel appears at a defined breakpoint (when the screen can accommodate the panel) and squeezes content. There are no controls to show/hide the panel.

【翻譯】
一個(gè)永久的面板存在于自適應(yīng)欄柵的外面言津。面板以一個(gè)固定的斷點(diǎn)顯示（當(dāng)屏幕可以容納面板）并且排布內(nèi)容。不存在顯示取试、隱藏面板的控制悬槽。

The effects of a permanent panel on the responsive grid

【翻譯】
一個(gè)永久面板對(duì)于自適應(yīng)欄柵的影響。

Side panel effects on the grid - 側(cè)邊面板對(duì)欄柵的影響
This animation happens in two phases:
A persistent side panel appears, squeezing both content and the grid. Content is accessible while the panel remains visible. The panel hides upon toggling.
A temporary side panel appears, pushing grid content off-screen. Touching either outside the panel, or an item inside the panel, hides the panel.

【翻譯】
這個(gè)動(dòng)畫有兩個(gè)階段：
一個(gè)永久側(cè)邊面板出現(xiàn)瞬浓，擠壓內(nèi)容和欄柵初婆。當(dāng)面板保持可視時(shí)，內(nèi)容是可獲取的猿棉。切換時(shí)面板隱藏磅叛。
一個(gè)臨時(shí)側(cè)邊面板出現(xiàn)，加欄柵內(nèi)容推出屏幕萨赁。點(diǎn)擊面板外面弊琴，或者面板內(nèi)的一個(gè)條目，隱藏面板位迂。

The effects of a persistent panel on the responsive grid

【翻譯】
一個(gè)持續(xù)面板對(duì)自適應(yīng)欄柵的影響访雪。

Temporary overlay - 臨時(shí)覆蓋
A temporary panel does not affect the grid or content when off-screen. When toggled to be visible, it can be hidden again by touching anywhere outside the panel or an item inside the panel.

【翻譯】
臨時(shí)面板在不顯示時(shí)，不會(huì)影響欄柵和內(nèi)容掂林。當(dāng)被切換到可視時(shí)臣缀，可以通過點(diǎn)擊面板之外的任何地方或者面板內(nèi)的一個(gè)條目來隱藏面板。

The effects of a temporary panel on the responsive grid

【翻譯】
臨時(shí)面板對(duì)自適應(yīng)欄柵的影響泻帮。

Surface behaviors - 表現(xiàn)行為

When a screen size changes, the UI adapts using the following surface-specific behaviors.

【翻譯】
當(dāng)屏幕尺寸變化時(shí)精置，UI 采用下面指定的表面行為來適應(yīng)。

Visibility

【翻譯】
可見性

Width

【翻譯】
寬度

Descriptors

【翻譯】
描述

Patterns - 模式

As screen space increases, the following responsive patterns may be applied:

【翻譯】
當(dāng)更多的屏幕空間可用時(shí)锣杂，下面的模式可以被應(yīng)用脂倦。

Reveal - 展現(xiàn)
UI hidden by smaller screens may be revealed with increased available space.

【翻譯】
較小屏幕隱藏的UI可能會(huì)隨著可用空間的增加而顯示。

Elements, such as a side nav, may become visible.

【翻譯】
例如一個(gè)側(cè)邊導(dǎo)航元素可以變得可視元莫。

A simple UI may reveal more powerful or complex options.

【翻譯】
一個(gè)簡(jiǎn)單的UI可能會(huì)顯示更強(qiáng)大或復(fù)雜的選項(xiàng)赖阻。

Content on a small screen that only appears after tapping an element may be revealed by default when more space is available.

【翻譯】
在較小屏幕上的內(nèi)容只有在點(diǎn)擊元素后才會(huì)出現(xiàn)，默認(rèn)情況下會(huì)顯示更多空間踱蠢。

Transform - 轉(zhuǎn)換
A UI element may transform from one format to another.

【翻譯】
UI 可以從一種形式轉(zhuǎn)換為另一種火欧。

Side navigation may transform into tabs.

【翻譯】
側(cè)邊導(dǎo)航可能會(huì)轉(zhuǎn)換為標(biāo)簽。

A list may transform into a grid list.

【翻譯】
列表可以轉(zhuǎn)換為網(wǎng)格列表茎截。

Menu items may transform into icons in a toolbar.

【翻譯】
菜單項(xiàng)可以轉(zhuǎn)換為工具欄中的圖標(biāo)苇侵。

Divide - 分隔
A layered UI may be divided into newly available space.

【翻譯】
分隔之前被放置于新建空間的 UI。

Side navigation, list content, and detailed content divide to fill a single view.

【翻譯】
側(cè)邊導(dǎo)航企锌，列表內(nèi)容和詳細(xì)內(nèi)容劃分以填充單個(gè)視圖榆浓。

A left panel, list content, and a right panel divide within a single view as space increases.

【翻譯】
隨著空間增加，左面板撕攒，列表內(nèi)容和右面板在單個(gè)視圖內(nèi)分割陡鹃。

Tabbed sibling content is divided within the same view.

【翻譯】
標(biāo)簽的同級(jí)內(nèi)容劃分在同一視圖中烘浦。

Reflow - 重繪
A UI may reflow into available space.

【翻譯】
在允許的空間中重繪 UI。

Elements from a single-column format may reflow to fill the content area in various combinations.

【翻譯】
通過邊上元素的多樣結(jié)合杉适，元素可以從單列形式重繪為充滿內(nèi)容空間谎倔。

Horizontal tabs may reflow into a vertical list.

【翻譯】
水平制表符可以回流到垂直列表中柳击。

Elements may reflow within a component based on a new screen ratio or device orientation.

【翻譯】
元素可以基于新的屏幕比率或設(shè)備取向在組件內(nèi)回流猿推。

Expand - 擴(kuò)展
The UI may expand across more space.

【翻譯】
增長(zhǎng) UI 以占據(jù)更多的空間。

Content cards may expand to fill the new space.

【翻譯】
內(nèi)容卡可以擴(kuò)展以填充新空間捌肴。

Dialogs may expand proportionally with content or in specific increments.

【翻譯】
對(duì)話框可以與內(nèi)容或特定增量成比例地?cái)U(kuò)展蹬叭。

Position - 位置
The position of UI components may change to more appropriate locations.

【翻譯】
UI組件的位置可以改變到更合適的位置。

A bottom sheet on a small screen may reposition itself as a menu.

【翻譯】
小屏幕上的底部薄片可能會(huì)將其自身重新定位為菜單状知。

A floating action button (FAB) may move to a more visible location relative to other UI elements.

【翻譯】
浮動(dòng)動(dòng)作按鈕（FAB）可以相對(duì)于其他UI元素移動(dòng)到更可見的位置秽五。