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

 

目录


阴影

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

 

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

​​

 

 

光源

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

​​

 

 

阴影

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

 

用法

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

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

​​


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

 


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

 

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

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

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

 

原文地址:Material Design

译者:糖糖

 

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

登录收藏
 
你可能喜欢的:
如何设计好一款APP的首页?如何设计好一款APP的首页?
B端品牌如何面向C端用户B端品牌如何面向C端用户
如何搭建一个易学性高可用性强的功能框架?如何搭建一个易学性高可用性强的功能框架?
盘点 | 4个成为标杆的超强体验设计盘点 | 4个成为标杆的超强体验设计
设计驱动案例-如何优化金融产品购买体验?设计驱动案例-如何优化金融产品购买体验?
Material Design Gestures 手势Material Design Gestures 手势
设计沉思录丨如何利用场景化设计提升用户决策效率设计沉思录丨如何利用场景化设计提升用户决策效率
用灰色文本字段来拯救你的注册表单设计用灰色文本字段来拯救你的注册表单设计
1套流程,带你看遍1000万个产品设计的从0到11套流程,带你看遍1000万个产品设计的从0到1
聊聊加载等待的那些事之“进度指示器“(落地篇)聊聊加载等待的那些事之“进度指示器“(落地篇)