随着 Cocos Creator 1.2 版本的发布,相信不少开发者已经发现我们对属性检查器做了不少调整。本期我们就来为大家详细介绍属性检查器在用户体验上究竟做了哪些细节改进。
什么是属性检查器?
属性检查器是我们查看并编辑当前选中节点和组件属性的工作区域。在场景编辑器或层级管理器中选中节点,就会在属性检查器中显示该节点的属性和节点上所有组件的属性以供您查询和编辑。
属性控件的分级 Focus 状态
新版本中,我们对每个属性加入了两级 Focus 状态:“预编辑” 和 “编辑中”。当我们鼠标点击属性名字时,我们的 Focus 会进入预编辑状态:
在预编辑状态下,按下 空格 或者 回车 键,将会进入编辑中状态:
并不是所有属性控件都具有“编辑中”状态,一般来说,一些具备输入框的属性控件例如 Float, String 等会具有二级 Focus 状态。
Focus 导航
和两级 Focus 状态搭配出现的,是我们新的 Focus 导航系统。新的导航系统中,我们加入了 Up 和 Down 两个导航快捷键并保留了大家熟悉的 Tab 和 Shift + Tab 方式的导航。但实际上,这两组导航是有些微不同的。Up 和 Down 的导航,会让我们进入目标属性的“预编辑”状态,而 Tab 和 Shift + Tab 导航则会直接进入目标属性的“编辑中”状态。
这些导航设定也是极大程度上为满足键盘党们高效率工作需求而产生的,试想一下作为一个手速比一般人快 10 倍的设计师,在填写一堆属性数值时,还得一个个点鼠标真是痛苦不堪。而新版属性检查器的目标之一,就是让开发人员可以脱离鼠标进行工作。
改进输入框体验
在为键盘党谋福利的同时,我们也没有忘记进一步改进鼠标操作的体验。拿我们改进后的输入框为例,细心的开发人员应该会发现,当你用鼠标点击输入框时,输入框内的文字将会被全选,这会让在点击后,更快的修改输入内容。而如果你希望修改输入框内的部分内容时,只要在鼠标点击过程中,按住并拖动选择你希望修改的部分,即可完成部分选择操作而不会让文字内容全选。
另外,在之前的版本中一直被大家抱怨的输入数值会有小数浮动的问题我们也在新版本中彻底的解决了。在新版本的数值输入框中,我们为数值提供了一个默认参考精度,最多只显示小数点后 7 位。在实际使用时,当用户在数值输入框中输入各式各样的数值时,输入框会尽可能地帮你解析输入数据的有效数值,并在确认输入时给与更正。
例如,当你输入了 “1.23.45” 时会转译成 “1.23”,或者有时候我们输入 “abc123” 时则会解析成 “123”。未来,我们也希望加入更多的数值解析规则,方便用户进行更多的简易输入操作。
统一的输入确认和输入取消行为
在老版的属性控件库编写过程中,我们总结归纳了许多控件行为。我们发现,用户在操作控件的过程中,并不一定会产生确认的结果。相反的,有可能会希望在操作后,看看效果,然后取消本次操作。为此,我们专门统一了属性控件的操作行为,并总结为输入确认,输入取消和输入变更中三种动作行为。
输入确认
当用户在输入完数值按下回车,或者在某个鼠标操作后,鼠标左键抬起时,我们判定为输入确认动作。比如你在一个数值控件中,输入完数值回车确认,或者通过鼠标拖动滑块按钮滑动放开后。
输入取消
在输入过程中,假设我们改变了数值,但并没有真正确认时,通常地我们可以通过按下 ESC 键来取消输入改变,在取消后,数值将会还原为改变前的数据。对于一些鼠标操作的控件,这一规则也同样适用,只要在你鼠标左键没有放开时,按 ESC,那么就可以取消当前的鼠标操作行为。
输入变更
输入变更就不需要过多解释了,他代表的是每次你的数值发生改变时的行为动作。
通过统一控件的输入行为,我们希望给用户一种一致的用户体验。也就是当你在使用任何 Cocos Creator 的属性控件的过程中,你总能够想起 Enter 能够帮你确认输入而 ESC 可以帮你取消输入行为。我们也会一直沿用这个行为标准去开发未来的新控件,以降低用户的学习成本。
Tooltip 更加美观,反应也更加迅速
旧版本中被用户诟病很深的 Tooltip 显示问题,我们也在新版本中加以改进。首先我们采用了新的样式去显示用户的 Tooltip,使得他更加美观和显眼:
其次我们加快了鼠标悬停显示 tooltip 的速度,现在你不会在为观看 tooltip 需要悬停很久而感觉时间被浪费了。