体验与思考 about report-designer HOT 7 OPEN

专注

设计器中有许多鼠标悬停就可以展现的操作，比如元素分类，如下图

再比如当鼠标划过标尺时，将自动在鼠标下出现辅助线

作为可视化设计器来讲，鼠标是一个高频的输入设备，一方面我们希望鼠标的输入是高效的，如上面的2个截图，使用者只需要移动鼠标即可，同时我们也希望用户使用鼠标开始一件事件的时候是专注的。

可以通过鼠标进行的高频操作如改变元素大小、旋转、移动面板等操作，我们均需要考虑边界情况，比如拖动设计区中的元素时，鼠标移到了标尺上，鼠标移到了元素分类上，难道我们去展示辅助线，展示元素的子类元素吗？

对于已经按下的鼠标，用户此时只能完成拖动的事件，辅助线、子元素即使出现用户也无法操作，所以我们应该杜绝这样的情形出现，让用户的操作更专注。

得益于设计器良好的模块化设计、优秀的监听机制，允许您在任意模块中感知设计器中的动作。

当您一但开始某个鼠标动作后，其它相应的将会自动禁用，不再响应鼠标，让您更好的专注于当前的鼠标操作。

from report-designer.

备选

可视化设计器是一个复杂的项目，为了让用户更方便的去完成设计，每一个可操作项都有备份和备选方案

我们可以通过鼠标移动元素位置，同样的，也可以使用键盘进行操作。

我们可以通过鼠标旋转元素，同样的，也可以使用键盘进行操作。

每一个输入设备都有自己的特点，相辅相成才能更高效的完成需要处理的事情。所以在设计器中，几乎每个鼠标操作都有对应的键盘操作，同时设计器也充分考虑未来输入设备的变化，把这些操作均做了适配处理。事实上项目中很多鼠标和键盘的操作都是映射到虚拟命令上完成的，这样后期更换任意的硬件外设输入，只需要把相应的动作映射到虚拟命令上来即可，此谓以不变应万变。

from report-designer.

互斥

在某种情况下应该呈现什么样的功能应该由设计器来考虑，不应该让用户去思考为什么在这种情况下还能有其它功能的操作。

鼠标持续操作时，比如按下拖动，将自动禁用所有的键盘快捷键。

比如拖动、旋转时，键盘按键的撤销、对齐操作将不起任何作用。

元素多个输入时，比如文本元素的直接输入与数据绑定，当使用者直接输入内容后，数据绑定将自动隐藏，同样的，当进行了数据绑定后，可直接输入的输入框也将会自动隐藏。

即使通过某种手段，比如导入数据时把输入内容与数据绑定均设置了数据，在设计器中也会根据优先级只展示其中的一种。

同时在设计区也将会自动和属性面板中的功能进行联动，比如直接输入内容后，设计区中的可绑定将自动禁用。

设计器将根据当前数据状态，实时的更新界面，告诉使用者哪些可以用鼠标点击、哪些工具栏中的工具可用、哪些配置项可以参与操作。

在任意状态下使用者可任意去按他的想法使用设计器。该禁用的、该隐藏的、不该响应的动作设计器均会自动处理，在这些环节上设计器不会让使用者去疑惑、去思考。

随心所欲的去操作吧。

from report-designer.

反馈

鼠标操作、键盘控制、异步数据交换等所有的操作均会有第一时间的响应和反馈，让使用者知道当前的操作被设计器收到了。

在使用过程中，设计器希望达到与使用者是交流的状态，所有的操作都是自然的、及时响应反馈的。

前端交互之立即响应

API设计之立即销毁

from report-designer.

速度

report-designer的代码保持每月小重构，季度大重构的节奏，会时时的检查过往的代码，以保持最新的写法和最优的设计实现。

截止目前设计器代码压缩后仅980k，除了元素使用的第三方插件外，在使用过程中无须再额外加载其它代码。

保持较小的代码体积，除了加快页面打开速度，让用户更早的看到，同时客户端的javascript引擎在解析的时候也会更快。

除了使用压缩器减少代码体积外，良好的代码架构设计、方案设计才是最小化代码实现的上策，很庆幸，report-designer一直在不断的持续迭代，希望把方案做到更好。

用户在使用的过程中，最容易忽略但也是最重要的一个体验度量就是速度。

速度快，才是王道。

from report-designer.

边界

程序设计与开发中，我们需要考虑很多边界情形，不能只追求正常使用流程的正确性。

比如用户提供的数据格式不正确怎么办？全部丢弃吗？如果只有一部分格式正确，那剩余的怎么处理？

如果用户正在使用设计器，而由于其它原因，设计器销毁，怎么处理？

如用户正在拖动修改元素，此时突然调用designer.destroy() 销毁设计器，设计器还能否正确的清除所有事件监听和数据响应？

我们应该跨越正常思维的边界，才能处理好用户使用过程中的各种奇思妙想，而这些是需要长久的设计积累和良好的技术底蕴才能勉强处理好的，江湖路漫，砥砺前行

from report-designer.

无感

在设计器中许多并不重要的操作所产生的数据，并没有确认按钮进行最终确认，用户只需要操作就好

比如工具栏的管理，无论是排序、隐藏还是调整位置，用户只需要操作就好，数据会自动保存

同时对所产生的数据提供清理、恢复等方案，并不会因为存储了异常数据导致后续渲染不正确

from report-designer.