4 个实用技巧，助您立即改善 UI 阴影设计（包含设计文件和代码）

如果您想浏览/复制设计或查看 CodePen，请查看文章底部

我们最近在 Instagram 上进行的关于开发人员对设计的感受的调查和 DM 向我们强调了一件事：大多数开发人员对设计感到非常不舒服。

93% 的人表示同意，我们认为现在是时候向大家提供一些初学者设计技巧来帮助大家了，从一些可靠的原则开始，以改善阴影。

UI设计中阴影的作用

阴影可以改善事物的整体感觉，并为用户的视觉体验增加深度和真实感。

因此，阴影应该

• 模拟现实世界的光动态，例如直射光和环境光
• 不要太显眼，以免分散注意力。它们应该能够有效地融入环境。

下面的设计明显违反了这两个原则：

就此而言，这里有 4 个可行的技巧，供您在项目中的任何 UI 阴影设计中实施，我们将向您展示它们如何在每个步骤中发挥作用

1）用硬阴影（非模糊）模拟直射光

直射光是来自一个光源的光直接照射在物体上。

例如：当太阳出来时，每个物体的另一侧都会出现一个清晰的阴影。这就是我们所说的直射光投射出的阴影。

如果我们在卡片上添加直射光，它将看起来像这样：

2）用柔和（模糊）阴影模拟环境光

环境光是从我们周围所有表面反射的光。

例如：当太阳被云层遮挡时，你看不到任何直射光的阴影，但如果你观察树下，你可能会看到树下一片非常柔和的阴影区域。这是因为该区域有环境光，从而形成了柔和的阴影。

如果我们在卡片上添加环境光，它将看起来像这样：

3）使用与下方组件相似的颜色来模拟表面阴影

这是目前的一种趋势，它也为你的设计提供了另一个层次的真实感——在现实世界中，当阴影投射在物体上时，物体不仅会变得“更黑”，而且它们的颜色还会变得更暗。

所以在这种情况下，我们会选择背景颜色，让它变得更暗，颜色也更饱和。效果如下：

这本身是一个非常微妙的变化，但它与所有其他技巧结合在一起，形成了很棒的 UI 阴影。

4）在用户生成的图像上使用中等柔和的内阴影

用户生成的图像（例如个人资料图片或任何其他形式的上传图像）有时会具有与其背景相似的颜色。

以下是带有和不带有内阴影的个人资料图片的外观的一点比较：

最终产品

这看起来比我们开始时的要好得多：

我们编写了代码

如果您感兴趣的话，这是 CodePen - 随意窃取并以任何您想要的方式使用它（如果您按“使用 CodePen 编辑”，它看起来会更好，因为它没有响应）：

获取设计文件

您可以点击此处直接进入 Figma - 随意复制并制作您自己的作品。您无需注明出处，反正我们请不起律师！

对前端开发感兴趣？我们刚刚发布了免费速成课程（真的免费——无需升级，无任何隐藏费用）

我们花了几个月的时间进行专业设计，并制作了4 小时 20 分钟的视频内容，为您带来免费速成课程，向您展示如何编写这个作品集网站的代码（我们不断鼓励您根据自己的风格进行定制）

如果您对此感兴趣，并且想要了解有关 HTML、CSS、SCSS、Bootstrap 4、Git、GitHub Pages 以及 JavaScript 和 jQuery 的更多信息，您可以从此处的链接免费注册。