• 沒有找到結果。

第四章 結果與討論

第一節 數位多媒體教材研究成果

本數位教材透過完整的規劃設計課程組織架構及教學內容,並轉化為腳本設計,以 Macromedia Flash cs3 做為素材處理、元件製作與系統整合之工具,依研究方法各階段 歷程開發出「人類的生殖」多媒體數位教材,研究成果包括介面設計與教學設計兩方面。

壹、 介面設計

在研究方法時探究教學單元、學習資源的課程架構以及評量測驗等三個畫面的介面 設計,在設計時依循介面設計的原則包括了一致性、簡單明確、使用者為主控制、隱喻、…

等原則,設計結果說明如下:

一、 教學單元介面設計

圖 4-1- 1 教學單元介面設計 主選單與學

習記錄的結 合,學習過 的綠燈,正 在學習中,

紅燈,尚未 學習的,灰 燈。

標題動畫

控制動畫播放工具列

動 畫 播 放 區

所有的教學單元、評量測驗/填充題、學習資源/參考資源及操作指引、結束離 開等均以上述介面為基本原則設計。主選單具伸縮設計,展開所按下的次功能選項,

收合之前所展開的次選單,展開與縮合之際產生彈性的感覺。

二、 學習資源/課程架構介面設計

此畫面會覆蓋原有的畫面,以全螢幕呈現。呈現的樣態結合學習歷程的記錄,將 所有使用者學習完成的單元在 icon 上顯示綠色燈,未學習完成的顯示紅色燈,尚未學 習的則灰色燈。而以紅藍綠閃爍箭號指出所在位置為學習資源下的課程架構。回首頁

「HOME」的設計以圓形代表卵子,當使用者按下時,邊框上的精子會朝向卵周圍聚集,

除搭配教材科學概念融入外,互動的方式給使用者額外的驚喜。

圖 4-1- 2 學習資源/課程架構介面設計 三、 測驗評量/自我挑戰介面設計

(一) 操作說明:文字以動畫方式呈現,按下右上解的「

8

」,關閉後即進入自我挑戰。

圖 4-1- 3 操作說明介面設計 課程架構結

合 學 習 記 錄,以不同 顏色燈號顯 示 學 習 情 形。

回 首 頁 設 計,圓形示 卵子,按下 時 邊 框 精 子 同 時 游 過 來 聚 集 在卵子旁

(二) 自我挑戰版面規劃:分為四區,由上方至下分別為:計時及功能選單區(標示 1)

題目區(標示 2)、答案區(標示 3)與操作說明區(標示 4)。

圖 4-1- 4 評量測驗/自我挑戰介面設計

貳、 教學設計

前面提到因研究者本人兼程式開發設計、美工設計以及腳本設計,省去必須與他人 清楚溝通的格式,而簡要以動畫、圖像、文字、聲音等四向度作為繕寫要件,亦以文字 腳本交代動畫的起承轉合、場景之間的來龍去脈。本「人類的生殖」數位多媒體教材在 此共呈現主要教學單元共 23 個教學設計,表現的方式注意文獻探討中所陳述的多媒體 設計各項原則,特別是動畫的設計,包括大播放區、播放速度、旁白配音、模擬運鏡、

以及使用者控制學習的工具列等,此外,並加上研究者多年教學經驗轉化之創意,使教 學內容清楚完整的呈現給使用者學習。而在 23 個主要教學單元之外,另設計跳出式的 模擬動畫,以補充說明科學專有名詞。

因本教材軟體發展設計的結果將近有 50 個分鏡畫面,限於篇幅,研究者呈現 12 個 畫面顯示主要的教學單元設計。

1

2

3

4

圖 4-1- 5 軟體啟動後之進場畫面。

除提醒使用者打開喇叭,「人類的生殖」標 題上方動畫會隨滑鼠移動隨機放大縮小、旋 轉、彈跳等,製造效果讓使用者感到有趣。

圖 4-1- 6 首頁動畫的結束畫面

使用者一進入即於動畫區自動播放本動 畫,文字明下方按鈕可以再播一次。

圖 4-1- 7 主選單與學習記錄結合的情形 圖 4-1- 8 男性生殖系統側面觀

圖 4-1- 9 排卵到床的動畫 圖 4-1- 10 複製羊的動畫

圖 4-1- 11 人工授精的動畫 圖 4-1- 12 評量測驗之填填看介面設計

圖 4-1- 13 學習資源之操作指引介面設計 捲軸以精子當作觸點,滑鼠 OVER 時出現擬 人化笑臉。

圖 4-1- 14 視覺化參考資源介面設計 以網站圖片堆疊成書櫃之樣態,滑鼠移過即 張開,按下可直接連到網站。按下標題旁的 手指,即可切換到文字介面。

圖 4-1- 15 填填看/男性生殖系統畫面 拖曳答案區構造名稱到與圖配合處,答對即 出現鼓掌動畫,答錯則回原位。

圖 4-1- 16 結束離開之介面設計

擬人化精子動畫圖案,按留下回到原來的畫 面。