• 沒有找到結果。

第三章 研究方法與設計

第四節 媒體規劃與製作

在前述第一小節發展「人類的生殖」數位多媒體教材出課程架構與教學內容,在第 二小節針對教學內容進行圖、文、動畫、文字等多媒體元素進行資料搜集與彙整,本小 節將續進行媒體之規劃,包括介面設計、教學內容轉化腳本設計等,並開始著手以Adobe Flash CS3 Professional開發製作。

壹、 軟體開發工具

Adobe Flash CS3 Professional 具向量繪圖、動畫編輯製作、互動程式撰寫、整合 圖文影音等多媒體元件的強大功能,研究者使用 Adobe Flash CS3 Professional 做為主 要開發工具,包括繪圖、模擬動畫編輯製作、導覽系統、介面設計、多媒體整合等。

有關聲音方面,旁白錄製使用 Microsoft Windows XP 附屬應用程式錄音機,錄 音機可以做簡單的剪輯;再使用自由軟體 CDex 1.51 繁體中文化版作 wav 轉 mp3。

貳、 硬體開發工具

本研究者使用多媒體電腦 IBM ThinkPad X32 作為主要硬體設備,其規格如下:

(一)CPU : Intel Pentium M 1.8 GHz ( Centrino 架構 )

(二)記憶體 : 1.25G DDR SDRAM

(三)硬碟 : 40G

(四)LCD 尺寸 : 12.1 吋 XGA (1024x768) TFT Active Matrix

其餘週邊設備包括 Wacom Tablet Graphire3 數位繪圖板及指向式麥克風。

參、 腳本設計

優質的數位多媒體教材必須先要有好的腳本開始,好的腳本除了在教學內容上要能 合乎教學目標外,還要有好的構想或創意將教學內容轉化呈現。本小節主要規劃本數位 教材之介面設計與教學設計,介面設計共有三個規劃:教學單元介面設計、課程架構介 面設計以及評量測驗介面設計,希望能做到人與教材軟體之間的良好親合溝通,使用者 能有好的學習效果,教材軟體的適用性也會提高。教學設計共有 23 個腳本設計,希望 設計能教學內容良好呈現,提高學生學習成效,依序說明如後。

一、 教學單元介面設計

(一)色彩:為表示在母體子宮內的感覺,以黑色調為主色,文字色彩為白色及黃色。

(二)版面規畫:主要規劃為標題區、主功能選區、動畫播放區三大區,其中動畫播 放區上方為動畫標題,下方設置控制工具列,如圖 3-4-1 所示。

圖 3-4- 1 版面規劃

