新拟态设计html,新拟态UI设计怎么做？来用Neumorphism在线工具吧

新拟态UI设计怎么做？来用Neumorphism在线工具吧

2月 26, 2020

发表于: 设计工具.

评论

Sponsor

​新拟态UI设计(Neumorphism / soft ui)在近段时间流行起来的，我们在Dribbble中搜索Neumorphism就有很多相关的新拟态设计作品，这种效果一眼看上去感觉很美，很舒服，但是怎么做出来的呢？今天设计达人分享这个Neumorphism在线生成新拟态UI工具，可以通过这个工具分解出新拟态UI是如何设计的，此外它还能生成CSS代码并应用到网页上。

工具名称：Neumorphism

网站地址：https://neumorphism.io

什么是新拟态UI设计？

在设计达人看来这种UI很适合用来做概念设计的产品，当然实际应用中也可以尝试，因为视觉效果确实是很不错呢。我们来看看关于新拟态的UI作品，让大家进一步了解它是什么样子的。

如何实现新拟态UI设计效果？

1、直接参考下图的设置：

大家先看这个图，新拟态主要是通过阴影来实现的，通过阴影实现凸凹两种质感。

新拟态UI设计参数图

2、使用Neumorphism在线工具：

推荐大家用Neumorphism在线工具来快速实现新拟态UI效果，因为它带有预览功能，所见即所得，比PS或Sketch上设置更加快捷，而具体的设置参数看对应CSS属性值就可以了。

新拟态UI主要实现方式

1、给图形添加2个阴影，参数要设置大一些，注意两阴影颜色是同一色调，然后分别设置一个亮色一暗色。这里就不说参数了，如果你调整不出效果，表示你色感方面还需要加强。

2、模糊设置：Blur模糊值通常是坐标值的2倍，这样效果会明示一点。

3、凸出的效果就是利用渐变来设置了。

今天就分享到这里，快尝试新拟态UI设计吧，这是2020的新设计趋势之一哦！

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站