Material Design 高度和阴影

1. 概述

在 Materail Design 中，物体的行为和真实世界中很相似。

在真实世界中，物体堆放和叠加在一起，但是不能穿过彼此，并且会投射出阴影。
Material Design 的实体与之类似，也需要投射阴影。

Material Design 实体具有以下三个高度属性：

• 高度：指的是一个物体 表面 到另一物体表面的距离。物体的高度决定了它的阴影投射情况

• 默认高度：任何的实体都具有默认高度(Resting Elevation)，在一个平台中，组件的默认高度是 一致的，但是不同的 平台 或者 设备 可能具有不同的默认高度。

• 动态的高度偏移：这个属性指的是实体在 响应事件时 相对于 默认高度 的偏移量。

2. 高度（Android）

2.1 说明

高度的表示单位也是 dp，与 x 和 y 坐标一样。

需要注意的是，由于实体也具有厚度(1 dp)，所以高度指的是从一个实体表面到另一个实体表面的距离。

同时，一个子对象的高度，指的是其 相对于父对象的距离。

2.2 默认高度

默认高度是不会变化的，当一个组件的高度变化时，它应该尽快的恢复默认高度。

各个 Android 组件的默认高度可以到官网查看。

对于桌面环境来说，为了容纳鼠标和其他非触摸事件，它的组件的默认高度要比 Android 组件的默认高度低 2 dp。

组件的高度在不同的 App 之间应该相同，但是在不同设备之间不同。

比如说电视和 PC 就比手机具有更深的层次。

2.3 感应高度和动态的高度偏移

一些组件可能拥有感应高度，也就是说它会根据用户的输入（比如说触摸事件）来改变自己的高度。

一般来说，触摸，或者按压一个组件会使它的高度变高。

这些高度变化是通过 动态高度偏移 实现的。

动态高度偏移是相对于默认高度来说，组件需要移动的高度量。

动态高度偏移保证了在移动应用中组件高度偏移量的一致性。组件接受到触摸事件后，都能有一个不变的高度偏移量。

一旦触摸事件完毕，或者被取消，那么组件就必须恢复到其默认高度。

2.4 避免高度冲突

拥有感应高度的组件可能会导致其他组件随着其高度变化而变化，这是因为 组件不可以相互穿透。

避免冲突的方法有很多：

在某一元素水平上，元素可以在它们产生冲突前提前移动或者消失。比如说一个 FAB 就可以在用户选择一个卡片的时候消失或者移出屏幕。

在布局水平上，你需要通过设计你的 App 布局来减少冲突的可能性。

比如说将 FAB 置于卡片列表的一端来避免 FAB 与卡片出现的冲突。

2.5 组件高度比较

图中只有组件的高度是正确的，其他的属性(比如面积)不一定正确

 一个卡片，App Bar 和 FAB 的例子  另一个 Navigation Drawer 的例子

3. 阴影

阴影给物体的高度和其运动的方向给予了一个重要的视觉线索。

它们也是唯一的用于区分不同平面的视觉线索。

一个物体的阴影由其高度决定。

不可取，没有阴影，无法区分 FAB 和背景

不可取，过于脆弱的阴影表示 FAB 和蓝色背景是在同一个平面的

可取，较大且柔软的阴影表示 FAB 的高度比蓝色背景要高。

当出现触摸事件时，阴影可以提供一个物体运动方向的视觉线索，以体现物体和平面之间的相对距离。

不可取，没有阴影无法指示物体是增大体积还是增加高度

可取，阴影变得更大，更柔软表明了物体的高度在增加；
反之，阴影变得更小，更脆弱表明物体的高度在减少

可取，阴影不改变，表明物体的高度没有增加，而只是体积增大了。

3.1 组件参考高度

下面列出一些组件的参考高度，它们应当作为高度的典范来使用。

3.1.1 App Bar

4dp

3.1.2 Raised Button

默认高度： 2dp
按下高度： 8dp

3.1.3 Floating Action Button(FAB)

默认高度： 6dp
按下高度： 12dp

3.1.4 Card

按下高度： 2dp
抬起高度： 8dp

3.1.5 Menus and sub menus

菜单： 8dp

每个子菜单相对于父菜单增加 1dp

3.1.6 Dialogs

24dp

3.1.7 Nav Drawer and Right Drawer

16dp

3.1.8 Modal Button Sheet

16dp

3.1.9 Refresh indecator

3dp

3.1.10 Quick entry/Search bar

默认高度： 2dp
滚动高度： 3dp

3.1.11 Snackbar

6dp

3.1.12 Switch

1dp

4. 对象间关系

对象和对象集合间的关系和组织结构就决定了，当某个对象移动时，其他的对象是否随其移动。

对象可以独立的移动，也可以被其他上层对象的移动而随其移动

4.1 对象的层次结构

所有的对象都在一个 父子关系 的组织结构中。

由于 Android 采用 XML 标签结构

一个对象可以是系统的子对象，也可以是另一个对象的子对象。

父子关系的说明：

• 任何一个对象都有一个父对象
• 任何一个对象可以拥有 0 或多个子对象
• 子对象从父对象中继承可变属性，例如位置，旋转角度，放大倍数，和高度
• 同一层级的两个对象称为兄弟对象

如图，卡片上的按钮随着内容的滚动而滚动

4.2 例外

父对象是根对象的对象，例如一些主要的 UI 组件，它们的移动是独立于其他对象的。

比如说，一个 FAB 是不会随着内容的移动而滚动的。

其他的这种对象还包括：

• Nav drawer
• App bar
• Dialogs

如图，FAB 不随着内容的滚动而滚动

4.3 交互

对象和其他对象的交互动作由它所在的结构位置决定。

例如：

• 子对象具有一个能与父对象区分的最小 z 轴高度。其他的对象不能插入到这个父对象和子对象之间
• 滚动的卡片是兄弟对象，所以它们会一起移动。而控制它们移动的就是它们的父对象。

4.4 高度

对象的高度取决于它的内容的结构还有它是否能独立于其他对象移动。