高度和陰影
材料物體擁有和現(xiàn)實(shí)世界的物體相似的特點(diǎn)
Google - Elevation and shadows
在現(xiàn)實(shí)的物理世界中，物體可以相互堆積，依附，但是不能穿越彼此。物體同時(shí)也產(chǎn)生陰影并且反射光線。
Material design 通過映射這些特性來創(chuàng)造出一個(gè)被用戶所熟悉的空間模型，并且能應(yīng)用到APP之中。高度
測(cè)量一個(gè)元素的正面到另外一個(gè)元素的正面就是這個(gè)元素的高度，它標(biāo)示了物體表面的之間的距離和物體陰影的深度。
海拔高度
所有的材料元素都具有海拔高度。并且組成元素在APP中具有固定的海拔高度，他們?cè)诓煌钠脚_(tái)和設(shè)備中可能具有不同的高度。
動(dòng)態(tài)偏移高度
動(dòng)態(tài)偏移高度是元素在向他靜止高度移動(dòng)時(shí)的目標(biāo)高度。
0.0
高度（Andorid）
高度是兩個(gè)平面在z軸方向的相對(duì)深度或者距離。
說明
- 高度的測(cè)量是在相同x和y軸位置的，通常的單位為dp。因?yàn)樗械牟牧显囟季哂?dp的厚度，高度的測(cè)量值是從一個(gè)平面的頂部到另外一個(gè)平面的頂部。
-
子物體的高度是相對(duì)于他的父物體的高度的。
兩個(gè)物體的高度測(cè)量
</br>
海拔高度
所有的材料物體，無論大小，都具有一個(gè)海拔高度，或者一個(gè)默認(rèn)不變的高度。如果一個(gè)物體改變了他的高度，他必須盡快的恢復(fù)到他的海拔高度。
組件的高度
- 組件在不同的應(yīng)用中保持一致的高度。例如，F(xiàn)loating button的高度不會(huì)在不同的app中發(fā)生變化。
- 組件在不同的平臺(tái)和設(shè)備中可能具有不同的海拔高度，這由他們所在環(huán)境的深度決定。例如，TV和桌面相比，具有更大的深度，因?yàn)樗哂懈蟮钠聊徊⑶宜窃诟h(yuǎn)的距離上進(jìn)行觀看的。同樣，TV和桌面都具有比手機(jī)平臺(tái)更大的深度。
</br>
反饋時(shí)高度和動(dòng)態(tài)高度偏移
一些組件樣式具有反饋時(shí)高度，意味著他們?cè)俜答佊脩糨斎牖蛘呦到y(tǒng)事件的時(shí)候，會(huì)改變高度。這些高度改變的場(chǎng)景一致的遵守 動(dòng)態(tài)高度偏移
動(dòng)態(tài)高度偏移是一個(gè)目標(biāo)高度，他是在組件相對(duì)于他固定的海拔高度移動(dòng)時(shí)產(chǎn)生的。組件必須確保高度的改變遵循交叉的原則和組件自己的樣式。比如，所有的組件在點(diǎn)擊上升時(shí)，具有相同的相對(duì)海拔高度的變化。
一旦輸入事件完成或者取消，組件就會(huì)返回他原本的海拔高度。
</br>
避免高度沖突
具有反饋高度的組件可能在高度產(chǎn)生變化的時(shí)候碰撞到其他的組件。因?yàn)椴牧喜荒艽┻^其他材料，組件無論如何必須避免和其他組件的高度產(chǎn)生沖突。無論是在每個(gè)組件獨(dú)立布局或者整個(gè)應(yīng)用整體布局。
在組件層面，組件可以移動(dòng)或者被移除在他們產(chǎn)生沖突之前。例如，一個(gè)Floating button可以消失或者移動(dòng)到屏幕之外，當(dāng)用戶點(diǎn)起一個(gè)card的時(shí)候，或者當(dāng)一個(gè)snackbar出現(xiàn)的時(shí)候，他需要移動(dòng)位置。
在整體布局的層面上，在設(shè)計(jì)app時(shí)候最小化產(chǎn)生沖突的可能。例如，把Floating button放在card列表的一旁。
| 高度（dp） | 組件 |
|---|---|
| 24 | Dialog, Picker |
| 16 | Nav drawe, Right drawer, Modal botttom sheet |
| 12 | Floating action button(FAB - pressed) |
| 9 | Sub menu(+1dp for each sub menu) |
| 8 | Bottom navigation bar, Menu, Caed(When picked up), Raised button(pressed state) |
| 6 | Floation 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 |
</br>
</br>
組件的高度比較
下圖顯示組件的海拔高度和動(dòng)態(tài)高度偏移的對(duì)比圖
在這個(gè)圖中，只有布局組件的高度值是精確的，其他覆蓋物的值只是起到說明作用。
</br>
一個(gè)包含card和FAB的布局樣式。
一個(gè)打開了drawer的應(yīng)用實(shí)例。
陰影
陰影提供了很重要的視覺提示，它顯示出物體的深度和定向的運(yùn)動(dòng)。他們是區(qū)分不同屏幕的視覺標(biāo)示。一個(gè)物體的高度決定他的陰影。
<font color = red> Don't. 沒有陰影的情況，沒有標(biāo)志顯示floating button和背景屏幕分離。</font>
<font color = red> Don't. 簡(jiǎn)單的陰影顯示出組件和背景的分離標(biāo)志，但是藍(lán)色界面的陰影和floating button的陰影相似導(dǎo)致看上去他們是一體的</font>
<font color = green> Do. 更加順滑且更大的陰影顯示了Floating button的高度是高于藍(lán)色界面的。</font>
</br>
在屏幕中，當(dāng)物體改變距離表面的距離時(shí)，陰影提供很重要的標(biāo)示作用。
<font color = red> Don't. 沒有陰影時(shí)，用戶對(duì)于藍(lán)色方塊的高度變化感知并不明顯 </font>
<font color = green> Do. 當(dāng)物體高度升高是，陰影變大并且柔滑，當(dāng)高度降低時(shí)，又變小并且清晰 </font>
<font color = green> Do. 在這種情況下，用戶了解到此時(shí)物體正在變形而不是變化高度 </font>
</br>
組件陰影
如下的組件陰影必須按照規(guī)定說明使用。如果下文中出現(xiàn)的陰影指導(dǎo)文檔和此處產(chǎn)生差異，以此處指引文檔為準(zhǔn)。
App bar
4dp
</br>
Raised button
靜止?fàn)顟B(tài)：2dp
點(diǎn)擊狀態(tài)：8dp
只針對(duì)桌面系統(tǒng)：
靜止?fàn)顟B(tài)：0dp
點(diǎn)擊狀態(tài)：2dp
</br>
Floating action button(FAB)
靜止?fàn)顟B(tài)：6dp
點(diǎn)擊狀態(tài)：12dp
</br>
Card
靜止?fàn)顟B(tài)：2dp
升起狀態(tài)：8dp
</br>
Menus and sub menus
Menus:8dp
Sub menus:9dp(+1 dp for each sub menu)
</br>
Dialogs
24dp
</br>
Nav Drawer & Right drawer
16dp
</br>
Modal bottom sheet
16dp
</br>
Refresh indicator
3dp
</br>
Quick entry / Search bar
靜止?fàn)顟B(tài)：2dp
滑動(dòng)狀態(tài)：3dp
</br>
Snackbar
6dp
</br>
Switch
1dp
</br>
</br>
對(duì)象關(guān)系
對(duì)象層級(jí)
你在APP中怎么安排對(duì)象或者對(duì)象的集合決定他們之間的移動(dòng)關(guān)系。對(duì)象可以相對(duì)于其他對(duì)象獨(dú)立的移動(dòng)或者被約束他所在層級(jí)的高度。
物體所在的層級(jí)可以被描述成為一個(gè)父子關(guān)系的結(jié)構(gòu)。子對(duì)象在這個(gè)關(guān)系結(jié)構(gòu)中被定義為父對(duì)象的下一級(jí)。對(duì)象可以是整個(gè)系統(tǒng)或者某個(gè)其他對(duì)象的子對(duì)象。
</br>父子關(guān)系結(jié)構(gòu)特性：
Parent-child specifics:
- Each object has one parent.
- Each object may have any number of children.
- Children inherit transformative properties from their parent, such as position, rotation, scale, and elevation.
- Siblings are objects at the same level of hierarchy.
例外
以根布局為父對(duì)象的UI元素，移動(dòng)時(shí)獨(dú)立于其他元素對(duì)象的。例如，floating button不會(huì)隨著內(nèi)容滾動(dòng)。其他類似布局也包括：
- An app side nav drawer
- The action bar
- Dialogs
相互影響
兩個(gè)物體之間怎么影響是有他們?cè)诟缸訉蛹?jí)的位置決定的。
例如：
- 子對(duì)象和父類對(duì)象有很小的z軸高度差，其他的物體對(duì)象不會(huì)插入到他們之間。
- 在一個(gè)card的列表中，卡片之間是兄弟關(guān)系，所以他們會(huì)一個(gè)跟著一個(gè)的一起移動(dòng)。他們是卡片集的子類對(duì)象，卡片集對(duì)象控制他們的移動(dòng)。
高度
你怎么決定物體的高度——他們的z軸位置，決定于你想用繪制一個(gè)什么的內(nèi)容層次以及一個(gè)物體是否需要獨(dú)立于其他物體獨(dú)自移動(dòng)、
