阴影来源于现实生活的反映物体与物体之间距离的物理现象。在界面中，我们面对的是一个二维的平面，通过模拟元素在真实世界中的投影效果，来创造三维空间并告诉用户元素之间的高度距离与层次关系。和Outline的作用类似，所以把阴影也归类在轮廓中。
shadow.jpg

高度

元素的不同高度产生的阴影不同，在现实世界中同一光源条件下，物体距离平面近的阴影范围更小，边缘更清晰阴影颜色越深。同理，在界面中元素距离背景越远的其阴影面积更大、模糊值越高。为了模拟更真实的阴影效果我用了三组阴影值模拟阴影的弥散效果，下列为三组阴影的参数。
image.png

第 0 层：物体紧贴地面，投影与物体完全重叠，在界面中不对此层定义阴影值。如：输入框等；
image.png

第 1 层: 物体位于低层级，此时物体被操作(悬停、点击等)触发为悬浮状态，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中，如：卡片 hover 等；
image.png

第 2 层：物体位于中层级，此时物体与基准面的关系是展开并跟随，物体由地面上的元素展开产生，会跟随元素所在层级的移动而移动，如：下拉面板等；
image.png

第 3 层：物体位于高层级，该物体的运动和其他层级没有关联，如：对话框等。
image.png

光源

在界面中具体的表现方式为元素投影的方向。假定光源所处高度不变，光源与物体的距离和物体与阴影的距离成正比。光源越远，则阴影距离物体越远。阴影的方向在界面里通常使用 X, Y 坐标轴来表示。

阴影值

元素在不同高度上时，投射出的阴影颜色、模糊度、面积都有所区分。离地面越远的物体，产生的阴影颜色越淡、模糊度越高、面积越大；反之则颜色更深、模糊度越低、面积越小；通过模糊值和扩展值来控制。