体验与思考

[xinglie]

实时

设计器中所有功能都是实时完成的，比如拉框选择时，当前框选了多少元素，这些元素能不能应用某些操作，对应工具栏能否使用，均是实时反馈。

我们应该尽最大可能避免用户反复的尝试操作，这是低效的，这要求设计器尽可能的把所有边界情况都考虑进去。

以鼠标拉框多选为例，假设设计区有A、B、C、D4个元素，用户框选了A、B元素松开鼠标后，发现还要再选择C元素，此时可以在按着Shift键的同时，使用鼠标去框选C。如果用户在未松开鼠标的情况下，先松开了Shift键，此时将直接变成仅C选中，类似拉框时Shift未按下。假如用户一直未松开鼠标，再次按下Shift键，则A、B将再次选中。在键盘按键配合的过程中，鼠标可以按下一直不动，无须键盘按键改变后再去动鼠标即可完成相应的行为。

同样的键盘配合操作，比如拖动磁吸开启后，当拖动元素靠近一些磁吸位置后，元素将自动磁吸过去，此时不需要动任何鼠标，在按下键盘Alt键后将自动停用磁吸，同时元素将自动离开磁吸位置回到原来的位置上。同样在鼠标不动的情况下，松开Alt后，达到磁吸条件的将自动磁吸过去。

虽然这些都是以鼠标为主键盘为辅的操作，设计器允许您分开操作，无须键盘按键改变后再动一下鼠标，同时当您按下或松开某些键后，只要鼠标仍在按下的状态，您可以再松开或按下这些键即可恢复到之前的状态上。

[xinglie]

专注

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

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

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

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

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

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

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

[xinglie]

备选

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

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

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

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

[xinglie]

互斥

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

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

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

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

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

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

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

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

随心所欲的去操作吧。

[xinglie]

反馈

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

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

前端交互之立即响应

API设计之立即销毁

[xinglie]

速度

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

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

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

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

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

速度快，才是王道。

[xinglie]

边界

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

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

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

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

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

[xinglie]

无感

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

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

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