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.

【翻譯】
我們挑戰自己為我們的用戶創造一種視覺語言，將經典的良好設計原則與技術和科學的創新和可能性相結合。 這是原質化設計(Material Design)。 這份文檔是動態更新的，將會隨著我們對 Material Design 的探索而不斷迭代、升級。

Goals - 目標

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

【翻譯】
創造一個視覺語言，能夠遵循優秀設計的經典定則，同時還伴有創新理念和新的科技。

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.

【翻譯】
開發一種底層系統，構建跨平臺和超越設備尺寸的統一體驗。遵循基本的移動設計定則，同時支持觸摸、語音、鼠標、鍵盤等輸入方式。

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.

【翻譯】
通過構建系統化的動效和空間合理化利用，并將兩個理念合二為一，構成了實體隱喻。與眾不同的觸感是實體的基礎，這一靈感來自我們對紙墨的研究，但是我們相信，隨著科技的進步，應用前景將不可估量

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.

【翻譯】
實體的表面和邊緣提供基于真實效果的視覺體驗，熟悉的觸感讓用戶可以快速地理解和認知。實體的多樣性可以讓我們呈現出更多反映真實世界的設計效果，但同時又絕不會脫離客觀的物理規律。

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.

【翻譯】
光效、表面質感、運動感這三點是解釋物體運動規律、交互方式、空間關系的關鍵。真實的光效可以解釋物體之間的交合關系、空間關系，以及單個物體的運動。

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.

【翻譯】
基于傳統印刷的設計 - 排版，網格，空間，尺度，顏色和圖像，這些的基本要素的使用 - 指導視覺處理。 這些元素愉悅著我們。 他們創造層次，意義和焦點。 顏色選擇的推敲，邊緣到邊緣的圖像，大規模排版和有意的空白空間創建一個大膽的圖形界面。

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

【翻譯】
讓用戶沉浸在體驗中。 強調用戶操作，使核心功能立即顯現。

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

【翻譯】
動畫效果(簡稱動效)可以有效地暗示、指引用戶。動效的設計要根據用戶行為而定，能夠改變整體設計的觸感。

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.

【翻譯】
動效應當在獨立的場景呈現。通過動效，讓物體的變化以更連續、更平滑的方式呈現給用戶，讓用戶能夠充分知曉所發生的變化。

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

【翻譯】
動效應該是有意義的、合理的，動效的目的是為了吸引用戶的注意力，以及維持整個系統的連續性體驗。動效反饋需細膩、清爽。轉場動效需高效、明晰。

2.Environment - 環境

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

【翻譯】
Material design是包含光，材料和投射陰影的三維環境。

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尺寸。
所有對象都具有單個z軸位置。
主光源投射出一個定向的陰影，而環境光從各個角度投射出連貫又柔和的陰影。

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

【翻譯】
不同對象的高度差產生陰影。

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.

【翻譯】
材質環境是一個3D空間，這意味著所有對象都有x，y和z維度。 z軸垂直地對準顯示器的平面，正z軸朝向觀看者延伸。 每張材料沿著z軸占據單個位置，并且具有標準1dp厚度，相當于像素密度為160的屏幕上的一個像素厚度。
在網頁上，z軸被用來分層而不是為了視角。3D 空間通過操縱 y 軸進行仿真。

Light and shadow - 光影關系

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.

【翻譯】
在材料環境中，虛擬光照亮場景。主光源投射出一個定向的陰影，而環境光從各個角度投射出連貫又柔和的陰影。
材料環境中的陰影由這兩個光源投射。 在Android開發中，當光源被沿著z軸，被各種位置處的材料片阻擋時，發生陰影。 在web上，陰影通過僅操縱y軸來描繪。 以下示例顯示為高度為6dp的卡片。

主光源投射的陰影

環境光源投射的陰影

主光源和環境光源疊加的陰影

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 的構想是一致的。

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

Physical properties - 物理特性

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

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

正確的示范

Do.
The height and width of material can vary.

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

錯誤的示范

Don't.
Material is always 1dp thick.

【翻譯】
錯誤的示范
材料總是1dp厚。

Material casts shadows.

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

【翻譯】
材料會形成陰影。
陰影是由于材料元件之間的相對高度（Z 軸位置）而自然產生的。

正確的示范

Do.
Shadows depict the relative elevation between material elements.

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

錯誤的示范

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

【翻譯】
錯誤的示范
陰影從不用著色材料近似。

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

【翻譯】
內容可被以任何形狀和顏色顯示在材料上。
內容并不會增加材料的厚度。

正確的示范

Do.
Material can display any shape and color.

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

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

【翻譯】
內容的展示能夠獨立于材料,但要被限制在材料的范圍里。

正確的示范

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

【翻譯】
正確的示范
內容的行為能獨立于材料的行為。

Material is solid.

Input events cannot pass through material.

【翻譯】
材料是實物。

輸入事件不能穿過材料。

正確的示范

Do.
Input events only affect the foreground material.

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

錯誤的示范

Don't.
Input events cannot pass through material.

【翻譯】
錯誤的示范
輸入事件不能從材料下面穿過。

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

【翻譯】
多個材料元件不能同時占用相同的空間點。

正確的示范

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

【翻譯】
正確的示范
利用不同的高度區分材料元件是防止多個材料元件同時占用相同空間點的一個方法。

錯誤的示范

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

【翻譯】
錯誤的示范
多個材料元件不能同時占用相同的空間點。

Material cannot pass through other material.

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

