B端设计 | 规则表达式还可以这么写

▲点击"三分设"关注，回复"社群"加入我们

欢迎来到专业设计师学习交流社区

三分设｜精选全球用户体验设计知识

转自：京东设计中心JDC

编辑：张梦如

共 1789 字 9 图  预计阅读 5 分钟

这里说的规则表达式主要由三部分组成：标签、运算符、值，多个表达式可以组合成为一个复合规则标签组。比如为高京享值人群开通一个人工客服白名单，需要通过表达式圈定人群：顾客京享值大于等于 9000 或 A+用户，常规的书写方式是 ({顾客京享值} [大于等于] { 9000 })或({顾客账号})[是]{ A+用户})

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

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

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

Part 1

提升输入和编辑效率

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

Part 2

优化可读性和括号的使用

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

Part 3

复杂表达式模块化操作

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

The end

小结

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

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

—  The end  —

以下三分设文章，你可能也感兴趣

▽ 

📚 原创文章精选📚

🙋 我们一起聊设计 🙋‍♂️

高质量，学设计行交流微信群

期待与更多优秀用户体验设计师一起成长

PS：欢迎大家关注三分设，每天早上9点，准时充电。分享优质设计、创意灵感、新知新识，定期大咖老师直播分享，零距离连麦，答疑解惑。 添加小小虫微信号【 Lil_Bug 】，备注【 三分设 】加入！（只面向星标了公众号三分设的粉丝） 

点亮『在看』，百万年薪↓↓