Material Design学习笔记---海拔和阴影

海拔和阴影

在material design 世界中的物体拥有着在真实物理世界中一样的特性。在真实的物理世界中，物体可以被折叠或者沾粘上另外一个物体，但是不能通过穿越其他的物体。物体可以出现阴影和反射弧线。

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.

海拔

阴影

和其他物体的关系

Contents

Elevation (Android)

Shadows

Object relationships

海拔

海拔是沿着Z轴在两层之间，相对的一个深度或者距离。Elevation is the relative depth, or distance, between two surfaces along the z-axis.

规范

海拔是使用跟x和y轴相同的测量单位测试出来的值，通常使用px或者dp。因为material元素有深度（所有的material都是1dp的厚度），海拔是从一层的顶部到另一层顶部的距离测量出来的值。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.

静止的海拔

所有的material物体，不管他们的尺寸，都应该有一个静止的海拔或者没有改变的默认海拔。如果一个物体改变了自己的海拔，他应该尽快的恢复到他自己的静止的尺寸。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.

组件的海拔

一个组件的海拔是贯穿于所有App的，不能在一个App中这个组件的海拔为6dp，而在另外一个App中这个组件的高度就成16dp了。

在对个平台上，电视、手机、电脑桌面等不同的平台环境，一个组件的高度是会变化的。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).

相对的海拔和动态的海拔变化

不同的组件类型有一个相对的海拔，意味着当他们的海拔因为用户输入和一些系统时间而发生变化的时候，海拔就会随之改变。

当一个组建向一个方向移动的时候，会根据静态海拔的状态，动态补偿的海拔高度变化。他们能确保海拔的变化一如既往的贯穿事件和组件。举个例子，所有拿起和按下的组件都有相对于他们静止的海拔相同的变化。

一旦输入事件被完成或者取消，这个组件将会恢复到他静止的海拔。

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.

避免组建互相影响

有着相对海拔的组件，当他们移动到处于静止海拔和动态海拔变化的范围之间的时候也许会碰到其他的组件。因为material 不能穿越其他的material，组件在任何情况下都应该避免其他组件的影响，不管是在一个组件的基础上还是使用任何的app布局的时候。

在一个组件的层级，组件能移动或者从屏幕被移除。举个例子，一个悬浮的事件按钮可以在用户挑选一个卡片之前被隐藏或者从屏幕移除，或者当一个桌面出现的时候他也可以移动。

在一个布局的层级，设计你的app将会降低收到其他组件干扰的概率，比如，当用户试图选取一个卡片的时候，在卡片上按钮的位置是不会收到影响的。

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.

（表格）

组件海拔的比较

示意图

。。。。。

阴影

阴影引入了一种关于物体海拔和运动方向的视觉暗示，他们只能从视觉上的暗示来暗指两个层之间的区分。一个物体的海拔决定了物体出现哪种阴影。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.

没有一个阴影，就没有任何东西来表明这个悬浮的事件按钮是和背景分离开来的Without a shadow, nothing indicates that the floating action button is separate from the background surfaces.

阴影可以区分出悬浮事件按钮和蓝色背景图，然而，这样的阴影太相似了，以至于觉得这两个元素是一样的海拔。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.

更大的阴影才能表明悬浮的事件按钮相对于蓝色背景，是在一个更高的海拔。Softer, larger shadows indicate the floating action button is at a higher elevation than the blue sheet, which has a crisper shadow.

…..