Material Design基础 - Light and shadows

光线和阴影

material surface阻挡光源时会投射阴影。

在material设计环境中，虚拟灯光照亮UI。关键灯光创建更清晰的方向性阴影，称为关键光阴影。环境光从各个角度出现，以创建漫射的柔和阴影，称为环境光阴影。

光源

material环境中的阴影由关键灯光和环境光投射。在Android和iOS开发中，当光源被z轴上不同位置的材质表面阻挡时，会出现阴影。在web上，仅通过操纵y轴来描绘阴影。

阴影

阴影提供有关深度、移动方向和surface边缘的提示。surface的阴影由其标高和与其他surface的关系决定。

用法

因为阴影表示曲面之间的高度，所以必须在整个产品中始终使用阴影。

阴影大小反映标高高度。较高标高的曲面有较大的阴影，而较低标高的曲面有较小的阴影。

Shadows & Motion

阴影为曲面的移动方向以及曲面之间的距离是增大还是减小提供了有用的提示。
当曲面改变形状或比例，但其标高保持不变时，其阴影不应改变。
当曲面更改其标高时，其阴影应该更改。

研究

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

研究结果包括：

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

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

在组件周围使用阴影或笔划轮廓可以提高确定是否可以与组件交互的能力。

Material Design 系列文章

最新更新以及更多Material Design相关文章请访问 鹏叔的IT技术博客空间-Material Design

参考文档

Material System - layout Light and shadows