1.Introduction - 介紹

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

【翻譯】
我們挑戰(zhàn)自己為我們的用戶創(chuàng)造一種視覺語言罩驻，將經(jīng)典的良好設(shè)計(jì)原則與技術(shù)和科學(xué)的創(chuàng)新和可能性相結(jié)合颠通。 這是原質(zhì)化設(shè)計(jì)(Material Design)卦羡。 這份文檔是動(dòng)態(tài)更新的，將會(huì)隨著我們對 Material Design 的探索而不斷迭代文捶、升級(jí)。

Goals - 目標(biāo)

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

【翻譯】
創(chuàng)造一個(gè)視覺語言逆害，能夠遵循優(yōu)秀設(shè)計(jì)的經(jīng)典定則壹士，同時(shí)還伴有創(chuàng)新理念和新的科技。

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all ?rst-class input methods.

【翻譯】
開發(fā)一種底層系統(tǒng)毛好，構(gòu)建跨平臺(tái)和超越設(shè)備尺寸的統(tǒng)一體驗(yàn)望艺。遵循基本的移動(dòng)設(shè)計(jì)定則，同時(shí)支持觸摸肌访、語音找默、鼠標(biāo)、鍵盤等輸入方式吼驶。

Principles - 原則

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

【翻譯】
通過構(gòu)建系統(tǒng)化的動(dòng)效和空間合理化利用惩激，并將兩個(gè)理念合二為一，構(gòu)成了實(shí)體隱喻蟹演。與眾不同的觸感是實(shí)體的基礎(chǔ)咧欣，這一靈感來自我們對紙墨的研究，但是我們相信轨帜，隨著科技的進(jìn)步魄咕，應(yīng)用前景將不可估量

Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.

【翻譯】
實(shí)體的表面和邊緣提供基于真實(shí)效果的視覺體驗(yàn)，熟悉的觸感讓用戶可以快速地理解和認(rèn)知蚌父。實(shí)體的多樣性可以讓我們呈現(xiàn)出更多反映真實(shí)世界的設(shè)計(jì)效果哮兰，但同時(shí)又絕不會(huì)脫離客觀的物理規(guī)律。

The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

【翻譯】
光效苟弛、表面質(zhì)感喝滞、運(yùn)動(dòng)感這三點(diǎn)是解釋物體運(yùn)動(dòng)規(guī)律、交互方式、空間關(guān)系的關(guān)鍵。真實(shí)的光效可以解釋物體之間的交合關(guān)系蟹倾、空間關(guān)系，以及單個(gè)物體的運(yùn)動(dòng)窘哈。

The foundational elements of print-based design – typography, grids, space, scale, color, and use of imagery – guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.

【翻譯】
基于傳統(tǒng)印刷的設(shè)計(jì) - 排版滚婉，網(wǎng)格，空間帅刀，尺度让腹，顏色和圖像远剩，這些的基本要素的使用 - 指導(dǎo)視覺處理。 這些元素愉悅著我們骇窍。 他們創(chuàng)造層次瓜晤，意義和焦點(diǎn)。 顏色選擇的推敲腹纳，邊緣到邊緣的圖像痢掠，大規(guī)模排版和有意的空白空間創(chuàng)建一個(gè)大膽的圖形界面。

An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

【翻譯】
讓用戶沉浸在體驗(yàn)中只估。 強(qiáng)調(diào)用戶操作，使核心功能立即顯現(xiàn)着绷。

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

【翻譯】
動(dòng)畫效果(簡稱動(dòng)效)可以有效地暗示蛔钙、指引用戶。動(dòng)效的設(shè)計(jì)要根據(jù)用戶行為而定荠医，能夠改變整體設(shè)計(jì)的觸感吁脱。

All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.

【翻譯】
動(dòng)效應(yīng)當(dāng)在獨(dú)立的場景呈現(xiàn)。通過動(dòng)效彬向，讓物體的變化以更連續(xù)兼贡、更平滑的方式呈現(xiàn)給用戶，讓用戶能夠充分知曉所發(fā)生的變化娃胆。

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are ef?cient yet coherent.

【翻譯】
動(dòng)效應(yīng)該是有意義的遍希、合理的，動(dòng)效的目的是為了吸引用戶的注意力里烦，以及維持整個(gè)系統(tǒng)的連續(xù)性體驗(yàn)凿蒜。動(dòng)效反饋需細(xì)膩、清爽胁黑。轉(zhuǎn)場動(dòng)效需高效废封、明晰。

