數位多媒體教材設計原則

數位多媒體教材並非只是將圖、文、動畫、影音拼湊的資料呈現出來。有些數位多 媒體教材有賞心悅目的美術設計圖案，但內容乏善可陳；即使加入電腦動畫也未必就能 讓使用者更易於接收其訊息。理想的數位多媒體教材必須有良好的教學目標以切合使用 者的需求；而教材內容正確性、良好的視覺效果，友善合理回饋使用者所需的訊息，均 為不可或缺的元素，因此，「設計」是多媒體教材開發過程的核心，其內涵又可略分為：

人機介面設計（ Human Machine Interface Design）、多媒體內容設計、教學架構設計原 則等三部份，分別敘明如下。

壹、介面設計原則

「介面」是人與機器溝通的橋樑，早期使用者必須以「下指令」的方式操作電腦，

一般人不容易跨過此門檻，近幾十年來，資訊科技的發展一日千里，人機溝通的介面設 計也愈來愈人性化，親和力的增強使得電腦不再是冰冷的機器，而是生活中必要的成 員、人際互動重心之一。不論是辦公室軟體、各類網頁或是數位多媒體，好的介面設計 讓使用者容易上手進而增進使用的意願，不良的介面設計則降低使用者接觸慾望，國內 外學者對介面設計原則有完整的研究，如張志仁整理自 1987 年至 2007 年共 18 位國內 外學者對介面設計原則，其餘學者對單項需求研究亦不少，例如：數位學習介面（陳俊 瑋，2005），美術館介面（黃足如，2002），weblog 介面設計（林怡君，2006）、購物網 站介面設計（鄭恩維，2008），數位教材介面設計（張志仁，2007）、電腦輔助教學介面 設計次原則（姬明暐，2007）…等等。然而，隨著開發軟體功能愈來愈強大、使用者需 求亦愈來多愈之下，「介面設計原則」仍有其補充之處，張志仁在其研究結論指出，介 面設計者的本身的資訊技術、教材製作技巧、與對數位教材的實務經驗可以發揮介面設 計的創意與改變原則的呈現方式。在數位多媒體教材製作方面，設計者本身的豐富教學 經驗亦能對介面設計原則有不同的觀點。

張志仁（2007）在研究結果中提出所遭遇的問題及限制「國內外文獻裡的介面設計 原則多是強調設計方向的說明，而較少有說明哪些方式可以運用在數位教材介面設計 上，以及該如何設計與應用，因此在運用現今介面設計原則時需要更具體」，於此，綜 合國內外文獻指出的設計原則及研究者本身設計的實務經驗，提出介面設計原則如下：

一、一致性：所謂「一致性」是指整體介面環境中，共通性的呈現，降低使用者的認

知負荷，以及提升學習效率。在開發數位多媒體教材時有下列設計可以有一致性：

（一）版面配置：畫面編排主標題、主功能導覽列、工具按鈕列、動畫播放區、文字 說明區等位置在各頁面都有一致性，提升使用者操作效率。縱向編排應是右上 到左下，橫式編排則從左上到右下。

（二）文字：各頁面的內文、主標題、副標題等文字的大小、粗細、字距、行距、字 型、顏色有一致性。

（三）音訊：背景音樂、按鈕音效、旁白等有一致性。

（四）操作介面互動性：當使用者將輸入工具（例如：滑鼠）OVER 或 DOWN 或移入 移出感應區時，有一致性的反應。

（五）色彩運用的一致性。

（六）捲軸、訊息框、超連結等樣式設計的一致性。

二、簡單明確：以一般使用者慣用的操作方式、用語表達等，項目名稱清楚適切表達 教材內容，以降低干擾。

三、使用者為主的控制：

（一）因學習者程度、能力、學習風格不同，所選擇的學習路徑亦不同，介面可提供 使用者個別化與適性化的學習。

（二）視窗的開啟關閉，動畫、影片或音樂的停止、重播、跳段等，音樂可以調整音 量使用者可主動控制。

（三）自由選擇學習教學的深度和內容。

四、隱喻：使用圖片或動畫將資訊視覺化，按鈕、功能表的設計美觀活潑有創意，降 低認知負荷。

五、色彩：人類通常具有三種色彩光感受體，因此運用色彩來構成圖像，以增加視覺 的張力及畫面的層次，數位多媒體設計色彩運用方式，探討如下：

（一）色彩的屬性：色相、明度、彩度。

（二）色彩的感覺：色彩給人帶來各種感覺，例如：.冷熱感、輕重感、遠近感。暖色 系中明度、彩色越高，色彩感覺越暖，越輕；反之，冷色系中明度、彩色越低，

則感覺越冷，色重堅硬。

（三）色彩的對比：利用色相對比、明度對比、彩度對比的配色原理，可以產生良好 視覺的效果，利如紅花在綠葉襯托下較黃葉襯托更明顯、活潑。

（四）配色技巧：

1. 決定主題色彩：設計界常常使用的色彩模式，有基本色、輔助色、強調色，通常 以基本色 70％、輔助色 25％、強調色 5％的比例為主(林淑玉，2008)。基本色儘 可能不要用高彩色調，容易造成使用者繁雜的感覺。如果真要使用，請降低其使 用面積。

