Creating a user interface with depth can seem daunting at first, but it only requires you to understand one fundamental rule — emulating a light source.

首先，创建具有深度的用户界面似乎很艰巨，但这仅要求您了解一个基本规则- 模拟光源 。

模拟光源 (Emulating a light source)

When emulating a light source, it’s important to keep in mind that, most likely, the light will come from above.

模拟光源时，请务必记住，很可能光线来自上方 。

Take for example the door below:

以下面的门为例：

Although you’re observing a flat raster, it’s still evident that the panels on the door are raised.

尽管您观察到的是平坦的栅格，但仍然很明显门上的面板是抬起的。

You’ll notice that each horizontal panel’s top edge is lighter while the bottom edge is darker. This is because the door is angled toward the light source. As a result, the top edge receives more light since it’s angled toward the source while the bottom edge receives less light since it’s angled away from the source.

您会注意到，每个水平面板的顶部边缘较亮，而底部边缘则较暗。 这是因为门朝向光源倾斜。 结果，由于顶部边缘朝向光源倾斜，因此顶部边缘接收的光线更多 ，而由于远离光源倾斜，底部边缘接收的光线较少 。

The only way that the panel’s edges could be oriented as such is if the panel were itself raised, which is exactly how our brains tend to perceive it.

可以这样定向面板边缘的唯一方法是，如果面板本身被抬起，这正是我们的大脑倾向于感知的方式。

Let’s take a look at another example:

让我们看另一个例子：

In this example, it’s evident that the four panels are inset.

在此示例中，很明显四个面板是inset 。

You’ll notice that there’s a shadow at the top edge, indicating that the top lip is obstructing the path of light. The bottom edge, on the other hand, is lighter since it’s angled toward the light source.

您会注意到顶部边缘有阴影，表明上嘴唇遮挡了光路。 另一方面，底边缘较轻，因为它与光源成一定角度。

If you want to add a similar sense of depth to your designs, you simply need to mimic the way light behaves in real-world scenarios.

如果要在设计中增加类似的深度感，则只需要模拟现实世界中灯光的行为方式即可。

在Sketch中模拟光 (Simulating light in Sketch)

As you saw above, there could be two possible profiles i.e. raised and inset.

如您在上面所看到的，可能有两种可能的轮廓，即养护和插入 。

When you’re trying to replicate this behavior, you first need to decide the desired profile of the target element. You can then easily mimic how light would interact with the element.

当您尝试复制此行为时，首先需要确定目标元素的所需配置文件。 然后，您可以轻松模拟光与元素的交互方式。

内嵌元素 (Inset elements)

Say that you want to design a component that feels like it’s depressed into the page.

假设您要设计一个感觉像被压入页面的组件。

Your desired profile would then look something like this:

您所需的个人资料将如下所示：

Pretend that a light source exists and is slightly above the inset profile.

假设光源存在并且稍微高于插图轮廓。

When you look slightly downward, you would only see the bottom lip. Since the bottom lip is facing toward the light source, we can give it a lighter color via a bottom border or inset shadow along with a negative vertical offset.

当您稍微向下看时，您只会看到下唇。 由于底唇朝向光源，因此我们可以通过底边框或嵌入阴影以及负的垂直偏移为其赋予较浅的颜色。

When you look slightly downward, you barely see the top lip since it would block some of the light. Since the top lip is facing away from the light source, we can give it a darker color via a bottom border or inset shadow along with a positive vertical offset.

当您稍微向下看时，您几乎看不到上唇，因为它会阻挡一些光线。 由于上唇背对光源，我们可以通过底部边框或嵌入阴影以及正的垂直偏移为它提供较暗的颜色。

Adding the positive vertical offset as opposed to a negative offset will ensure that the shadow doesn’t poke through at the bottom.

加上正的垂直偏移而不是负的偏移，可以确保阴影不会从底部刺入。

You can now apply this technique for whatever you like such as a checkbox or text inputs.

现在，您可以将这种技术应用于所需的任何内容，例如复选框或文本输入。

It’s often tempting to see how close you can mimic real-world scenarios, however, don’t get too carried away. Although this is a fun exercise, going overboard almost always leads to interfaces that are busy and/or unclear.

人们常常很想知道您可以模拟现实世界中的场景有多近，但是不要太着迷。 尽管这是一个有趣的练习，但是过度使用总是会导致界面繁忙和/或不清楚。

凸起元素 (Raised elements)

Now, say that you want to design a call-to-action that feels like it’s raised off of the page.

现在，假设您要设计一个从页面上跳出来的号召性用语。

Your desired profile would then look something like this:

您所需的个人资料将如下所示：

Similar to how light behaves, users typically look slightly downward when interacting with their screens.

与光的行为类似，用户在与屏幕进行交互时通常会略微向下看。

To achieve the most natural result, you should expose a little bit of the top edge and conceal the bottom edge.

为了获得最自然的效果，您应该露出一点顶部边缘并隐藏底部边缘。

Since the top edge is facing toward the light source, we can give it a lighter color than the face of the button via a top border or an inset shadow along with a negative vertical offset.

由于顶部边缘朝向光源，因此我们可以通过顶部边框或嵌入阴影以及负的垂直偏移为按钮提供比按钮表面更浅的颜色。

I’ve simply picked white as the lighter color for demonstration purposes, but this won’t give you the best results. You’d want to pick the lighter color by hand as opposed to using a semi-transparent white color.

