前言
最近在进行项目的交接工作,把文档写完之后想着给项目组封装几个B端项目常用的原型元件,未来也方便新的产品高效完成原型设计工作。
产品经理要在平时的项目中积累独属于自己的元件库,我平时也积累了不少,借着交接的机会做一个整合,并在这里分享部分常用且网上只有制作思路没有成品的原型元件,如三级菜单、表单CRUD全交互等。
需要注意的是,B端产品最重要的还是对业务的掌握程度,原型终归是小道尔,只不过原型在之前的工作中除发挥沟通交流的主要作用以外,在极少数情况下,还得负责给客户领导展示汇报。这种情况下,就对原型的保真程度有比较高的要求,一套高保真的原型在项目草创时期对各方的信心是有一定积极作用的。
文末会分享.rplib文件,供下载学习。
元件展示
表单CRUD全交互
我很早之前研究中继器的时候,网上全是教程,但没有人给资源下载,我吃饱了撑的做了一套,在教程的基础上进行了样式优化,检验了一下学习成果,效果如下:
新增:
编辑:
删除:
查询:
分页:
当前存在的问题:
- 编辑没有回显(找不到中继器已标记行的取值方法)
- 没有做非空校验(懒得搞)
- 记录条数仅在载入时统计,新增编辑删除无变化(理由同上)
- 分页标签的点击状态(选中模式设组挺麻烦的,没搞)
三级菜单
网上有不少二级菜单的资源,三级菜单要自己做,下载后参看我的交互原理,多级菜单都可以做出来。我在原教程的基础上进行了改良,添加了点击菜单对其余展开菜单进行收缩的效果,如下所示:
当前存在的问题:
- 箭头方向没变化(可以做,但拓展性差,每个都要设置没必要)
- 菜单没置顶页面位置会偏移(不知道什么原因)
动态时间
这玩意没啥用,就突出一个花里胡哨,如下所示:
大多数情况下画原型比写代码快,但类似这种,用代码写出来很简单,但用原型画出来就挺有意思的。
最后
元件库里我还封装了其他有用的组件,就不一一介绍了,总之最早刚入行琢磨原型的时候,有点像大学的时候玩低代码平台一样,还是挺有意思的。如果想交流原型技巧,调试元件存在疑问,也可以添加我的联系方式,共同学习。
常用元件库
评论后手动刷新页面
类型:
.rplib
提取码:
****
牛批
q
牛哇
牛啊
好像刷新也看不到呢
@cc: 已经修复该问题
牛b