规则表达式还可以这么写

瞿清、王璜 / 2021-11-18 17:35:29

规则表达式还可以这么写
原创 瞿清、王璜 京东设计中心JDC 今天
这里说的规则表达式主要由三部分组成:标签、运算符、值,多个表达式可以组合成为一个复合规则标签组。比如为高京享值人群开通一个人工客服白名单,需要通过表达式圈定人群:顾客京享值大于等于9000或A+用户,常规的书写方式是 ({顾客京享值} [大于等于] {9000})或({顾客账号})[是]{A+用户})

标签 - 顾客京享值/顾客账号

运算符 - 大于等于/是

值 - 9000/A+用户

最初的产品方案是按照手写表达式的思维,提供"标签,括号,且,或"等多个按钮,用户自己根据需要点击填入内容,最终的结果也类似手写表达式,编辑时需要hover每个元素进行修改,式子的合法性在提交时校验。

图片



可以看出这个方案有几个比较明显的问题:
1.由于标签、运算符是下拉选择,而值有可能是输入,用户需要频繁的在鼠标和键盘之间切换。
2.每次都需要在多个按钮中进行选择,这种小的迟滞带来的累计成本很高。
3.分流规则可以复合叠加,需要括号来确定运算优先级,同时还要大括号来标识内容类型。因此很容易产生密集排列的多级括号,可读性很差,校验出错时定位问题也非常困难。
4.复合表达式平铺展示,只能逐个元素编辑,不方便整体删除或移动某一个表达式。

对以上问题加以分析和归纳,可以拆解出以下几个优化的方向:

图片



提升输入和编辑效率
关于输入和编辑效率,我从研发大佬喜欢的编辑器获得了一些灵感,其特点一是尽量使用键盘,二是准确的输入联想。虽然整个规则表达式可能会很复杂,但其本质都是由单个简单的表达式组合而成,而单个表达式的书写其实跟代码的书写是非常类似的。因此,我尝试把单个表达式的书写做成线性的,每一步完成后就自动跳到下一步并且过滤掉不可用的内容,同时采用输入搜索框,用户可以输入关键字快速定位需要的内容,整个过程大部分操作都可以通过键盘完成,也省去了冗余的按钮选择成本,输入效率大幅提升。

图片



优化可读性和括号的使用
这个点最主要是要解决多个表达式之间的关系设置问题。延续上面输入的交互逻辑,每完成一个表达式,就默认开始编辑下一个表达式,两者的关系根据客服运营人员的习惯默认置为“且”,可以手动切换为“或”。当需要括号时,则在外层点击“+”新增一个区域。这样最终会形成一个卡片化的视觉效果,每个卡片区域就相当于一组括号,“+”位置就是各组括号之间的关系,无论是阅读还是编辑都比之前的方案要便捷很多。

图片



复杂表达式模块化操作
有了以上基础,整体的模块化结构已经比较清晰了,接下来要做的就是给模块赋予合适的交互动作。运营同学认为表达式的整体移动和复用是一个比较急切的需求。结合现有的结构和开发难度,我们决定先做卡片内部拖拽,满足运营人员灵活的调整表达式位置的需求,这样日常的维护效率又进一步得到了提升。

图片



一点小结
此类B端工具的体验往往由于曝光度低,用户量少等等原因,体验不太被重视。但其实每天都有一拨忠实用户在重度使用,一个细小的优化都可能让他们的工作效率提升数倍,所以作为设计师我们也需要敏锐地捕捉这些需求,并且从趋同的组件和体验中找到切入点,从而切实解决问题和实现价值。

关于这类表达式的设计,当然还有很多可以提升的点,比如跨卡片的拖拽、复制等等,由于时间和资源的关系还没能一一实现。大家可以根据自己的需要进行扩展设计,此篇文章权当抛个砖,有任何意见或者想法都欢迎大家分享讨论。

阅读 823
写下你的留言

:,。视频小程序赞,轻点两下取消赞在看,轻点两下取消在看







----------------------------
本文由新墨整理并发布。转载来自互联网,若侵权则删除!
新墨5年开发经验,45名团队成员,上线已达100+产品,于北京和成都2个城市提供技术开发服务。致力于提供APP开发,小程序开发,微信开发,IOT物联网开发,电商系统开发,教育系统开发,H5开发,游戏开发,用户体验设计,课件设计

新墨官网地址:http://www.sinmore.com.cn/
新墨物联网站:http://www.sinmore.cn/
布鸽科技:http://www.buge.vip/

热门文章
最新文章
推荐文章