自定义组成要素:最佳做法

多年来,Blockly 和 Blockly Games 团队积累了许多经验,这些经验适用于开发基于 Blockly 的应用的开发者。下面列出了我们经常犯的错误或其他人常犯的错误。

这些是我们利用 Blockly 的视觉样式学到的一般性经验,可能并不适用于所有用例或设计。可能存在其他解决方案。但此列表并未详尽列出用户可能会遇到的问题以及如何避免这些问题。每种情况都略有不同,可能都有各自的取舍。

1. 边框样式

在 2000 年代,“Aqua”的外观风格鲜明,屏幕上的每个对象都采用高亮和阴影装饰。在 2010 年代,“Material Design”外观风格别具一格,屏幕上的每个对象都被简化为简洁、扁平、无边框的形状。大多数块编程环境的每个块周围都有突出显示和阴影,因此当今的平面设计人员看到它们时,总是会剥离这些过时的装饰。

从上面的 5 个块(来自 scriptr.io)示例中可以看出,这些“过时的装饰”对于区分颜色相同的连接块至关重要。

建议:如果重新进行 Blockly 皮肤更新,不要让潮流影响您的应用。

2. 嵌套子堆栈

“C”形块的内侧始终会有一个连接器,但某些环境在内底也具有连接器(例如 Wonder Workshop),而其他环境则没有(例如 Blockly 和 Scratch)。由于大多数语句块都有顶部连接器和底部连接器,因此某些用户不会立即看到语句可以放入没有底部连接器的“C”。

一旦用户发现一个语句块适合放在“C”中,他们需要确定一个语句块是否也适合更多语句。一些环境会将第一个语句的下层嵌套在“C”的底部(如 Wonder Workshop 和 Scratch),而另一些环境则会留出小间隙(如 Blockly)。巧妙的嵌套也就没有提示可以堆叠更多积木。

这两个问题会严重影响彼此。如果内部底部连接器存在 (Wonder Workshop),那么初始陈述的联系就会更加明显,但会牺牲发现堆栈的能力。如果底部连接器内不存在 (Blockly),则初始语句的连接不明显,但可检测到堆栈。使用 Blockly 进行测试时,没有内部底部连接器并嵌套语句的底部连接器 (Scratch) 的效果最糟糕。

我们的经验是,与发现堆栈相比,初始语句的关联对用户的挑战较小。一旦发现,前者永远不会忘记,而后者则需要给予提示。Blockly 尝试同时采用 Wonder Workshop 和 Scratch 方法,直到有一天发生了渲染 bug,这增加了很小的差距。由于此 bug,我们使用 Blockly 的用户研究显著改善(现在是我们引以为豪的“功能”)。

建议:如果要重新分配 Blockly 皮肤,请保留现有的堆叠界面。

3. 对称连接

Blockly 有两种不同的连接类型:水平谜题形状和垂直堆叠凹口。出色的界面应尽量减少设计元素的数量。因此,许多设计人员会尝试让这两种连接类型看起来相同(如下所示)。

结果让新用户感到困惑,因为他们正在搜索轮播块以适应不兼容的连接。Blockly 使编程元素直观明了,因此必须注意避免无意中推荐不受支持的用户互动。

因此,Blockly 针对值连接使用紧密的谜题形状,并为语句堆叠使用视觉上清晰的对齐凹口。

建议:如果要重新分配 Blockly 皮肤,请确保水平连接和垂直连接看起来不同。

4. 变量和函数名称

初级程序员不会认为 location_Xlocation_x 是不同的变量。因此,Blockly 使变量和函数不区分大小写,从而遵循 BASIC 和 HTML 的开头。Scratch 使用的方法较为细微(如右图所示),并且对变量名称区分大小写,但对相等性检查则不区分大小写。

此外,Blockly 不要求变量和函数符合典型的 [_A-Za-z][_A-Za-z0-9]* 架构。如果想要将变量命名为 List of zip codesרשימת מיקודים,那就没有问题。

建议:忽略大小写,允许使用所有名称。

5. 全局变量

