想要为您的设计增添一些真实感吗？也许您熟悉使用深度，甚至是一名 拟物化 的忠实粉丝。或者也许您是扁平化设计的狂热粉丝。我们理解！扁平化设计可以很简洁、简单且用途广泛。但有时您的设计只需要更多。更多真实感、更多深度、更多活力。
以插图为例。有一种设计，它看起来像是从屏幕上跳出来的，非常引人注目。虽然您不必做得太过夸张和 逼真，但添加一些深度确实可以美化您的图标和界面。
在本教程中，Joseph 将向您展示如何直观地创建深度。我们知道，很难分辨其他人是如何实现这种效果的。如果做得好的话，深度的接缝是不会被注意到的。以下面的开关为例。我们的眼睛可以分辨出扁平化设计和真实感设计之间的区别，但很难弄清楚应该遵循的步骤。在下面，我们将向您教授如何使用不同的技巧来实现这种外观。
在 Sketch 中制作的开关，在应用深度效果前后。
我们将向您展示如何使用
- 简单的样式属性使基本形状看起来像 3D
- 阴影和高光模拟光线照射到表面的方式
- 渐变说明光线的衰减
- 模糊使表面混合
准备好了吗？让我们深入研究 🪂
您现在可以观看 Joseph 的教程，或者按照我们的指南按自己的节奏学习 👇
1. 绘制开关容器和旋钮
首先，让我们专注于创建一个扁平化形状，我们以后可以对其进行改进。在本例中，我们需要一个带圆角的灰色矩形和一个白色圆形来创建容器和旋钮。我们将使用一个 50x30 像素的开关容器和一个 26x26 像素的旋钮——只是为了让您了解比例。
2. 降低背景色调
现在我们可以开始考虑真实感了。让我们进入这样的思维方式，即每一层都是一个被光源照射的物理表面。这将帮助您确定在哪里添加高光和阴影。在本例中，让我们假设光源就在我们的设计正上方。为了帮助您，请选择背景并将颜色从白色更改为浅灰色。
3. 在开关容器上添加渐变
使用这种新的思维方式，让我们使开关容器更暗一些。为了显示容器如何在自身上投下阴影，让我们应用一个在顶部更暗的渐变。
4. 在开关容器上添加内阴影
同样重要的是要考虑一个带有暖色调的光源将如何产生更冷的阴影。让我们使用内阴影添加更多深度。默认颜色非常适合此练习，但将其降低到 Y 位置 3 并通过增加模糊度到大约 8 来使其柔和。
5. 在旋钮上添加投影
我们的容器看起来不错！接下来让我们专注于旋钮。由于旋钮是突出来的，所以它应该投下阴影。让我们继续使用相同的 Y 位置 3 和模糊度 8 添加阴影。您也可以通过增加其 Alpha 值来使阴影更暗一些。
6. 将旋钮和阴影遮罩到开关容器中
在处理深度时，我们经常需要结合一些技巧才能创建所需的效果。在本例中，开关容器比我们想要的更突出，如果我们的目标是让旋钮看起来更贴近背景层，那么这将不符合我们的目标。那么我们如何确保旋钮只在开关容器中投下阴影呢？
很简单！让我们通过选择两个图层、Control-单击并从菜单中选择“遮罩选区”来遮罩旋钮和容器。现在，旋钮和阴影将被剪裁到容器路径内。
7. 在旋钮上添加渐变
但我们还没有完成旋钮！让我们通过用一个微妙的渐变替换白色填充来使其更具质感。我们希望表面看起来略微凸起，所以使顶部比底部更亮。始终牢记，光线来自上方。
8. 使旋钮边缘柔和
现实世界中的边缘不像矢量形状那样锐利。在本例中，我们可以通过使旋钮的边缘圆润，并使其在顶部捕捉一些高光，在底部捕捉一些阴影来获得一些真实感。
我们可以使用 内阴影 创建这种效果。
首先添加一个白色内阴影，并将 Alpha 值增加到 100，因为浅灰色上的白色本身就很微妙。为了便于查看我们的操作，让我们暂时将模糊度设置为 0。在这个尺度上，即使 Y 位置为 1 也有点过分，所以让我们将其设置为 0.5 左右。对结果满意后，您可以将模糊度设置为 1。
接下来，添加一个黑色内阴影以显示光线从底部边缘滚落。但让我们将 Alpha 值降低到 1，以防止它看起来太重。此阴影是我们刚刚创建的高光的反向，所以将 Y 位置设置为 -0.5，使其从底部凸起。最后，将模糊度设置为 1。
9. 复制并缩小旋钮
如果您发现自己眯着眼睛才能注意到步骤之间的区别，请不要担心！这很正常。实现真实深度的关键在于微妙性，因此需要一段时间才能将所有内容整合在一起。
在下一步中，您将最终能够看到所有艰苦的工作所带来的效果。选择旋钮并按 ⌘D 复制它。按住 ⇧⌥ 并将其调整大小至约 16x16 像素。最后，禁用阴影。这应该会产生一个从旋钮中突出的凸起部分。
借此机会增加渐变填充的对比度，并提高暗内阴影的 Alpha 值，使其看起来更突出。
10. 垂直翻转挤出部分
如果您想知道为什么我们创建了凸出而不是凹陷……这是因为我们需要翻转它！点击检查器中**图层属性**部分的**垂直翻转**按钮，然后见证神奇的效果。
11. 使凹陷柔和
现在，边缘看起来有点太清晰，完全不符合我们微妙的风格。高斯模糊可以解决这个问题。只需将其应用于整个物体，半径为 1 即可。
12. 添加轻微的外斜角
为了最后的润色，让我们在容器外部添加一些常规阴影来勾勒顶部边缘。在顶部添加一个暗影，使表面看起来略微向内圆形。然后，在底部添加一个亮影，以突出显示边缘向外翻转。
13. 向背景添加渐变
为了帮助我们统一整体外观，将背景从实色填充更改为顶部略微浅的渐变。这样，它将与我们隐含光源的位置保持一致。就是这样！
如您所见，您可以使用多种技巧来创建深度。对于简单的设计，您可能只需要一种技巧。如果您想创建更复杂或更逼真的设计，那么叠加技巧将帮助您获得最佳效果。
请记住，一切都是关于微妙的——复杂的微妙需要时间！如果您准备好将您的深度游戏提升到新的水平，请查看 David Blum 的教程，了解如何创建单层草莓。请注意：草莓看起来如此真实，以至于它可能会让你感到饥饿。
