🎨 Neumorphism（新拟态）风格的 UI 框架 alpha 版本发布啦 ~ 样式部分纯 CSS，支持 Web 和小程序，简单易用，感谢大家关注和支持 ~

[cigaret]

以希望能够统一自己的作品风格为出发点，在过去的一个月里，我开始着手开发一套 Neumorphism （新拟态）风格的 UI 框架。目前，基础样式部分已经完成，前天我也发布了 alpha 版本，归纳来说，

具备以下特点：

• 我的技术方案比较小众，所谓 UI 框架的部分大家目前很少能用到，但对于样式来说，核心的部分就是一个 mobius.css 文件，创建新拟态风格有它就足够了；
• 受 tailwindcss 的影响极深，采用了 utility-first 的编写方式，你可以只使用其中的个别类简单地创建新拟态风格组件，也可以综合使用其中提供的 Layout 、Typography 、Effects 、Interact 等功能类完成 80% 以上的页面样式开发工作；
• 大量使用了 CSS 变量，绝大多数功能类的细节都可以进行自定义调整（比如主题色、字号梯度、阴影大小、间距等）；
• 没有使用特别怪异的 CSS 属性，兼容大多数主流浏览器和小程序（目前主要是微信小程序）；
• 天然支持 DarkMode，支持四种光线角度调整；
• ...

体验或使用的理由：

• 也许是目前实现地最好的 Neumorphism 风格 CSS Library，纯 CSS 、框架无关；

缺点但我认为还勉强可以接受：

• 文档还在缓慢创作中（对于一个纯 CSS 库来说，文档似乎也不是什么拦路虎）；
• 样式类名有点长，一方面是目前 utility-first 或者叫做 atomic 风格的库也不少，为了避免命名冲突；另一方面是为了表意，gzip 和 brotli 面前，冗长的类名不是不可以接受，如果你的技术方案跟我相同的话，我有一套简单的解决办法；

本来是想写一篇文章详细梳理总结一下的，但最近个人因为种种原因蛮颓的，决定往后推一推，先写这么一段简介放出来给 V 友们瞧瞧，收集点反馈，希望大家可以多多关注、体验、支持！

• Mobius UI GitHub Repo
  • 准备了两个实例作为参考，一个网页，一个微信小程序；

[laoyur]

@leoskey 我怎么觉得也挺妖的

[dycc2010]

有点诡异啊

[HeyWeGo]

目前看到的唯一一个上线的，采用这种风格的网站。大范围使用并不讨喜。
从目前的设计稿来看，多数用作小工具类软件的功能性按钮上，出现列表的网站，用上这种风格立马爆炸~

www.photock.jp

[ohoh]

看起来头疼! 如果这叫"新拟态", 那"新拟态"挺吓人的

[imchenlong]

其实外网设计大佬们的拟态 UI 挺好看，只是 up 实现的有点诡异。

[cigaret]

@7gugu @HeyWeGo @ryuutanyou 感谢建议哦 ~❤

@CannonLau 感谢关注！

@learnshare 条件允许的时候会有的！

@eGlhb2Jhb2Jhbw 可能是你浏览速度太快了，忽略了一些内容，文档的重点和主次安排确实需要再改进一下，感谢反馈！

[rrfeng]

我觉得不好看……

[cigaret]

@imchenlong 阴影和色彩之类基本的元素和组件的样式是几乎没有差异的，但 Demo 页面的排布确实有点让人摸不着头脑，有待优化！感谢反馈！

[loading]

这个样式早就已经看过了，感觉像刚学会用 css 阴影一样。

[CaptainKevin]

浪费了这个好听的名字

[9yu]

你管这玩意儿叫设计？？

[jeasonzuo]

梦回 win98 果然时尚是一个轮回吗

[ShuoHui]

喜欢这种风格！

[zhw2590582]

拟态没问题，但配色可以更简洁清晰些

[morizawatt]

demo 应该是 lz 照猫画虎做的 UI 做的会有更多细节 所以让这么多人误会新拟态很劣质 楼中各位感兴趣 可以去追波搜索看一下 远比 lz 理解的新拟态要丰满

[yuuko]

不知道楼主手机上打开看过吗？手机上看巨丑

[yuankui]

有点意思

[Pionxzh]

老哥 英文文档第一句 utility-first 有错字

[glorifiedatom]

i

[mlhorizon]

这个风格很神奇，很别致，有一种在铝块上铣出来的感觉。