关于一个报表产品「条件格式」功能的交互设计的方案对比

开发一个产品，在某个功能需求的交互方案上与同事产生了分歧。我很好奇大家怎么看，所以发出来让大家评一评，同时如果大家有更好的方案，欢迎发表建议。

为了避免先入为主，下文仅以方案一、方案二指代。

背景

这是一个所见即所得式的报表编辑工具。用户向工作区添加组件，选中组件会在屏幕右侧显示一个面板（后文称之为「属性面板」），包含该组件支持的各种属性，用户通过此面板设定组件的各个细节（字号、颜色等等）。

现在要实现的是一个「条件格式」功能，概念来自于 Excel，作用也类似，用户通过设定条件来动态地更新某个属性的值（补充：组件有「数据字段」的概念，作为条件的第一操作数）。最终的效果就是这样：字段 A 大于等于 60，文字颜色变橙色；字段 B 大于等于 90，组件背景色变绿色……

方案一

在属性面板内添加一个「条件格式」按钮，用户点击后显示一个「条件格式」面板覆盖属性面板。其内容主要是一个列表，用户点击加号按钮会显示一个小型对话框，用来输入条件类型（大于、小于、……）、条件操作数（字段 B、90、……）、目标属性（字号、背景色、……）和目标属性值（ 42px、#66ccff、……），保存后成为列表中的一项，点击可编辑、删除。该组件所有已设定的条件格式都显示在这个列表里。

方案二

在属性面板内添加一个「条件格式」按钮，用户点击后属性面板进入「条件格式」模式，面板原有的内容大致不动，输入控件变成一个个组合按钮。点击该按钮的主体区显示一个小型对话框，用来设定控制该属性的条件，内容与方案一大致相同（除了目标属性自动设定且无法更改）；点击该按钮的辅助区（就是组合按钮的另外一半）显示一个对话框，内容为与该属性相关的所有条件的列表（类似方案一中的列表），并可编辑、删除。条件格式模式下属性面板会额外显示一个按钮，用于显示该组件已设定的全部条件格式。

对于一些只用于条件格式的特殊属性（比如表格当前行），则在属性面板的相应位置追加。

对上述两个方案的描述着重于用户交互的设计，对于业务功能没有说很详细（但没提到的部分应该不影响交互设计），也希望大家也着重于这个方面来评论。

mrnobody

2019-01-13 12:21:15 +08:00

我不知道为什么别个不回答你这个问题，但是从我的角度来看是因为帖子可读性太差了。全是前后关联性强的文字，而且还是描述交互。我看你之前的帖子，应该是做过前端设计吧，你完全可以做些动态图表现呀。所以下面我的回答也可能因为不能正确理解题意，完全离题了。。

回到正题，你这个自定义表格实现还蛮有意思的，有点像腾讯宣传的 T 魔方啊。我个人觉得你这个完全可以做成类 Axure 的模式，当组件被创建在预览区域时候，点击组件，出现其操作选项。一个板是属性，一个板是关联交互（你所说的条件格式）。可以分开，也可以类 Tab 的形式切换。
核心想法是，虽然是先有组件再有其条件操作的，但其实在对具体组件操作时，组件属性和条件触发都是针对组件自身的定义，是平级的。所以在创建目标组建后，通过在预览区域选中目标，右侧呈现其可操作项即可。
最后的效果就类似于 axure，左边显示定义的组件列表，右侧只在选中组件后显示其组件属性与交互规则。