iofod - 新拟物设计的跨平台实践
iofod - 新拟物设计的跨平台实践
前言
话说天下大势，分久必合合久必分，新拟物（Neumorphism，又称 Soft UI）是一种赋予界面 UI 真实感的一种设计风格，属于拟物设计的一种，然而拟物设计身上的标签从过时到时髦的转变，不过短短数载。那么，新拟物究竟是王者归来还是昙花一现？这问题得留给时间去回答，诚如《3D 与 UI 结合的设计探索》一文所述：
一切的 UI 设计风格都是为产品本身服务，如果新的设计风格能让产品整体体验得到“提升”，哪怕这种提升只是成功获取到了用户的注意力，那这个设计就是有价值的。
对比旧拟物，新拟物的“轻”风格在开发侧是易于实现的，低代码开发平台 iofod 利用原子组件特性，实现了大量新拟物风格常用的组件，封装成 Soft UI 拓展，方便大家使用。
案例
真实的案例胜于缜密的论证，下文的案例都是通过 iofod 的 Soft UI 拓展完成制作的，项目全部公开，可以点击【主页地址】前往编辑哦~ 动手能力强的小伙伴甚至可以利用解析器，导出到各个平台的代码查看效果。
新拟物播放器
新拟物设计系统
新拟物计算器
H5 版本可用任意浏览器扫码体验：
小程序版本可微信扫码体验：
演示项目导出的 flutter 工程已打包安卓 apk 供参考（flutter 就是强大，体验丝滑般顺畅），可以前往云盘下载，提取码：1gf1 。
半天时间，从设计开发到审核上线，敢问还有谁？
新拟物智能家居
Soft UI 拓展
截至本文完成前，iofod 封装了 36 个 Soft UI 风格组件，涵盖日常界面开发的大多数场景，并且支持通过 IFstruct 解析器，生成 Vue, Taro 和 flutter 三端代码，实现跨全平台。
那么要如何使用该拓展呢？iofod 的新用户默认添加了 Soft UI 拓展，假如你是老用户或者还没安装该拓展的用户，可在 iofod 编辑器里点击超级菜单里的【拓展管理】按钮唤起拓展管理面板，点击【添加拓展】，搜索 Soft UI 关键词，
点击搜索结果进去，即可看到拓展详情界面，点击【安装拓展】，
关闭拓展管理面板，可以发现 Soft UI 已经添加到右下角的拓展区里。
点击开启 Soft UI 拓展，直接拖拽拓展内的组件到可视化编辑区，即可实时添加应用。
定制工具
生成新拟物风格的工具灵感来源于 neumorphism.io 这个网站，它支持生成新拟物风格的 CSS 代码，Soft UI 拓展的配置与其类似，选中页面的任意单元组件或容器，修改表单配置即可应用新拟物风格样式。
开源
Soft UI 拓展是开源的哦，喜欢的话别忘记点个星星。
结语
新一代大前端利器 iofod 前两周开放公测，借助原子化组件的特性，我们得以构建极富表现力的跨全平台应用。Soft UI 拓展是我们继 MD UI 和 ColorUI 后又一默认集成到编辑器的拓展，目前产品的定位是移动优先，我们会在不久的将来推出更多移动端 UI 框架的拓展包，敬请期待！
如果使用过程有任何问题，可以公众号搜索【iofod】或【数字围猎】，点【联系我们】可在线提问，或者添加小助手微信：zxu1002- 进群交流。
相关链接：
版权声明: 本文为 InfoQ 作者【iofod jude】的原创文章。
原文链接:【http://xie.infoq.cn/article/f8b339d8c8fb31ef3ae4a056c】。文章转载请联系作者。
还未添加个人签名 2022.06.24 加入
还未添加个人简介
评论