在如今的界面设计中，投影使用的范围和频次越来越高。无论线上项目或是追波上飞机稿，都可以看见各种各样的投影样式。

投影的使用，是 UI 设计师必须掌握好的视觉设计基础。投影远没有大家想象的那么简单，即使软件中可以设置的参数并不多，很多设计师始终没办法很好的应用投影来提升自己的设计质感。

所以，这篇文章就会详细讲解设计投影的正确姿势。

有了光，才有影。光影是美术和摄影最核心的基础。

如果没有系统学习过相关理论，对投影的认识会有失偏颇，会认为投影只是将一个物体的轮廓（遮挡光源的部分）完整映射在其它平面上而已，一个光源下只有一个影子，比如下图设计出来的情况。

但是，真实世界中的投影，却并没有这么简单，往往虚实即不统一，明暗也不一致。就像下面这个物体的阴影。

在光学原理中，不透明物体遮挡光源，所产生的影子有两个部分，本影和半影。本影是影子中间最暗的部分（还有伪本影的概念，我们暂时将它合并起来理解），而四周开始变浅变淡，有弥散质感的影子称为半影，就像下图所示。

现实世界中可见的投影都会形成这两种影子，因为光源有散射的特征，当光线照射在物体上时势必会产生非垂直角度的光线，于是其中作用最大，重叠最多的一部分形成本影，而其余比较极限的切线部分形成半影，如下图的案例。

通过案例我们也可以发现，当光源、物体、阴影面的距离不同时，产生的本影和半影面积也就不同。反过来讲，我们还可以通过物体本影和半影的面积，来判断它的空间关系，比如下方的两个物体，明显能感受到下侧悬浮的高度大于上侧。

或者，通过阴影来判断光源对于物体的方向和强弱。比如下图案例，就可以明显判断光源位于画面的左侧，所以即使摆入其它物体，阴影也会朝反方向延伸。

除此之外，投影还可以反应很多其它隐藏的三维信息，只要使用得当，它就可以帮助设计师表达呈现各种不同的空间位置。比如可以通过投影判断物体是处于悬空或者是平躺，以及物体的厚度如何。

根据生活的经验，我们已经对投影所产生的暗示习以为常，能根据投影的结果下意识的对界面内容做出判断。所以，设计师在设计过程中如果对投影没有进行很好的思考，就无法设计出符合规律和逻辑的投影，界面就会产生违和感，而作品也因此大幅降低了质感。

在进入了扁平化的设计环境后，投影有很长一段时间被抹除，因为大家认为那是拟物的遗毒，就怕设计里用到拟物元素显得不够时髦。

到了 Material Design 发布以后，谷歌在规范中增加了 Z 轴的概念，也就是为平面预设了立体的空间，设计元素可以定义与空间中水平面的距离，并通过投影来表现。

下图中，Z 轴数字越大，代表和水平面的距离越远，上升得越多。而带给我们这种感受的原因，就是投影的暗示，元素本身的 XY 坐标并没有任何改变。

即然增加了投影，那么谷歌的专业设计团队，肯定不会很随意的制定其参数。当我们打开谷歌的官方 UI kits 源文件进行查看时，就能发现其中的奥妙。它们为元素创建了两层投影，即本影和半影，有时也称为 top shadow 和 bottom shadow。 

并且，还有一个在第一部分没有提及的要点，投影的深浅与元素的距离是非线性的，即中心到边缘衰减的速度是越来越大的，用坐标轴标示就是非线性的函数关系，而大多数软件中的投影只能以线性的模式呈现。

在 UI 设计师接触的平面类软件中，只有 PS 具备完美复现这种投影的能力，即控制投影的等高线。

上面出现的投影都是黑白灰，但在现在流行的设计作品中，最常见的是应用了彩色的投影，摄影中也经常会应用彩色的投影渲染氛围。

但是，投影中的这些彩色区域，并不完全都是投影，还包含了折射和漫反射等混杂的色光。为了简化（完整的阐述可以写一本书了），我们可以认为是光线穿透物体从而投射出带有物体本身颜色的投影。就像撑起一把绿色的阳伞，伞下的人头顶也会弥漫着草原的芬芳……

在开始展示具体的设计案例前，我们要先明确一个原则，即：优雅的投影是让你感受到它的存在，但不会吸引你去关注它！

一般的设计软件中，元素的阴影即是在元素的背后添加了一个相同轮廓的纯色矢量图形，我们可以通过 XY 轴移动它的位置，并使用模糊的参数来设置它的弥散度。

当元素距离水平面越近，阴影距离元素也就越近，即投影的 XY 值越小，模糊也越小，如果离得远则相反。

3.1 常规投影类型

第一种投影的类型，即假定元素平躺，光源正对着元素的平面，可以参考谷歌提供的投影方案叠加两层投影。第一层是 XY 轴坐标为0，只添加模糊的参数，透明度较低。第二层阴影使用相同的模糊参数，增加 Y 轴坐标，透明度较高。

在非 MD 设计中，它浓郁的投影参数会让整个界面变“脏”，变拥挤。我们要做的是要降低投影的透明度，这样才能让投影的表现更自然舒适。要牢记的是，当使用纯黑色做阴影时，透明度无论如何都不应该高于 20%，正常区间在 5%-15%。

既然知道阴影属性的规律，我们还可以复制这个矢量图层做高斯模糊也可以得到一样的效果，这种方法可以支持我们设计出更真实的投影。即将 Bottom Shadow 独立出来，缩小并向下移动。

如果想要得到彩色的投影，那么只要切换投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我们要凭感觉去调整它们的透明度。

如果感觉不得劲，阴影太少了，那么我们就让元素的 Z 轴上升。

既然前面提到彩色投影是由于光线穿透了元素，那么当使用了渐变色或者是图片的投影，我们在之前提到的复制出的那层充当 Bottom shadow 的矢量图形，就可以不使用填充色，而是直接用渐变或者是原图进行模糊和透明度调整。

3.2 非常规投影类型

光既然可以垂直于被照射平面，那么发挥想象力，我们还可以更改光与面的位置，让光线与平面之间的夹角变小，如下图所示。

在这个场景中，投影就作用在图片下方的地面，只有地面处于透视状态时，才能可以看见它的投影，所以，我们就可以得到下方的效果。

当然，我们还可以结合光源的类型，比如使用聚光灯等，那么阴影的轮廓就会发生变化。

我们甚至可以假设元素本身产生了一定的变形，如边缘翘起，那么就会出现独特的阴影形状。

从日常生活中的观察将各种不同的投影形式引用进我们的设计中，让我们设计中的视觉形式更丰富有趣。

学会正确的投影设计方式，并不是仅仅让我们局限在 UI 元素的设计上。它还能给我们带来很多意想不到的帮助，比如做设计作品的包装。

通过前面讲解的知识点，上方展示案例中应用的阴影方式相信你们已经可以看出端倪了，如果使用基础的阴影设置去创建展示的阴影，就会发现效果远远不如案例的高级，自然也难以带给别人良好的视觉体验。

最后，在项目中，想要将设计出来的阴影交付给开发，真正落地实现出来，无论安卓或是 iOS ，阴影的渲染和设计软件的参数是不一致的，这就需要大家自己钻研究了。

扫面下方二维码，关注我们的公众号“超人的电话亭”，后续还会有很多很多干货值得你一读。