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

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

頁面制作

在Material Design里，每一個像素點都是由應(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]，因此他們通常是彼此獨立移動。

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)在左邊，而適用于當前情境的操作呈現(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)容。當頁面工具欄的下方滾動時，工具欄卡在頁面的入口點，阻止該頁面完全穿過另一端。

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="" />

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

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

工具欄有一個標準的高度，但也可以更高。當更高的時候，操作鍵可以放在工具欄的最頂端或最低端。

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

工具欄在被壓住時可以動態(tài)改變其高度。當改變尺寸的時候，他們會在最大和最?。藴剩┑母叨戎g調(diào)整（界定閾值）。

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

浮動操作

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

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

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)時，可以跨越這個縫合線。

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

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

自適應(yīng)準則

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

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

遵循人的習(xí)慣。
更大的屏幕 ≠ 更大的認知能力。
線條長度應(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 坐標空間里去考慮元素的優(yōu)先級是更有效的，而不只是依據(jù)絕對的，固定的位置。

一個概念模型

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

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

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

多容器允許多個 app 被同時看到，例如，在多種瀏覽器標簽里。

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

在一個特定的 app 里，根據(jù) z 軸主要和次要的層階[step]，很多元素都是相對放置的。例如，一個按鈕的聚焦狀態(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)對話框，存在于一個單獨的系統(tǒng)空間里，在所有 app 容器的上方和下方。

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

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

布局注意事項

深度不僅僅是裝飾。

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

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

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

陰影

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

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