这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

 

目录


阴影

材料界面在遮挡光源时会投射阴影。

 

光影
在材料设计环境中,虚拟灯照亮了UI。 主光源投射出更清晰的定向阴影,称为直射阴影。 从各个角度出现的环境光创建扩散的柔和阴影,称为环境阴影。
​​

​​

 

 

光源

材质环境中的阴影由主光源和环境光投射。 在Android和iOS开发中,因为各种元素在z轴占据了不同大小的位置,遮住了这些光线。 在网页上,用y轴上的重叠来实现阴影效果。 下面的案例中,卡片的高度是6dp

​​

 

 

阴影

阴影提供关于深度的,移动方向和界面边缘的提示。 界面的阴影由其高度和与其他界面的关系决定。

 

用法

由于阴影表示界面之间的高度差,因此必须在整个产品中始终如一地使用阴影。
​​
通过使用一致的阴影来描绘高度。

​​
阴影大小反映了高度。 较高高度的界面具有较大的阴影,而较低高度的界面具有较小的阴影。

​​


如果您的产品不使用阴影,请以其他方式表达高度,例如通过视差动效。​​

 


在此重新排序的交互期间,阴影的出现表明该列表项已被提升并可以移动到其同级列表项之前

 

阴影和动效
阴影提供有关界面的运动方向以及界面之间距离是增加还是减少的有效提示。

当界面改变形状或比例,但其高度保持不变时,其阴影应该不变。
​​

当界面改变其高度时,其阴影应该改变。

 

原文地址:Material Design

译者:糖糖

 

转载请注明:学UI网 » Material Design Environment Light and shadows

登录收藏
 
你可能喜欢的:
乔布斯和淘宝都喜欢的圆角卡片乔布斯和淘宝都喜欢的圆角卡片
需求落地之信息架构设计需求落地之信息架构设计
设计沉思录|租房业务全流程体验设计设计沉思录|租房业务全流程体验设计
交互设计中让人困惑的三大组件你会用了吗交互设计中让人困惑的三大组件你会用了吗
微信的12大“反人类”设计微信的12大“反人类”设计
Material Design Layout Responsive layout grid  响应式布局网格Material Design Layout Responsive layout grid 响应式布局网格
如何正确制作用户画像如何正确制作用户画像
网格列表,没有你想的那么简单网格列表,没有你想的那么简单
除了下拉菜单之外你还有更好的选择除了下拉菜单之外你还有更好的选择
发布器的常见入口样式总结发布器的常见入口样式总结