2.Environment - 環(huán)境

Material design is a three-dimensional environment containing light, material, and cast shadows.

【翻譯】
Material design是包含光丧蘸，材料和投射陰影的三維環(huán)境漂洋。

All material objects have x, y, and z dimensions.
All material objects have a single z-axis position.
Key lights create directional shadows, and ambient light creates soft shadows.

【翻譯】
所有對象都有x，y和z尺寸力喷。
所有對象都具有單個(gè)z軸位置刽漂。
主光源投射出一個(gè)定向的陰影，而環(huán)境光從各個(gè)角度投射出連貫又柔和的陰影弟孟。

Material thickness - 厚度
1dp
Shadows - 陰影
Shadows are created by the elevation difference between overlapping material.

【翻譯】
不同對象的高度差產(chǎn)生陰影爽冕。

3D world - 3D世界

The material environment is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness, equivalent to one pixel of thicknesson screens with a pixel density of 160.
On the web, the z-axis is used for layering and not for perspective. The 3D world is emulated by manipulating the y-axis.

【翻譯】
材質(zhì)環(huán)境是一個(gè)3D空間，這意味著所有對象都有x披蕉，y和z維度颈畸。 z軸垂直地對準(zhǔn)顯示器的平面乌奇，正z軸朝向觀看者延伸。 每張材料沿著z軸占據(jù)單個(gè)位置眯娱，并且具有標(biāo)準(zhǔn)1dp厚度礁苗，相當(dāng)于像素密度為160的屏幕上的一個(gè)像素厚度。
在網(wǎng)頁上徙缴，z軸被用來分層而不是為了視角试伙。3D 空間通過操縱 y 軸進(jìn)行仿真。

Light and shadow - 光影關(guān)系

Within the material environment, virtual lights illuminate the scene. Key lights create directional shadows, while ambient light creates soft shadows from all angles.

Shadows in the material environment are cast by these two light sources. In Android development, shadows occur when light sources are blocked by sheets of material at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows the card with a height of 6dp.

【翻譯】
在材料環(huán)境中于样，虛擬光照亮場景疏叨。主光源投射出一個(gè)定向的陰影，而環(huán)境光從各個(gè)角度投射出連貫又柔和的陰影穿剖。
材料環(huán)境中的陰影由這兩個(gè)光源投射蚤蔓。 在Android開發(fā)中，當(dāng)光源被沿著z軸糊余，被各種位置處的材料片阻擋時(shí)秀又，發(fā)生陰影。 在web上贬芥，陰影通過僅操縱y軸來描繪吐辙。 以下示例顯示為高度為6dp的卡片。

主光源投射的陰影

環(huán)境光源投射的陰影

主光源和環(huán)境光源疊加的陰影

3.Material properties - Material 屬性

Material has certain immutable characteristics and inherent behaviors.

【翻譯】
材料具有某些不變的特性和固有的行為蘸劈。

Understanding these qualities of material will help you manipulate material in a way that’s consistent with the vision of material design.

【翻譯】
了解這些特性將有助于你在一定程度上熟悉材料昏苏，這與 Material Design 的構(gòu)想是一致的。

Material characteristics - 特性
Solid - 固體
Occupies unique points in space - 獨(dú)立占有空間
Impenetrable - 不可穿透
Mutable shape - 形狀易變
Changes in size only along its plane - 僅沿其平面的進(jìn)行大小變化
Unbendable - 不能彎曲
Can join to other material - 多個(gè)材料可相互連接
Can separate, split, and heal - 可以分開威沫，分裂和復(fù)原
Can be created or destroyed - 可以創(chuàng)建或銷毀
Moves along any axis - 沿任意軸移動(dòng)

Physical properties - 物理特性

Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp).

【翻譯】
材料具有變化的長寬尺寸（以 dp 為計(jì)）和均勻的厚度（1dp）捷雕。

正確的示范

Do.
The height and width of material can vary.

【翻譯】
正確的示范
材料的高度和寬度是可變的。

錯(cuò)誤的示范

Don't.
Material is always 1dp thick.

【翻譯】
錯(cuò)誤的示范
材料總是1dp厚壹甥。

