新擬物化 UI 設計（Neumorphism / soft ui）在近段時間流行起來的，我們在 Dribbble 中搜索 Neumorphism 就有很多相關的新擬物化設計作品，這種效果一眼看上去感覺很美，很舒服，但是怎么做出來的呢？今天設計達人分享這個 Neumorphism 在線生成新擬物化 UI 工具，可以通過這個工具分解出新擬物化 UI 是如何設計的，此外它還能生成 CSS 代碼并應用到網頁上。

Neumorphism

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

1. 什么是新擬物化UI設計？

在設計達人看來這種 UI 很適合用來做概念設計的產品，當然實際應用中也可以嘗試，因為視覺效果確實是很不錯。我們來看看關于新擬物化的 UI 作品，讓大家進一步了解它是什么樣子的。

更多新擬物化設計的介紹：

2. 如何實現新擬物化UI設計效果？

直接參考下圖的設置

大家先看這個圖，新擬物化主要是通過陰影來實現的，通過陰影實現凸凹兩種質感。

△ 新擬物化UI設計參數圖

使用Neumorphism在線工具

推薦大家用 Neumorphism 在線工具來快速實現新擬物化 UI 效果，因為它帶有預覽功能，所見即所得，比 PS 或 Sketch 上設置更加快捷，而具體的設置參數看對應 CSS 屬性值就可以了。

3. 新擬物化UI主要實現方式

給圖形添加 2 個陰影，參數要設置大一些，注意兩陰影顏色是同一色調，然后分別設置一個亮色一個暗色。這里就不說參數了，如果你調整不出效果，表示你色感方面還需要加強。

模糊設置：Blur 模糊值通常是坐標值的 2 倍，這樣效果會明顯一點。

凸出的效果就是利用漸變來設置了。

今天就分享到這里，快嘗試新擬物化 UI 設計吧，這是 2020 的新設計趨勢之一哦。