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

以希望能够统一自己的作品风格为出发点，在过去的一个月里，我开始着手开发一套 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
- 准备了两个实例作为参考，一个网页，一个微信小程序；

guolaopi

2020-05-19 23:38:05 +08:00

单独拎出来某个组建看挺好看的，就是没有完整的设计语言。
像 #23 说的那个网站的按钮和卡片都挺好看，但是广告图和底部半透明广告栏就跟这个风格很冲突的感觉，
结果就跟 win10 的 UI 一样，又有 Fluent 、又有 UWP 、又有控制面板这种 xp 时代的产物。。。

另外我记得 css 绘制阴影很耗性能吗，一个页面上几百个这样的按钮我小破电脑风扇怕是要起飞。。。

cigaret

2020-05-20 10:30:52 +08:00

@guolaopi 非常中肯的评价！之所以「大胆地」称之为 UI 框架就是因为它最终会有成体系的设计语言或者叫做设计规范。

单纯使用 shadow-box 绘制大量阴影确实性能较差，目前大规模使用阴影最好是使用 shadow-box 叠加 ::before 或者 ::after 伪元素双重阴影来实现，最大程度上避免在交互时实时绘制阴影。我在实现最初确实是使用的这一种方案，但是在后续开发中引入了阴影方向变化，背景渐变等特性之后，::before 和 ::after 引入的层叠问题又非常恼人，虽然有办法 hack，但终究不够优雅，于是弃用，采用 shadow-box 即时 transition 。同时，在使用中，推荐只在按钮、输入、菜单等有明确交互的地方使用「突起」或者「凹陷」的样式...

Mobius UI 确实是一套成体系的东西，但限于个人力量有限，推进速度局限，很多内容还没有成型，目前释出的只是样式实现的部分——mobius.css ，这东西就像 Material，技术方案在那里，但如果开发者不会使用的话，做出来的界面也跟官方的 Demo 近乎迥异，一言难尽。

惭愧的是，我个人目前对 Mobius UI 的期待也在摸索和尝试阶段，这可能是给大家带来误解的主要原因，总之之后还会积极完善啦~感谢你的关注和评价哟！❤

guolaopi

2020-05-20 10:43:47 +08:00

@cigaret
其实 #5 和 #40 说的很好，这个风格适合跟现实更接轨的项目，给人一种硅胶按钮的感觉。
建议 demo 换成一个遥控器会让更多人接受，就像这个：
https://image.uisdc.com/wp-content/uploads/2020/02/uisdc-hw-20200222-7.jpg
图片来自于： https://www.uisdc.com/neumorphism-ui 这篇文章

这个遥控器一下就抓住我的眼球了，很舒服的感觉。

这种风格需要较强的设计功底，楼主加油！