自適應(yīng) UI

Material Design 中的響應(yīng)式布局適用于任何尺寸的屏幕。自適應(yīng) UI 手冊(cè)包含：保證布局一致性的靈活網(wǎng)格、內(nèi)容如何在不同屏幕上重繪的斷點(diǎn)細(xì)節(jié)以及關(guān)于一個(gè)應(yīng)用如何從小的屏幕縮放到超大屏幕的描述。

斷點(diǎn)

為了最優(yōu)的用戶體驗(yàn)，Material 用戶界面應(yīng)該適應(yīng)如下斷點(diǎn)寬度的布局：480、600、840、960、1280、1440 以及 1600 dp。

http://wiki.jikexueyuan.com/project/material-design/images/5_1.png" alt="" />

1.布局中的總結(jié)和細(xì)節(jié)顯示內(nèi)容

• 600 dp 以下的布局可以通過單個(gè)級(jí)別的內(nèi)容層次充滿屏幕（要么總結(jié)內(nèi)容，要么細(xì)節(jié)內(nèi)容，但不是全部）。
• 超過 600 dp 寬度的布局可以放置兩個(gè)等級(jí)的內(nèi)容層次（總結(jié)和細(xì)節(jié)內(nèi)容兩者）。

2.最大屏幕寬度

超過 1600 dp 寬度的布局可以變大直到最大寬度。目前，網(wǎng)格可以實(shí)現(xiàn)下列事情中的一種：

• 邊距增大時(shí)保持居中對(duì)齊
• 右邊距增加時(shí)，居左對(duì)齊。
• 顯示額外內(nèi)容時(shí)，保持增長(zhǎng)。

斷點(diǎn)系統(tǒng)

這些斷點(diǎn)為不同的屏幕、設(shè)備以及方向描述了列和寬度規(guī)格。

對(duì)于某些尺寸，即使設(shè)備旋轉(zhuǎn)了值也是不變的。出于這個(gè)原因，無論哪個(gè)方向的最小寬度都是定值。

*當(dāng)設(shè)備屏幕小于 600 時(shí)，最小寬度為 16 dp

**低于所列值時(shí)，桌面斷點(diǎn)設(shè)為 16 dp 來適應(yīng)谷歌瀏覽器中的變化。

http://wiki.jikexueyuan.com/project/material-design/images/5_2.png" alt="" />

欄柵

Material design 的自適應(yīng) UI 是基于一個(gè) 12 列的欄柵布局。這個(gè)欄柵提供了不同布局之間的視覺一致性，而又保持了多樣化設(shè)計(jì)的靈活性。欄柵列的數(shù)量基于系統(tǒng)斷點(diǎn)而變化。

這個(gè)動(dòng)畫效果展示了不同平面和面板是如何排列在一起從而影響上述 12 列欄柵的。

外邊距與間隔

適應(yīng)性欄柵指的是具有恒定的外邊距和間隔寬度，而不是列寬度。 Material design 中的外邊距和列符合某一 8 dp 的方形基線欄柵。外邊距和間隔可以是 8,16,24 或 40 dp 寬。

外邊距與間隔沒必要相等。例如，在同一個(gè)布局中使用 40 dp 的外邊距和 24 dp 的間隔是完全可取的。

這個(gè)動(dòng)畫顯示了下面這些寬度的外邊距和間隔的不同搭配：

1. 8 dp 外邊距和間隔
2. 16 dp 外邊距和間隔
3. 24 dp 外邊距和間隔
4. 40 dp 外邊距和間隔
5. 40 dp 外邊距和 24 dp 間隔

完全寬度欄柵與居中欄柵對(duì)比

完全寬度欄柵使用流體列以及斷點(diǎn)來決定一個(gè)布局是否需要變化。

居中欄柵使用固定列，當(dāng)所有列（加上一個(gè)固定的外邊距）不再適應(yīng)屏幕，將會(huì)重繪布局。

1. 完全寬度欄柵
2. 居中欄柵

面板對(duì)欄柵的影響

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

永久性

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

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

側(cè)邊面板對(duì)欄柵的影響

這個(gè)動(dòng)畫有兩個(gè)階段：

1. 一個(gè)永久側(cè)邊面板出現(xiàn)，擠壓內(nèi)容和欄柵。當(dāng)面板保持可視時(shí)，內(nèi)容是可獲取的。切換時(shí)面板隱藏。
2. 一個(gè)臨時(shí)側(cè)邊面板出現(xiàn)，加欄柵內(nèi)容推出屏幕。點(diǎn)擊面板外面，或者面板內(nèi)的一個(gè)條目，隱藏面板。

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

臨時(shí)覆蓋

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

臨時(shí)面板對(duì)自適應(yīng)欄柵的影響。

表現(xiàn)行為

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

可見性
http://wiki.jikexueyuan.com/project/material-design/images/5_4.png" alt="" />

寬度
http://wiki.jikexueyuan.com/project/material-design/images/5_5.png" alt="" />

描述
http://wiki.jikexueyuan.com/project/material-design/images/5_6.png" alt="" />

模式

當(dāng)更多的屏幕空間可用時(shí)，下面的模式可以被應(yīng)用。

展現(xiàn)

展現(xiàn)隱藏的 UI。

http://wiki.jikexueyuan.com/project/material-design/images/5_7.png" alt="" />

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

轉(zhuǎn)換

UI 可以從一種形式轉(zhuǎn)換為另一種。

http://wiki.jikexueyuan.com/project/material-design/images/5_8.png" alt="" /> 側(cè)邊導(dǎo)航可以轉(zhuǎn)換為 tab。

分隔

分隔之前被放置于新建空間的 UI。

http://wiki.jikexueyuan.com/project/material-design/images/5_9.png" alt="" /> 空間允許的話，側(cè)邊導(dǎo)航、總結(jié)內(nèi)容以及細(xì)節(jié)內(nèi)容在同一個(gè)頁(yè)面中被分隔開。

重繪

在允許的空間中重繪 UI。

http://wiki.jikexueyuan.com/project/material-design/images/5_10.png" alt="" /> 通過邊上元素的多樣結(jié)合，元素可以從單列形式重繪為充滿內(nèi)容空間。

擴(kuò)展

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

http://wiki.jikexueyuan.com/project/material-design/images/5_11.png" alt="" /> 內(nèi)容卡片可以擴(kuò)展以占據(jù)更多的水平空間。