Блочный дизайн

За прошедшие годы команда Blockly разработала множество собственных блоков и помогла другим разработать свои. Ниже приведены некоторые уроки, которые они извлекли.

Предпочитаю блоки высокого уровня

Везде, где это возможно, следует использовать подход более высокого уровня, даже если это снижает производительность или гибкость выполнения. Рассмотрим следующее выражение Apps Script:

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

При отображении 1:1, сохраняющем все потенциальные возможности, приведенное выше выражение будет построено с использованием четырех блоков. Но Blockly стремится к более высокому уровню и предоставляет один блок, который инкапсулирует все выражение. Цель состоит в том, чтобы оптимизировать ситуацию для 95 %, даже если это усложнит оставшиеся 5 %. Blockly не предназначен для замены текстовых языков, он предназначен для того, чтобы помочь пользователям преодолеть первоначальную кривую обучения, чтобы они могли использовать текстовые языки.

Рекомендация: не конвертируйте слепо весь API в блоки.

Учитывайте варианты ввода данных пользователем

Три повторяющихся блока, показывающие разные способы ввода числа: раскрывающийся список, числовое поле и ввод значения.

Существует три способа получить параметр от пользователя. Раскрывающийся список является наиболее ограничительным и подходит для простых руководств и упражнений. Поле ввода дает больше свободы и подходит для творческой деятельности. Входные данные блока значений (обычно с теневым блоком) дают возможность вычислить значение (например, с помощью генератора случайных чисел), а не просто быть статическим значением.

Рекомендация: выберите метод ввода, подходящий вашим пользователям.

Используйте отдельные условные блоки и блоки циклов.

Контрпример, показывающий блоки if/then и while в одном и том же категория.

Самыми сложными блоками для новых пользователей являются условные операторы и циклы. Многие блочные среды группируют оба этих блока в одну и ту же категорию «Элементы управления», причем оба блока имеют одинаковую форму и одинаковый цвет. Это часто приводит к разочарованию, поскольку новые пользователи путают два блока. Blockly рекомендует перемещать условные выражения и циклы в отдельные категории «Логика» и «Циклы», каждая из которых имеет свой цвет. Это ясно показывает, что это разные идеи, которые ведут себя по-разному, несмотря на схожую форму.

Рекомендация: разделяйте условные выражения и циклы.

Обработка переменного количества входов

Некоторым блокам может потребоваться переменное количество входов. Примерами являются блок сложения, который суммирует произвольный набор чисел, или блок if/elseif/else с произвольным набором предложений elseif, или конструктор списка с произвольным количеством инициализированных элементов. Существует несколько стратегий, каждая из которых имеет свои преимущества и недостатки.

а) Самый простой подход — заставить пользователя составить блок из более мелких блоков. Примером может служить сложение трех чисел путем вложения двух блоков сложения двух чисел. Другим примером может быть предоставление только блоков if/else и предоставление пользователю возможности вкладывать их для создания условий elseif.

Вложенные блоки сложения: 1+(2+3).

Преимуществом этого подхода является его первоначальная простота (как для пользователя, так и для разработчика). Недостаток заключается в том, что в случаях большого количества вложений код становится очень громоздким и трудным для чтения и поддержки пользователем.

б) Альтернативой является динамическое расширение блока, чтобы в конце всегда был один свободный вход. Аналогично, блок удаляет последний вход, если в конце есть два свободных входа. Именно этот подход использовался в первой версии App Inventor.

Блок, который добавляет четыре входных значения, последний из которых пустой.

Блоки, которые увеличивались автоматически, не нравились пользователям App Inventor по нескольким причинам. Во-первых, вход всегда был бесплатным, и программа никогда не была «завершенной». Во-вторых, вставка элемента в середину стека была неприятной, поскольку требовала отключения всех элементов ниже редактирования и их повторного подключения. Тем не менее, если порядок не важен и пользователи могут быть довольны дырами в своей программе, это очень удобный вариант.

в) Чтобы решить проблему дыр, некоторые разработчики добавляют в блоки кнопки +/-, которые вручную добавляют или удаляют входные данные. Open Roberta использует две такие кнопки для добавления или удаления входных данных снизу. Другие разработчики добавляют по две кнопки в каждую строку, чтобы можно было вставлять и удалять из середины стека. Другие добавляют две кнопки вверх/вниз в каждой строке, чтобы можно было изменить порядок стека.

Блок, который добавляет три внешних входа значений и имеет кнопки плюс и минус для добавить или удалить входы.

Эта стратегия представляет собой спектр опций: от двух кнопок в блоке до четырех кнопок в строке. С одной стороны — опасность того, что пользователи не смогут выполнять нужные им действия, с другой — пользовательский интерфейс настолько наполнен кнопками, что выглядит как мостик звездолета «Энтерпрайз».

г) Самый гибкий подход — добавить в блок пузырь-мутатор. Это представлено в виде одной кнопки, которая открывает диалоговое окно конфигурации для этого блока. Элементы можно добавлять, удалять или переставлять по желанию.

Блок, который добавляет три входных значения и имеет мутатор для добавления или удаления. ценностные входы.

Недостаток этого подхода в том, что его мутаторы не интуитивно понятны начинающим пользователям. Введение мутаторов требует некоторой формы инструкций. Блочные приложения, предназначенные для детей младшего возраста, не должны использовать мутаторы. Хотя однажды изученные, они бесценны для опытных пользователей.

Рекомендация: у каждой стратегии есть плюсы и минусы. Выбирайте то, что подходит вашим пользователям.