自定义组成要素:样式指南

多年来,Blockly 和 Blockly Games 团队吸取了许多经验教训 适用于正在开发新区块的广告主以下是 我们所犯的错误或他人常犯的错误的集合。

以上是我们使用 Blockly 的视觉风格和 可能并不适用于所有用例或设计。还有其他解决方案。这是 也不是用户可能会遇到的问题及如何避免的问题 。每种情况都略有不同,各有利弊。

1. 条件与循环

对于新用户来说,最困难的阻碍是条件和循环。很多 基于区块的环境会将这两个区块归到相同的“控制项”中, 两个砌块的形状和颜色都相同。 这往往会导致新用户感到失望,因为新用户会混淆这两个模块。 Blockly 建议将条件和循环移至单独的“Logic”中和 “循环”每个类别都有不同的颜色。这就清楚地表明, 这些是不同的概念,尽管它们的形状相似,但行为却有所不同。

建议:分开使用条件和循环。

2. 基于 1 的列表

初级程序员在第一次遇到从零开始的列表时反应较差 。因此,Blockly 紧跟着 Lua 和 Lambda Moo 的脚步,列出了 字符串索引(从 1 开始)

对于 Blockly 的更高级用途,支持从零开始的列表, 从而更轻松地向文本转换适合年龄较小的观众或新手 但还是建议从 1 开始编制索引。

建议:第一个数字是一。

3. 用户输入

可通过三种方式从用户处获取参数。下拉菜单是 限制性最强,适合简单的教程和练习。输入字段 可以实现更大的自由,适合进行更具创造性的活动。值块 输入(通常带有影子块)提供了计算值的机会, (例如随机生成器),而不只是一个静态值。

建议:选择适合用户的输入法。

4. 实时屏蔽图片

区块的说明文档应包含其所引用的区块的图片 目标。截取屏幕截图非常简单。但如果有 50 张这样的图片, 一个应用被翻译成了 50 种语言,突然一个网站就能保持 2500 种 静态图片。之后配色方案又发生了变化 2500 张图片需要更新 。

为了彻底摆脱这种针对维护工作的困扰,Blockly Games 公司更换了 包含 Blockly 实例在只读模式下运行的所有屏幕截图。取得的成效 与图片完全相同,但保证是最新的。只读 模式让国际化成为可能。

建议:如果您支持多种语言,请使用只读模式。

5. 您的另一个左侧

美国儿童的反馈(有趣的是,美国儿童的反馈并非其他国家/地区) 显露出左右两侧的混乱情况。此问题已通过 添加箭头。如果方向是相对的(例如相对于头像), 箭头的风格很重要A → 直箭头或 ↱ 转弯箭头令人困惑 当头像面向相反方向时。最有用的是 ⟳ 圆形 箭头,即使转动的角度小于箭头指示的角度也是如此。

建议:尽可能使用 Unicode 图标补充文本。

6. 概要块

应尽可能采用更高级别的方法,即使 执行性能或灵活性请考虑以下 Apps 脚本表达式:

SpreadsheetApp.getActiveSheet().getDataRange().getValues()

在保留所有潜在能力的 1 对 1 映射下, 可以使用四个代码块构建表达式。但 Blockly 的目标是获得更高级别的 并提供一个用于封装整个表达式的块。目标是 针对 95% 的情况进行优化,即使这使剩下 5% 的难度更大。 Blockly 并非旨在取代基于文本的语言, 旨在帮助用户顺利上手 基于文本语言。

建议:不要盲目地将整个 API 转换为块。

7. 可选返回值

基于文本的编程中的许多函数执行操作,然后返回 值。不一定会使用此返回值。例如,堆栈的 pop() 函数。系统可能会调用 Pop 来获取和移除最后一个元素, 或者,它可能被调用以仅移除最后一个具有返回值的元素 被忽略。

var last = stack.pop();  // Get and remove last element.
stack.pop();  // Just remove last element.

基于块的语言通常不善于忽略返回值。答 值块必须插入可以接受该值的层中。还有 几种策略来处理这一问题。

a) 绕过问题。大多数基于代码块的语言会设计语言 以避免这些情况例如,Scratch 中没有任何 以及返回值。

