新拟物化UI设计

什么是新拟物化

新拟物化，是在扁平的基础上呈现真实物体质感的设计风格， 核心思想是模拟光的斜向照射效果 ，用阴影显出“高光”和“阴影”。 新拟物界面设计（Neomorphic UI Design）是2020年在互联网上非常火热的一种前端界面设计方式， 这种设计风格在传统的扁平的基础上增加了拟物的投影效果，从而提升了界面的立体感，又比拟物的效果更加轻盈、简洁，因此整体视觉体验是简约但又有惊喜。

新拟物化的风格是什么样的呢？看下图感受一下：

PreviousNext

怎么实现新拟物风格设计

现代的CSS技术的进步和升级， 这些拟物的样式都完全使用代码编写出来了！无须任何贴图，这也是相对极致拟物风格的一个巨大突破。 下面提供几个新拟物风格的CSS设计工具：

Toolbox工具箱

Toolbox 集合了新潮流 CSS 风格的工具箱，有在线 CSS 玻璃形态和新拟物形态，两种目前网页设计的新风格样式，Neumorphism CSS Generator 可以通过调整对象的大小、圆度、投影距离、配色、光源等自定义制作 CSS 拟物形态的盒子。Glassmorphism CSS Generator 可在线制作玻璃形态，通过实时预览背景模糊、不透明度、轮廓等等就可以制作大品牌网站的玻璃样式的盒子。有趣的工具箱值得 Web 网页设计师收藏哦。

链接地址：http://santhoshsivan.com/toolbox.html

CSS拟物风格元素在线调试

CSS拟物风格元素在线代码：jQuery插件库提供的一个在线CSS新拟物风格作品Demo的代码调试工具

链接地址：https://www.jq22.com/code3871

UI社拟物化风格大赏

UI社收集的一些使用CSS创建的新拟物化风格UI示例。这些示例不仅可以打开观看，还可以自己在线代码调试，如果开发中有用到相应的样式风格，可以自己进行代码调试截取。

链接地址：https://www.uishe.cn/28293.html

新拟物风格作品欣赏

1. 新拟物音乐播放器：http://code.qkongtao.cn/neomorphic/musicPlayer/index.html

2. 精美的CSS3新拟物风格UI元素：http://code.qkongtao.cn/neomorphic/neomorphicUiElement/index.html

3. 玻璃拟物音乐播放器：http://code.qkongtao.cn/neomorphic/glassMusicPlayer/index.html

4. 左眼会陪右眼哭の博客：http://qkongtao.cn/

5. panda的博客：https://panda.panda-studio.cn/

一些新拟物的代码收集

下面是我收集的一些新拟物的代码，放在了gitee上，开箱即用。

其中包括了上文作品欣赏中的代码！

Get it!Download

×

版权说明

本站提供的下载内容版权归本站所有。转载 必须 注明出处！

* 标有 “转载” 字样的文章，内容版权归原作者所有。

不同意同意并下载