官網(wǎng)地址：https://material.io/guidelines/material-design/elevation-shadows.html
Objects in material design possess similar qualities to objects in the physical world.
material的對象具有與物理世界的實(shí)際物品相似的特點(diǎn)。
In the physical world, objects can be stacked or affixed to one another, but cannot pass through each other. Objects also cast shadows and reflect light.
在物理世界中，對象可以對堆疊或者相互粘貼箱季，但是卻不能穿過彼此场勤。對象還能夠生產(chǎn)陰影和反射光線慢逾。
Material design reflects these qualities to form a spatial model that is familiar to users and can be applied consistently across apps.
Material design反射了這些特點(diǎn)埃叭，形成了一個用戶熟悉的空間模型，并且能夠在應(yīng)用程序中實(shí)現(xiàn)一致的效果罕袋。

Elevation 高度
Measured from the front of one surface to the front of another, an element’s elevation indicates the distance between surfaces and the depth of its shadow.
從一平面到另外一個平面進(jìn)行測量潮模，一個元素的高度表示平面與其影子深度的距離亮蛔。

Resting elevation 靜止高度
All material elements have resting elevations. While components have consistent resting elevations across apps, they may have different resting elevations across platforms and devices.
所有的material元素都擁有靜止高度。雖然組件在應(yīng)用程序之間具有一致的靜止高度擎厢，但它們可能在不同的平臺和設(shè)備之間具有不同的靜止高度究流。
Dynamic elevation offsets 動態(tài)高度偏移
Dynamic elevation offsets are the goal elevation that a component moves towards, relative to its resting state.
動態(tài)高度偏移是組件相對于靜止?fàn)顟B(tài)移動的目標(biāo)高度

what_is_material_elevation_and_shadows.png

Contents
Elevation (Android)
Shadows
Object relationships

Elevation (Android) 高度
Elevation is the relative depth, or distance, between two surfaces along the z-axis.
高度是兩個平面沿z軸的相對深度辣吃，或者距離。
Specifications: 參數(shù)
Elevation is measured in the same units as the x and y axes, typically in density-independent pixels (dp). Because material elements have depth (all material is 1dp thick), elevation is measured in distance from the top of one surface to the top of another.
高度以與x軸和y軸相同的單位進(jìn)行測量芬探，通常在密度無關(guān)像素中神得。因?yàn)閙aterial元素?fù)碛猩疃龋ㄋ械膍aterial都是1dp的厚度），高度是從一個表面頂部到另一個頂部的距離測量的
A child object's elevation is relative to the parent object's elevation.
一個子對象的高度與父對象的高度相關(guān)偷仿。

The images and values shown are for Android apps.
顯示的圖像和值都用于Android應(yīng)用程序哩簿。

whatismaterial_3d_elevation1.png

Multiple elevation measurements for two objects
兩個對象的多個高度測量

Resting elevation
靜止高度
All material objects, regardless of size, have a resting elevation, or default elevation that does not change. If an object changes elevation, it should return to its resting elevation as soon as possible.
所有的material對象，無論大小酝静，都擁有靜止高度节榜，或者時候是默認(rèn)高度。如果一個對象改變了高度别智，應(yīng)該盡快灰度到他的靜止高度澡匪。
Desktop resting elevation is 2dp below the listed values to accommodate mouse and non-touch environments.
桌面靜止高度低于列出值的2dp以適應(yīng)鼠標(biāo)和非觸摸環(huán)境

Component elevations: 組件高度
Components maintain consistent resting elevations across apps. For example, the floating action button’s elevation does not vary from one app to another.
組件可以在應(yīng)用程序之間保持穩(wěn)定的靜止高度呢簸。例如抖单，浮動動作按鈕的高度并不會因應(yīng)用程序而不同窘俺。
Components may have different resting elevations across platforms and devices, depending on the depth of the environment. For instance, TV has a greater depth than desktop as it has a larger screen and is viewed from further away. Similarly, both TV and desktop have a greater depth than mobile.
組件在不同的平臺和設(shè)備中，可能會擁有不同的靜止高度敞恋，這屈居于環(huán)境的深度挪钓。比如說，電視比桌面更深耳舅，因?yàn)殡娨暺聊桓螅瑥倪h(yuǎn)處觀看并且觀看的距離更遠(yuǎn)倚评。電視和桌面都比手機(jī)的深度更深浦徊。
Responsive elevation and dynamic elevation offsets 相應(yīng)高度和動態(tài)高度偏移
Some component types have responsive elevation, meaning they change elevation in response to user input (e.g., normal, focused, and pressed) or system events. These elevation changes are consistently implemented using dynamic elevation offsets.
一些組件類型擁有響應(yīng)高度，這意味著他們可以通過響應(yīng)用戶輸入來改變高度（比如：正常天梧、聚焦和按下）或者系統(tǒng)事件盔性。這些高度變化始終使用動態(tài)高度偏移來實(shí)現(xiàn)。