初级程序员还难以理解范围。因此,Blockly 将所有变量设为全局变量,从而遵循 Scratch 的领先原则。全局变量的唯一缺点是,递归比较复杂(必须将变量推送和弹出到列表中),但这种编程技术超出了 Blockly 的目标用户范围。

建议:范围不在范围内,留待以后处理。

6. 操作说明

Blockly Games 专门设计自学,无需教师或课程计划。为此,第一版 Blockly Games 在每个关卡都有指令。大多数学生不会阅读这些作业。我们将其缩减为一个句子,加大字体大小,并用黄色气泡突出显示。大多数学生不会阅读这些作业。我们创建了包含相应说明的模态弹出式窗口。大多数学生在不阅读这些弹出式窗口的情况下,会本能地关闭弹出式窗口,然后不知不觉地关闭。

最后,我们创建了无法关闭的弹出式窗口。他们通过编程来监控学生的行为,并且仅在学生执行了所要求的操作时关闭自己。这些可感知情境的弹出式窗口在编程方面颇具挑战,但非常有效。此外,确保它们处于视野范围内时,不会干扰工作区,这一点也很重要。

建议:说明应简短且持久,但不令人生厌。

7. 代码所有权

旨在讲授特定概念的练习通常会提供部分解,学生需要修改这些解才能达到预期效果。为了支持这一点,我们在 Blockly 中创建了一类不可修改、不可移动、不可删除的块。然而,学生们讨厌这些填空练习。 他们对这个解决方案没有所有权。

设计自由形式练习时要讲授相同的概念,难度更大。 事实证明,使用学生自己针对一项练习的解决方案作为下一项练习的起点。

建议:不要为用户编写代码。

8. 工作区布局

有两种合理的屏幕布局方式:从左到右设置。一种方式从左侧的工具栏开始,中间为工作区,在右侧为输出可视化图表。Scratch 版本 1 和 Made with Code 版本都会使用此布局。

另一种方式从左侧、中间的工具栏和右侧的工作区开始绘制输出可视化图表。Scratch 版本 2 以及大多数 Blockly 应用均使用此布局。

无论是哪种情况,工作区都应拉伸以占据可用的屏幕尺寸,因为用户需要尽可能多地进行编程。如上面的屏幕截图所示,由于用户的代码与输出可视化图表是分开的,第一个布局在宽屏上的性能不佳。第二个布局为较大的程序提供了额外的空间,同时仍让所有三个部分紧贴在一起。

此外,对于用户来说,合理的逻辑也是合理的,它首先考虑他们试图解决的问题,然后查看提供的工具,然后再开始编程。

当然,阿拉伯语和希伯来语的翻译需要将整个顺序颠倒过来。

在某些情况下(例如,使用少量简单块时),工具箱可能位于工作区的上方或下方。在这些情况下,Blockly 支持在 Toolbox 中实现水平滚动,但应谨慎使用。

建议:请将节目可视化图表放置在工具栏旁边。

9. 退出策略

基于块的编程通常是编程的起点。在教授计算机编程的背景下,这是一种重要的药物,会使学生着迷,然后才会继续做更困难的事情。对于学生来说,基于块的编程阶段应该持续多长时间是争论不绝的,但如果您的目标是讲授编程,那么这个时间段应该只是暂时的。

有鉴于此,用于教学编程的基于块的编程环境必须具有适合学生的出口。Blockly Games 有四项策略:

  1. 代码块上的所有文本(例如“if”和“while”)均为小写,以便与基于文本的编程语言匹配。
  2. 学习每个级别之后,始终会显示学生代码的 JavaScript 版本,以提高熟悉性。
  3. 在倒数第二个游戏中,区块文本被替换为实际的 JavaScript(如右图所示)。现在,学生正使用 JavaScript 编程。
  4. 在终极游戏中,方块编辑器被替换为文本编辑器。

用于编程教学的基于块的编程环境需要针对学生毕业制定具体的计划。可靠的退出策略也有助于安抚那些认为基于块的编程不是“真正的编程”的人。

建议:请考虑用户的最终目标,并进行适当的设计。