Comments (7)
专注
设计器中有许多鼠标悬停就可以展现的操作,比如元素分类,如下图
再比如当鼠标划过标尺时,将自动在鼠标下出现辅助线
作为可视化设计器来讲,鼠标是一个高频的输入设备,一方面我们希望鼠标的输入是高效的,如上面的2个截图,使用者只需要移动鼠标即可,同时我们也希望用户使用鼠标开始一件事件的时候是专注的。
可以通过鼠标进行的高频操作如改变元素大小、旋转、移动面板等操作,我们均需要考虑边界情况,比如拖动设计区中的元素时,鼠标移到了标尺上,鼠标移到了元素分类上,难道我们去展示辅助线,展示元素的子类元素吗?
对于已经按下的鼠标,用户此时只能完成拖动的事件,辅助线、子元素即使出现用户也无法操作,所以我们应该杜绝这样的情形出现,让用户的操作更专注。
得益于设计器良好的模块化设计、优秀的监听机制,允许您在任意模块中感知设计器中的动作。
当您一但开始某个鼠标动作后,其它相应的将会自动禁用,不再响应鼠标,让您更好的专注于当前的鼠标操作。
from report-designer.
备选
可视化设计器是一个复杂的项目,为了让用户更方便的去完成设计,每一个可操作项都有备份和备选方案
我们可以通过鼠标移动元素位置,同样的,也可以使用键盘进行操作。
我们可以通过鼠标旋转元素,同样的,也可以使用键盘进行操作。
每一个输入设备都有自己的特点,相辅相成才能更高效的完成需要处理的事情。所以在设计器中,几乎每个鼠标操作都有对应的键盘操作,同时设计器也充分考虑未来输入设备的变化,把这些操作均做了适配处理。事实上项目中很多鼠标和键盘的操作都是映射到虚拟命令上完成的,这样后期更换任意的硬件外设输入,只需要把相应的动作映射到虚拟命令上来即可,此谓以不变应万变。
from report-designer.
互斥
在某种情况下应该呈现什么样的功能应该由设计器来考虑,不应该让用户去思考为什么在这种情况下还能有其它功能的操作。
鼠标持续操作时,比如按下拖动,将自动禁用所有的键盘快捷键。
比如拖动、旋转时,键盘按键的撤销、对齐操作将不起任何作用。
元素多个输入时,比如文本
元素的直接输入与数据绑定,当使用者直接输入内容后,数据绑定将自动隐藏,同样的,当进行了数据绑定后,可直接输入的输入框也将会自动隐藏。
即使通过某种手段,比如导入数据时把输入内容与数据绑定均设置了数据,在设计器中也会根据优先级只展示其中的一种。
同时在设计区也将会自动和属性面板中的功能进行联动,比如直接输入内容后,设计区中的可绑定将自动禁用。
设计器将根据当前数据状态,实时的更新界面,告诉使用者哪些可以用鼠标点击、哪些工具栏中的工具可用、哪些配置项可以参与操作。
在任意状态下使用者可任意去按他的想法使用设计器。该禁用的、该隐藏的、不该响应的动作设计器均会自动处理,在这些环节上设计器不会让使用者去疑惑、去思考。
随心所欲的去操作吧。
from report-designer.
反馈
鼠标操作、键盘控制、异步数据交换等所有的操作均会有第一时间的响应和反馈,让使用者知道当前的操作被设计器收到了。
在使用过程中,设计器希望达到与使用者是交流的状态,所有的操作都是自然的、及时响应反馈的。
from report-designer.
速度
report-designer的代码保持每月小重构,季度大重构的节奏,会时时的检查过往的代码,以保持最新的写法和最优的设计实现。
截止目前设计器代码压缩后仅980k
,除了元素使用的第三方插件外,在使用过程中无须再额外加载其它代码。
保持较小的代码体积,除了加快页面打开速度,让用户更早的看到,同时客户端的javascript
引擎在解析的时候也会更快。
除了使用压缩器减少代码体积外,良好的代码架构设计、方案设计才是最小化代码实现的上策,很庆幸,report-designer一直在不断的持续迭代,希望把方案做到更好。
用户在使用的过程中,最容易忽略但也是最重要的一个体验度量就是速度。
速度快,才是王道。
from report-designer.
边界
程序设计与开发中,我们需要考虑很多边界情形,不能只追求正常使用流程的正确性。
比如用户提供的数据格式不正确怎么办?全部丢弃吗?如果只有一部分格式正确,那剩余的怎么处理?
如果用户正在使用设计器,而由于其它原因,设计器销毁,怎么处理?
如用户正在拖动修改元素,此时突然调用designer.destroy()
销毁设计器,设计器还能否正确的清除所有事件监听和数据响应?
我们应该跨越正常思维的边界,才能处理好用户使用过程中的各种奇思妙想,而这些是需要长久的设计积累和良好的技术底蕴才能勉强处理好的,江湖路漫,砥砺前行
from report-designer.
无感
在设计器中许多并不重要的操作所产生的数据,并没有确认按钮进行最终确认,用户只需要操作就好
比如工具栏的管理,无论是排序、隐藏还是调整位置,用户只需要操作就好,数据会自动保存
同时对所产生的数据提供清理、恢复等方案,并不会因为存储了异常数据导致后续渲染不正确
from report-designer.
Related Issues (20)
- 富文本打印样式错误 HOT 1
- 序号器元素
- 动画
- 通用设计器里的有个概览图的可拖动的画布映射是基于什么方案实现的 HOT 1
- 设计器与预览器
- IoT 预览器中的 WebSocket 连接如何使用
- 隐藏显示元素
- 元素磁吸连接点
- 个人需求
- 层级调整操作升级,支持批量
- 授权版功能支持
- 请问node支撑什么版本 HOT 2
- 元素多选扩展 HOT 1
- vue中怎么使用? HOT 1
- 元素批量属性设置
- 浏览器打印标签页不管怎么选择都是a4纸 HOT 2
- 预设值与动态绑定
- 格式化函数 HOT 1
- 通过node本地启动项目后,点击元素会导致元素消失 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from report-designer.