Steam 課程初探：探討視覺與文字學習風格者
在編程網頁平面繪圖課程之差異
曹筱玥 國立臺北科技大學互動設計所教授 江宛庭 國立臺北科技大學互動設計所碩士 吳可久 國立臺北科技大學互動設計所教授 本研究提出了一種互動式程式教學的概念，將繪圖設計元素納入編程網頁平 面繪圖學習中，藉此以連結設計背景學生之學習模式，以協助互動設計系中圖像 思考類型學生之編程學習。該方法運用網頁平面繪圖 HTML5 的語法標籤 「canvas」來理解用程式碼畫圖、訓練學生用抽象程式碼來組織畫面的能力，將 程式概念循序漸進帶入學習中，提高學生的學習興趣與動機，課程於 Codepen 平台進行程式碼撰寫與結果呈現，期望學生掌握圖像視覺和邏輯轉換概念。 從實驗結果與分析中可以發現，透過網頁平面繪圖 canvas 課堂教授與實際 操作，有效促進不同類型學生在網頁平面繪圖編程的理解與學習；學生將繪圖作 品從「靜」轉「動」，能夠激發和增強圖像思考學生對編碼的興趣和訓練他們的 思維邏輯。一、研究背景
因應國際教育趨勢「STEAM」，學生應培養跨領域素養和能力，然而互動設 計系教學實務中，發掘不同學習領域背景學生普遍面臨之課題是「會程式的學生 缺乏美感，會設計的學生不會寫程式」。對於大多數設計背景的學生而言，他們 較擅長於圖像思考，圖像思考是一種將想法、思路和數據概念化並呈現為圖片和 圖形的能力（Wileman , 1993），屬於一種非分析性和非演算法的思維模式（Cyrs, 1997）；而「寫程式」是抽象的數據結構，屬於運算思維層面能力，學生往往在 這種組織過程中產生運作障礙。 因此，本研究主要探討互動設計系中偏向圖像思考類型的學生，透過編程網 頁平面繪圖課程學習與實際操作中，如何理解用電腦畫圖，用抽象的程式碼來組 織畫面，讓學生初步理解程式思維的架構，並藉此激發他們對學習程式的興趣， 進一步引導他們學習編程的意願。二、文獻探討
(一) 雙碼理論 Paivio 的雙碼理論，即語文和圖像是經由「語文系統」和「圖像系統」建構 不同的心智模式 ； 其解釋了人類的行為和經驗動態的關聯過程，以特定的語言 和非語言表達網絡間運作的模式（Paivio, 1971）。「語文元」的編碼方式傾向以循 序的、語法的方式進行連結，「圖像元」則傾向以整體的、集合的方式進行編碼。 而設計思維與程式思維是人類運算思考的兩個極端的面向，在教學實務上常常可 以看到學習背景偏重某一端的學習者，不容易運用另一端的思考方式。 Sword 與 Director 歸納出圖像思考者的特質，注重空間、大小和關係，經 常使用圖片、顏色、圖表等做為溝通的工具（Sword & Director, 2005），因此， 圖像畫面結果的迅速呈現可能對設計背景學生在學習過程中會有所幫助。 (二) 學習風格學習風格理論將認知方面之特質做了更多元的發展。Felder 和 Soloman 編製 學習風格測驗工具（Index of Learning Styles Questionnaire），將學習風格分為四 種向度，每個向度中包含兩種不同的學習風格類型（Felder & Soloman, 1991）， 在同一個向度裡面，學習者會偏向於一種學習風格類型；學習風格模型的發展被 認為其主要價值是提供引導，不同學習風格的學生在認知、理解的歷程上有所不 同，可能會影響其在學業學習表現中出現差異。
(三) 學習遷移
學習遷移泛指將先前習得的知識與技能，應用到新情境的學習之現象 （Cormier& Hagman, 1987; Singley & Anderson, 1989）。Thorndike 提出了同元素 論，認為遷移作用是基於刺激與反應之間的共同元素，個體在某個刺激情境中的 學習，有助於在其他類似情境中產生新的刺激反應聯結，且新舊學習間相同元素 越多，學習遷移效果越好（Thorndike, 1903）。Westling 和 Fox 認為在學習的過程 中，學習者若能將習得的知識與技能遷移和類化，更能提升學習者的學習能力、 增加成就感和興趣（Westling & Fox, 2000）。
(四) 小結
綜上所述，雙碼理論確立不同表徵編碼與組織的方式，語文及圖像系統間能 藉由互相參照產生連結，進而強化認知；而不同學習風格的學生在認知、理解的 歷程上有所不同，會影響其在學習表現中出現差異；透過連結舊有的學習經驗與
知識，因應到不同的情境和問題上。因此，訓練設計背景學生以編程思維的方式 來思考，使其設計在理性邏輯思維與感性設計思維之間轉換，有效地拓展設計背 景學生不同面向之思維發展。
三、研究方法與實驗設計
由第二章的文獻探討，了解到若能將程式思維導入設計過程中，更能有效促 進學生在不同面向的思考與發展，此實驗設計以「網頁平面繪圖」為媒介，將圖 像與文字系統產生連結、進行轉換。 (一) 課程設計 課程規劃為兩週，詳細教學內容如表 1，讓學生能夠初步認識網頁平面繪 圖，透過教學程式碼，開始建構圖形與架構無形框架，最後實際發想及撰寫。 表1 教學內容進度。 教學單元 教學目標與核心概念 教學內容及活動 Canvas 圖形教學 1. 認識網頁圖形與應用 2. 設計幾何圖形轉換由程式碼呈現 1. 網頁基本架構 2. 認識 Canvas 3. Canvas 起手式 4. 基礎圖形繪製 5. 圖形主題實作 Canvas 微互動創作 1. 認識網頁動畫及製作微互動 2. 將靜態圖形轉換成動態呈現 1. Javascript 基礎概念 2. Canvas 動畫解構 3. 基礎動畫製作 4. 動畫主題實作 資料來源：本研究課程設計 課程內容結合圖像思考者學生熟習之元素，將設計訓練點、線、面與幾何元 素範本納入課程的設計中。教學內容分別結合Piet Mondrian、Paul Klee 之設計 作品，以課堂講授與活動練習為主要方式，並以活動之成果為評量依據，如表2。 表2 教學內容與活動任務 教學單元 學習內涵 課程內容 活動任務 Canvas 圖形教學 具備圖形之基礎 變化、縮放能力Piet Mondrian, Composition with Red, Blue, and Yellow, 1930
Piet Mondrian, Lozenge Composition with Red, Gray, Blue, Yellow, and Black, 1925
Canvas 微互動創作 具備基礎邏輯轉 換應用及整合能 力，了解變數與 事件概念
Paul Klee, Three Houses,
1922 指定條件項目，自由發揮創作 （飄動/移動物件、滑鼠事件） 資料來源：本研究課程設計
(二) 採樣與實驗流程 研究對象為互動設計相關的學生，透過學習風格量表分類觀察對象。受測者 主要皆為臺北科技大學互動設計系大學生，總受測人數為40 人，其中女性為 30 人，男性為10 人。 實驗流程分為三個部分，第一部分讓學生進行學習風格量表與學習能力問卷 調查；第二階段透過課堂教授與不同活動評量其學習成果；第三階段將量表結果 與實驗任務評分統計與對照，並在課後找8 位學生進行半結構式訪談。 (三) 實驗工具 1. 網頁平面繪圖程式– Canvas Canvas 是一個用於「展示繪圖效果」的標籤，在一個空白的矩形區域畫布 中，使用JavaScript 語法，透過不同的繪圖路徑函數畫出複雜的圖形，並藉由調 整定位，逐步畫出我們心中所想的畫面。 2. 學習風格量表
學習風格量表選用Barbara A. Soloman and Richard M. Felder 所制訂的一套 有 四個向面（包含行動/反思、感官/直覺、視覺/語言、循序/綜合） 之學習偏 好來施測與評量，檢測學習者處理不同訊息時心理活動的習慣或偏好（Felder & Soloma, 1991）。 3. 半結構式訪談 實驗結束後在各類別中抽樣 8 位參與課程實驗之學生個別進行半結構式訪 談，主要針對「過往學習編程經驗」、「執行實作過程」、「學習困難與解決方式」 和「課程學習經驗與成效」等問題進行訪談。
四、實驗結果與討論
本研究藉由 Canvas 進行任務設計，融合設計元素、立即顯示圖像的訓練編 碼能力方法，以激發和增強圖像思考學生對編碼的興趣和訓練他們的思維邏輯。 以下綜合說明實驗結果與推論關係： 1. 根據問卷量表統計學生之學習風格，有 34 位學生為「偏好視覺學習者」及 6 位學生為「偏好文字學習者」，其分佈如表3。表3 學生學習風格分佈 面向 類型 人數 百分比 訊息處理 視覺型 34 85% 文字型 6 15% 資料來源：本研究實驗結果 2. 實驗一圖形運用之有效樣本為 35 人，其中男生為 9 人，女生為 26 人。圖像 型與文字型學習風格者在有時間控制的因素下，在圖形之操作上有顯著差 異，圖像思考者操作較快速，結果如表4。 表4 學習風格與圖形操作時間獨立樣本 t 檢定 類型 人數 M SD t df 顯著性 視覺型 29 44.83 27.49 -5.651 20.107 0.000 文字型 6 83.33 11.05 資料來源：本研究實驗結果 3. 實驗二微互動自由創作之有效樣本為 30 人，其中男生為 8 人，女生為 22 人。 經過專家評析後，分為「微互動運用」和「圖形美感」兩部份評分，圖像型 與文字型學習風格者在沒有時間因素下，微互動自由創作皆沒有顯著差異， 結果如表5 和表 6。 表5 學習風格與微互動運用分數獨立樣本 t 檢定 類型 人數 M SD t df 顯著性 視覺型 27 81.52 4.71 .897 28 0.377 文字型 3 79.00 3.04 資料來源：本研究實驗結果 表6 學習風格與圖形美感分數獨立樣本 t 檢定 類型 人數 M SD t df 顯著性 視覺型 27 81.65 4.45 1.127 28 0.268 文字型 3 78.67 2.76 資料來源：本研究實驗結果 透過主題二之結果可發現，自由創作項目（無時間限制）對視覺型學生平均 表現均較佳；從作品中觀察視覺型學生作品，大多數學生都能好好運用課程內容 之微互動效果，且在畫面呈現能更好的組合圖形；而文字型學生作品，在微互動 表現雖不比視覺型學生差，但在畫面呈現上較偏向幾何、圖形組合出的畫面也較 生硬，作品呈現如表7。
表7 作品模式與特性 分類 學生範例作品 微互動運用 圖形美感 具備基礎變 化能力，圖 形畫得美 眼睛使用滑鼠事件控制，背 景亦有不同變化 ； 畫面的 球隨時間向右滾動 具備將圖形組合之美感 雲雨使用滑鼠事件控制，背 景及傘亦有不同變化； 畫面 車子隨時間向右起伏移動 美感呈現組織上完整度高 具備基礎變 化能力，畫 面幾何 動物使用滑鼠事件控制，搭 配幾何圖形移動 ； 畫面的 泡泡隨時間上浮移動 圖形變化上較多元 背 景 及 星 星 隨 滑 鼠 移 動 改 變、車子向右移動 畫面呈現多以幾何圖形方式 呈現 資料來源：本研究實驗結果 4. 訪談結果主要以學生「架構圖形模式」、「思考途徑」和「學習痛點」為主軸 歸納整理，分別敘述如何運用程式碼將圖像組合出來，運用不同的模式進行 形狀辨識的過程；不同思考的途徑，有其運用數值對應的方式，如模仿課程 範例，進而變化畫面，亦或是願意嘗試錯誤解決問題、應用邏輯原理產生不 同變化互動，最後分析不同層面的痛點。
五、結論與建議
「網頁平面繪圖」課程的教學設計模式期望讓設計背景、偏向圖像思考學生 能夠汲取循序的、語言的思考方式，讓工程背景、偏文字思考學生能夠連結文字 思考與圖像特性。此外，透過課程培養學生的思考邏輯與內在美感能力，加強雙 向知識中的連結性，促進跨領域知識學習，不僅豐富學生美感知覺體驗，將美感 內化，亦能強化認知，建立新的知識架構。初步量化觀察和質性訪談，發現不同 學習風格學生運用Canvas 有不同的學習表現： 1. 偏向圖像思考學生在學習程式時，多會被無形的框架所限制，對於程式前後 之邏輯順序易弄不清楚，導致設計稿與在實際編程時產生落差；但透過學習 網頁平面繪圖能夠幫助他們釐清語法之前後關係、尤其在圖形操作上能夠發 揮其所長，有較好的學習表現，對於課程有較大的成就感、有較高意願再繼 續鑽研學習。 2. 偏向文字思考的同學，程式碼撰寫方面能夠先架構出整體框架，整理好思緒 才開始撰寫，在學習網頁平面繪圖時反而是認為在視覺排版與色彩搭配上有 所困難，因此作品主要多以幾何方式組合出圖形。 本研究透過實驗分析與學生訪談結果，歸咎出學生學習編程繪圖課程所帶來的影響和成效，然而此課程仍有需要修正的地方，提出以下後續研究建議： (一) 課程內容方面 課程內容豐富多元，時間安排上較緊迫，建議加長課程的時間，讓學生有更 多思考空間交流、表達情感及啟發美學的省思。 (二) 實驗設計方面 多加入不同元素之實驗設計，以提升學生的藝術涵養和美感感知能力，激發 出創意與靈感 ； 在微互動項目也應增加 「時間」考量，亦可以訂定範圍標準， 減少實驗額外因素影響。 (三) 課程教學研究建議 本次樣本數量略顯不足，學生能力、類型參差不齊，可能造成數據偏差，建 議提升樣本數量，多比較不同類型學生間的學習樣態和成效。 參考文獻
Cormier, S. M., & Hagman, J. D. (Eds.). (1987). The educational technology
series.Transfer of learning: Contemporary research and applications. Academic
Press.
Cyrs, T. E. (1997). Visual thinking: Let them see what you are saying. New
directions for teaching and learning, 1997(71), 27-32.
Felder, R. M. & Silverman, L. K. (1988).Learning and teaching style in engineering education. Engineering education, 78(7),674-681.
Felder, R. M. & Soloman , B. A. (2001).Index of Learning Styles Questionnaire. Retrieved from North Carolina State University,
http:/www.engr.ncsu.edu/learningstyles/ilsweb.html
Paivio, A. (1971). Imagery and verbal processes. New York: Holt, Rinehart, and Winston.
Singley, K., & Anderson, J. R. (1989). The transfer of cognitive skill. Cambridge, MA: Harvard University Press.
Sword, L. K., & Director, G. (2005). The power of visual thinking. Gifted & Creative Services Australia.[Online] Available from: http://www. giftedservices. com.au/visualthinking. html [Accessed 12-1-2014].
Thorndike, E. L. (1903). Educational psychology. New York: Columbia University Press.
Westling, D. L., & Fox, L. (2000). Teaching students with severe disabilities(2nd
ed.). Upper Saddle River, NJ: Merrill.
Wileman, R. E. Visual Communicating. Englewood Cliffs, N.J.: Educational Technology. Publications, 1993
