做不好阴影和模糊？UI设计师看这一篇就够了

静电说：阴影和模糊在UI界面中是必不可少的效果，但是想要做好它们却没有那么简单。很多设计师小伙伴做的阴影，要么是不够通透，要么阴影生硬，投影角度有问题。那么今天就为大家推荐这篇设计阴影和模糊的全攻略，系统为大家剖析阴影和模糊效果的方方面面。觉得有用，记得点赞，并分享给小伙伴。

01.阴影（Shadow）

投影（Drop Shadow）

外阴影（或阴影）很容易在UI中使用。典型的阴影依赖于与中心（x，y或两者）的偏移，即模糊和不透明度。在上图的示例中，阴影在Y轴上向下移动了20个点，然后进行了Blur（模糊）操作。

诸如Sketch之类的某些工具也具有“ spread”值，使阴影看起来像是较小的元素正在投射阴影（静电注：如上图左侧所示，阴影面积比较小）。

任何阴影中，最重要的部分是X，Y偏移和模糊。后者必须是大于0的数字，而X和Y也可以是负数，从而几乎在每个方向上都可以移动阴影。

我们还可以通过向同一对象添加多个阴影，从而来堆叠阴影，以获得非常有趣的结果。下面的示例，这个元素包含三个阴影，每个阴影向下移3个点。

Neumorphism（新拟物风-同态）

在这种新拟物风格中，阴影和负X和Y值的堆叠，是使Neumorphism工作所需的核心原理。

看起来柔和，自然的阴影

自然的阴影可以让你的设计看起来不那么生硬。要让阴影更加自然，诀窍就是避免纯黑色阴影，而是使用从我们的原色派生的阴影。纯黑色会使对比度太大而看起来不自然。如果您研究现实生活中的阴影，您会发现它们的阴影和色调通常会有所不同。

默认黑色阴影通常太生硬，尝试使用原色派生出来的颜色作为阴影

改善这种问题的最佳方法，是将其从黑色（默认）更改为基于原色的较深阴影。在上面的示例中，阴影为深紫色，不透明度降低。

内阴影（Inner Shadow）

内阴影在UI中相对较少。它具有与阴影相同的参数，但它出现在对象内部。

内阴影之所以用的不多，是因为它们看起来像堆叠在一起的两个层。在这种情况下，可以追加外部阴影，因为它可以提供深度。这样可以看起来更加自然。如果单纯使用内阴影，会让元素看起来就像一个凹进去的洞。

左侧的示例使用了经典的图层叠加。向任何图层（如右图所示）添加内部阴影，可能会导致在图层中创建孔的错觉。这可能会破坏图层的视觉结构。

这种样式的唯一用例是表单输入（表单字段和复选框或单选按钮）和Neumorphism风格中的拉伸形状。在某些情况下，它们可用于使对象看起来更逼真，但应适度使用。

可以通过在对象上使用内部阴影并反转X和Y的方向来实现此效果

Neumorphism的主要问题是，使用内部阴影和拉伸形状作为“选定”状态，标准状态与选定状态之间的可感知差异非常小，以至于即使是非视觉障碍的用户，有时也可能会完全错过它。反过来，这导致了Neumorphism的最大可访问性缺陷之一。

02.模糊（Blur）

如今，大多数设计工具都具有高斯类型的模糊效果，可以在各个方向上均匀地扩展效果。它的主要值是半径。它越大，模糊效果越突出。

高斯模糊是最常用的模糊类型。我们可以将其应用到屏幕之间的过渡中，也可以通过选择性地模糊背景来显示一些真实的景深。

使用高斯模糊作为阴影

这种类型的模糊，可以帮助我们在对象下方生成非标准的点阴影。只需模糊椭圆并将其放置在投射阴影的对象下即可。既可以单独使用它，也可以将其与标准投影效果结合使用，以获得更加独特的效果。

背景模糊（Background Blur）

当苹果开始在其操作系统中使用背景模糊以实现某些屏幕上的毛玻璃效果后，背景模糊变得很流行。应用了此效果的对象会模糊其下的所有内容。

在此示例中，具有90％不透明度和背景模糊的正方形叠加层位于图像的右侧。如您所见，当将三个白点放置在“投射”背景模糊的对象下时，它们会发生不一样的变化。

运动模糊（Motion Blur）

这种模糊效果，模拟对象在由角度值定义的方向上的运动。模糊值的作用与此处的高斯模糊相同。

变焦模糊（Zoom Blur）

当物体从内到外变得模糊时，就会发生变焦模糊。它通常用于摄影中，但不是界面设计的理想选择。

在这种特定的模糊类型中，您还可以设置模糊的来源。通过移动该点，可以实现一些有趣的效果。

原文：https://uxdesign.cc/ui-design-shapes-objects-basics-shadows-and-blurs-e42bf2d32864

作者：Michal Malewicz

翻译：静电