Material casts shadows.

Shadows result naturally from the relative elevation (z-position) between material elements.

【翻譯】
材料會(huì)形成陰影救巷。
陰影是由于材料元件之間的相對高度（Z 軸位置）而自然產(chǎn)生的。

正確的示范

Do.
Shadows depict the relative elevation between material elements.

【翻譯】
正確的示范
陰影描述材料元件之間的相對高度句柠。

錯(cuò)誤的示范

Don't.
Shadows are never approximated by coloring material.

【翻譯】
錯(cuò)誤的示范
陰影從不用著色材料近似浦译。

Content is displayed on material, in any shape and color. Content does not add thickness to material.

【翻譯】
內(nèi)容可被以任何形狀和顏色顯示在材料上。
內(nèi)容并不會(huì)增加材料的厚度溯职。

正確的示范

Do.
Material can display any shape and color.

【翻譯】
正確的示范
材料能展示任何形狀和顏色精盅。

Content can behave independently of the material, but is limited within the bounds of the material.

【翻譯】
內(nèi)容的展示能夠獨(dú)立于材料,但要被限制在材料的范圍里。

正確的示范

Do.
Content behavior can be independent of the behavior of material.

【翻譯】
正確的示范
內(nèi)容的行為能獨(dú)立于材料的行為谜酒。

Material is solid.

Input events cannot pass through material.

【翻譯】
材料是實(shí)物叹俏。

輸入事件不能穿過材料。

正確的示范

Do.
Input events only affect the foreground material.

【翻譯】
正確的示范
輸入事件只影響材料的前景僻族。

錯(cuò)誤的示范

Don't.
Input events cannot pass through material.

【翻譯】
錯(cuò)誤的示范
輸入事件不能從材料下面穿過粘驰。

Multiple material elements cannot occupy the same point in space simultaneously.

【翻譯】
多個(gè)材料元件不能同時(shí)占用相同的空間點(diǎn)屡谐。

正確的示范

Do.
Using elevation to separate material elements is one method of preventing multiple material elements from occupying the same point in space simultaneously.

【翻譯】
正確的示范
利用不同的高度區(qū)分材料元件是防止多個(gè)材料元件同時(shí)占用相同空間點(diǎn)的一個(gè)方法。

錯(cuò)誤的示范

Don't.
Multiple material elements cannot occupy the same point in space simultaneously.

【翻譯】
錯(cuò)誤的示范
多個(gè)材料元件不能同時(shí)占用相同的空間點(diǎn)蝌数。

Material cannot pass through other material.

For example, one sheet of material cannot pass through another sheet of material when changing elevation.

【翻譯】
材料不能穿過其他材料愕掏。
例如，一片材料不能在改變高度時(shí)穿過另一片材料顶伞。

錯(cuò)誤的示范

Don't.
Material cannot pass through other material.

【翻譯】
錯(cuò)誤的示范
材料不能穿過其他材料饵撑。

Transforming material - 材料的變化

Material can change shape.

【翻譯】
材料能改變形狀。

正確的示范

Material grows and shrinks only along its plane.

【翻譯】
材料只沿其平面變大和縮小唆貌。

正確的示范

Material never bends or folds.

【翻譯】
材料決不能彎曲或折疊滑潘。

錯(cuò)誤的示范

Sheets of material can join together to become a single sheet of material.

【翻譯】
幾片材料能合在一起組成一片材料。

When split, material can heal. For example, if you remove a portion of material from a sheet of material, the sheet of material will become a whole sheet again.

【翻譯】
當(dāng)材料被割開時(shí)锨咙，它還能自己復(fù)原语卤。例如，你從一片材料中移除了一部分蓖租，這一片材料將再次變?yōu)橐粔K完整的材料粱侣。

Movement of material - 材料的移動(dòng)

Material can be spontaneously generated or destroyed anywhere in the environment.

【翻譯】
材料能在環(huán)境中的任何地方自動(dòng)產(chǎn)生或消失羊壹。

Material can move along any axis.

【翻譯】
材料能沿任何軸移動(dòng)

Z-axis motion is typically a result of user interaction with material.

【翻譯】
Z軸產(chǎn)生運(yùn)動(dòng)一般都是用戶與材料交互而產(chǎn)生的蓖宦。