我只是选择白色作为较浅的颜色用于演示，但这不会给您最好的效果。 您需要手动选择较浅的颜色，而不是使用半透明的白色。

When you look downward, you’ll notice that a raised element will block some light from reaching the bottom edge. To account for this, we can simply add a slightly dark drop shadow with a positive vertical offset.

当您向下看时，您会注意到凸起的元素将阻止某些光线到达底部边缘。 为了解决这个问题，我们可以简单地添加一个带有正垂直偏移量的 暗阴影阴影 。

Do keep in mind that we only want the shadow to appear below the element, hence the positive vertical offset described above.

请记住，我们只希望阴影出现在元素下方，因此希望上面描述的是垂直的正偏移量。

I would suggest not to get too carried away with the blur radius. A couple of pixels is usually good enough since these kinds of shadows have rather fine edges. Take for example a shadow cast by the bottom of a plate, etc.

我建议不要太迷离模糊半径。 通常，几个像素就足够了，因为这些阴影的边缘相当精细。 例如，从板的底部投射出阴影，等等。

通过阴影传送高程 (Conveying elevation via shadows)

When you utilize shadows thoughtfully, you can make it seem that your elements are positioned on the imaginary z-axis, adding elevation to the screen.

当深思熟虑地利用阴影时，可以使您的元素看起来位于虚构的z轴上，从而在屏幕上增加了标高。

For instance, smaller shadows that have a tiny blur radius will make the element appear as if it were only slightly raised. Larger shadows with a higher blur radius will make it seem that the element is closer to the user, and further from the screen.

例如，模糊半径很小的较小阴影将使该元素看起来好像只是稍微升高一样。 具有较大模糊半径的较大阴影将使该元素看起来更靠近用户，并且距离屏幕更远。

The reason I mention this is that the closer a call-to-action is to a user, the more likely they are to perform the intended action.

我之所以这样说，是因为号召性用语离用户越近，他们越有可能执行预期的操作。

阴影可以有多个部分 (Shadows can have multiple parts)

Have you ever observed a gorgeous shadow effect on a website and were unable to recreate it with a single shadow?

您是否曾经在网站上看到过华丽的阴影效果，却无法用单个阴影重新创建它？

Well, you might not have noticed that these sites were probably using multiple shadows instead of the one.

好吧，您可能没有注意到这些站点可能使用多个阴影而不是一个阴影。

Take for instance the UI below:

例如下面的UI：

At first glance, this doesn’t make a lot of sense. When you see designers combining shadows, they’re not just randomly experimenting with different effects. For these meticulous artists, each shadow serves a particular purpose.

乍一看，这没有什么意义。 当您看到设计师结合阴影时，他们不仅仅是在随机尝试不同的效果。 对于这些细心的艺术家，每个阴影都有特定的用途。

The first shadow in the image above is a larger and softer one, having a sizable blur radius and vertical offset. The purpose of this shadow is to emulate the shadow cast behind it via a direct light source.

上图中的第一个阴影较大且较柔和，具有相当大的模糊半径和垂直偏移。 该阴影的目的是模拟通过直接光源投射在其后面的阴影。

The second shadow is a tighter and darker one, having a smaller blur radius and vertical offset. The purpose of this shadow is to emulate the shadowed area underneath the object where ambient light cannot reach easily.

第二个阴影较紧且较暗，模糊半径和垂直偏移较小。 该阴影的目的是模拟物体下面的阴影区域，其中环境光不易到达。

Here, the designer (Peter Miller) has presumed that he wants to mimic a tangible light source. To cast a shadow, some of the light would bounce around behind it and most likely transfer a blue glow onto the surface behind it (assuming that the object is blue on both sides).

在这里，设计师(Peter Miller)假定他想模仿有形光源。 要投射阴影，一些光线会在其后面反弹，并且很可能在其后面的表面上传递蓝色光(假设对象的两面都是蓝色)。

Assuming then that the object is blue on both sides, the shadow should probably have a little blue to it as the light bounces around on the backside of it.

假设物体的两面都是蓝色，则阴影可能应该在它的背面反射光的同时带有一点蓝色。

As you can see, with multiple shadows, you get a lot more control than with a single shadow.

如您所见，具有多个阴影比具有单个阴影具有更多的控制权。

There are a ton of other ways to account for elevation that this article hasn’t covered. What we’ve covered today should provide a good starting point. My goal was to keep this as concise as possible without sacrificing the nuances that get lost in translation.

本文还没有介绍许多其他方法来说明海拔高度。 我们今天讨论的内容应该提供一个很好的起点。 我的目标是尽可能保持简洁，而又不牺牲翻译中丢失的细微差别。

A few more ways that you can add depth to your interface is by establishing an elevation system, combining shadows with the interaction, utilizing shades of the same color, and/or using solid shadows. I would recommend incorporating the components I have mentioned above to create more granular and lifelike experiences.

您可以通过以下几种方法来增加界面的深度：建立高程系统，将阴影与交互结合，使用相同颜色的阴影和/或使用纯阴影。 我建议合并上面提到的组件，以创建更细致逼真的体验。

I’m excited to see how you add depth to your designs in Sketch! As always, thanks for reading.

我很高兴看到您如何在Sketch中增加设计的深度！ 与往常一样，感谢您的阅读。