1. 前言
对于拟物风格这种UI研究良久,这里把我收集到的一些好用的组件、UI、源码发出来供大家使用。我个人也开源了一款拟物风格的小程序,欢迎借鉴。
各个风格简介
Material Design,物料设计,基于纸张等物体的叠放关系,利用阴影表示不同元素之间的位置和距离
Neumorphism:新拟态,模拟物体的内嵌和凸出状态,以淡色为主
Glassmorphism:玻璃态,模拟玻璃效果,主要是对背景元素的虚化和散射
Claymorphism:泥陶态,是结合 3D 设计流行风格而兴起的新形态。
设计趋势由拟物风格发展为扁平风格时,去掉了一切表示深度和层叠的效果,虽然视觉上简化了,但不容易表现空间关系。
2. 小程序页面及源码
参考一篇博客 小程序AP配网和AK配网教程(开源)
3. 拟物资源
vue组件
vue UI组件库
拟物风格在线生成网站
拟态小时钟
https://blog.csdn.net/a10534126/article/details/123227401
拟态图标
https://www.jianshu.com/p/e7e812b7d30b
拟物风格APPUI
https://www.bilibili.com/read/cv8770193/
UI库
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