如何理解 Material Design 中卡片的两层阴影?

这两层阴影指的是同一个卡片投射下的两次阴影的叠加吗? 在PS中如何实现一个图层投射两层阴影? 还有,下图2中标注的blur是指哪种模糊? 小白求解,谢谢!
关注者
546
被浏览
29,140

5 个回答

@jordanfc迟方的答案虽然回答了问题, 但并不是官方解释. 官方解释在这里: Environment - What is material? - Light and shadow:

这两层阴影, 一层是环境光投射的阴影, 另一层是关键光照射在 material 上投射的阴影. 所以你可以看到, 环境光投射的阴影比较 「软」, 更接近 material; 而关键光投射的阴影就相比之下范围略大, 看起来更 「硬」. 这两种光线叠加在一起, 才能构成 material design 中的阴影.

而理论上, 这两种阴影都应该是有平滑曲线的, 但是由于手机处理器性能问题, 实时计算平滑后的阴影会导致可怕的耗电与发热, 所以 Google 只能在这方面妥协, 将阴影曲线拉直, 直接导致某些阴影效果变差. 而 @jordanfc迟方所说的情况, 某种程度上可以说是这种妥协之下产生的 「巧合」.
因为这样比较柔
真实阴影的黑度和扩散距离的关系大概是这样的
简单的说就是离物体越近就越黑,越远越不黑,但衰减的趋势不是线性的,而是开始衰减的快,后面衰减的慢

而大部分时候的程序模拟的阴影其实是线性衰减的,在 Android 文档里的 top 和 bottom 两个阴影就是这样的线性衰减的阴影

UI新手通常画阴影的时候,会被教导需要叠两层阴影,才比较“真”,但并不清楚原因。其实这里的两层阴影的技巧,实质上是使用两条线性阴影去拟合一条曲线阴影。

比如说我先画一层较大的较浅的阴影


然后再画一层较小的较深的阴影


于是我把两层叠起来,就会得到一个叠加的阴影


这样就得到了和曲线阴影相类似的效果,就会比较符合真实的情况


其实大家可以看到,叠两层的方法质量上是不完美的,阴影大了以后就容易被看出来有断层。所以在条件允许的情况下还是尽量用曲线属性来调整阴影吧,或者更变态的用多条曲线阴影叠。

具体到 Android 5.0 这个阴影,受限于接口,能有这个效果还是非常不错的。唯二不满意是,在 z=1和 2 时的柔和度不够;并且到了深色元素投影时,拟合的阴影又显得太平,太浮,不符合主观视觉感受,希望以后的版本可以加入根据前景元素明度值的阴影修正系数,不然就得我们自己搞了。

ps:利益相关,我司的 smartisan os 中为了更真实的效果,很多阴影的绘制用到了曲线调整,很多程序投影的地方,阴影也采用了和问题中类似的大小两层叠加的方法。希望官方阴影和模糊函数早日加上曲线接口,一劳永逸,google 加油 6_^