多数人在工作的时候会使用规则树,对阶段/节点和进度很有效,下面这篇文章是笔者整理分享关于规则树设计与业务的结合的相关内容,想了解的同学可以进来看看呀! ![]() 先将内容区分成注释区与树选择内容,注释置放在左上角呈现,内容放到底部呈现。内容再根据5个阶段分成5个阶段,从左到右进行呈现,展现4级,收起第5级。 再讲内容分为:规则树与详情区域 为什么收起第5级?前4级数据相对来讲比较固定会超过20,但是最后一级的用例执行层,单条的同级可能有上百条,内容量较大,页面承载量较大,页面承载压力大,刷新速度慢。因为还有收缩的操作,数据数量激增的话,页面的安全性就会降低。 3)收纳内容,增加安全性 将最后一级别固定到右边的详情页内容,并且以表格形式展现,可以容纳几百条测试用例信息,同时采用懒加载或者是分页的交互方式提高页面的数据加载速度,降低同时产生的数据朗以及收缩数据呈现的时间。 4)上层-操作层 操作分成2种:鼠标的滚轮与左键的点击 ①鼠标的滚轮-放弃放大缩小,采用左右滑动 滚轮的放大缩小是现在常见的交互方式,尤其是在规则树这种交互页面之上。产品有他自己的特殊性,一旦全局放大缩小,表头节点的分区就会一起跟着放大与缩小,就会导致识别苦难的场景,因此在交互上做了限制将放大缩小换成左右滑动方便查看。 ②鼠标点击-查看缩略图,降低查看成本 针对小屏幕,在内容较多的场景进行适配发现,很难一次性显示出来,因此采用了团队中程序员常用的工具:VIS Code(我自己日常也会一些代码,所以我自己也会用)中查看代码缩略图交互方式,来降低用户拖拽交互的成本。 四、用户反馈灰度上线一个月后,用户满意度提高7.8%。 五、后期展望现在的交互还不够完善,比如:放大缩小等等。因为后期还需要再完善与跟进。还有这种看板在制作的时候,最好多跟前端尽心沟通,很多时候设计师心理和观念是好的,但是会导致开发成本过高。 六、总结以上就是业务到设计进行的拆解分享,B端设计师核心诉求还是要满足才是根本,希望能对读者,谢谢观看。有不同的观念可以随时沟通。 专栏作家 一只鸡腿,微信公众号:B端设计一只鸡腿,人人都是产品经理专栏作家。一个吃货的B端设计师。 本文原创发布于人人都是产品经理,未经许可,禁止转载 题图来自 Unsplash,基于 CC0 协议 该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。 |