Material Design 主体环境

1. 概述

Material Design 是一个三维环境,包括了灯光,实体,和投射阴影。

所有的实体对象都具有 x, y, z 三个坐标。

一个对象只能拥有一个 z 轴位置。(即不允许两个实体重叠)

主光源用于制造方向投影,散射光源用于制造柔和阴影。

  • 实体厚度: 1dp
  • 阴影由重叠实体之间的高低差产生

    即阴影实际上就是高低差的代表

2. 3D 世界

Material Design 是一个 3D 世界。
这意味着所有的实体都具有 3 个维度的坐标;
z 轴垂直对齐于屏幕,正轴指向屏幕外侧。

一个实体厚度为 1dp,并独享一个 z 轴坐标。

dp = (像素宽度 * 160) / 像素密度

在网页端,z 轴是用来分层而不是用来展示视角,z 轴的坐标通过操作 y 轴来模拟实现。

3. 灯光和阴影

在环境中,虚拟光源营造出了场景。

主光源用于投射方向投影,而散射光源用于在各个角度投射柔和的光影。

在环境中的阴影由以上这两种光源来实现。
在 Android 开发中,阴影的产生是因为光源被不同 z 轴坐标上的实体遮挡。在网页开发中,通过调整 y 轴来进行仿真实现。

下面是一个标高为 6 dp 的实体的例子。

直射光源投射的阴影
散射光源的阴影
两种光源的混合投影
0%