顯示區塊

區塊的外觀可提供重要線索,說明如何使用這些區塊。以下是設定自訂區塊樣式的注意事項。

使用可見邊框

在 2000 年代,「Aqua」外觀風格盛行,每個螢幕上的物件都會加上醒目效果和陰影。在 2010 年代,「Material Design」外觀開始流行,每個螢幕上的物件都簡化為簡潔、平面、無邊框的形狀。大多數的區塊程式設計環境都會在每個區塊周圍加上醒目顯示和陰影,因此當今的圖形設計師看到這類設計時,通常會移除這些過時的裝飾。

沒有明顯邊框的區塊。很難看出區塊邊界。

如上方範例所示,在 Scriptr.io 的五個區塊中,這些「過時的裝飾」對於區分同色連結區塊至關重要。

建議:如果要為 Blockly 換膚,請勿讓現今的風格破壞應用程式。

新增方向箭頭

一個方塊,其中有圓形箭頭,表示向右轉是順時針方向。

美國兒童的意見回饋 (但其他國家的兒童並未如此回饋) 顯示,他們經常會將左右兩邊的方向搞混。我們已透過加入箭頭解決這個問題。如果方向是相對的 (例如相對於顯示圖片),箭頭的樣式就很重要。當顯示圖片朝向相反方向時,使用 → 直向箭頭或 ↱ 轉向箭頭會造成混淆。最實用的做法是使用 ⟳ 圓形箭頭,即使轉動的角度小於箭頭所指示的角度也一樣。

建議:盡可能使用萬國碼圖示補充文字。

使用不同的水平和垂直連接器

Blockly 有兩種連接類型:水平拼圖形狀和垂直堆疊凹口。良好的使用者介面應力求盡可能減少設計元素的數量。因此,許多設計師都會嘗試讓這兩種連線類型看起來相同 (如下圖所示)。

反例:顯示水平和垂直連接器都使用相同樣式的連接器。

這會讓新使用者感到困惑,因為他們會嘗試尋找方法旋轉區塊,以便將區塊連結至不相容的元素。Blockly 可將程式設計元素以視覺化方式呈現,因此使用者不應無意建議不支援的互動操作。

因此,Blockly 會使用緊密貼合的拼圖形狀連結值,並以視覺上明顯的對齊刻痕堆疊陳述式。

建議:如果要為 Blockly 重新設計介面,請確保水平和垂直連線的外觀不同。

顯示可堆疊巢狀陳述式

無論如何,'C' 形狀的方塊都會在內側頂端有一個連接器,但某些環境也會在內側底端有一個連接器 (例如 Wonder Workshop),而其他環境則沒有 (例如 Blockly 和 Scratch)。由於大多數陳述式區塊都有頂端和底部連接器,因此部分使用者可能不會立即發現陳述式會放入沒有底部連接器的 'C' 中。

包含陳述式輸入的區塊,其中一個有底部連接器,另外兩個則沒有。綠色勾號表示您很容易看出陳述式區塊可與底部連接器的區塊相容。

使用者瞭解一個陳述式區塊可放入「C」後,就需要瞭解多個陳述式也能放入「C」。有些環境會將第一個陳述式的下層連結巢狀化至「C」的底部 (例如 Wonder Workshop 和 Scratch),而其他環境則會留下一小段間距 (例如 Blockly)。緊密的巢狀結構不會顯示可堆疊更多區塊的提示。

包含巢狀陳述式的區塊。沒有底部連接器的區塊在巢狀陳述式和陳述式輸入內容的底部之間有空隙,表示可以新增更多陳述式區塊。

這兩個問題會產生不良互動。如果存在內部底部連接器 (Wonder Workshop),則初始陳述式的連結會變得更明顯,但會犧牲探索堆疊的功能。如果沒有內部底部連接器 (Blockly),則初始陳述式的連結不明顯,但可發現堆疊。在 Blockly 測試時,如果沒有內部底部連接器,並且巢狀化陳述式的底部連接器 (Scratch),可發現性會變得最差。

根據我們的經驗,與其讓使用者發現堆疊功能,不如讓他們先瞭解初始陳述式的連結,這樣會比較容易理解。一旦發現,前者就不會忘記,但後者需要提醒。Blockly 同時嘗試 Wonder Workshop 和 Scratch 方法,直到某天發生轉譯錯誤,導致產生小間距。我們發現,Blockly 的使用者研究因這個錯誤 (現在已成為我們引以為傲的「功能」) 而大幅改善。

建議做法:如果要為 Blockly 重新設計介面,請保留現有的堆疊式 UI。