Dynamic elevation offsets are the goal elevation that a component moves towards, relative to the component’s resting state. They ensure that elevation changes are consistent across actions and component types. For example, all components that lift on press have the same elevation change relative to their resting elevation.
動態(tài)高度偏移是組件相對于組件靜止?fàn)顟B(tài)移動的目標(biāo)高度呢岗。它們確保在動作和組件類型之間的高度變化是一致的冕香。例如，所有的按下抬起組件后豫，相對于靜止高度具有相同的高度變化悉尾。

Once the input event is completed or cancelled, the component will return to its resting elevation.
一旦輸入事件完成或者取消，組件就會返回到它的靜止高度挫酿。
Avoiding elevation interference 避免高度沖突
Components with responsive elevations may encounter other components as they move between their resting elevations and dynamic elevation offsets. Because material cannot pass through other material, components avoid interfering with one another any number of ways, whether on a per-component basis or using the entire app layout.
具有響應(yīng)高程的組件可能會在其靜止高程和動態(tài)高程偏移之間移動時遇到其他組件构眯。由于material不能通過其他material，組件可以避免任何數(shù)量的方式相互干擾早龟，無論是基于每個組件還是使用整個應(yīng)用程序惫霸。
On a component level, components can move or be removed before they cause interference. For example, a floating action button (FAB) can disappear or move off-screen before a user picks up a card, or it can move if a snackbar appears.
在一個組件層級上猫缭，組件能夠移動或者可以在他們導(dǎo)致沖突之前被移除。例如壹店，a floating action button （FAB）可以在用戶調(diào)起card之前消失或離開屏幕猜丹，或者它能夠在snackbar出現(xiàn)的時候移動。
On the layout level, design your app layout to minimize opportunities for interference. For example, position the FAB to one side of a stream of cards so the FAB won’t interfere when a user tries to pick up one of cards.
在一個布局層級上硅卢，設(shè)計(jì)你的APP布局射窒，盡量避免沖突發(fā)生的機(jī)會。例如老赤，將FAB放置在cards流的一側(cè)轮洋，以便當(dāng)用戶嘗試拿起其中一個cards時，F(xiàn)AB不會干擾

Component elevation comparisons 組件高度對比
The following diagram compares component resting elevations and dynamic elevation offsets.
下面圖片比較了組件的靜止高度和動態(tài)高度偏移抬旺。

whatismaterial_3d_elevation2.png

In this diagram, only the elevation dimensions and layout for components are accurate. Other dimensions and overall layout of components are for illustration only.
在這張圖片中弊予，只有組件的高度尺寸和布局是準(zhǔn)確的。組件的其他尺寸和總體布局僅供說明之用开财。

whatismaterial_3d_elevation3.png

An example app layout with cards and a floating action button, along with a cross-section diagram of its component elevations along its z-axis
一個包含了cards 和floating action button的布局汉柒，以及其沿Z軸的組件高度的橫截面圖。

whatismaterial_3d_elevation4.png

An example app layout with an open navigation drawer, along with a cross-section diagram of its component elevations along its z-axis.
一個包含了open navigation drawer的APP布局责鳍，以及其沿Z軸的組件高度的橫截面圖碾褂。

Shadows 陰影
Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow.
陰影提供了關(guān)于物體深度和方向運(yùn)動的重要視覺線索。它們是指示表面之間分離量的唯一視覺展示历葛。對象的高度決定其陰影的外觀正塌。

whatismaterial_3d_elevation_shadow1.png

Don't. 官網(wǎng)視頻
Without a shadow, nothing indicates that the floating action button is separate from the background surfaces.
沒有陰影，不能夠展示floating action button 和平面是分離的恤溶。

whatismaterial_3d_elevation_shadow2.png

Don't. 官網(wǎng)視頻
Crisp shadows indicate the floating action button and the blue sheet are separate elements. However, their shadows are so similar that they imply they are both at the same elevation.
灑落的陰影表示了floating action button和藍(lán)色區(qū)域的分離元素乓诽。但是，他們的影子是如此相似咒程，以至于他們暗示著它們處在相同的高度鸠天。

whatismaterial_3d_elevation_shadow3.png

Do. 官網(wǎng)視頻
Softer, larger shadows indicate the floating action button is at a higher elevation than the blue sheet, which has a crisper shadow.
絞肉和，較大的陰影表示floating action button比藍(lán)色區(qū)域所處高度更高帐姻。

In motion, shadows provide useful cues about an object’s direction of movement and whether the distance between surfaces is increasing or decreasing.
在移動中稠集，陰影提供了對象的移動方向以及與平面的距離是減少還是增加的有利線索。

whatismaterial_3d_elevation_shadow4.png

Don't. 官網(wǎng)視頻
Without a shadow to indicate elevation, it’s unclear whether this square is increasing in size or increasing its elevation.
沒有標(biāo)識高度的陰影饥瓷，不能夠明白該正方形到底是增加大小還是高度剥纷。

whatismaterial_3d_elevation_shadow5.png

Do.  官網(wǎng)視頻
The shadow grows softer and larger as the object’s elevation increases and grows crisper and smaller as the elevation decreases.
隨著物體的高度增加，陰影越來越柔和越大呢铆，高度越來越小筷畦，陰影也越來越小。

whatismaterial_3d_elevation_shadow6.png

