2020 年最火的新拟物化设计怎么做?这个在线神器一键生成!

1486天前 · 神器 · 312次阅读

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

2020 年最火的新拟物化设计怎么做?这个在线神器一键生成!

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

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

2020 年最火的新拟物化设计怎么做?这个在线神器一键生成!

更多新拟物化设计的介绍:

  1. 如何实现新拟物化UI设计效果?
    直接参考下图的设置

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

2020 年最火的新拟物化设计怎么做?这个在线神器一键生成!

△ 新拟物化UI设计参数图

使用Neumorphism在线工具

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

2020 年最火的新拟物化设计怎么做?这个在线神器一键生成!

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

2020 年最火的新拟物化设计怎么做?这个在线神器一键生成!

模糊设置:Blur 模糊值通常是坐标值的 2 倍,这样效果会明显一点。

2020 年最火的新拟物化设计怎么做?这个在线神器一键生成!

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

2020 年最火的新拟物化设计怎么做?这个在线神器一键生成!

今天就分享到这里,快尝试新拟物化 UI 设计吧,这是 2020 的新设计趋势之一哦。

2020 年最火的新拟物化设计怎么做?这个在线神器一键生成!


原作者:优设@ 土拨鼠

👍 0 支持 ☕
支持 ☕

图标 ui设计 神器 Neumorphism 新拟物化设计

最后修改于692天前

评论

贴吧 狗头 原神 小黄脸
收起

贴吧

狗头

原神

小黄脸

目录

avatar

noso_cool

我有一些...东西#f3f6ff

720

文章数

2

评论数

6

分类