Environment | UI “画布”特性

Environment是在描述UI设计所面对的这块“画布”究竟有怎样的属性。因为这是一块虚拟的“画布，因此它与现实中的画布有诸多区别。Material design从surface、elevation、light and shadow 三个方面阐明了这块“画布”在x、y、z轴上的基本属性。

01.

Surface

每一个surface非常像是PS中的一个图层。不同的内容占据着不同的surface，可以不断的叠加，也可以在水平方向向四周无限延伸。但与PS图层不同的是，surface是在z轴方向是具有厚度的，厚度为1dp，且不同surface会在z轴方向占据在不同的高度。

surface具有1dp的厚度，且占据不同的高度

surface的属性是固态，而非气态或液态。因此，surface不会出现像气体消散、液体流动的效果。surface是不可被击穿的固态薄片，可以任意改变形状、大小，可以拆分、拼贴，可以移动、拉伸。

02.

Light and shadow

Light分为key light和ambient light，所以也就会产生两个阴影，key shadow（sharper）和ambient shadow（soft，diffused）。我们看到的阴影都是两种阴影的叠加。

surface由于可以在z轴方向移动，因此它有一个Elevation value。同时，有光源的存在，那么具有1dp厚度的surface就会产生阴影的投射。所以，在设计中要想清楚这个阴影是投射在哪里。是投射在0dp的surface上，还是投射在4dp的surface上，这会产生不同大小的阴影。

同样高度的A和B产生不同的阴影

Shadow存在的主要目的是告知人们可以与之交互。

Depicting elevation：为了清楚的描述elevation，一个surface应该展现出如下信息：

1. surface edge：每个surface都应该有清晰的边缘，与其他surface相区分；

2. overlap with other surface：用颜色、透明度、阴影说明surface之间的重叠关系；

3. distance from other surface：阴影是唯一能说明准确距离的方式。阴影越大、越模糊就说明距离越远。

在设计中设置阴影的时候，我们输入的是其elevation value。

03.

Elevation

Resting elevation：界面中组件会有一个静止高度，用以提醒可交互性。这个静止高度因设备、平台、应用程序的不同而不同。一般来说，电脑界面的静止高度会比较低，因为经常有静止高度之外的指标来提示交互状态，如：悬停。当静止高度为0dp的时候，你可以用线将其勾勒出以示是一个卡片。

Changing elevation：当用户与界面有交互行为的时候，组件可以通过改变高度来响应用户。当交互行为结束的时候，组件会回到原来的高度上。

对交互行为响应

Elevation interference：当有交互行为时，由于有高度变化，要注意避免“碰撞”。

避免“碰撞”

scrimmed background：当用到scrimmed background的时候，说明前景的内容非常重要。

scimmed background

Elevation hierarchy：1.等级高的surface有更重要的内容，需要集中注意力，如：对话；2.等级低的surface会受到等级高的surfaced的控制。等级高的surface弹出时，等级低的surface会变暗。如：导航栏弹出的时候。

导航栏弹出，下面的surface变暗

Default elevations：设计时常用的数据

default elevation

参考资料

《峭壁，艾特勒塔的日落》克劳德·莫奈