![8b0a6818806db67b99cb1d05cd364069.png](https://i-blog.csdnimg.cn/blog_migrate/7bc9f56c8542908d3ce0030bdbb0d6fa.png)
![170f25ed485e2ecdb3d9344f6c3a6f35.gif](https://i-blog.csdnimg.cn/blog_migrate/1ad5f03517f480eb0921ca2151fd97e8.gif)
![7960edd4036982d47810d8c4cf9d608c.png](https://i-blog.csdnimg.cn/blog_migrate/95f1614abd0a4424eb208be7c96286bc.png)
在UI中,阴影的运用已经很广泛了,除了填充、笔触和圆角,阴影是UI元素中最重要的部分之一。它们是继填充,笔触和圆角之后,UI元素中最重要的部分之一。
现如今,扁平化不再是一个重要的趋势,今天和大家分享6个简单的小教程,如何为卡片、按钮和其他UI控件设计出漂亮的阴影。
1.不要使用阴影的默认值
不管你使用的是sketch、Figma还是Adobe XD,软件中默认的阴影效果很丑、很死板,我们在设计的时候需要修改他们的外观参数。
2.让阴影看起来柔和一点
大多数漂亮的阴影都是柔和的阴影,他们有着一样的共性:降低透明度(10%-30%),设置较高的模糊度(16px-40px)。这样的调整让阴影的外观立竿见影。
3.用带有模糊的图层代替阴影
标准阴影样式实现起来很容易,想要更好看的设计效果,需要单独做一个图层,做一个高斯模糊的效果,可以更好的控制阴影的位置和大小。
有的开发是能实现的,我们可以为他们提供一些参数。
4.使阴影颜色更自然
100%的纯灰色很死板(除了纯黑白的主题),我们现实生活中的阴影会带有环境色,设计的时候给阴影添加用户界面中的中性色彩,效果会更好。
5.将材质颜色设为阴影
现实世界中的材料,尤其是半透明材料,它们的阴影继承了物体本身的颜色,我们可以用这些色调来创建该类型材料的插图,看起来更加新奇。
6.从现实世界中汲取灵感
上面的例子只是个开始。观察其他物体和材料如何与光线相互作用。看看它们阴影是怎么形成的——颜色、模糊、角度。非凡的成果始于灵感迸发出的火花。
总结
应用这6个简单的小技巧,为我们的设计加分,提高我们的设计质感。
原文:https://blog.prototypr.io/how-to-make-perfect-shadows-in-ui-design-2773e32074da
作者:Thalion
感谢你的阅读支持 · 欢迎留言互动 -------------------------------------------
![170f25ed485e2ecdb3d9344f6c3a6f35.gif](https://i-blog.csdnimg.cn/blog_migrate/1ad5f03517f480eb0921ca2151fd97e8.gif)