🎨 Neumorphism（新拟态）风格的 UI 框架 alpha 版本发布啦 ~ 样式部分纯 CSS，支持 Web 和小程序，简单易用，感谢大家关注和支持 ~
cigaret · kongxiangyan · 2020-05-19 00:13:44 +08:00 · 6247 次点击这是一个创建于 1667 天前的主题，其中的信息可能已经有所发展或是发生改变。
以希望能够统一自己的作品风格为出发点，在过去的一个月里，我开始着手开发一套 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
- 准备了两个实例作为参考，一个网页，一个微信小程序；
 |
1
40EaE5uJO3Xt1VVa 2020-05-19 01:43:32 +08:00  1
路过看看，感谢开源
|
 |
2
meganut 2020-05-19 01:53:55 +08:00 via iPhone 1
这个风格真好看 有点早起的 material design➕fluent design 的感觉
|
 |
3
b1ncer 2020-05-19 07:50:25 +08:00 1
很新鲜！关注了
|
 |
4
lhx2008 2020-05-19 09:27:53 +08:00 1
风格很诡异，不知道是不是配色的问题
|
 |
5
Tas1 2020-05-19 09:31:32 +08:00 1
讲真这种风格比较适合那种物联网和与实际产品相关的配合 UI 上，单纯使用这种 UI 风格视觉看久了太疲劳了，没有辨识度。。。因为界面和按钮几乎连在一起。。。
|
 |
6
dcsite 2020-05-19 09:36:05 +08:00
这是什么玩意啊？看起来眼睛比较难受。
|
 |
7
leeggco 2020-05-19 09:45:53 +08:00
这这这。。
|
 |
8
BadReese 2020-05-19 09:50:06 +08:00
完成度大概只有百分 1 吧
|
 |
9
fortunezhang 2020-05-19 09:53:51 +08:00 via Android
@dcsite 你的评论也很辣眼睛
|
 |
10
rioshikelong121 2020-05-19 09:56:19 +08:00
demo 只有一页么.
|
 |
11
leoskey 2020-05-19 10:00:00 +08:00
很奇妙的风格，与我以往看见的哪些妖艳货都不一样
|
 |
12
cigaret OP @lhx2008 @Tas1 @dcsite @fortunezhang @leeggco 有一说一，这种风格的可访问性确实是比较大的问题，目前我还没有见过在正式的面向用户的产品中使用的成熟案例。但我隐约觉得可以通过一些样式的使用规范来缓解这样的问题，还在探索中...
@BadReese @rioshikelong121 Demo 比较单薄有两点客观原因，一是现阶段主要是完成了基础功能类的开发，二是相关文档和使用案例的输出确实非常缓慢。主观上，utility-first 范式下高级组件其实就是基础功能类的拼接，当然，所有样式无非都是 CSS 属性的堆砌，这听起来是一句废话 🤐 随着文档和案例的更新，我也会逐步输出一些高阶组件的示例。 还有相当多不完善的地方，在预期的计划中，半年之后有望进入 beta 阶段，非常感谢大家的支持和关注！❤ |
 |
13
yanzuwu 2020-05-19 10:13:52 +08:00
这个风格很棒！
|
 |
14
7gugu 2020-05-19 10:17:53 +08:00
demo 的字体再优化一下,找一款更适合这个 UI 的字体会更好,感觉现在会有点突兀哦
|
 |
15
CannonLau 2020-05-19 10:25:02 +08:00
感觉还是很有想法的...star 了 期待后续的更新
|
 |
16
GM 2020-05-19 10:26:11 +08:00
风格独特。
喜欢的人会非常喜欢，但是我估计大部分人都不喜欢。 |
 |
17
learnshare 2020-05-19 10:35:17 +08:00
请个设计师吧
|
 |
18
ryuutanyou 2020-05-19 10:49:16 +08:00 1
假如在美术课上使用这种光和阴影，估计就 GG 了。觉得丑的原因，是因为这种光照和阴影在真实世界不可能存在的，不符合正常的认知
|
 |
19
eGlhb2Jhb2Jhbw 2020-05-19 10:52:59 +08:00
作为 UI 库，我除了扫码，没有找到任何 UI 相关的展示，我不想掏手机扫码，撤了。
|
 |
20
bsg1992 2020-05-19 10:54:49 +08:00
你这个 适合做家里灯管的显示状态
|
 |
22
dycc2010 2020-05-19 11:02:05 +08:00
有点诡异啊
|
 |
23
HeyWeGo 2020-05-19 11:02:06 +08:00 1
|
 |
24
ohoh 2020-05-19 11:10:32 +08:00
看起来头疼! 如果这叫"新拟态", 那"新拟态"挺吓人的
|
 |
25
imchenlong 2020-05-19 11:26:18 +08:00
其实外网设计大佬们的拟态 UI 挺好看，只是 up 实现的有点诡异。
|
|
26
cigaret OP @7gugu @HeyWeGo @ryuutanyou 感谢建议哦 ~❤
@CannonLau 感谢关注！ @learnshare 条件允许的时候会有的！ @eGlhb2Jhb2Jhbw 可能是你浏览速度太快了，忽略了一些内容，文档的重点和主次安排确实需要再改进一下，感谢反馈！ |
 |