2. 以色相、色調為主的配色：使用限定色相配色是具統一感之配色的基本原則，又 可稱為同一色相配色、或類似色相配色。 使用多個色相做複數配色，也要盡量 保留主題色的基本面積比例。

3. 背景色：背景色將會影響到圖文的呈現品質，根據背景色來調整文字色彩的明 度，能增加文字的可閱讀性。在背景圖上疊文字時，會降低文字的可讀性，可降 低背景圖像的色彩對比來改善。

4. 漸層色：配合漸層方向設置文章內容，可增加文章的可讀性。當一個畫面覺得太 過於單調時，可將單一色調改為漸層，這時畫面會比較豐富，也容易產生遠近感。

六、回饋：以聲音、色彩改變、大小改變、播放動畫、出現訊息多元化回饋方式等，

讓使用者知道自己操作了什麼，或操作完畢後獲得什麼，以滿足學習動機。

七、提供指引：按鈕選項附加文字，提供線上操作指引，方便教學與學習。

八、人性化：數位多媒體教材介面設計的存在，目的是以使用者能完美體驗軟體內容 為王道，需以使用者為出發點來設計，包括親和性、防錯，即時協助訊息等都為 必要考量。

以上綜合參考國內外文獻具體歸納出「一致性」、「簡單明確」、「使用者為主的控 制」、「隱喻」、「色彩」、「回饋」、「提供指引」、「人性化」等八項設計原則，對數位多 媒體開發設計者而言，為相當重要且必遵守之原則，可使數位多媒體更為親和質優，

亦作為後續研究者開發「人類的生殖」之介面設計參考與檢核。

貳、多媒體設計原則

在本章第二節曾探討「多媒體」由英文字 Multimedia 翻譯而來，就是「多種媒體」

的意思。「多」媒體的「多」字，包含的媒體如文字（Text）、圖片（Picture）、圖形（Graphic）、 影像（ Image ）、影片（ Video ）、動畫（Animation）、音樂（Music）、聲音（Sound）

等。在本小節，研究者將探討上列之多媒體的元素，文字、聲音、圖像、動畫及影片在 設計的應注意的原則，讓設計者遵循，而使產出之作品優質而適用。

一、文字：文字可以很直接的表達所要傳達的意思，重點在易讀性。

（一）在版面大小有限下，長篇大論降低使用者閱讀意願，故文字資料應該適當地加 以組織精簡，對於專有名詞或術語應以超連結方式另做更深入的解釋與說明。

（二）標題或次標題的使用，可以區分主題和突顯內容的層次，但以標題、次標題、

內文三層呈現，層次不宜過多。標題可以做字體或造形變化，內文的字型則選 擇筆畫清楚、粗細適中，以適合閱讀為主。各種數位中、英文字體字型有其特 性及意象，如宋體字用於詩詞文藝，黑體字則具現代感用於科學或設計類（林 昆範，2007）。一般而言，字體字型運用每個畫面不宜超過 3 種，過度使用反而 會造成閱讀時的混亂。

（三）以顏色或字體的變化來強調重點或暗示專有名詞，字體顏色必須和背景做適當 的搭配，以、對比、補色或同色系來配置，相關知識可參考色彩原理。

（四）每行文字字數視版面配置文字區域大小而訂，研究者經驗以 80%~90%為主，天 地留白較無壓迫感，亦可以使圖文更加明顯突出。

（五）以段落及行距能將文字內容區塊化，一般行距約為 1.5 至 2 倍行高。

二、聲音：包含語音、音樂和音效，使用者可以主控開或關，以及調整音量。

（一）語音即一般所謂的旁白，可以輔助畫面上視覺訊息的呈現，幫助使用者更容易 閱讀螢幕上的文字；依教材文字內容選擇適當的配音者，配音時注意音調、音 質、速度、音量、及咬字清晰，最好先順稿後一次錄製完成多媒體教材內所有 語音，達成一致性。選擇可去背景雜訊的麥克風以節省製作時間。

（二）音樂：音樂一般作為營造多媒體教材主題的氣氛，例如：教學單元可配輕節奏 音樂，計時挑戰性的評量遊戲可配節奏快的背景音樂。除自行設計外，如選用 有版權音樂必須注意著作權。為避免檔案過大，建議使用部份小節音樂循環播 放即可。亦必須注意音質，否則無法達成效果，如有語音同時出現，注意音量 不可大過語音音量。

（三）音效：音效可用於訊息提醒、聚焦特殊重點、輸入工具（如滑鼠）操作上，創 意配置音效常有畫龍點晴之效果，在使用的過程中得到樂趣，但音效也不宜使 用太多，讓使用者感到吵雜。

三、圖像：圖像包含了圖形與影像，在數位多媒體教材設中，使用圖像呈現各種隱喻、

具體或抽象的概念，以加強教學效果。較常使用之圖像類別包括圖示（Icon），教 學相關圖片、插圖等。

（一）電腦儲存圖像的方式有點矩陣式和向量式，點矩陣圖可以細緻展現影像細節，

適合照片和複雜圖像，但在縮放或旋轉時，會產生鋸齒或格子，圖形容易失真；

向量圖則可以任意縮放而不失真，較適用於顏色少、簡單圖案。

向量圖則可以任意縮放而不失真，較適用於顏色少、簡單圖案。