拟物风格的小程序附源码

1. 前言

对于拟物风格这种UI研究良久，这里把我收集到的一些好用的组件、UI、源码发出来供大家使用。我个人也开源了一款拟物风格的小程序，欢迎借鉴。

各个风格简介

• Material Design，物料设计，基于纸张等物体的叠放关系，利用阴影表示不同元素之间的位置和距离
• Neumorphism：新拟态，模拟物体的内嵌和凸出状态，以淡色为主
• Glassmorphism：玻璃态，模拟玻璃效果，主要是对背景元素的虚化和散射
• Claymorphism：泥陶态，是结合 3D 设计流行风格而兴起的新形态。 设计趋势由拟物风格发展为扁平风格时，去掉了一切表示深度和层叠的效果，虽然视觉上简化了，但不容易表现空间关系。

2. 小程序页面及源码

参考一篇博客 小程序AP配网和AK配网教程（开源）

3. 拟物资源

vue组件
https://qui-max.netlify.app/
vue UI组件库
https://themesberg.com/

拟物风格在线生成网站
https://neumorphism.io/

拟态小时钟
https://blog.csdn.net/a10534126/article/details/123227401

拟态图标
https://www.jianshu.com/p/e7e812b7d30b

拟物风格APPUI
https://www.bilibili.com/read/cv8770193/

UI库
https://vuetifyjs.com/

https://github.com/AKAspanion/ui-neumorphism

https://github.com/mrsaeeddev/awesome-neumorphism

代码示例html
https://gitee.com/codexly/treasure/tree/css/CSS
拟态小demo.html

水滴效果.html

https://www.npmjs.com/search?q=neumorphism

https://www.sj33.cn/digital/uisj/202002/52384.html

https://demo.themesberg.com/neumorphism-ui/index.html

UI
Axure拟物风格组件
https://gitee.com/bosenger/neumorphism-axure-library/

https://www.sohu.com/a/397284966_120068796

http://www.boxui.com/tag/neumorphism

https://uiiiuiii.com/inspiration/1616315357.html

https://github.com/topics/neumorphism-ui

设计师网站
https://mfchange.cn/index.html

泥陶态设计js

clay.css - by Adrian Bece