拟物风格的小程序附源码

简介: 拟物风格的小程序附源码

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

目录
相关文章
|
1月前
|
存储 移动开发 小程序
小程序界面设计软件源码生成器
小程序界面设计软件源码生成器
63 5
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
40 2
|
1月前
|
数据可视化 小程序 Cloud Native
DIY可视化业界领先的可视化快速生成FinClip小程序源码
DIY可视化业界领先的可视化快速生成FinClip小程序源码
30 0
|
3月前
|
JSON 小程序 JavaScript
微信小程序制作 购物商城首页 【内包含源码】
这篇文章提供了一个微信小程序购物商城首页的实现方法和源码,包括页面布局、数据结构、核心代码以及如何配置tabBar和搜索框组件。
微信小程序制作 购物商城首页 【内包含源码】
|
3月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
4月前
|
小程序 JavaScript Java
基于微信小程序便捷记账系统设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序便捷记账系统设计与实现(源码+lw+部署文档+讲解等)
130 8
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
82 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
76 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
91 7