布局指南也通過使用相同的視覺元素，結(jié)構(gòu)網(wǎng)格，和通用的行距規(guī)則，讓 app 在不同平臺與屏幕尺寸上擁有一致的外觀和感覺。結(jié)構(gòu)和視覺上的一致創(chuàng)造了一個可識別的跨平臺產(chǎn)品的用戶環(huán)境，它給用戶提供高度的熟悉感和舒適性，讓產(chǎn)品更便于使用。

在深入的研究布局細(xì)節(jié)之前，再一次細(xì)想什么是Material Design：一種基于紙頁質(zhì)感的設(shè)計(jì)。了解紙頁的行為和如何制作是很重要的。

頁面制作

在Material Design里，每一個像素點(diǎn)都是由應(yīng)用程序在一個頁面上畫出來的。頁面有一個平滑背景顏色并可以作用于各種目的。一個典型的布局就是由多層頁面組成的。

系統(tǒng)可能會為很多元件繪制像素，比如狀態(tài)或者系統(tǒng)欄，但這些都不屬于頁面?？梢赃@樣想象那些系統(tǒng)元件，他們是被貼在顯示器玻璃背面的，另外存在于一個在app內(nèi)容下方的層級。

布置頁面

兩個頁面有一條共用的，長度相同的邊就會產(chǎn)生縫合線。有縫合線的兩張紙通常會一起移動。

http://wiki.jikexueyuan.com/project/material-design/images/Layout-principles-papercraft-papercraft-01a_large_mdpi.png" alt="" />

兩張 Z 軸位置不同的紙片在重疊會產(chǎn)生層階[step]，因此他們通常是彼此獨(dú)立移動。

http://wiki.jikexueyuan.com/project/material-design/images/Layout-principles-papercraft-papercraft-03a_large_mdpi.png" alt="" />

頁面工具欄

工具欄是一個主要展示操作的條狀頁片。這些操作通常聚集在工具欄的左邊緣和右邊緣。與導(dǎo)航相關(guān)的操作（一個抽屜菜單[ drawer menu ] ，一個向上的箭頭[ up arrow ]）呈現(xiàn)在左邊，而適用于當(dāng)前情境的操作呈現(xiàn)在右邊。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-papercraft-papercraft-03_MISSINGASSET_large_mdpi.png" alt="" />

在工具欄左邊和右邊的操作不會被另一個頁面分離。然而，工具欄的寬度被限制到小于頁片的寬度。

http://wiki.jikexueyuan.com/project/material-design/images/papercraft-04_large_mdpi.png" alt="" />

??正確

限制寬度要小于整個頁片的寬度。

http://wiki.jikexueyuan.com/project/material-design/images/papercraft-04_dont_large_mdpi.png" alt="" />

??錯誤

絕對不允許一個頁面被另一個頁面隔開。

工具欄經(jīng)常的在別的頁面上形成一個疊層用來顯示與工具欄操作相關(guān)的內(nèi)容。當(dāng)頁面工具欄的下方滾動時(shí)，工具欄卡在頁面的入口點(diǎn)，阻止該頁面完全穿過另一端。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-papercraft-papercraft-05a_large_mdpi.png" alt="" />

工具欄也可以與另一個頁面由開始的縫合狀態(tài)演變成疊起來之后形成的層階[step]。這種疊加形式上的變形稱為瀑布。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-papercraft-papercraft-06a_large_mdpi.png" alt="" />

同樣的，這個工具欄也可以保持它本身的縫合線，就像兩個頁面一起移動一樣推離出屏幕。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-papercraft-papercraft-07a_large_mdpi.png" alt="" />

最后，另一個頁面在移動時(shí)也可以覆蓋這個工具欄。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-papercraft-papercraft-08a_large_mdpi.png" alt="" />

工具欄有一個標(biāo)準(zhǔn)的高度，但也可以更高。當(dāng)更高的時(shí)候，操作鍵可以放在工具欄的最頂端或最低端。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-papercraft-papercraft-09a_large_mdpi.png" alt="" />

工具欄在被壓住時(shí)可以動態(tài)改變其高度。當(dāng)改變尺寸的時(shí)候，他們會在最大和最?。?biāo)準(zhǔn)）的高度之間調(diào)整（界定閾值）。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-papercraft-papercraft-10a_large_mdpi.png" alt="" />

浮動操作

