google material design (2-1)

what is material design

---

Environment

---

3D world

---

该材料的环境是一个三维空间，这意味着所有对象都有的x，y和z维度。 z轴垂直于对准显示器的平面上，与正z轴延伸的朝向观察者。 材料的每片占据沿z轴的单个位置和具有标准1DP厚度。 在网络上，z轴是用于分层和不为立体。 在3D世界是由操纵y轴效仿。

———-

光影

———-

在物质环境中，虚拟的灯光照亮了现场。 按键灯光创建定向阴影，而环境光创建从各个角度柔和阴影。 在物质环境阴影是由这两种光源投。 在机器人的开发，当光源在沿着z轴的不同位置阻断材料片阴影发生。 在网络上，阴影仅由操纵y轴描绘的。 下面的例子显示了卡6DP的高度。

Material properties

材料具有一定的不可变的特性和固有的行为。 了解这些特质将帮助你的方式，是与材料设计的构想是一致的操作材料。

物理特性

材料具有变化的X和Y的尺寸（在DP测量）和均匀的厚度（1DP）。

材质投射阴影。 阴影从物质要素之间的相对高程（z位置）自然结果。

内容被显示在材料，以任何形状和颜色。 内容不添加厚度的材料。

内容可以独立于材料的行为，但材料的范围内受到限

多个材料元件不能同时占用相同的点在空间中。

输入事件不能穿过的材料。

Transforming material

Material can change shape.

材料可以改变形状

Material grows and shrinks only along its plane.

材料生长和仅沿其平面收缩。

Material never bends or folds.

材料从来没有弯曲或折叠

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轴运动是通常与材料的用户交互的结果。

Elevation and shadows

Objects in material design possess similar qualities to objects in the physical world. In the physical world, objects can be stacked or affixed to one another, but cannot pass through each other. Objects cast shadows and reflect light.

在材料设计对象具有相似的质量，以在物理世界中的对象。 在现实世界中，对象可以被堆叠或固定到彼此，但不能穿过彼此。 对象投射阴影和反射光。

These qualities form a spatial model that is familiar to users and can be applied consistently across apps. Underpinning this spatial model are the concepts of elevation and shadow.

这些特质形成一个空间模型所熟悉的用户，可以在整个应用程序的一贯性原则。 支撑这一空间模型的高度和阴影的概念。

Elevation (Android)

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

高程是相对深度或距离，两个表面沿z轴之间。

Specifications：

• 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.
  • A child object’s elevation is relative to the parent object’s elevation.

    技术参数：

    • 海拔测量以相同单位作为x和y轴，典型地在与密度无关的像素（DP）。 由于材料的元素具有深度（所有材料1DP厚），海拔从一个表面的顶部到另一个顶部测量的距离。
      • 子对象的高程是相对于父对象的高度。
        

        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.

        休息抬高

        所有的实物，无论大小，有一个休息抬高，或默认的提升不会改变。 如果对象改变仰角，应该尽快返回到其静止高程。

        Component elevations:：

        The resting elevation for a component type is consistent across apps (e.g., FAB elevation does not vary from 6dp in one app to 16dp in another app).。

        Components may have different resting elevations across platforms, depending on the depth of the environment (e.g., TV has a greater depth than mobile or desktop).

        组件海拔：

        静息抬高了组件类型为跨应用程序是一致的（例如，FAB海拔不从6DP变化在一个应用程序中的另一种应用程序，以16DP）。

        部件可以具有不同的静止高程跨平台，根据环境（例如，电视具有比移动或桌面更大的深度）的深度。

        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.

        避免抬高干扰：

        与响应升高组件可能会遇到的其他成分，因为他们把他们的休息和海拔高程动态偏移之间。 因为材料不能穿过其它材料 ，组分避免彼此任意数量的方式干扰，是否在每个组分的基础上或使用应用程序的整个布局。

        在组件级，部件可以移动或删除它们造成的干扰了。 例如，一个浮动动作按钮（FAB）可以消失或前一个用户拿起一个卡片移出屏幕，或者如果一个小吃店出现它可以移动。

        在布局层面，设计你的应用程序布局，以减少造成干扰的机会。 例如，定位晶圆厂的卡流的一侧，当用户试图拿起一张卡的FAB不会干涉。

        Component elevation comparisons：

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

        组件海拔比较：

        下图比较了各种成分的休息海拔和动态提升偏移。

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

        阴影提供了有关对象的深度和定向运动的重要视觉线索。 它们是唯一的视觉提示，指示表面之间的分离的量。 一个对象的高度决定了它的阴影的外观。

        
        

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

        在运动中，阴影提供关于移动的对象的方向和是否表面之间的距离增加或减少有用线索。

        
        

        组件参考阴影

        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 spec, defer to these reference shadows.

        以下部件的阴影，应使用作为典型的引用。 如果有以下引用阴影和部分阴影中规格别处找到之间的差异，推迟到这些参考阴影。

        应用栏 4DP

        
        

        浮动操作按钮（FAB）

        静息状态：6DP

        按下的状态：12dp

        
        

        卡

        静息状态：2DP

        拾取状态：8DP

        
        

        菜单和子菜单

        菜单：8DP

        子菜单：9dp（1 DP为每个子菜单)

        
        

        对话框

        24dp

        
        

        导航抽屉与抽屉权

        16DP

        
        

        模态底片

        16DP

        
        

        刷新指示器

        3DP

        
        

        快速进入/搜索栏

        静息状态：2DP

        滚动的状态：3DP

        
        

        Snackbar

        6dp

        
        

        Switch

        1dp

        
        

        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.
        • 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.
        • 每个对象都有一个父。
        • 每个对象可以有任意数量的孩子。
        • 孩子继承父变革属性，如位置，旋转，缩放和俯仰。
        • 兄弟姐妹是在层次结构的相同级别的对象。
          

          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:

        • An app’s side nav drawer
        • The action bar
        • Dialogs

        项父到根，如主UI元素，其他目的的独立移动。 例如，浮置动作按钮不会滚动与内容。 其他内容包括：

        • 一个应用程序的一面导航抽屉
        • 操作栏
        • 对话框

        Interaction

        How objects interact with one another is determined by their place in the parent-child hierarchy.

        对象如何互相作用另一个是由他们的父子层次结构的地方来确定。

        For example:

        • Children have minimal z-axis separation from their parent; other objects do not get inserted between parents and children.
        • 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.
        • 孩子们从他们的父母最小的z轴分离; 其他对象没有得到父母和子女之间插入。
        • 在滚动卡集合，这些卡是彼此的兄弟姐妹，因此它们都一起移动串联。 他们是控制自己的运动卡采集对象的儿童。

        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-空间取决于你想表达的内容的层次和对象是否需要其他对象的独立移动。