設(shè)計原則

Material design 采用了印刷設(shè)計中的一些基本工具，比如基準(zhǔn)網(wǎng)格線和結(jié)構(gòu)網(wǎng)格線。這種布局設(shè)計可以幫助視覺元素可以平滑伸縮，以達(dá)成跨平臺一致的視覺體驗，簡化開發(fā)流程，并最終幫助設(shè)計師制作適用于各種屏幕的應(yīng)用。

布局設(shè)計規(guī)范中，鼓勵設(shè)計師在跨平臺設(shè)計中使用使用相同的視覺元素、結(jié)構(gòu)網(wǎng)格和整體的邊距規(guī)則，在不同尺寸的屏幕上讓應(yīng)用有有一致的風(fēng)格和體驗。結(jié)構(gòu)和視覺風(fēng)格的一致，可以打造出跨平臺、一致的使用體驗，這些能夠給用戶提供一種熟悉感和安全感。

在探索布局細(xì)節(jié)之前，再次思考究竟什么是material design：一種基于卡片的設(shè)計。理解卡片的表現(xiàn)和制作的規(guī)則是非常重要的。

卡片藝術(shù)

在material design中，應(yīng)用頁面上的每個像素就像排列在輕薄的卡片上。卡片有著扁平的背景顏色，能夠被用做一系列的用途。一個典型的布局由多個卡片張片組成。

卡片可以容納像素和視覺元素（比如狀態(tài)欄（Phone端：譯者注）或者系統(tǒng)欄（Pad端：譯者注），它們并不屬于卡片。）。要讓用戶感覺視覺元素是印刷在卡片上的，而卡片是位于屏幕下方的。

卡片的排版

接縫，當(dāng)兩個卡片共用一個邊長時，便出現(xiàn)了接縫。兩個通過接縫組合在一起的卡片通常一起移動。

臺階式的層級

當(dāng)兩個卡片有著不同的Z-軸（x和y分別代表屏幕所在平面上的水平坐標(biāo)和垂直坐標(biāo)，而z軸則是垂直于屏幕

：譯者注）次序時，這兩個卡片便有了前后的層級。因此通，這兩個卡片彼此獨立的移動。

卡片 工具欄

工具欄是專注于當(dāng)前頁面功能操作的小卡片。 這些操作經(jīng)常被聚集起來放置在工具欄的左側(cè)和與右側(cè)。與導(dǎo)航（抽屜菜單或者是返回箭頭）相關(guān)的操作通常出現(xiàn)在左側(cè)，而那些應(yīng)用在當(dāng)前頁面內(nèi)容的操作放在在右側(cè)。

在工具欄左側(cè)和右側(cè)的操作所彈出式的卡片，永遠(yuǎn)不允許將原卡片割裂。然而，彈出的卡片，工具欄會限制它的寬度，不會長于整個卡片的寬度。

正確：

彈出的卡片，被整體的長度所限制。

不正確：

永遠(yuǎn)不允許彈出的卡片，將原卡片割裂。

工具欄隨著卡片的變化而頻繁的變化，，工具欄中呈現(xiàn)出來的內(nèi)容與卡片的內(nèi)容有關(guān)。當(dāng)卡片滾動到工具欄的下方時，卡片將會在某個點停止，防止卡片滑到另一側(cè)。（可滑動的卡片到了頂點是有限制的：譯者注）

工具欄也可以開始呈現(xiàn)出與第二個卡片接縫連接，但是拉起形成下一個動作。這種變異形式被稱為瀑布流。

另外，工具欄可以和縫隙一起，隨著兩個卡片的滑動而滑出屏幕。

最后，第二個卡片在滑動的過程中，可以覆蓋工具欄。

工具欄有標(biāo)準(zhǔn)的高度，但是也可以更高。當(dāng)工具欄變高，它上面的操作可以放在頂部，也可以放在底部。

工具欄一旦被固定，可以靈活地改變它的大小。在變化的時候，它快速（有閾值與回程）的在最大值和最小值（標(biāo)準(zhǔn)值）之間變化。   

懸浮按鈕

懸浮按鈕指的是和工具欄分開的圓形卡片。

懸浮按鈕代表著一些額外操作。如果與內(nèi)容相關(guān)的話，懸停按鈕可以跨越層級（有優(yōu)先權(quán)限：譯者注）。

懸浮操作如果與兩個卡片的內(nèi)容都相關(guān)的話，可以優(yōu)先于接縫。

永遠(yuǎn)不要僅為了給操作一個固定的點，而引入一個接縫。

響應(yīng)式設(shè)計原則

當(dāng)我們建立跨設(shè)備的布局設(shè)計時，我們需要考慮固定、液態(tài)布局等一些設(shè)計策略。

下面是些應(yīng)遵循的簡單原則：

1 遵守人的常識

2 更大的屏幕≠更大的認(rèn)知能力

3 線的長度應(yīng)該被容易理解

4 考慮邊角距離

5 遵循使用常識：允許空格，不要將工具欄固定。

在多層次的系統(tǒng)中使用這些策略，就像屏幕層級和卡片層級。

維度感

像素級的深度感可以通過X-Y軸體現(xiàn)。然而，通過Z軸體現(xiàn)界面的深度感，效果更佳。打造具有深度感的界面，而不應(yīng)該墨守成規(guī)，讓界面中的元素位置固定，這顯得很死板。

概念模型

從更高的層次上觀察，每個應(yīng)用其實是存在于不同空間和容器中的。

這就意味著，一個應(yīng)用中的卡片不會插入到另一個應(yīng)用中的卡片序列中，否則是Z軸空間的紊亂。

這也意味著，在一個應(yīng)用中，操作和選項是隔離存在的。舉例來說：在一個應(yīng)用中刪除一個列表不會在引起另一個應(yīng)用的變化。

而容器的存在，讓多個應(yīng)用可以同時存在于同一界面，例如瀏覽器中不同的標(biāo)簽頁。

在特定應(yīng)用內(nèi)，大多數(shù)元素會按照Z軸，排列出主要層級和次要層級。例如：一個按鈕的懸停狀態(tài)是次要層級，而其按壓狀態(tài)是主要層級。

在應(yīng)用內(nèi)其他元素在Z軸的排列有著固定的優(yōu)先級，這意味著它們總是出現(xiàn)在其他元素的上面或下面，無論這些項目'沿z軸的相對位置。例如，浮動動作按鈕總是出現(xiàn)內(nèi)容和工具欄的上面，無論這個應(yīng)用正在使用多少個卡片。

系統(tǒng)元素，比如狀態(tài)欄和系統(tǒng)對話框，存在于一個單獨的系統(tǒng)空間內(nèi)，高于或低于所有的應(yīng)用容器。

根據(jù)上文，系統(tǒng)元素可以不呈現(xiàn)在應(yīng)用中（比如夜間模式），但是如果存在系統(tǒng)空間元素，它們有更高的優(yōu)先級。例如，系統(tǒng)對話框，永遠(yuǎn)出現(xiàn)在當(dāng)前應(yīng)用的最上層。

布局考量

深度感不是為了裝飾而存在，而是為了功能

在布局時，需要審慎考慮元素在Z軸的優(yōu)先級，而不是它的絕對位置。

深入思考你的應(yīng)用，了解它的層次和各個元素重要性，幫助用戶將精力集中在完成任務(wù)中。

陰影

陰影包括兩層：??頂部陰影是為了打造深度感，底部陰影是為了提升清晰度。