【翻譯】
材料不能穿過其他材料。
例如，一片材料不能在改變高度時穿過另一片材料。

錯誤的示范

Don't.
Material cannot pass through other material.

【翻譯】
錯誤的示范
材料不能穿過其他材料。

Transforming material - 材料的變化

Material can change shape.

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

正確的示范

Material grows and shrinks only along its plane.

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

正確的示范

Material never bends or folds.

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

錯誤的示范

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.

【翻譯】
當材料被割開時，它還能自己復原。例如，你從一片材料中移除了一部分，這一片材料將再次變為一塊完整的材料。

Movement of material - 材料的移動

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

【翻譯】
材料能在環境中的任何地方自動產生或消失。

Material can move along any axis.

【翻譯】
材料能沿任何軸移動

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

【翻譯】
Z軸產生運動一般都是用戶與材料交互而產生的。

4.Elevation and shadows - 高度和陰影

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

【翻譯】
Material design 中的對象與現實生活中的對象具有相似的性質。

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.

【翻譯】
在現實生活中，不同對象可以被堆積或粘貼起來，但是不能彼此交叉。對象自身塑造了自己的陰影并返回自己的光影。
依據這些性質所構造出來的空間模型對于用戶來說是非常熟悉的，這一模型也可以被長期應用于移動應用當中。

Elevation (Android) - 高度（安卓）

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

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

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 的厚度，所以“高度”度量的是從一個平面頂部到另一個平面頂部的距離。
2、一個子對象的高度與其父對象的高度相關。

這里是一些與安卓應用相關的圖表和數據。

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 對象除去大小之外，還有一個“靜止高度”，或者稱“默認高度”，它是不會變化的。當一個對象的高度產生變化時，它將會盡快恢復到自身的靜止高度。
桌面靜止高度要低于所列值的2dp，以適應鼠標和非觸摸環境。

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、某一元素類型的靜止高度在移動應用中是一個常量。（比如，FAB 高度不會在某一個應用中是 6 dp 而在另一個應用中是 16 dp）
2、元素在某一平臺中可能會存在多種靜止高度，這取決于環境的深度。（比如，TV 相比于移動端和桌面來說就具有更深的層次）

Responsive elevation and dynamic elevation offsets - 感應高度與動態高度偏移
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.

【翻譯】
一些元素類型擁有感應高度，也就是說它們會根據用戶的輸入（比如常規的、關注的和壓制的）或系統事件來改變高度。這些高度的變化會通過動態高度偏移而不斷生成。
動態高度偏移是某一元素移動的目標高度，它與該元素的靜止狀態有關。可以確定的是高度的變化在事件和元素類型中是持久發生的。比如說，所有通過按壓來提升的元素相對于其靜態高度來說都具有相似的高度變化。
一旦輸入事件完成或被取消，那么元素將會恢復到它的靜止高度上。

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.

【翻譯】
處于感應高度的元素當它在靜止高度與動態高度偏移之間移動的時候可能會遇到其他的元素。由于 Material 不能相互交叉，沒有任何一種方式能夠讓元素之間產生沖突，無論是基于均元素基礎（per-component basis）還是通過使用完整應用布局。
在某一個元素水平上，元素可以在它們產生沖突之前提前移動或被移動。比如說，一個“浮動動作按鈕”（FAB）可以在用戶選擇一張卡片之前消失或移出屏幕，或者它也可以在某一個 “snack bar” 出現時移動。
在布局水平上，你需要通過設計你的應用布局來將產生沖突的機會降到最低水平。比如說，可以通過將 FAB 置于某個卡片流的一端來避免當用戶嘗試獲取某個卡片時所產生的沖突。

Component elevation comparisons - 元素高度比較

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

【翻譯】
下面的圖表對比了多種元素的靜止高度和動態高度偏移。

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

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

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

【翻譯】
一個包含開放導航抽屜的應用布局實例與它在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.

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

錯誤的示范

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

【翻譯】
錯誤的示范
一旦沒有了陰影，沒有什么可以標示浮動動作按鈕是從背景層分離出來的。

錯誤的示范

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.

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

正確的示范

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

【翻譯】
正確的示范
更柔和、更大的陰影說明浮動動作按鈕相比于擁有更卷曲陰影的“藍層”（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.

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

錯誤的示范

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

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

正確的示范

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

【翻譯】
正確的示范
某一個對象的高度增加時其陰影會變得更柔和、更大，當其高度減小時，陰影會變得更卷曲。

正確的示范

Do.
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.

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

App bar - 應用條
4dp

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

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

Refresh indicator - 刷新指示器
3dp

Object relationships - 對象關系

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.

【翻譯】
所有對象都是以“父-子”關系描述的層級體系的一部分。“子”元素在這一關系體系中代表它們“父”元素的下級元素。對象可以是這一系統的“子”元素或其他對象的“子”元素。

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、每一個對象只有一個“父”元素。
2、每一個對象可能會有任意數量的“子”元素。
“子”元素繼承來自“父”元素的可以轉移的屬性，比如位置、循環、刻度和高度。
3、“兄弟”元素是指與某一對象處在同一層級的對象。

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

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

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

【翻譯】
項目以根元素為父元素，比如主 UI 元素，它們相比于其他對象來說會自主移動。比如說，浮動動作按鈕不會與內容一起轉動。其他元素包括：
1、一個應用的邊導航抽屜
2、動作條
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.

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

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 空間的位置）取決于你想描述的內容層次以及某一個對象是否需要相對于其他對象自主移動。

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.

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