(三)標題區:教材標題「人類的生殖」以疊圓體設計,顏色為白色,每個字以淺藍 色(#66CCFF)至透明的氣泡作背景。第一個字「人」加大 25%,會慢速旋轉。

將嬰兒圖像置於相同氣泡內,由左而右波浪路線漂流而過標題區,其過程以漸 漸變大或漸漸變小呈現空間深度的感覺。

(四)主功能區(menu):分為教學單元、教學資源、測驗評量及結束離開。動畫設計 為使用者進入本教材時主選單的各選項由畫面左方輪流跑進來,就定位,動畫 播放區播開場動畫。互動設計為使用者滑鼠移至任一選項(item),改變該選項 背景顏色讓使用者知道目前所在位置,按下選項後展開此選項下的次選單,並 縮回其他已展開的次選單,使用者可以聚焦目前所在位置,按下展開的互動感 類似彈簧的伸縮,如圖 3-4-2 所示。次選單以細框線框住文字、字體略小、變化 字型以和主選單作區隔,互動設計為當滑鼠移至選項時,出現方框動畫以讓使 用了解目前所在位置,按下後在動畫播放區播放該選單的電腦教學模擬動畫。

記錄學習歷程:選單的各選項前設置圓形項目符號,共有 3 種顏色變化,未學 習該科學概念時是灰色;學習完成後呈綠色;正在學習中的呈紅色(圖 3-4-2),

以此記錄學習狀況,使用者對自己學習過那些單元十分清楚。

「人類的生殖」標題區

主 功 能 區

動畫播放控制工具列 動畫播放區

動畫標題

圖 3-4- 2 主功能選單設計

(五)動畫播放區:動畫標題以黃色、粗圓體、字體大小 30pt 設計。動畫播放控制工 具列以軟體內建按鈕元件庫作改編設計,包括播放(X)、暫停、跳段(XX)、

重來(R)、翻頁(N)、想一想( ),背景為綠色漸層、上方打光並加陰影以 呈現立體感,圖稿如圖 3-4-3。互動設計為滑鼠 OVER 時,出現此按鈕說明文字,

告知使用者本按鈕的功能,滑鼠按下時改變背景色為黑色,字變白色,並出現

「按下」音效(Click.Wav),讓使用者知道已按下。每個動畫下方均有本組工具 列,如果動畫本身不需要其中某一項功能按鈕,例如不需要「翻頁(N)」,則 此按鈕加深色調為 90%,並去除按鈕功能,保留圖像,讓使用者知道這是無功 能的。

圖 3-4- 3 動畫播放控制工具列圖稿 二、 學習資源/課程架構之介面設計

在主功能選單「學習資源」項下包括了「課程架構」、「參考資源」、「操作指引」

等 3 個次選單。因「課程架構」結合了記錄使用者學習歷程,必須標示出使用者學習 過的單元、未學習的單元、及學習中的單元,因此,為達其效能按下本功能後,新開

生殖系統 生殖細胞

受精概觀 胚胎發育

懷孕與分娩 雙胞胎 生殖科技 學習資源 評量測驗 結束離開

生殖系統 生殖細胞

受精概觀 胚胎發育

懷孕與分娩 雙胞胎 生殖科技 學習資源 評量測驗 結束離開

精子的形成 卵子的形成 教學

單元

按下後 次選單

課程架構

使用說明區 主功能

選單及 其次選 單Ⅰ

主功能 選單及 其次選 單Ⅱ

主功能 選單及 其次選 單Ⅲ

回首頁 全頁視窗,「課程架構」介面設計不同於教學單元。

(一)色彩:仍以黑色系為主,背景為黑,內圓角框為深灰(#333333),外圓角框為棗 紅(#990033)。文字白色及黃色調。

(二)版面規畫:主功能選單及次選單共 34 項,依次分於三區塊呈現,並於最下方有 標示「使用說明區」。兩個圓角框間以精子攀緣其間作設計。標示學習所在「@

課程架構」其箭號以不同顏色閃爍。如圖 3-4-4 所示。

(三)動畫設計:圓角矩形動畫(出現外框,再出現內框),選單區塊分次呈現。

(四)回首頁按鈕設計:紅色圓形代表卵子,內標示「HOME」,互動設計為當滑鼠 OVER 時,攀緣兩個圓角框間的精子移向此圓成圍繞狀。

(五)學習記錄:主功能選單及次選單必須標示出那些單元尚未學習(ICON 為灰色),

那些已學習(ICON 為綠色),那些未完成學習(ICON 為紅色),學習者按下任 何一選項,關閉本頁,回到該教學單元教學。

(六)聲音:背景音樂。

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

「自我挑戰」設置題庫,以線上測驗的方式,提供隨機選題、作答、計時、批改、

得分、回饋訂正功能。所需版面為全頁,其氛圍與教學單元不同,故點選後另開全頁 視窗。

(一)色彩:暖色系列,以黃色為主色,輔色為灰色,文字色彩為藍色。

(二)操作說明訊息框設計,按上方「8」後關閉訊息框進入自我挑戰畫面。

HOME

黑色 深紅色 深灰色

(三)版面規畫:以橫向切割成 4 區塊,最上方為選題、批改、再考一次、離開等工 具列。第二區為題目區,左方為題目文字,如有圖則顯示在右方。第三區塊為 答案欄,使用者點選答案自動出現於此,未再選下一題前均可更改答案。其上 方為得分區,按下批改後自動以紅字顯示得分。第四區塊為簡要的操作說明,

提供使用者查閱。

圖 3-4- 5 評量測驗/自我挑戰之介面設計圖稿

(四)工具列 ICON 設計:以隱喻方式設計,以「手指按下」圖示隱喻選題,以「打 紅鈎」圖示隱喻批改,以

R圖示隱喻再考一次,以「跑步動作」圖示隱喻離開。

如圖 3-4-6 所示。

圖 3-4- 6 學習資源/課程架構之介面設計圖稿

(五)聲音:快節奏的背景音樂(GAME.WAV)

四、 教學設計

操作說明 8 深灰到淺

灰漸層 淡黃

深灰白字

淺黃 計時 00:00 ○選題 ○批改 ○再考一次 ○離開

第 題 題目區

1 2 3 4 5 6 7 8 9 10 A B /

得分

操作說明

教學設計之腳本是數位多媒體教材相當重要的一項,必須把教學內容做清楚完整

在文獻探討時研究者探討「發問」在教學活動中的重要性,因此,「人類的生殖」

數位多媒體於每個教學單元結束後,設計有效的問題「發問」,以促進學生思考,能與 原有概念產生連結,主動探索教材以外的知識,擴展學習領域,提升高層認知的思考 能力,此亦為本教材形成性評量方式之一,提供教師課堂教學運用。問題編擬分類以 分段能力指標作為層次,亦為問題的教學目標,例如在「胎兒的生長發育/母體生產 前兆及分娩」教學單元,「科學與技術認知」層次發問的問題為「懷孕末期,胎兒的頭要朝 那裡才是正常胎位?」,又在「生殖細胞/精子的形成」教學單元,「科技的發展」的層次發問 問題為「”精蟲分離術”是坊間醫療診所常見的營業項目,試查詢資料,了解其內涵」,在「生 殖細胞/卵子的形成」在「思考智能」層次發問的問題是「女性更年期以後,還可以製造卵子 嗎?」。餘各教學單元在各層次發問之問題如附錄四所示。

本節探討本數位多媒體教材之規劃與製作,依數位多媒體設計原則進行腳本設計並 以 FLASH CS 製作,完成後接下來將進行實施與評鑑的階段。