4.Elevation and shadows - 高度和陰影

Objects in material design possess similar qualities to objects in the physical world.

【翻譯】
Material design 中的對象與現(xiàn)實(shí)生活中的對象具有相似的性質(zhì)。

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.
Material design reflects these qualities to form a spatial model that is familiar to users and can be applied consistently across apps.

【翻譯】
在現(xiàn)實(shí)生活中油猫，不同對象可以被堆積或粘貼起來稠茂，但是不能彼此交叉。對象自身塑造了自己的陰影并返回自己的光影情妖。
依據(jù)這些性質(zhì)所構(gòu)造出來的空間模型對于用戶來說是非常熟悉的睬关，這一模型也可以被長期應(yīng)用于移動(dòng)應(yīng)用當(dāng)中。

Elevation (Android) - 高度（安卓）

Elevation is the relative depth, or distance, between two surfaces along the z-axis.

【翻譯】
高度是在 Z 軸上兩個(gè)不同平面之間的一種相對深度或距離毡证。

Specifications:
1电爹、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.
2、A child object's elevation is relative to the parent object's elevation.

The images and values shown are for Android apps.

【翻譯】
詳述：
1料睛、“高度”的度量單位與 X丐箩、Y 軸的度量單位相同，主要是 DP恤煞。由于所有 Material 元素都具有 1 單位 DP 的厚度屎勘，所以“高度”度量的是從一個(gè)平面頂部到另一個(gè)平面頂部的距離。
2居扒、一個(gè)子對象的高度與其父對象的高度相關(guān)概漱。

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

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.

Desktop resting elevation is 2dp below the listed values to accommodate mouse and non-touch environments.

【翻譯】
所有 Material 對象除去大小之外喜喂，還有一個(gè)“靜止高度”瓤摧，或者稱“默認(rèn)高度”竿裂，它是不會(huì)變化的。當(dāng)一個(gè)對象的高度產(chǎn)生變化時(shí)姻灶，它將會(huì)盡快恢復(fù)到自身的靜止高度铛绰。
桌面靜止高度要低于所列值的2dp，以適應(yīng)鼠標(biāo)和非觸摸環(huán)境产喉。

Component elevations - 組件高度:
1捂掰、Components maintain consistent resting elevations across apps. For example, the floating action button’s elevation does not vary from one app to another.
2、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.

【翻譯】
1曾沈、某一元素類型的靜止高度在移動(dòng)應(yīng)用中是一個(gè)常量这嚣。（比如，F(xiàn)AB 高度不會(huì)在某一個(gè)應(yīng)用中是 6 dp 而在另一個(gè)應(yīng)用中是 16 dp）
2塞俱、元素在某一平臺(tái)中可能會(huì)存在多種靜止高度姐帚，這取決于環(huán)境的深度。（比如障涯，TV 相比于移動(dòng)端和桌面來說就具有更深的層次）

Responsive elevation and dynamic elevation offsets - 感應(yīng)高度與動(dò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.
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.
Once the input event is completed or cancelled, the component will return to its resting elevation.

【翻譯】
一些元素類型擁有感應(yīng)高度罐旗，也就是說它們會(huì)根據(jù)用戶的輸入（比如常規(guī)的、關(guān)注的和壓制的）或系統(tǒng)事件來改變高度唯蝶。這些高度的變化會(huì)通過動(dòng)態(tài)高度偏移而不斷生成九秀。
動(dòng)態(tài)高度偏移是某一元素移動(dòng)的目標(biāo)高度，它與該元素的靜止?fàn)顟B(tài)有關(guān)粘我」难眩可以確定的是高度的變化在事件和元素類型中是持久發(fā)生的。比如說征字，所有通過按壓來提升的元素相對于其靜態(tài)高度來說都具有相似的高度變化都弹。
一旦輸入事件完成或被取消，那么元素將會(huì)恢復(fù)到它的靜止高度上匙姜。

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.
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.
On the layout level, design your app layout to minimize opportunities for interference. For example, position the FAB to one side of stream of a cards so the FAB won’t interfere when a user tries to pick up one of cards.