27
rrfeng 2020-05-19 11:32:14 +08:00
我觉得不好看……
|
|
28
cigaret OP @imchenlong 阴影和色彩之类基本的元素和组件的样式是几乎没有差异的，但 Demo 页面的排布确实有点让人摸不着头脑，有待优化！感谢反馈！
|
 |
29
loading 2020-05-19 11:41:20 +08:00
这个样式早就已经看过了，感觉像刚学会用 css 阴影一样。
|
 |
30
CaptainKevin 2020-05-19 12:25:28 +08:00 via Android
浪费了这个好听的名字
|
 |
31
9yu 2020-05-19 12:33:25 +08:00 via Android
你管这玩意儿叫设计？？
|
 |
32
jeasonzuo 2020-05-19 12:48:07 +08:00
梦回 win98 果然时尚是一个轮回吗
|
 |
33
ShuoHui 2020-05-19 12:51:26 +08:00 via iPhone
喜欢这种风格！
|
 |
34
zhw2590582 2020-05-19 13:05:54 +08:00
拟态没问题，但配色可以更简洁清晰些
|
 |
35
morizawatt 2020-05-19 13:20:41 +08:00 1
demo 应该是 lz 照猫画虎做的 UI 做的会有更多细节 所以让这么多人误会新拟态很劣质 楼中各位感兴趣 可以去追波搜索看一下 远比 lz 理解的新拟态要丰满
|
 |
36
yuuko 2020-05-19 14:34:22 +08:00
不知道楼主手机上打开看过吗？手机上看巨丑
|
 |
37
yuankui 2020-05-19 16:47:06 +08:00
有点意思
|
 |
38
Pionxzh 2020-05-19 19:28:16 +08:00 via Android 1
老哥 英文文档第一句 utility-first 有错字
|
 |
39
glorifiedatom 2020-05-19 20:13:31 +08:00 via iPhone
i
|
 |
40
mlhorizon 2020-05-19 21:26:53 +08:00
这个风格很神奇，很别致，有一种在铝块上铣出来的感觉。
|
 |
41
Liulang007 2020-05-19 22:09:57 +08:00
路过路过，有点审美疲劳了
|
 |
42
registered 2020-05-19 22:41:23 +08:00
看评论很绝望。。。
|
 |
43
guolaopi 2020-05-19 23:38:05 +08:00 1
单独拎出来某个组建看挺好看的，就是没有完整的设计语言。
像 #23 说的那个网站的按钮和卡片都挺好看，但是广告图和底部半透明广告栏就跟这个风格很冲突的感觉， 结果就跟 win10 的 UI 一样，又有 Fluent 、又有 UWP 、又有控制面板这种 xp 时代的产物。。。 另外我记得 css 绘制阴影很耗性能吗，一个页面上几百个这样的按钮我小破电脑风扇怕是要起飞。。。 |
 |
44
rapiz 2020-05-19 23:48:32 +08:00
初看觉得巨丑，不过那个 hover 的光影变化挺好玩的，看习惯居然觉得也没那么丑了
|
|
45
cigaret OP @guolaopi 非常中肯的评价！之所以「大胆地」称之为 UI 框架就是因为它最终会有成体系的设计语言或者叫做设计规范。
单纯使用 shadow-box 绘制大量阴影确实性能较差，目前大规模使用阴影最好是使用 shadow-box 叠加 ::before 或者 ::after 伪元素双重阴影来实现，最大程度上避免在交互时实时绘制阴影。我在实现最初确实是使用的这一种方案，但是在后续开发中引入了阴影方向变化，背景渐变等特性之后，::before 和 ::after 引入的层叠问题又非常恼人，虽然有办法 hack，但终究不够优雅，于是弃用，采用 shadow-box 即时 transition 。同时，在使用中，推荐只在按钮、输入、菜单等有明确交互的地方使用「突起」或者「凹陷」的样式... Mobius UI 确实是一套成体系的东西，但限于个人力量有限，推进速度局限，很多内容还没有成型，目前释出的只是样式实现的部分——mobius.css ，这东西就像 Material，技术方案在那里，但如果开发者不会使用的话，做出来的界面也跟官方的 Demo 近乎迥异，一言难尽。 惭愧的是，我个人目前对 Mobius UI 的期待也在摸索和尝试阶段，这可能是给大家带来误解的主要原因，总之之后还会积极完善啦~感谢你的关注和评价哟！❤ |
|
46
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 这篇文章 这个遥控器一下就抓住我的眼球了，很舒服的感觉。 这种风格需要较强的设计功底，楼主加油！ |
 |
48
Anivial 2022-06-02 16:26:38 +08:00
嗯，客观的说，这个只有一个按钮有拟态的样子，阴影设计问题还很大。
其实拟态设计的出现是很美观的，有兴趣可以看这个链接，https://codepen.io/myacode/details/PoqQQNM 拟态的设计每个人观念都不同，还是多去寻找吧 |
Select Language