Material design 中的對象與現(xiàn)實生活中的對象具有相似的性質。在現(xiàn)實生活中，不同對象可以被堆積或粘貼起來，但是不能彼此交叉。對象自身塑造了自己的陰影并返回自己的光影。

依據(jù)這些性質所構造出來的空間模型對于用戶來說是非常熟悉的，這一模型也可以被長期應用于移動應用當中。支撐這一空間模型的正是“高度”（Elevation）和“光影”（Shadows）這兩個概念。

高度（安卓）
陰影
元素關系

高度（安卓）

高度是在 Z 軸上兩個不同平面之間的一種相對深度或距離。

詳述：

• “高度”的度量單位與 XY 軸的度量單位相同，主要是 DP。由于所有 Material 元素都具有 1 單位 DP 的厚度，所以“高度”度量的是從一個平面頂部到另一個平面頂部的距離。
• 一個子對象的高度與其父對象的高度相關。

這里是一些與安卓應用相關的圖表和數(shù)據(jù)。

陰影影響
為自定義元素定義“陰影”

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

兩個對象間的多種高度度量

靜止高度

所有 Material 對象除去大小之外，還有一個“靜止高度”，或者稱“默認高度”，它是不會變化的。當一個對象的高度產生變化時，它將會盡快恢復到自身的靜止高度。

組件高度

• 某一元素類型的靜止高度在移動應用中是一個常量。（比如，F(xiàn)AB 高度不會在某一個應用中是 6 dp 而在另一個應用中是 16 dp）

• 元素在某一平臺中可能會存在多種靜止高度，這取決于環(huán)境的深度。（比如，TV 相比于移動端和桌面來說就具有更深的層次）

感應高度與動態(tài)高度偏移

一些元素類型擁有感應高度，也就是說它們會根據(jù)用戶的輸入（比如常規(guī)的、關注的和壓制的）或系統(tǒng)事件來改變高度。這些高度的變化會通過動態(tài)高度偏移而不斷生成。

動態(tài)高度偏移是某一元素移動的目標高度，它與該元素的靜止狀態(tài)有關。可以確定的是高度的變化在事件和元素類型中是持久發(fā)生的。比如說，所有通過按壓來提升的元素相對于其靜態(tài)高度來說都具有相似的高度變化。

一旦輸入事件完成或被取消，那么元素將會恢復到它的靜止高度上。

避免高度沖突

處于感應高度的元素當它在靜止高度與動態(tài)高度偏移之間移動的時候可能會遇到其他的元素。由于 Material 不能相互交叉，沒有任何一種方式能夠讓元素之間產生沖突，無論是基于均元素基礎（per-component basis）還是通過使用完整應用布局。

在某一個元素水平上，元素可以在它們產生沖突之前提前移動或被移動。比如說，一個“浮動動作按鈕”（FAB）可以在用戶選擇一張卡片之前消失或移出屏幕，或者它也可以在某一個 “snack bar” 出現(xiàn)時移動。

在布局水平上，你需要通過設計你的應用布局來將產生沖突的機會降到最低水平。比如說，可以通過將 FAB 置于某個卡片流的一端來避免當用戶嘗試獲取某個卡片時所產生的沖突。

http://wiki.jikexueyuan.com/project/material-design/images/2_0_1.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/2_0_2.png" alt="" />

元素高度比較

下面的圖表對比了多種元素的靜止高度和動態(tài)高度偏移。

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

在這一圖表中，只有高度的尺寸和元素布局是精確的。其他尺寸和整體的元素布局只是為了說明而列出的。

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

一個包含卡片和FAB應用布局的實例與它在Z軸上元素高度的橫截面圖表。

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

一個包含開放導航抽屜的應用布局實例與它在Z軸上元素高度的橫截面圖表。

陰影

“陰影”提供了對象深度和方向性移動的重要視覺線索。它們是唯一一種標示不同平面之間分離程度的視覺線索。某一對象的“高度”決定了其具體“陰影”的表現(xiàn)形式。

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

