这篇超详细的教程，帮你全面掌握 APP 中的投影设计！

编者按：看似简单的投影，在手眼里有千万种变。信看看今天这篇章，资深设计师你做投影设计！

在今天的 UI设计中，投影使的范围和频次越来越。打开手机APP，或是看追波上的练习稿，都可看见无数投影使的案例。

掌握好投影的使用，必备的 UI 视觉设基础。投影远家象的那么简单，即使软件中可以设置的参数并不多，我的教学过程中，很多学员始终办法很好的应用投影提升自己的设质感。

，这篇章就会详细讲解投影的正确设计方法。

一、投影的基本介绍

在了解投影和设计的系前，我们要先知道投影是么。专点的方式解释，即：

投影指的是一组光线将物体的形状投射到一个平面上，称为「投影」。

有了光源，才有投影。光影是美术和摄影最核心的基础。那么投影有么特征呢，先看看面的这张静物摄影。

图中有很清晰的向右延伸的投影。距离体越远的投影，就越模糊，越淡。通过这样的投影我们还可很轻易的分析，光源在左侧，且物体是放置在地面上的。

投影以带给我们非常隐藏的信息，而往往被我们所忽略。看看下方的案例，当背无法直观的提供物所处高度时，投影就能到关键的用。

在平面画中，投影的做法直接影响我们对元素的认识。 例下图中，投影以让我们按钮身是有厚度（遮挡光）或是离开水平面处悬浮状态。

当，投影除对物理信息的暗示，还涉及到对视效果的表现。上面的白鞋投影很重，且轮廓清晰，样能塑造更强烈的冲突，增加鞋子的立感。但是不是所有摄影需要有样雕刻版的投影效果呢？答案是否定的，例下面图。

主物和背彩能很的结合，创造出有趣欢快的视氛围，所以只需要柔和的投影即。在 UI 的设计中，对阴投影参数的定义，也直接影响我们画面的视效果。

成熟的摄影品，根据对投影的需要去节打光的方式，是个非常复而且繁琐的程，需要经年累月的学习。而在设计的程中，创造投影却非常容易，所以我们更该重视的是，何正确的设计投影。

即先构思出元素的物理特，给予它正确美观投影样式。

二、UI设计中的投影

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

到 Material Design 以，谷歌在规范中增加 Z 轴的概念，也就是为平面预设立的空间，设计元素以定义与空间中水平面的距离。

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

既然增了投影，那么谷歌的专设计团队，肯定会很随意的制定参数。当我们打开谷歌的官方 UI KITS 源件进行查看时，就发现中的同。

可看见，元素叠了多层的投影，这是违反手对于投影定义的直觉的。原因在与，一般软件中定义的投影，深浅与元素的距离是线性等的，而现实世界中，深浅与距离是非线性的函数系。

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

而 Sketch、XD 这些软件都具备这样的功，且手机系统的投影渲染机制是线性的，谷歌就通过使 TopShadow、BottomShadow 叠的方式，模拟真实的投影效果，它们看起来更和谐自然，这就是多层投影的奥秘。

上面现的投影都是黑白灰，但在现在流行的设计作中，最见的是应了彩色的投影，摄影中经会应彩色的投影渲染氛围。

但是，投影中的这些彩色区域，并全都是投影，还包含了折射和漫反射的原等。为了简，我们可认为是光线穿透物体从而投射带有物体本身颜色的投影。就像撑起一把绿色的阳伞，伞的人头顶会弥漫着草原的芬芳……

三、投影设计演示

在开始展示具体的设计案例前，我们要先明确一个原则，即：

优雅的投影是你感受到它的存在，但会吸引你注它！

一般的设软件中，元素的阴影即元素的背后添加了一相同轮廓的纯色矢图形，我们可以通过 XY 轴移动它的置，并使用模糊的参数设置它的模糊度。

当元素的距离水平面越，阴影距离元素就越，即 XY 轴越小，模糊越小，如果离得远则相反。

1. 常规投影类型

第一种投影的类型，即光源从元素的方投射下，可以参考谷歌提供的投影方案叠加两层投影。第一层 XY 轴坐标0，只添加模糊的参数，透明度较低。第二层阴影使用相同的模糊参数，增加 Y 轴坐标，透明度较高。

非 MD 设中，它浓郁的投影参数会让整界面变「脏」，变拥挤。我们的降低投影的透明度，这样能让投影的表自然舒。牢记的，当使用纯黑色阴影时，透明度无论如何都不应该高于 20%，常区间 5%-15%。

既然知道阴影属性的规律，我们还可以复制矢图层模糊效果也可以得到一样的效果，这种方法可以支持我们设出真实的投影。即将 BottomShadow 独立出，缩小并向下移动。

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

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

既然面提到彩色投影由于光线穿透了元素，那么当使用了渐变色或者图片的投影，我们一复制出的那层投影，就可以不使用填充色，直接用渐变或者原图行模糊透明度调整。

2. 常规投影类型

有垂于平关系，那么发挥想象力，我们可以更改与位，如下图所示。

在这个场景，投影作用在图片下地，有地处于透视状态时，才能可以看见它投影，所以，我们可以到下效。

然，我们可以结合类型，比如使用聚灯等，那么阴影轮廓会发生变化。

甚至可以预素本身产生有一定的变形，如边缘翘起，那就会产生独的阴类型。

可以从日常生活中的观察将各种不同的投形式引用进的计中，让的计视觉更丰有趣。

总结

学会正确的投计方式，并不是仅仅让局限在对 UI 素的计上。它还能给带来多想不的帮助，例如做计的包装。

通前面讲的识点，上方展示案例中应用的阴影方式相信你们已经以看出端倪，果使用基础的阴影设置去创建展示的阴影，就现效果远远不案例的高级，自也难以带给别人良的视验。

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

欢迎关注作者微信公众号：「电话亭」

图片素材作者：Anton Mikhaltsov