定义

阴影来源于现实生活的反映物体与物体之间距离的物理现象。在界面中，我们往往通过模拟元素的投影直截了当的来告诉用户，元素之间的高度距离与层次关系。

高度

阴影是由两个不同高度的平面产生，且强度由两者之间的距离决定。所以物体的高度直接影响物体的阴影，对象离地面越远阴影越大，模糊值越高。我们将系统分为无、低、中、高四个层级。不同的高度层级，阴影属性也有所不同。

阴影值

综上可知，阴影由光照而产生，主要影响其值的是物体高度与光源位置：在不同高度上时，投射出的阴影颜色、模糊度、面积都有所区分。离地面越远的物体，产生的阴影颜色越淡、模糊度越高、面积越大；反之则颜色更深、模糊度越低、面积越小；而投影的方向主要由光源与物体的相对位置决定。

不同的阴影方向使用在不同的地方：

  • 阴影向下：主要应用于组件内部或组件本身，是比较常规场景的用法
  • 阴影向上：主要应用于底部导航或工具栏等
  • 阴影向左：主要应用于抽屉组件
  • 阴影向右：主要应用于左边导航栏、抽屉组件

为了更符合真实阴影，除去无阴影的组件，我们根据低、中、高对应三层阴影的表达方式，让阴影更柔和，更符合真实状态