否。一旦沒有了陰影，沒有什么可以標示浮動動作按鈕是從背景層分離出來的。

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

否。卷曲的陰影說明浮動動作按鈕與“藍層”（blue sheet）是兩個分離開來的元素。然而，由于它們的陰影非常的相似以至于會被誤認為它們在同一高度上。

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

是。更柔和、更大的陰影說明浮動動作按鈕相比于擁有更卷曲陰影的“藍層”（blue sheet）處于更高的高度之上。

在運動中，陰影提供了關于某個對象移動方向以及不同平面之間距離是否正在增加或減少的有用線索。

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

否。如果沒有一個陰影來說明高度，那么就不能明確一個方形到底是它的自身尺寸在增加還是它的高度在增加。

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

是。當某一個對象的高度增加時其陰影會變得更柔和、更大，當其高度減小時，陰影會變得更卷曲。

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

是。在這一實例中，連貫的陰影幫助用戶明白某一個對象看起來好像是它的高度在增加其實是它的形狀在改變。

元素參考陰影

下面的元素陰影應被用于標準參考。如果在說明中涉及任何關于下面的參考陰影和元素陰影的不同情況出現(xiàn)，那么都歸于參考陰影。

應用條

4dp

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

浮動按鈕

靜態(tài)：2dp

敲擊狀態(tài)：8dp

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

浮動動作按鈕（FAB）

靜態(tài)：6dp

敲擊狀態(tài)：12dp

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

卡片

靜態(tài)：2dp

選中狀態(tài)：8dp

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

菜單和子菜單

菜單：8dp

子菜單：9dp（為子菜單增加 1dp）

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

對話框

24dp

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

導航抽屜和右抽屜

16dp

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

底部單頁

16dp

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

刷新按鈕

3dp

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

快速查詢/搜索條

靜止狀態(tài)：2dp

滾動狀態(tài)：3dp

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

Snackbar

6dp

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

切換按鈕

1dp

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

對象關系

對象層次

你怎樣去組織在某一應用中的對象或對象集合取決于它們怎樣依據(jù)其他對象來移動。對象可以獨立自主地移動或在受到比它更高層次對象限制的條件下移動。

所有對象都是以“父-子”關系描述的層級體系的一部分?！白印痹卦谶@一關系體系中代表它們“父”元素的下級元素。對象可以是這一系統(tǒng)的“子”元素或其他對象的“子”元素。

“父-子”元素說明：

• 每一個對象只有一個“父”元素。
• 每一個對象可能會有任意數(shù)量的“子”元素。
• “子”元素繼承來自“父”元素的可以轉移的屬性，比如位置、循環(huán)、刻度和高度。
• “兄弟”元素是指與某一對象處在同一層級的對象。

例外

項目以根元素為父元素，比如主 UI 元素，它們相比于其他對象來說會自主移動。比如說，浮動動作按鈕不會與內容一起轉動。其他元素包括：

• 一個應用的邊導航抽屜
• 動作條
• 對話

交互

某個對象與其他對象交互的方式由它們在“父-子”層次中所處位置決定。

比如：

• “子”元素與其“父”元素在Z軸上的分離距離最近；其他對象不能插入父子元素之間。
• 在一個滾動的卡片集合中，所有卡片之間都是同層次的“兄弟”元素，因此它們就像坐在同一馬車上的兩個對象一樣共同移動。它們都是控制它們移動的卡片集合對象的子元素。

高度

你會如何確定某些對象的高度（即它們在 Z 空間的位置）取決于你想描述的內容層次以及某一個對象是否需要相對于其他對象自主移動。

隨著父表的移動，升高的按鈕（它的子元素）會伴隨著它移出屏幕。

隨著卡片集合卷出了屏幕，它的子卡片也會隨之卷出屏幕。浮動動作按鈕保留在某一地點因為它的父元素沒有被卷動。