2017 Material design 第一章第四节《高度和投影》

4、高度和投影（Elevation and shadows）

Material design中的material对象的特性与现实物理世界中的物体特性类似。

在现实物理世界中，一个物体能够叠在另外一个物体上面，可是物体间不能相互穿过。同时，物体也能投射投影和反射灯光。

Material design借鉴了现实物理世界中物体的特性，并将其运用在虚拟的三维空间里面的material对象上。这种借鉴现实物理世界的作法不只有利于帮助用户理解，还能统一各应用间的体验。

高度（Elevation）
高度的计算方法是从一个material对象的顶面到另外一个material对象的顶面。高度的大小能够暗示用户两个material对象间的距离大小以及投影的深浅。

默认高度（Resting elevation）
全部的material对象在空间中都有其本身默认的高度。在应用中，这些组件（material对象）的默认高度是这样的，但到了不一样的平台或是设备上的时候，默认高度可能就会出现变化。

高度的动态补偿（Dynamic elevation offsets）
高度的动态补偿就是一个组件（material对象）从其默认高度朝着目标高度所作的位移变化。

高度（Android） （Elevation (Android)）

高度取决于沿z轴两个面之间的距离，或者说是深度。

说明：
高度（z轴）的测量单位和x、y轴上的测量单位是同样的，都是dp（density-independent pixels）。由于material的厚度是1dp，因此对两个material对象间高度的计算是从一个material对象的顶面到另外一个material对象的顶面。
在material对象中，一个子对象的高度与其父对象的高度相关。
下图是Anndroid应用中的例子。

不一样参照物下2个material对象的高度

默认高度（Resting elevation）
不管大小，全部的material对象都有一个默认高度，这个默认高度是不会改变的。当一个material对象的高度产生了变化，以后它会立刻回到默认高度。

电脑桌面端（Desktop）的各组件默认高度比下图所列值小2dp，目的是适应带鼠标以及非触摸屏的设备环境。

高度（dp）	组件
24	对话框，选择器
16	抽屉导航, 右抽屉导航, 模态底部sheet
12	浮动按钮（FAB）
9	子菜单（每一个子菜单+1dp）
8	底部导航栏, 菜单, 卡片（选择状态）, 抬起按钮 （按下状态）
6	浮动按钮（默认状态）, Snackbar
4	应用栏
3	刷新指示器, 快速入口 / 搜索栏（滚动状态）
2	卡片（默认高度）＊, 抬起按钮（默认高度）＊, 快速入口 / 搜索栏（默认高度）
1	开关

组件高度：（Component elevations）
在不一样的应用中，各组件的默认高度不变。举个例子，在一个应用中浮动按钮（floating action button）的默认高度是6dp，到了另外一个应用中同样也是6dp的默认高度。
在不一样的平台和设备中，各组件的默认高度可能不一样，这取决于人们观看的距离。举个例子，由于TV有着比电脑桌面（desktop）更大的屏幕尺寸，因此观看TV的距离比观看电脑桌面的距离要更远。同理，观看TV和电脑桌面的距离比观看手机的距离要远。

高度响应和高度的动态补偿（Responsive elevation and dynamic elevation offsets）
一些组件的高度会做响应，换句话说就是当用户输入反馈（好比正常状态、聚焦状态和点击状态）或一些系统事件的反馈时，这些组件的高度会所以而改变。这些组件的高度变化主要是经过高度的动态补偿实现。

高度的动态补偿就是一个组件（material对象）从其默认高度朝着目标高度所作的位移变化。它能确保各组件变化以及组件类型的一致。例如，全部可点击的组件被点击后都会有相同高度的位移变化。

一旦用户输入事件完成或者被取消，这些组件就会返回到默认高度的位置上。

避免高度变化冲突（Avoiding elevation interference）
当一个组件的高度在位移变化的时候，有可能会遇到其余组件也在变化。由于material对象之间是不可以相互穿过的，因此咱们要避免各组件在高度变化的时候发生冲突。

在组件处于相同高度的时候下，组件能够根据状况提早移动或者直接消失。举个例子，浮动按钮（floating action button，如下简称“FAB”）会在用户选择卡片（cards）以前消失或移离屏幕，抑或者当snackbar出现时浮动按钮移动位置。

在布局层面上，经过设计应用的布局能够减小组件间相互冲突。举个例子，将浮动按钮（FAB）置于屏幕的一侧，当用户选择卡片（cards）的时候就不会和浮动按钮产生冲突。

各组件间高度的对比（Component elevation comparisons）
下图是各组件间默认高度和高度的动态补偿的对比。

在上图中，只有所列组件高度方面和其之间的对比是肯定的。组件相关的其余方面和其总体的布局只做说明参考

以上图为例，图中该应用的页面布局里面包含了卡片（cards）和浮动按钮（FAB）组件。右边是该页面的横截面图，其中展现了各组件的高度信息