b) 提供两个图块。如果工具箱中的空间不是问题, 解决方法是为这种类型的代码块各提供两个,一个 没有返回值。但其缺点是,这可能会导致用户感到困惑 其中包含许多几乎完全相同的方块

c) 修改一个块。使用下拉菜单、复选框或其他允许 由用户选择是否有返回值。代码块 然后根据其选项改变形状例如, 如 Blockly 的列表访问块所示。

d) 品尝价值。第一个版本的 App Inventor 创建了一个特殊的管道, 吃掉任何关联值的块。用户不理解这个概念,并且 第二个版本的 App Inventor 移除了竖线块 建议用户直接将该值分配给一次性变量。

建议:每种策略都有各自的优缺点,请选择适合自己的策略 用户。

8. 成长块

某些块可能需要可变数量的输入。例如, 加法块,用于对任意一组数字求和,或者是 if/elseif/else 包含任意 elseif 子句集或带有 任意数量的初始化元素。我们提供了多种策略 每种方法都有自己的优缺点

a) 最简单的方法是让用户使用较小的文本块 。例如,通过嵌套两个数字,将三个数字相加 添加块。另一个示例是仅提供 if/else 块, 并让用户通过嵌套来创建 elseif 条件。

这种方法的优势在于一开始就简单易用(无论是对用户还是 )。其缺点是,当大量 Deployment 嵌套太多,代码会变得非常繁琐,并且用户难以 读取和维护

b) 另一种方法是动态展开该代码块,使其始终存在一个 自由输入。同样,如果存在上一个输入, 在最后两个空闲输入。这种方法的第一个版本是 使用了 App Inventor。

自动扩展的区块被 App Inventor 的用户不喜欢了一段时间 原因。首先,一直是免费的,程序从来 “complete”表示。其次,在堆栈中间插入元素 令人失望,因为这涉及将修改下的所有元素取消关联, 重新连接它们。也就是说,如果顺序不重要,用户可以 让程序中的漏洞轻松自如,这是一个非常方便的选择。

c) 为了解决洞问题,有些开发者会在 手动添加或移除输入。Open Roberta 会使用两个此类按钮来添加 或从底部移除输入。其他开发者在每个位置添加了两个按钮 以便从堆栈中间插入和删除 包容性。而另一些则在每行添加两个向上/向下按钮 才能容纳它们

这个策略包含一系列选项,从每个方块只有两个按钮, 最多为每行四个按钮归根结底是用户 执行他们需要的操作时,另一端的用户界面是如此充斥着 看起来就像是星舰企业的桥梁。

d) 最灵活的方法是在代码块中添加一个变子气泡。这个 以一个按钮表示 。可随意添加、删除或重新排列元素。

这种方法的缺点是它的赋值函数不够直观, 新手用户。引入赋值函数需要某种形式的指示。 基于块的应用(针对年幼儿童)不得使用赋值函数。 虽然一旦学会,它们对高级用户来说非常宝贵。

建议:每种策略都有各自的优缺点,请选择适合自己的策略 用户。

9. 简洁代码生成

高级 Blockly 用户应该能够查看生成的代码(JavaScript、 Python、PHP、Lua、Dart 等),并立即识别他们编写的程序。 这意味着需要额外付出心力来保留这个由机器生成的代码, 可读性。多余的括号、数字变量、破碎的空格和 冗长的代码模板都会妨碍生成简洁的代码。 生成的代码应包含注释,并且应符合 Google 的样式指南

建议:对生成的代码感到自豪。向用户显示。

10. 语言依赖

需要简洁代码的副作用是,Blockly 的行为 很大程度上是根据交叉编译语言的行为方式定义的。最 常见的输出语言是 JavaScript,但如果 Blockly 要进行交叉编译 使用其他语言,不得进行不合理的尝试来保留 两种语言的确切行为。例如,在 JavaScript 中, 字符串为 false,而在 Lua 中为 true。定义 无论目标语言如何, 会导致难以维护的代码,看起来像是来自 GWT 编译器的代码。

建议:Blockly 不是一种语言,请允许现有语言 影响行为。