【翻譯】
處于感應(yīng)高度的元素當(dāng)它在靜止高度與動(dòng)態(tài)高度偏移之間移動(dòng)的時(shí)候可能會(huì)遇到其他的元素畅厢。由于 Material 不能相互交叉，沒有任何一種方式能夠讓元素之間產(chǎn)生沖突氮昧，無論是基于均元素基礎(chǔ)（per-component basis）還是通過使用完整應(yīng)用布局框杜。
在某一個(gè)元素水平上，元素可以在它們產(chǎn)生沖突之前提前移動(dòng)或被移動(dòng)郭计。比如說霸琴，一個(gè)“浮動(dòng)動(dòng)作按鈕”（FAB）可以在用戶選擇一張卡片之前消失或移出屏幕，或者它也可以在某一個(gè) “snack bar” 出現(xiàn)時(shí)移動(dòng)昭伸。
在布局水平上梧乘，你需要通過設(shè)計(jì)你的應(yīng)用布局來將產(chǎn)生沖突的機(jī)會(huì)降到最低水平。比如說，可以通過將 FAB 置于某個(gè)卡片流的一端來避免當(dāng)用戶嘗試獲取某個(gè)卡片時(shí)所產(chǎn)生的沖突选调。

Component elevation comparisons - 元素高度比較

The following diagram compares component resting elevations and dynamic elevation offsets.

【翻譯】
下面的圖表對比了多種元素的靜止高度和動(dòng)態(tài)高度偏移夹供。

In this diagram, only the elevation dimensions and layout for components are accurate. Other dimensions and overall layout of components are for illustration only.

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

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

【翻譯】
一個(gè)包含卡片和FAB應(yīng)用布局的實(shí)例與它在Z軸上元素高度的橫截面圖表。

An example app layout with an open navigation drawer, along with a cross-section diagram of its component elevations along its z-axis.

【翻譯】
一個(gè)包含開放導(dǎo)航抽屜的應(yīng)用布局實(shí)例與它在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.

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

錯(cuò)誤的示范

Don't.
Without a shadow, nothing indicates that the floating action button is separate from the background surfaces.

【翻譯】
錯(cuò)誤的示范
一旦沒有了陰影匪凉，沒有什么可以標(biāo)示浮動(dòng)動(dòng)作按鈕是從背景層分離出來的。

錯(cuò)誤的示范

Don't.
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.

【翻譯】
錯(cuò)誤的示范
卷曲的陰影說明浮動(dòng)動(dòng)作按鈕與“藍(lán)層”（blue sheet）是兩個(gè)分離開來的元素捺檬。然而再层，由于它們的陰影非常的相似以至于會(huì)被誤認(rèn)為它們在同一高度上。

正確的示范

Do.
Softer, larger shadows indicate the floating action button is at a higher elevation than the blue sheet, which has a crisper shadow.

【翻譯】
正確的示范
更柔和堡纬、更大的陰影說明浮動(dòng)動(dòng)作按鈕相比于擁有更卷曲陰影的“藍(lán)層”（blue sheet）處于更高的高度之上聂受。

In motion, shadows provide useful cues about an object’s direction of movement and whether the distance between surfaces is increasing or decreasing.

【翻譯】
在運(yùn)動(dòng)中，陰影提供了關(guān)于某個(gè)對象移動(dòng)方向以及不同平面之間距離是否正在增加或減少的有用線索烤镐。

錯(cuò)誤的示范

Don't.
Without a shadow to indicate elevation, it’s unclear whether this square is increasing in size or increasing its elevation.

【翻譯】
錯(cuò)誤的示范
如果沒有一個(gè)陰影來說明高度蛋济，那么就不能明確一個(gè)方形到底是它的自身尺寸在增加還是它的高度在增加。

正確的示范

Do.
The shadow grows softer and larger as the object’s elevation increases and grows crisper and smaller as the elevation decreases.

【翻譯】
正確的示范
某一個(gè)對象的高度增加時(shí)其陰影會(huì)變得更柔和职车、更大瘫俊，當(dāng)其高度減小時(shí)鹊杖，陰影會(huì)變得更卷曲悴灵。

正確的示范

Do.
In this case, the consistent shadow helps the user understand that the object is changing shape as opposed to changing elevation.

【翻譯】
正確的示范
在這一實(shí)例中，連貫的陰影幫助用戶明白某一個(gè)對象看起來好像是它的高度在增加其實(shí)是它的形狀在改變骂蓖。

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.

