前言
话说天下大势,分久必合合久必分,新拟物(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- 进群交流。
相关链接:
- iofod - 为攻城师们打造的低代码平台
- iofod 官网
- Neumorphism in user interfaces
- flutter_neumorphic
- 3D与UI结合的设计探索
- Skeuomorph Banking App
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。