写在前面
今天我们利用简单的矩形来说一说光与影的关系，还记得6年前刚开公众号的一篇文章就是关于光的介绍，过去这么多年了，又针对光与影写了一篇文章，内容确是完全的不同。这可能就是时间带给我们的认知。不多说了，抓紧时间看看吧。

材质表面在阻挡光源时会投射阴影。

光

光与影
在 Material Design 环境中，虚拟灯光照亮 UI。关键光会产生更清晰的定向阴影，称为关键阴影。环境光从各个角度出现以产生漫射的柔和阴影，称为环境阴影。

光源
材质环境中的阴影由主光和环境光投射。在 Android 和 iOS 开发中，当光源在沿 z 轴的不同位置被材质表面阻挡时，就会出现阴影。在网络上，仅通过操纵 y 轴来描绘阴影。以下示例显示了海拔为 6dp 的卡片。

阴影
阴影提供有关深度、运动方向和表面边缘的线索。表面的阴影由其高程和与其他表面的关系决定。

用法
由于阴影表示表面之间的高度，因此必须在整个产品中始终如一地使用它们。

过程是通过一致使用阴影来描绘的。

阴影大小反映高度。高海拔的表面有较大的阴影，而低海拔的表面有较小的阴影。

警告

如果你的产品不使用阴影，请以其他方式传达高度，例如通过视差运动。

做这种

阴影的出现表明列表项已被拾取，并且可以在此重新排序交互期间移动到其对等项之前。

阴影和运动
阴影提供有关表面运动方向以及表面之间的距离是增加还是减少的有用线索。

当表面改变形状或比例，但其高程保持不变时，其阴影不应改变。

当一个表面改变它的高度时，它的阴影应该改变。

研究

Material Design 对 15 名低视力参与者进行了 36 次采访，以更好地了解阴影和轮廓如何影响个人识别组件并与之交互的能力。

研究结果包括：

阴影和轮廓只是影响用户识别元素能力的元素的众多属性之一。影响识别元素能力的其他属性包括字体特征、高度、颜色、周围元素之间的布局以及使用上下文。

使用阴影和轮廓可以提高扫描页面时查找组件的难度和速度。

在组件周围使用阴影或描边轮廓可以提高人们确定是否可以与之交互的能力。

本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：术心！