區塊設計

多年以來,Blockly 團隊設計了許多自製方塊,並協助其他人設計方塊。以下是他們學到的幾項教訓。

偏好高階區塊

盡可能採用較高層級的方法,即使這會降低執行效能或彈性。請考慮以下 Apps Script 運算式:

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

在保留所有潛在功能的 1:1 對應下,上述運算式會使用四個區塊建構。不過,Blockly 的目標是更高層級,因此會提供一個區塊來包裝整個運算式。目標是針對 95% 的情況進行最佳化,即使這會讓剩餘的 5% 情況更難處理也一樣。Blockly 並非用來取代以文字為基礎的語言,而是用來協助使用者克服初期的學習曲線,以便使用以文字為基礎的語言。

建議:請勿盲目將整個 API 轉換為區塊。

考量使用者輸入選項

三個重複區塊,顯示輸入數字的不同方式:下拉式選單、數字欄位和值輸入。

您可以透過三種方式從使用者取得參數。下拉式選單的限制最多,適合用於簡單的教學課程和練習。輸入欄位可提供更多自由度,並適合進行更多創意活動。值區塊輸入內容 (通常會搭配陰影區塊) 可用於計算值 (例如隨機產生器),而非僅為靜態值。

建議:選擇適合使用者的輸入方式。

使用個別的條件式和迴圈區塊

反例:顯示同個類別中的 if/then 和 while 區塊。

新使用者最難掌握的區塊是條件和迴圈。許多以積木為基礎的環境會將這兩個積木歸入相同的「控制項」類別,且兩個積木的形狀和顏色都相同。這往往會讓新使用者感到困惑,因為他們會將這兩個區塊搞混。Blockly 建議將條件式和迴圈移至「邏輯」和「迴圈」等不同類別,並為每個類別指定不同的顏色。這清楚表明這些是不同的概念,雖然形狀相似,但行為不同。

建議做法:請將條件式和迴圈分開。

處理變數數量的輸入內容

某些區塊可能需要變數數量的輸入內容。舉例來說,加法區塊會將任意一組數字加總,如果/elseif/else 區塊則會包含任意一組 elseif 子句,而清單建構函式則會包含任意數量的已初始化元素。這類策略有幾種,每種都有各自的優缺點。

a) 最簡單的方法是讓使用者利用較小的區塊組合成區塊。舉例來說,您可以透過巢狀兩個兩數加法區塊,將三個數字相加。另一個例子是只提供 if/else 區塊,並讓使用者將這些區塊巢狀排列,以建立 elseif 條件。

巢狀加法區塊:1 + (2 + 3)。

這種方法的優點是最初的簡單性 (對使用者和開發人員皆然)。缺點是,如果有大量巢狀結構,程式碼就會變得非常繁瑣,使用者難以閱讀及維護。

b) 另一種做法是動態擴充區塊,讓結尾處始終有一個可用的輸入。同樣地,如果結尾有兩個空白輸入,區塊會刪除最後一個輸入。這是第一版 App Inventor 採用的方法。

這個區塊會新增四個值輸入,其中最後一個為空白。

自動產生的區塊不受 App Inventor 使用者歡迎,原因有幾個。首先,系統一律會提供免費輸入內容,而且程式不會「完成」。其次,在堆疊中間插入元素會令人感到沮喪,因為這會導致編輯下方的所有元素連線中斷,然後重新連線。不過,如果順序不重要,且使用者可以接受程式中出現空白,這會是一個非常方便的做法。

c) 為解決空洞問題,部分開發人員會在手動新增或移除輸入內容的區塊中加入 +/- 按鈕。Open Roberta 使用兩個這樣的按鈕,從底部新增或移除輸入內容。其他開發人員則會在每個資料列中新增兩個按鈕,以便在堆疊中間插入及刪除項目。其他人則在每個資料列中加入兩個上/下按鈕,以便重新排序。

這個區塊會新增三個外部值輸入項目,並提供加號和減號按鈕來新增或移除輸入項目。

這個策略包含多種選項,從每個區塊只有兩個按鈕,到每個列有四個按鈕皆有。一端是使用者無法執行所需動作的危險,另一端是 UI 充滿按鈕,看起來就像星艦 Enterprise 的橋。

d) 最具彈性的做法是將變異子氣泡新增至區塊。這會以單一按鈕的形式呈現,開啟該區塊的設定對話方塊。您可以隨意新增、刪除或重新排列元素。

這個區塊會新增三個值輸入,並提供用於新增或移除值輸入的輔助程式。

這個方法的缺點是,變異器對新手來說不夠直覺。您必須提供某種形式的指令,才能引入更動子。以 Blockly 為基礎、鎖定年幼兒童的應用程式不應使用變異器。不過,一旦學會使用這些功能,對進階使用者來說就非常有用。

建議:每種策略都有優缺點,請選擇最適合使用者的做法。