V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
cigaret
V2EX  ›  分享创造

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

  •  1
     
  •   cigaret ·
    kongxiangyan · 2020-05-19 00:13:44 +08:00 · 6200 次点击
    这是一个创建于 1634 天前的主题,其中的信息可能已经有所发展或是发生改变。

    以希望能够统一自己的作品风格为出发点,在过去的一个月里,我开始着手开发一套 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 友们瞧瞧,收集点反馈,希望大家可以多多关注、体验、支持!

    48 条回复    2022-06-02 16:26:38 +08:00
    40EaE5uJO3Xt1VVa
        1
    40EaE5uJO3Xt1VVa  
       2020-05-19 01:43:32 +08:00   ❤️ 1
    路过看看,感谢开源
    meganut
        2
    meganut  
       2020-05-19 01:53:55 +08:00 via iPhone   ❤️ 1
    这个风格真好看 有点早起的 material design➕fluent design 的感觉
    b1ncer
        3
    b1ncer  
       2020-05-19 07:50:25 +08:00   ❤️ 1
    很新鲜!关注了
    lhx2008
        4
    lhx2008  
       2020-05-19 09:27:53 +08:00   ❤️ 1
    风格很诡异,不知道是不是配色的问题
    Tas1
        5
    Tas1  
       2020-05-19 09:31:32 +08:00   ❤️ 1
    讲真这种风格比较适合那种物联网和与实际产品相关的配合 UI 上,单纯使用这种 UI 风格视觉看久了太疲劳了,没有辨识度。。。因为界面和按钮几乎连在一起。。。
    dcsite
        6
    dcsite  
       2020-05-19 09:36:05 +08:00
    这是什么玩意啊?看起来眼睛比较难受。
    leeggco
        7
    leeggco  
       2020-05-19 09:45:53 +08:00
    这这这。。
    BadReese
        8
    BadReese  
       2020-05-19 09:50:06 +08:00
    完成度大概只有百分 1 吧
    fortunezhang
        9
    fortunezhang  
       2020-05-19 09:53:51 +08:00 via Android
    @dcsite 你的评论也很辣眼睛
    rioshikelong121
        10
    rioshikelong121  
       2020-05-19 09:56:19 +08:00
    demo 只有一页么.
    leoskey
        11
    leoskey  
       2020-05-19 10:00:00 +08:00
    很奇妙的风格,与我以往看见的哪些妖艳货都不一样
    cigaret
        12
    cigaret  
    OP
       2020-05-19 10:13:10 +08:00
    @lhx2008 @Tas1 @dcsite @fortunezhang @leeggco 有一说一,这种风格的可访问性确实是比较大的问题,目前我还没有见过在正式的面向用户的产品中使用的成熟案例。但我隐约觉得可以通过一些样式的使用规范来缓解这样的问题,还在探索中...

    @BadReese @rioshikelong121 Demo 比较单薄有两点客观原因,一是现阶段主要是完成了基础功能类的开发,二是相关文档和使用案例的输出确实非常缓慢。主观上,utility-first 范式下高级组件其实就是基础功能类的拼接,当然,所有样式无非都是 CSS 属性的堆砌,这听起来是一句废话 🤐 随着文档和案例的更新,我也会逐步输出一些高阶组件的示例。

    还有相当多不完善的地方,在预期的计划中,半年之后有望进入 beta 阶段,非常感谢大家的支持和关注!❤
    yanzuwu
        13
    yanzuwu  
       2020-05-19 10:13:52 +08:00
    这个风格很棒!
    7gugu
        14
    7gugu  
       2020-05-19 10:17:53 +08:00
    demo 的字体再优化一下,找一款更适合这个 UI 的字体会更好,感觉现在会有点突兀哦
    CannonLau
        15
    CannonLau  
       2020-05-19 10:25:02 +08:00
    感觉还是很有想法的...star 了 期待后续的更新
    GM
        16
    GM  
       2020-05-19 10:26:11 +08:00
    风格独特。
    喜欢的人会非常喜欢,但是我估计大部分人都不喜欢。
    learnshare
        17
    learnshare  
       2020-05-19 10:35:17 +08:00
    请个设计师吧
    ryuutanyou
        18
    ryuutanyou  
       2020-05-19 10:49:16 +08:00   ❤️ 1
    假如在美术课上使用这种光和阴影,估计就 GG 了。觉得丑的原因,是因为这种光照和阴影在真实世界不可能存在的,不符合正常的认知
    eGlhb2Jhb2Jhbw
        19
    eGlhb2Jhb2Jhbw  
       2020-05-19 10:52:59 +08:00
    作为 UI 库,我除了扫码,没有找到任何 UI 相关的展示,我不想掏手机扫码,撤了。
    bsg1992
        20
    bsg1992  
       2020-05-19 10:54:49 +08:00
    你这个 适合做家里灯管的显示状态
    laoyur
        21
    laoyur  
       2020-05-19 10:56:29 +08:00 via Android
    @leoskey 我怎么觉得也挺妖的
    dycc2010
        22
    dycc2010  
       2020-05-19 11:02:05 +08:00
    有点诡异啊
    HeyWeGo
        23
    HeyWeGo  
       2020-05-19 11:02:06 +08:00   ❤️ 1
    目前看到的唯一一个上线的,采用这种风格的网站。大范围使用并不讨喜。
    从目前的设计稿来看,多数用作小工具类软件的功能性按钮上,出现列表的网站,用上这种风格立马爆炸~

    www.photock.jp
    ohoh
        24
    ohoh  
       2020-05-19 11:10:32 +08:00
    看起来头疼! 如果这叫"新拟态", 那"新拟态"挺吓人的
    imchenlong
        25
    imchenlong  
       2020-05-19 11:26:18 +08:00
    其实外网设计大佬们的拟态 UI 挺好看,只是 up 实现的有点诡异。
    cigaret
        26
    cigaret  
    OP
       2020-05-19 11:29:13 +08:00
    @7gugu @HeyWeGo @ryuutanyou 感谢建议哦 ~❤

    @CannonLau 感谢关注!

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

    @eGlhb2Jhb2Jhbw 可能是你浏览速度太快了,忽略了一些内容,文档的重点和主次安排确实需要再改进一下,感谢反馈!
    rrfeng
        27
    rrfeng  
       2020-05-19 11:32:14 +08:00
    我觉得不好看……
    cigaret
        28
    cigaret  
    OP
       2020-05-19 11:32:44 +08:00
    @imchenlong 阴影和色彩之类基本的元素和组件的样式是几乎没有差异的,但 Demo 页面的排布确实有点让人摸不着头脑,有待优化!感谢反馈!
    loading
        29
    loading  
       2020-05-19 11:41:20 +08:00
    这个样式早就已经看过了,感觉像刚学会用 css 阴影一样。
    CaptainKevin
        30
    CaptainKevin  
       2020-05-19 12:25:28 +08:00 via Android
    浪费了这个好听的名字
    9yu
        31
    9yu  
       2020-05-19 12:33:25 +08:00 via Android
    你管这玩意儿叫设计??
    jeasonzuo
        32
    jeasonzuo  
       2020-05-19 12:48:07 +08:00
    梦回 win98 果然时尚是一个轮回吗
    ShuoHui
        33
    ShuoHui  
       2020-05-19 12:51:26 +08:00 via iPhone
    喜欢这种风格!
    zhw2590582
        34
    zhw2590582  
       2020-05-19 13:05:54 +08:00
    拟态没问题,但配色可以更简洁清晰些
    morizawatt
        35
    morizawatt  
       2020-05-19 13:20:41 +08:00   ❤️ 1
    demo 应该是 lz 照猫画虎做的 UI 做的会有更多细节 所以让这么多人误会新拟态很劣质 楼中各位感兴趣 可以去追波搜索看一下 远比 lz 理解的新拟态要丰满
    yuuko
        36
    yuuko  
       2020-05-19 14:34:22 +08:00
    不知道楼主手机上打开看过吗?手机上看巨丑
    yuankui
        37
    yuankui  
       2020-05-19 16:47:06 +08:00
    有点意思
    Pionxzh
        38
    Pionxzh  
       2020-05-19 19:28:16 +08:00 via Android   ❤️ 1
    老哥 英文文档第一句 utility-first 有错字
    glorifiedatom
        39
    glorifiedatom  
       2020-05-19 20:13:31 +08:00 via iPhone
    i
    mlhorizon
        40
    mlhorizon  
       2020-05-19 21:26:53 +08:00
    这个风格很神奇,很别致,有一种在铝块上铣出来的感觉。
    Liulang007
        41
    Liulang007  
       2020-05-19 22:09:57 +08:00
    路过路过,有点审美疲劳了
    registered
        42
    registered  
       2020-05-19 22:41:23 +08:00
    看评论很绝望。。。
    guolaopi
        43
    guolaopi  
       2020-05-19 23:38:05 +08:00   ❤️ 1
    单独拎出来某个组建看挺好看的,就是没有完整的设计语言。
    像 #23 说的那个网站的按钮和卡片都挺好看,但是广告图和底部半透明广告栏就跟这个风格很冲突的感觉,
    结果就跟 win10 的 UI 一样,又有 Fluent 、又有 UWP 、又有控制面板这种 xp 时代的产物。。。

    另外我记得 css 绘制阴影很耗性能吗,一个页面上几百个这样的按钮我小破电脑风扇怕是要起飞。。。
    rapiz
        44
    rapiz  
       2020-05-19 23:48:32 +08:00
    初看觉得巨丑,不过那个 hover 的光影变化挺好玩的,看习惯居然觉得也没那么丑了
    cigaret
        45
    cigaret  
    OP
       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
        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 这篇文章

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

    这种风格需要较强的设计功底,楼主加油!
    hst001
        47
    hst001  
       2020-05-21 17:19:42 +08:00
    @guolaopi #46 楼主发的那个离这个设计目标还有些距离,颜色阴影把控太难了
    Anivial
        48
    Anivial  
       2022-06-02 16:26:38 +08:00
    嗯,客观的说,这个只有一个按钮有拟态的样子,阴影设计问题还很大。
    其实拟态设计的出现是很美观的,有兴趣可以看这个链接,https://codepen.io/myacode/details/PoqQQNM
    拟态的设计每个人观念都不同,还是多去寻找吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5600 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 06:05 · PVG 14:05 · LAX 22:05 · JFK 01:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.