Do. 官網(wǎng)視頻
In this case, the consistent shadow helps the user understand that the object is changing shape as opposed to changing elevation.
在這個例子中，連貫的陰影有助于用戶了解對象正在改變形狀鳖宾，而不是改變高度吼砂。

Component reference shadows 組件參考陰影
The following component shadows should be used as canonical references. If there are any differences between the following reference shadows and component shadows found elsewhere within this spec, defer to these reference shadows.
一下為組件陰影的一個規(guī)范參考。如果以下引用陰影和本規(guī)范中其他地方發(fā)現(xiàn)的組件陰影之間存在差異鼎文，請遵循這些參考陰影渔肩。
App bar
4dp

whatismaterial_3d_elevation_component06.png

Example of an app bar

Raised button
Resting state: 2dp 靜止?fàn)顟B(tài)：2dp
Pressed state: 8dp 按下狀態(tài)：8dp
For desktop only, raised buttons can have an elevation of: 僅僅適用于桌面
Resting state: 0dp
Pressed state: 2dp
See raised buttons for more information

whatismaterial_3d_elevation_component02.png

Floating action button (FAB)
Resting state: 6dp
Pressed state: 12dp

whatismaterial_3d_elevation_component08.png

Card
Resting state: 2dp
Raised state: 8dp
For Desktop only, see Content blocks.

whatismaterial_3d_elevation_component03.png

Menus and sub menus
Menus: 8dp
Sub menus: 9dp (+1 dp for each sub menu)

whatismaterial_3d_elevation_component09.png

Dialogs
24dp

whatismaterial_3d_elevation_component12.png

Nav Drawer & Right drawer
16dp

whatismaterial_3d_elevation_component10.png

Modal bottom sheet
16dp

whatismaterial_3d_elevation_component11.png

Refresh indicator
3dp

whatismaterial_3d_elevation_component05.png

Quick entry/Search bar
Resting state: 2dp
Scrolled state: 3dp

whatismaterial_3d_elevation_component04.png

Snackbar
6dp

whatismaterial_3d_elevation_component07.png

Switch
1dp

whatismaterial_3d_elevation_component01.png

Object relationships 對象關(guān)系
Object hierarchy 對象等級制度
How you organize objects, or collections of objects, in an app determines how they move in relation to one another. Objects can move independently of each other or be constrained by objects higher in the hierarchy.
All objects are part of a hierarchy described in terms of a parent-child relationships. The “child” in each of these relationships refers to an element that is a subordinate to its “parent” element. Objects can be children of either the system or another object.
你怎樣去阻止對象，或者手機(jī)對象拇惋，在app中確定他們?nèi)绾我苿又苜恕ο竽軌颡?dú)立于彼此單獨(dú)移動或者由層次結(jié)構(gòu)中較高的對象約束。所有對象都是根據(jù)父子關(guān)系描述的層次結(jié)構(gòu)的一部分撑帖。這些關(guān)系中的每一個中的子元素是指從屬于其“父”元素的子類蓉坎。對象可以是系統(tǒng)或另一個對象的子對象。
Parent-child specifics: 親子特點(diǎn)
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.
兄弟類在繼承關(guān)系中屬于同級層次勿侯。

****Exceptions****
Items parented to the root, such as primary UI elements, move independently of other objects. For example, the floating action button does not scroll with content. Other elements include:
每一個父類來源如root，比如初級UI元素缴罗，獨(dú)立于其他對象移動助琐。例如，floating action button不會隨內(nèi)容滾動面氓。其他元素還包含如下幾個：
An app’s side nav drawer
The action bar
Dialogs

****Interaction**** 交互
How objects interact with one another is determined by their place in the parent-child hierarchy.
對象如何相互交互是由他們在父子層次結(jié)構(gòu)中的位置決定的兵钮。
For example:
例如：
Children have minimal z-axis separation from their parent; other objects do not get inserted between parents and children.
子類與母父類的z軸分離最小舌界；其他對象不能插入到父類和子類之間
In a scrolling card collection, the cards are siblings of each other, so they all move together in tandem. They are children of the card collection object that controls their movement.
在scrolling card集合中矢空，cards是彼此的兄弟，所有他們串聯(lián)時會一起移動禀横。他們是控制他們移動的card collection對象的子類。

****Elevation****
How you determine the elevation of objects – their position in z-space – depends on the content hierarchy you want to express and whether an object needs to move independently of other objects.
如何確定對象的高度-他們在z軸的位置-取決于要表達(dá)的內(nèi)容層次結(jié)構(gòu)以及對象是否需要獨(dú)立于其他對象進(jìn)行移動粥血。
As the parent sheet scrolls, the raised button (its child) scrolls off screen with it.
當(dāng)一個父區(qū)域滾動柏锄，raised button隨著父區(qū)域滾動。

As the card collection scrolls off-screen, its child cards scroll off-screen with it. The floating action button remains in place because its parent is not being scrolled.
當(dāng)card collection滾出屏幕复亏，他的所有子cards跟著他滾出屏幕趾娃。floating action button仍然保留在原地，因?yàn)樗母割惒荒軡L動缔御。