前言
话说天下大势,分久必合合久必分,新拟物(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 关键词,
![在这里插入图片描述](https://img-blog.csdnimg.cn/eda731a0935e4006a54ad4af302059d4.jpeg#pic_center
点击搜索结果进去,即可看到拓展详情界面,点击【安装拓展】,
关闭拓展管理面板,可以发现 Soft UI 已经添加到右下角的拓展区里。
点击开启 Soft UI 拓展,直接拖拽拓展内的组件到可视化编辑区,即可实时添加应用。
定制工具
生成新拟物风格的工具灵感来源于 neumorphism.io 这个网站,它支持生成新拟物风格的 CSS 代码,Soft UI 拓展的配置与其类似,选中页面的任意单元组件或容器,修改表单配置即可应用新拟物风格样式。
开源
Soft UI 拓展是开源的哦,喜欢的话别忘记点个星星。
结语
新一代大前端利器 iofod 前两周开放公测,借助原子化组件的特性,我们得以构建极富表现力的跨全平台应用。Soft UI 拓展是我们继 MD UI 和 ColorUI 后又一默认集成到编辑器的拓展,目前产品的定位是移动优先,我们会在不久的将来推出更多移动端 UI 框架的拓展包,敬请期待!
如果使用过程有任何问题,可以公众号搜索【iofod】或【数字围猎】,点【联系我们】可在线提问,或者添加小助手微信:zxu1002- 进群交流。
相关链接: