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中增加設計的深度！ 與往常一樣，感謝您的閱讀。