Material Design中的對(duì)象在一定程度上和真實(shí)世界的對(duì)象很相似。
在物理世界中，物體可以彼此堆疊或固定，但不能穿過(guò)彼此。 對(duì)象也投射陰影和反射光。
Material Design反映了這些特征，形成了用戶(hù)熟悉的空間模型，并且可以在應(yīng)用中統(tǒng)一風(fēng)格。
高度
通過(guò)測(cè)量一個(gè)表面的前面到另一個(gè)表面的前面，元素的高度表示表面之間的距離和其陰影的深度。
靜止高度
所有Material元素都有靜止高度，雖然組件在應(yīng)用中具有一致的靜止高度，但是他們可能在不同的平臺(tái)或者設(shè)備上不一樣。
動(dòng)態(tài)高度
動(dòng)態(tài)高度偏移是組件相對(duì)于其靜止時(shí)的位置朝向的高度。
高度（Android）
高度是在z軸方向兩個(gè)Material的表面的深度差或者距離。
特點(diǎn)
在高度的測(cè)量時(shí)，單位是以與x、y軸相同的與密度無(wú)關(guān)的像素單位dp。因?yàn)镸aterial元素具有慎對(duì)（1px），所以從一個(gè)表面的頂部到另一個(gè)表面的頂部表示高度
子對(duì)向的高度是相對(duì)于父對(duì)象的。
靜止高度
所有Material對(duì)象，無(wú)論大小都有不變的靜止高度或者默認(rèn)高度，如果對(duì)象改變了高度，那他應(yīng)該盡快返回到靜止高度。
下表是各種元素的高度值
| 高度（dp） | 組件 |
|---|---|
| 24 | Dialog,Picker |
| 16 | Nav drawer,Right drawer,Modal bottom Sheet |
| 12 | Floating action buttion(FAB-pressed) |
| 9 | Sub menu (+1dp for each sub menu) |
| 8 | Bottom navigation bar,Menu,Card (when picked up),Raised button (pressed state) |
| 6 | Floating action button (FAB - resting elevation),Snackbar |
| 4 | App Bar |
| 3 | Refresh indicator,Quick entry / Search bar (scrolled state) |
| 2 | Card (resting elevation) *,Raised button (resting elevation)*,Quick entry / Search bar (resting elevation) |
| 1 | Switch |
桌面系統(tǒng)的靜止高度低于列表里所有值2dp，以適應(yīng)鼠標(biāo)和觸摸環(huán)境
組件高度
- 各個(gè)組件在程序中保持一致的靜止高度。例如，F(xiàn)loating Action Bar的高度隨著應(yīng)用程序的不同而不同。
- 根據(jù)環(huán)境的改變，組件在不同的平臺(tái)和設(shè)備上具有不同的高度。例如，電視機(jī)具有比桌面更大的深度，因?yàn)樗哂懈蟮钠聊徊⑶铱梢詮倪h(yuǎn)處觀看。同樣，電視和桌面比移動(dòng)設(shè)備的深度更大。
響應(yīng)高度和動(dòng)態(tài)高度偏移
一些組件擁有響應(yīng)高度，意味著他們可以在響應(yīng)用戶(hù)或者系統(tǒng)的事件時(shí)(正常，聚焦和按下)改變高度。這些高度變化使用動(dòng)態(tài)高度偏移實(shí)現(xiàn)。
動(dòng)態(tài)高度偏移是組件相對(duì)于組件的靜止?fàn)顟B(tài)朝向的目標(biāo)高度。 它們確保高度更改在操作和組件類(lèi)型之間保持一致。 例如，所有在壓力下提升的部件相對(duì)于其靜止高度具有相同的高度變化。
如果輸入動(dòng)作完成或者取消，這些組件將回到它的靜止高度。
避免高度干擾
具有響應(yīng)高度的部件可能在其靜止高度和動(dòng)態(tài)高度偏移之間移動(dòng)時(shí)遇到其它部件。 因?yàn)镸aterial不能通過(guò)其他Material，組件避免以任何數(shù)量的方式彼此干擾，無(wú)論是基于每個(gè)組件還是使用整個(gè)應(yīng)用程序布局。
在組件級(jí)別，組件可以在他們?cè)斐筛蓴_之前移動(dòng)或者移除。例如，在用戶(hù)點(diǎn)擊Cardview時(shí)，F(xiàn)loating Action Bar可以消失或者離開(kāi)屏幕，snackbar出現(xiàn)，它可以移動(dòng)。
在布局級(jí)別上，設(shè)計(jì)應(yīng)用布局以盡量減少干擾的機(jī)會(huì)。 例如，將FAB定位在Cardvierw區(qū)域的一側(cè)，使得FAB在用戶(hù)嘗試拾取卡時(shí)不會(huì)干擾。
組件高度比較
在此圖中，只有組件的高度尺寸和布局是準(zhǔn)確的。 部件的其他尺寸和整體布局僅用于說(shuō)明。
例子：
包含卡片和浮動(dòng)操作按鈕的示例應(yīng)用程序布局，以及其沿z軸的其組件高度的橫截面圖
一個(gè)帶有打開(kāi)的導(dǎo)航抽屜的示例應(yīng)用程序布局，以及沿其z軸的其組件高度的橫截面圖。
陰影
陰影提供關(guān)于對(duì)象的深度和方向移動(dòng)的重要視覺(jué)提示。 它們是表示表面之間的分離量的唯一視覺(jué)提示。 對(duì)象的高度確定其陰影的外觀。
錯(cuò)誤的做法
沒(méi)有陰影，沒(méi)有指示FloatingActionBar與背景分離。
錯(cuò)誤的做法
陰影表FlaotingActionBar和藍(lán)色表是獨(dú)立的元素。 然而，他們的陰影是如此相似，暗示他們都在同一高度。
正確
較柔和的較大陰影表示FloatingActionBar處于比藍(lán)色層更高的高度。
在運(yùn)動(dòng)中，陰影提供關(guān)于對(duì)象的運(yùn)動(dòng)方向以及表面之間的距離是增加還是減小的有用提示。
錯(cuò)誤的做法
沒(méi)有陰影指示高度，不能明確表明這個(gè)正方形是增加大小還是增加其高度。
正確的做法
陰影隨著物體的高度增加而變得更軟和更大，并且隨著高度的降低而變得越來(lái)越小。
正確的做法
在這種情況下，一致的陰影幫助用戶(hù)理解對(duì)象正在改變形狀，而不是改變高度。
組件參考陰影
以下組件陰影應(yīng)用作規(guī)范引用。 如果以下參考陰影和本規(guī)范中其他地方找到的組件陰影之間存在任何差異，請(qǐng)遵循這些參考陰影。
1.App bar 4dp
2.Raised button
Resting state: 2dp
Pressed state: 8dp
For desktop only, raised buttons can have an elevation of:
Resting state: 0dp
Pressed state: 2dp
3. Floating action button (FAB)
Resting state: 6dp
Pressed state: 12dp
4. Card
Resting state: 2dp
Raised state: 8dp
5. Menus and sub menus
Menus: 8dp
Sub menus: 9dp (+1 dp for each sub menu)
6. Dialogs 24dp
8. Nav Drawer & Right drawer 16dp
9. Modal bottom sheet 16dp
10.Refresh indicator 3dp
11. Quick entry/Search bar
Resting state: 2dp
Scrolled state: 3dp
12.Snackbar 6dp
13.switch 1dp
對(duì)象關(guān)系
對(duì)象層次關(guān)系
按鈕隨布局滾動(dòng)
如何在應(yīng)用程序中組織對(duì)象或?qū)ο蠹希_定它們?nèi)绾蜗鄬?duì)于彼此移動(dòng)。 對(duì)象可以彼此獨(dú)立地移動(dòng)，或者由層次結(jié)構(gòu)中較高的對(duì)象約束。
所有對(duì)象都是根據(jù)父子關(guān)系描述的層次結(jié)構(gòu)的一部分。 這些關(guān)系中的每一個(gè)中的“子”指的是從屬于其“父”元素的元素。 對(duì)象可以是系統(tǒng)或另一個(gè)對(duì)象的子對(duì)象。
父子關(guān)系
- 每個(gè)對(duì)象有一個(gè)父對(duì)象。
- 每個(gè)對(duì)象可以具有任意數(shù)量的孩子。
- 子節(jié)點(diǎn)從父節(jié)點(diǎn)繼承變換屬性，如位置，旋轉(zhuǎn)，縮放和高程。
- 兄弟姐妹是同級(jí)別層次中的對(duì)象。
例外
Floating Action Bar不隨布局滾動(dòng)
作為父根目錄的項(xiàng)，例如主UI元素，獨(dú)立于其他對(duì)象移動(dòng)。 例如，F(xiàn)AB鈕不隨內(nèi)容滾動(dòng)。 其他元素包括：
- 應(yīng)用程序的側(cè)導(dǎo)航欄
- 操作欄
- 對(duì)話框
相互作用
對(duì)象如何相互交互取決于它們?cè)诟缸訉哟谓Y(jié)構(gòu)中的位置。
例如：
- 孩子與他們的父母有最小的z軸分離; 其他對(duì)象不會(huì)在父對(duì)象和子對(duì)象之間插入。
- 在滾動(dòng)卡集合中card卡是彼此的兄弟，因此它們一起移動(dòng)在一起。 他們是控制他們的運(yùn)動(dòng)的卡收集對(duì)象的孩子。
高度
如何確定對(duì)象的高程 - 它們?cè)趜空間中的位置 - 取決于要表達(dá)的內(nèi)容層次結(jié)構(gòu)以及對(duì)象是否需要獨(dú)立于其他對(duì)象進(jìn)行移動(dòng)。