以上图为例，图中展现了一个被用户打开的抽屉导航菜单（Nav drawer）。右边是该页面的横截面图，其中展现了各组件的高度信息

投影 （Shadows）

为了引导用户理解material对象的深度和运动方向，投影提供了重要的视觉暗示。投影是惟一可以区分面与面（material对象）之间关系的视觉线索。一个material对象的高度决定了其投影的效果。

没有投影存在，你根本不清楚浮动按钮（FAB）和背景是不是分开的。

不可行

虽然有投影存在，咱们也知道浮动按钮（FAB）和蓝色卡片是分开的两个组件。但由于两个组件的投影类似，因此会误觉得两个组件处于同一高度。

不可行

图中，浮动按钮（FAB）的投影比其余组件的投影更为柔和且面积更大，这样咱们很容易就能看出浮动按钮的高度比蓝色卡片的高度要高。

可行

在运动方面，投影不只能为material对象运动的方向提供视觉暗示，还能展现material对象之间的高度变化（距离增长仍是减小）。

图中是蓝色的material对象的先后变化。由于没有投影暗示material对象的高度，因此你根本不清楚其尺寸在增长仍是高度在增长。

不可行

图中是蓝色的material对象的先后变化。前者由于投影清晰且面积较小，因此高度较低。后者反之。

可行

图中是蓝色的material对象的先后变化。二者由于投影一致，因此很容易能看出material对象是尺寸在变化。

可行

组件的投影规范
如下是各个组件的投影参考。若是在Material design规范中其余地方出现了与这些投影参考规范不一样的组件投影，请与这里为准。

应用栏（App bar）
4dp

凸起按钮（Raised button）
默认状态（Resting state）: 2dp
按下状态（Pressed state）: 8dp

在电脑桌面端（desktop）上：
默认状态：0dp
按下状态：2dp
点击查阅关于 凸起按钮 的更多信息。

浮动按钮（Floating action button (FAB)）
默认状态：6dp
按下状态：12dp

卡片（Card）
默认状态：2dp
凸起状态（Raised state）：8dp

在桌面电脑端上的状况，请前往 内容布局 查阅更多信息。

菜单和子菜单（Menus and sub menus）
菜单：8dp
子菜单：9dp（每增长一个子菜单+1dp）

对话框（Dialogs）
24dp

抽屉导航菜单和右抽屉（Nav Drawer & Right drawer）
16dp

底部模态sheet （Modal bottom sheet）
16dp
译者注：
1.sheet是Material design语境中的词语，能够粗浅的认为是“纸片”的意思。若是换成正常的说法应该是对话框的意思，只不过官方为了配合语境而另做设定。
2.什么是「模态」，请点击了解

刷新指示器（Refresh indicator）
3dp

快捷入口/搜索栏
默认状态：2dp
滚屏状态（Scrolled state）：3dp

Snackbar
6dp
译者注：一样是Material design语境中的词语，很差表达故不作翻译。

开关（Switch）
1dp

对象关联 （Object relationships）

对象层级
在一个应用中，你如何去组织对象直接决定了对象移动的时候与其余对象之间的关系。好比该对象是否可以独立移动，仍是说移动的时候受到其余对象约束。

全部对象之间都是以父子关系存在的。「子」级对象从属于它的「父」级对象。一个对象能成为整个系统或者另外一个对象的子级对象。

译者注：这里讨论的对象就是material对象。material对象在「应用」中的表现就是咱们熟知的一个个组件。

关于父-子级对象：
每一个对象都有一个父级对象
每一个对象都有不一样数量的子级对象
子级对象继承父级对象的属性，如位置、选择、缩放和高度。
跟子对象处于同一层级的子级对象的级别相同。

例外
一些对象从属的父级对象是root，好比重要的UI组件，它的移动独立于其余对象。举个例子，浮动按钮不会跟随滚屏而移动。除此以外，还包括如下组件：

• 侧边导航菜单
• 操做栏
• 对话框

相互做用
一个对象如何做用于另外一个对象，取决于他们在父子层级中的位置。
举例说明:
子级对象和父级对象在z轴上的距离是最近的；其余非子级对象不能在父-子级对象之间插入。
一个正在移动的卡片（card）集合，他的全部子级卡片都跟随着移动。这个卡片集合控制着它的各个子级卡片移动。

抬起按钮（子级）跟随父级sheet滚动离开屏幕。

由于整个卡片（card）集合跟随屏幕滚动而移动，因此其各个子级卡片也会随着屏幕滚动而移动。浮动按钮之因此没有跟随屏幕滚动，是由于其父级对象没有所以滚动。

高度如何决定某个对象的高度（即它们在z轴上的位置）取决于你想表达怎样的内容层级，以及当一个对象须要移动的时候是否独立于其余对象。