浮動操作是一個與工具欄分離的圓形頁片。

浮動操作代表在當(dāng)前情境下的獨(dú)立提升操作。當(dāng)與產(chǎn)生這個層階[step]的頁面內(nèi)容相關(guān)聯(lián)時(shí)，它可以跨越這個層階。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-papercraft-papercraft-11a_large_mdpi.png" alt="" />

浮動操作在與產(chǎn)生這個疊合線的兩個頁面內(nèi)容相關(guān)聯(lián)時(shí)，可以跨越這個縫合線。

永遠(yuǎn)不要僅僅為了給操作提供一個支撐點(diǎn)而引入一條裝飾性的縫合線。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-papercraft-papercraft-12a_large_mdpi.png" alt="" />

自適應(yīng)準(zhǔn)則

當(dāng)設(shè)計(jì)跨設(shè)備布局的時(shí)候，我們?yōu)榫W(wǎng)格行為結(jié)合了固定的，粘性的和流暢的策略。

這里有一些簡單的指導(dǎo)：

遵循人的習(xí)慣。
更大的屏幕 ≠ 更大的認(rèn)知能力。
線條長度應(yīng)該是適宜的。
考慮到角距離。
把家具從墻上取下來：允許空白，不要把局限于固定的工具欄。

在多重層次等級結(jié)構(gòu)中使用策略，例如屏幕層級和卡片層級。

桌面模版演示了應(yīng)用了這些網(wǎng)格規(guī)則的幾個自適應(yīng)界面。

Desktop Template - 100 MB(.ai)

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-responsive-responsive-01_large_mdpi.png" alt="" />

維度

在 dps 中深度是可被測量的，就像 x 軸和 y 軸。然而，在 z 坐標(biāo)空間里去考慮元素的優(yōu)先級是更有效的，而不只是依據(jù)絕對的，固定的位置。

一個概念模型

在一個高層次級別上，每個 app 都可以被認(rèn)為是放置在一個獨(dú)特的空間或容器。

這樣就意味著一個應(yīng)用軟件里的頁面不能在 Z 軸空間插入另外一個頁面。

這也意味著操作和元件是獨(dú)立在 app 中:例如,在一個軟件里讓一個列表滑動消失不會導(dǎo)致那個列表穿過另一個不相關(guān) app 的空間。

多容器允許多個 app 被同時(shí)看到，例如，在多種瀏覽器標(biāo)簽里。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-dimensionality-dimensionality-01_large_mdpi.png" alt="" />

在一個特定的 app 里，根據(jù) z 軸主要和次要的層階[step]，很多元素都是相對放置的。例如，一個按鈕的聚焦?fàn)顟B(tài)是次要的層階，而它的按下狀態(tài)是一個主要的層階。

其他元素在 app 的 Z 軸里有固定的優(yōu)先級，意味著不管那些元素相對于 Z 軸的位置,他們總是位于其他元素上面或者下面。比如，浮動操作按鈕總是在內(nèi)容和工具欄之上，不管這個 app 可能會用到多少個頁面。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-dimensionality-dimensionality-02_large_mdpi.png" alt="" />

系統(tǒng)元件，比如狀態(tài)欄和系統(tǒng)對話框，存在于一個單獨(dú)的系統(tǒng)空間里，在所有 app 容器的上方和下方。

取決于情境，系統(tǒng)元素有可能不出現(xiàn)在某一個 app 里（比如在熄燈模式中），但當(dāng)系統(tǒng)元素存在時(shí)，他們在空間上具有相對的優(yōu)先權(quán)。這可確保，比如，一個系統(tǒng)對話框總出現(xiàn)在當(dāng)前 app 的上面。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-dimensionality-dimensionality-03_large_mdpi.png" alt="" />

布局注意事項(xiàng)

深度不僅僅是裝飾。

優(yōu)先考慮元素的 z 軸空間，不是絕對的位置。

app 中的深度應(yīng)該表達(dá)層級和其重要性，并且?guī)椭脩絷P(guān)注手頭的任務(wù)。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-dimensionality-dimensionality-04_large_mdpi.png" alt="" />

陰影

陰影有兩部分組成：頂端表達(dá)深度的陰影和底端表達(dá)邊界的陰影。

http://wiki.jikexueyuan.com/project/material-design/images/layout-principles-dimensionality-shadows-01_large_mdpi.png" alt="" />