（译）MaterialDesign（四）-Elevation&shadow

其他文章

Material Design中的对象在一定程度上和真实世界的对象很相似。

在物理世界中，物体可以彼此堆叠或固定，但不能穿过彼此。 对象也投射阴影和反射光。

Material Design反映了这些特征，形成了用户熟悉的空间模型，并且可以在应用中统一风格。

高度

通过测量一个表面的前面到另一个表面的前面，元素的高度表示表面之间的距离和其阴影的深度。

静止高度

所有Material元素都有静止高度，虽然组件在应用中具有一致的静止高度，但是他们可能在不同的平台或者设备上不一样。

动态高度

动态高度偏移是组件相对于其静止时的位置朝向的高度。

高度（Android）

高度是在z轴方向两个Material的表面的深度差或者距离。

特点

• 在高度的测量时，单位是以与x、y轴相同的与密度无关的像素单位dp。因为Material元素具有慎对（1px），所以从一个表面的顶部到另一个表面的顶部表示高度

• 子对向的高度是相对于父对象的。

静止高度

所有Material对象，无论大小都有不变的静止高度或者默认高度，如果对象改变了高度，那他应该尽快返回到静止高度。

下表是各种元素的高度值

高度（dp）	组件
24	Dialog,Picker
16	Nav drawer,Right drawer,Modal bottom Sheet
12	Floating action buttion(FAB-pressed)
9	Sub menu (+1dp for each sub menu)
8	Bottom navigation bar,Menu,Card (when picked up),Raised button (pressed state)
6	Floating action button (FAB - resting elevation),Snackbar
4	App Bar
3	Refresh indicator,Quick entry / Search bar (scrolled state)
2	Card (resting elevation) *,Raised button (resting elevation)*,Quick entry / Search bar (resting elevation)
1	Switch

桌面系统的静止高度低于列表里所有值2dp，以适应鼠标和触摸环境

组件高度

• 各个组件在程序中保持一致的静止高度。例如，Floating Action Bar的高度随着应用程序的不同而不同。
• 根据环境的改变，组件在不同的平台和设备上具有不同的高度。例如，电视机具有比桌面更大的深度，因为它具有更大的屏幕并且可以从远处观看。同样，电视和桌面比移动设备的深度更大。

响应高度和动态高度偏移

一些组件拥有响应高度，意味着他们可以在响应用户或者系统的事件时(正常，聚焦和按下)改变高度。这些高度变化使用动态高度偏移实现。

动态高度偏移是组件相对于组件的静止状态朝向的目标高度。 它们确保高度更改在操作和组件类型之间保持一致。 例如，所有在压力下提升的部件相对于其静止高度具有相同的高度变化。

如果输入动作完成或者取消，这些组件将回到它的静止高度。

避免高度干扰

具有响应高度的部件可能在其静止高度和动态高度偏移之间移动时遇到其它部件。 因为Material不能通过其他Material，组件避免以任何数量的方式彼此干扰，无论是基于每个组件还是使用整个应用程序布局。

• 在组件级别，组件可以在他们造成干扰之前移动或者移除。例如，在用户点击Cardview时，Floating Action Bar可以消失或者离开屏幕，snackbar出现，它可以移动。

• 在布局级别上，设计应用布局以尽量减少干扰的机会。 例如，将FAB定位在Cardvierw区域的一侧，使得FAB在用户尝试拾取卡时不会干扰。

组件高度比较

image

在此图中，只有组件的高度尺寸和布局是准确的。 部件的其他尺寸和整体布局仅用于说明。

例子：

image

包含卡片和浮动操作按钮的示例应用程序布局，以及其沿z轴的其组件高度的横截面图

image

一个带有打开的导航抽屉的示例应用程序布局，以及沿其z轴的其组件高度的横截面图。

阴影

阴影提供关于对象的深度和方向移动的重要视觉提示。 它们是表示表面之间的分离量的唯一视觉提示。 对象的高度确定其阴影的外观。

错误

错误的做法

没有阴影，没有指示FloatingActionBar与背景分离。

错误

错误的做法

阴影表FlaotingActionBar和蓝色表是独立的元素。 然而，他们的阴影是如此相似，暗示他们都在同一高度。

正确

正确

较柔和的较大阴影表示FloatingActionBar处于比蓝色层更高的高度。

在运动中，阴影提供关于对象的运动方向以及表面之间的距离是增加还是减小的有用提示。

错误

错误的做法

没有阴影指示高度，不能明确表明这个正方形是增加大小还是增加其高度。

正确

正确的做法

阴影随着物体的高度增加而变得更软和更大，并且随着高度的降低而变得越来越小。

正确

正确的做法

在这种情况下，一致的阴影帮助用户理解对象正在改变形状，而不是改变高度。

组件参考阴影

以下组件阴影应用作规范引用。 如果以下参考阴影和本规范中其他地方找到的组件阴影之间存在任何差异，请遵循这些参考阴影。

1.App bar 4dp

image

2.Raised button

Resting state: 2dp
Pressed state: 8dp

For desktop only, raised buttons can have an elevation of:

Resting state: 0dp
Pressed state: 2dp

image

3. Floating action button (FAB)

Resting state: 6dp

Pressed state: 12dp

image

4. Card

Resting state: 2dp

Raised state: 8dp

image

5. Menus and sub menus

Menus: 8dp

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

image

6. Dialogs 24dp

image

8. Nav Drawer & Right drawer 16dp

image

9. Modal bottom sheet 16dp

image

10.Refresh indicator 3dp

image

11. Quick entry/Search bar

Resting state: 2dp

Scrolled state: 3dp

image

12.Snackbar 6dp

image

13.switch 1dp

image

对象关系

对象层次关系

按钮随布局滚动

如何在应用程序中组织对象或对象集合，确定它们如何相对于彼此移动。 对象可以彼此独立地移动，或者由层次结构中较高的对象约束。

所有对象都是根据父子关系描述的层次结构的一部分。 这些关系中的每一个中的“子”指的是从属于其“父”元素的元素。 对象可以是系统或另一个对象的子对象。

父子关系

• 每个对象有一个父对象。
• 每个对象可以具有任意数量的孩子。
• 子节点从父节点继承变换属性，如位置，旋转，缩放和高程。
• 兄弟姐妹是同级别层次中的对象。

例外

Floating Action Bar不随布局滚动

作为父根目录的项，例如主UI元素，独立于其他对象移动。 例如，FAB钮不随内容滚动。 其他元素包括：

• 应用程序的侧导航栏
• 操作栏
• 对话框

相互作用

对象如何相互交互取决于它们在父子层次结构中的位置。

例如：

• 孩子与他们的父母有最小的z轴分离; 其他对象不会在父对象和子对象之间插入。
• 在滚动卡集合中card卡是彼此的兄弟，因此它们一起移动在一起。 他们是控制他们的运动的卡收集对象的孩子。

高度

如何确定对象的高程 - 它们在z空间中的位置 - 取决于要表达的内容层次结构以及对象是否需要独立于其他对象进行移动。