Responsive UI - 響應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.

【翻譯】
材料設計中的響應布局適應任何可能的屏幕尺寸。 這個UI指南包括一個靈活的網格，確保跨布局的一致性，斷點細節關于內容如何在不同的屏幕上回流，以及一個應用程序如何從小到大的屏幕擴展的描述。

Breakpoints - 斷點

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

【翻譯】
為了獲得最佳的用戶體驗，材料設計用戶界面應該適應以下斷點寬度的布局：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.布局中的摘要和詳細信息視圖內容
600dp以下的布局可以用單級內容層次結構（總結或詳細內容，但不是兩者）填充屏幕。
超過600dp的布局可以在屏幕上放置兩級內容層次（包括概要和細節內容）。
2.最大屏幕寬度
布局超過1600dp寬可以讓布局增長，直到它達到最大寬度。 此時，網格可以執行以下操作之一：
成為中心與增加的邊距對齊
保持左對齊，右邊距增長
繼續增長，同時顯示更多內容

Breakpoint system - 斷點系統
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.

【翻譯】
這些斷點描述了不同屏幕，設備和方向的列和寬度規格。
對于某些測量，即使設備旋轉，值也保持不變。 因此，任一方向上的最小寬度是定義值。
16dp，當設備的最小寬度<600
桌面斷點比所列值低16dp，以適應瀏覽器chrome的變化。

Grid - 網格

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.

【翻譯】
材質設計的響應式UI是基于12列網格布局。這種網格在布局之間創建視覺一致性，同時允許在各種設計之間的靈活性。網格列的數量因斷點系統而異。

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

【翻譯】
此動畫顯示表面和面板如何對齊以影響12列網格。

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.

【翻譯】
適應性欄柵指的是具有恒定的外邊距和間隔寬度，而不是列寬度。 Material design 中的外邊距和列符合某一 8 dp 的方形基線欄柵。外邊距和間隔可以是 8,16,24 或 40 dp 寬。
外邊距與間隔沒必要相等。例如，在同一個布局中使用 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

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

Full-width vs Centered - 完全寬度欄柵與居中欄柵對比
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.

【翻譯】
完全寬度欄柵使用流體列以及斷點來決定一個布局是否需要變化。
居中欄柵使用固定列，當所有列（加上一個固定的外邊距）不再適應屏幕，將會重繪布局。

Full-width grids
Centered grids

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

Panel Influence on the Grid - 面板對欄柵的影響
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.

【翻譯】
如導航模式中定義的，側邊導航可能是永久、持續或者暫時的。這些行為適用于任何面板，不僅僅是側邊導航。

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.

【翻譯】
一個永久的面板存在于自適應欄柵的外面。面板以一個固定的斷點顯示（當屏幕可以容納面板）并且排布內容。不存在顯示、隱藏面板的控制。

The effects of a permanent panel on the responsive grid

【翻譯】
一個永久面板對于自適應欄柵的影響。

Side panel effects on the grid - 側邊面板對欄柵的影響
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.

【翻譯】
這個動畫有兩個階段：
一個永久側邊面板出現，擠壓內容和欄柵。當面板保持可視時，內容是可獲取的。切換時面板隱藏。
一個臨時側邊面板出現，加欄柵內容推出屏幕。點擊面板外面，或者面板內的一個條目，隱藏面板。

The effects of a persistent panel on the responsive grid

【翻譯】
一個持續面板對自適應欄柵的影響。

Temporary overlay - 臨時覆蓋
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.

【翻譯】
臨時面板在不顯示時，不會影響欄柵和內容。當被切換到可視時，可以通過點擊面板之外的任何地方或者面板內的一個條目來隱藏面板。

The effects of a temporary panel on the responsive grid

【翻譯】
臨時面板對自適應欄柵的影響。

Surface behaviors - 表現行為

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

【翻譯】
當屏幕尺寸變化時，UI 采用下面指定的表面行為來適應。

Visibility

【翻譯】
可見性

Width

【翻譯】
寬度

Descriptors

【翻譯】
描述

Patterns - 模式

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

【翻譯】
當更多的屏幕空間可用時，下面的模式可以被應用。

Reveal - 展現
UI hidden by smaller screens may be revealed with increased available space.

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

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

【翻譯】
例如一個側邊導航元素可以變得可視。

A simple UI may reveal more powerful or complex options.

【翻譯】
一個簡單的UI可能會顯示更強大或復雜的選項。

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

【翻譯】
在較小屏幕上的內容只有在點擊元素后才會出現，默認情況下會顯示更多空間。

Transform - 轉換
A UI element may transform from one format to another.

【翻譯】
UI 可以從一種形式轉換為另一種。

Side navigation may transform into tabs.

【翻譯】
側邊導航可能會轉換為標簽。

A list may transform into a grid list.

【翻譯】
列表可以轉換為網格列表。

Menu items may transform into icons in a toolbar.

【翻譯】
菜單項可以轉換為工具欄中的圖標。

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.

【翻譯】
側邊導航，列表內容和詳細內容劃分以填充單個視圖。

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

【翻譯】
隨著空間增加，左面板，列表內容和右面板在單個視圖內分割。

Tabbed sibling content is divided within the same view.

【翻譯】
標簽的同級內容劃分在同一視圖中。

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.

【翻譯】
通過邊上元素的多樣結合，元素可以從單列形式重繪為充滿內容空間。

Horizontal tabs may reflow into a vertical list.

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

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

【翻譯】
元素可以基于新的屏幕比率或設備取向在組件內回流。

Expand - 擴展
The UI may expand across more space.

【翻譯】
增長 UI 以占據更多的空間。

Content cards may expand to fill the new space.

【翻譯】
內容卡可以擴展以填充新空間。

Dialogs may expand proportionally with content or in specific increments.

【翻譯】
對話框可以與內容或特定增量成比例地擴展。

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.

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

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

【翻譯】
浮動動作按鈕（FAB）可以相對于其他UI元素移動到更可見的位置。