Open xinglie opened 1 year ago
设计器中有许多鼠标悬停就可以展现的操作,比如元素分类,如下图
再比如当鼠标划过标尺时,将自动在鼠标下出现辅助线
作为可视化设计器来讲,鼠标是一个高频的输入设备,一方面我们希望鼠标的输入是高效的,如上面的2个截图,使用者只需要移动鼠标即可,同时我们也希望用户使用鼠标开始一件事件的时候是专注的。
可以通过鼠标进行的高频操作如改变元素大小、旋转、移动面板等操作,我们均需要考虑边界情况,比如拖动设计区中的元素时,鼠标移到了标尺上,鼠标移到了元素分类上,难道我们去展示辅助线,展示元素的子类元素吗?
对于已经按下的鼠标,用户此时只能完成拖动的事件,辅助线、子元素即使出现用户也无法操作,所以我们应该杜绝这样的情形出现,让用户的操作更专注。
得益于设计器良好的模块化设计、优秀的监听机制,允许您在任意模块中感知设计器中的动作。
当您一但开始某个鼠标动作后,其它相应的将会自动禁用,不再响应鼠标,让您更好的专注于当前的鼠标操作。
可视化设计器是一个复杂的项目,为了让用户更方便的去完成设计,每一个可操作项都有备份和备选方案
我们可以通过鼠标移动元素位置,同样的,也可以使用键盘进行操作。
我们可以通过鼠标旋转元素,同样的,也可以使用键盘进行操作。
每一个输入设备都有自己的特点,相辅相成才能更高效的完成需要处理的事情。所以在设计器中,几乎每个鼠标操作都有对应的键盘操作,同时设计器也充分考虑未来输入设备的变化,把这些操作均做了适配处理。事实上项目中很多鼠标和键盘的操作都是映射到虚拟命令上完成的,这样后期更换任意的硬件外设输入,只需要把相应的动作映射到虚拟命令上来即可,此谓以不变应万变。
在某种情况下应该呈现什么样的功能应该由设计器来考虑,不应该让用户去思考为什么在这种情况下还能有其它功能的操作。
鼠标持续操作时,比如按下拖动,将自动禁用所有的键盘快捷键。
比如拖动、旋转时,键盘按键的撤销、对齐操作将不起任何作用。
元素多个输入时,比如文本
元素的直接输入与数据绑定,当使用者直接输入内容后,数据绑定将自动隐藏,同样的,当进行了数据绑定后,可直接输入的输入框也将会自动隐藏。
即使通过某种手段,比如导入数据时把输入内容与数据绑定均设置了数据,在设计器中也会根据优先级只展示其中的一种。
同时在设计区也将会自动和属性面板中的功能进行联动,比如直接输入内容后,设计区中的可绑定将自动禁用。
设计器将根据当前数据状态,实时的更新界面,告诉使用者哪些可以用鼠标点击、哪些工具栏中的工具可用、哪些配置项可以参与操作。
在任意状态下使用者可任意去按他的想法使用设计器。该禁用的、该隐藏的、不该响应的动作设计器均会自动处理,在这些环节上设计器不会让使用者去疑惑、去思考。
随心所欲的去操作吧。
鼠标操作、键盘控制、异步数据交换等所有的操作均会有第一时间的响应和反馈,让使用者知道当前的操作被设计器收到了。
在使用过程中,设计器希望达到与使用者是交流的状态,所有的操作都是自然的、及时响应反馈的。
report-designer的代码保持每月小重构,季度大重构的节奏,会时时的检查过往的代码,以保持最新的写法和最优的设计实现。
截止目前设计器代码压缩后仅980k
,除了元素使用的第三方插件外,在使用过程中无须再额外加载其它代码。
保持较小的代码体积,除了加快页面打开速度,让用户更早的看到,同时客户端的javascript
引擎在解析的时候也会更快。
除了使用压缩器减少代码体积外,良好的代码架构设计、方案设计才是最小化代码实现的上策,很庆幸,report-designer一直在不断的持续迭代,希望把方案做到更好。
用户在使用的过程中,最容易忽略但也是最重要的一个体验度量就是速度。
速度快,才是王道。
程序设计与开发中,我们需要考虑很多边界情形,不能只追求正常使用流程的正确性。
比如用户提供的数据格式不正确怎么办?全部丢弃吗?如果只有一部分格式正确,那剩余的怎么处理?
如果用户正在使用设计器,而由于其它原因,设计器销毁,怎么处理?
如用户正在拖动修改元素,此时突然调用designer.destroy()
销毁设计器,设计器还能否正确的清除所有事件监听和数据响应?
我们应该跨越正常思维的边界,才能处理好用户使用过程中的各种奇思妙想,而这些是需要长久的设计积累和良好的技术底蕴才能勉强处理好的,江湖路漫,砥砺前行
在设计器中许多并不重要的操作所产生的数据,并没有确认按钮进行最终确认,用户只需要操作就好
比如工具栏的管理,无论是排序、隐藏还是调整位置,用户只需要操作就好,数据会自动保存
同时对所产生的数据提供清理、恢复等方案,并不会因为存储了异常数据导致后续渲染不正确
实时
设计器中所有功能都是实时完成的,比如拉框选择时,当前框选了多少元素,这些元素能不能应用某些操作,对应工具栏能否使用,均是实时反馈。
我们应该尽最大可能避免用户反复的尝试操作,这是低效的,这要求设计器尽可能的把所有边界情况都考虑进去。
以鼠标拉框多选为例,假设设计区有
A
、B
、C
、D
4个元素,用户框选了A
、B
元素松开鼠标后,发现还要再选择C
元素,此时可以在按着Shift键的同时,使用鼠标去框选C
。如果用户在未松开鼠标的情况下,先松开了Shift键,此时将直接变成仅C
选中,类似拉框时Shift未按下。假如用户一直未松开鼠标,再次按下Shift键,则A
、B
将再次选中。在键盘按键配合的过程中,鼠标可以按下一直不动,无须键盘按键改变后再去动鼠标即可完成相应的行为。同样的键盘配合操作,比如拖动磁吸开启后,当拖动元素靠近一些磁吸位置后,元素将自动磁吸过去,此时不需要动任何鼠标,在按下键盘Alt键后将自动停用磁吸,同时元素将自动离开磁吸位置回到原来的位置上。同样在鼠标不动的情况下,松开Alt后,达到磁吸条件的将自动磁吸过去。
虽然这些都是以鼠标为主键盘为辅的操作,设计器允许您分开操作,无须键盘按键改变后再动一下鼠标,同时当您按下或松开某些键后,只要鼠标仍在按下的状态,您可以再松开或按下这些键即可恢复到之前的状态上。