【翻譯】
下面的元素陰影應(yīng)被用于標(biāo)準(zhǔn)參考积瞒。如果在說明中涉及任何關(guān)于下面的參考陰影和元素陰影的不同情況出現(xiàn)，那么都?xì)w于參考陰影登下。

App bar - 應(yīng)用條
4dp

Raised button
Resting state - 靜態(tài): 2dp
Pressed state - 敲擊狀態(tài): 8dp
For desktop only, raised buttons can have an elevation of（桌面）:
Resting state - 靜態(tài): 0dp
Pressed state - 敲擊狀態(tài): 2dp
See raised buttons for more information

Floating action button (FAB) - 浮動(dòng)動(dòng)作按鈕
Resting state - 靜態(tài): 6dp
Pressed state - 敲擊狀態(tài): 12dp

Refresh indicator - 刷新指示器
3dp

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.

【翻譯】
你怎樣去組織在某一應(yīng)用中的對象或?qū)ο蠹先Q于它們怎樣依據(jù)其他對象來移動(dòng)茫孔。對象可以獨(dú)立自主地移動(dòng)或在受到比它更高層次對象限制的條件下移動(dòng)。

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.

【翻譯】
所有對象都是以“父-子”關(guān)系描述的層級(jí)體系的一部分被芳＄直矗“子”元素在這一關(guān)系體系中代表它們“父”元素的下級(jí)元素。對象可以是這一系統(tǒng)的“子”元素或其他對象的“子”元素畔濒。

Parent-child specifics:

Each object has one parent.
1剩晴、Each object may have any number of children.
2、Children inherit transformative properties from their parent, such as position, rotation, scale, and elevation.
3、Siblings are objects at the same level of hierarchy.

【翻譯】
“父-子”元素說明：
1赞弥、每一個(gè)對象只有一個(gè)“父”元素毅整。
2、每一個(gè)對象可能會(huì)有任意數(shù)量的“子”元素绽左。
“子”元素繼承來自“父”元素的可以轉(zhuǎn)移的屬性悼嫉，比如位置、循環(huán)拼窥、刻度和高度戏蔑。
3、“兄弟”元素是指與某一對象處在同一層級(jí)的對象鲁纠。

As the parent sheet scrolls, the raised button (its child) scrolls off screen with it.

【翻譯】
隨著父表的移動(dòng)辛臊，升高的按鈕（它的子元素）會(huì)伴隨著它移出屏幕。

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:
1房交、An app’s side nav drawer
2彻舰、The action bar
3、Dialogs

【翻譯】
項(xiàng)目以根元素為父元素候味，比如主 UI 元素刃唤，它們相比于其他對象來說會(huì)自主移動(dòng)。比如說白群，浮動(dòng)動(dòng)作按鈕不會(huì)與內(nèi)容一起轉(zhuǎn)動(dòng)尚胞。其他元素包括：
1、一個(gè)應(yīng)用的邊導(dǎo)航抽屜
2帜慢、動(dòng)作條
3笼裳、對話

Interaction - 交互
How objects interact with one another is determined by their place in the parent-child hierarchy.
For example:
1、Children have minimal z-axis separation from their parent; other objects do not get inserted between parents and children.
2粱玲、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.

【翻譯】
某個(gè)對象與其他對象交互的方式由它們在“父-子”層次中所處位置決定躬柬。
比如：
1、“子”元素與其“父”元素在Z軸上的分離距離最近抽减；其他對象不能插入父子元素之間允青。
2、在一個(gè)滾動(dòng)的卡片集合中卵沉，所有卡片之間都是同層次的“兄弟”元素颠锉，因此它們就像坐在同一馬車上的兩個(gè)對象一樣共同移動(dòng)。它們都是控制它們移動(dòng)的卡片集合對象的子元素史汗。

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.

【翻譯】
你會(huì)如何確定某些對象的高度（即它們在 Z 空間的位置）取決于你想描述的內(nèi)容層次以及某一個(gè)對象是否需要相對于其他對象自主移動(dòng)琼掠。

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.

【翻譯】
隨著卡片集合卷出了屏幕，它的子卡片也會(huì)隨之卷出屏幕停撞。浮動(dòng)動(dòng)作按鈕保留在某一地點(diǎn)因?yàn)樗母冈貨]有被卷動(dòng)瓷蛙。