神马文学网數位教材介面設計參考指標
来源：百度文库 编辑：神马文学网 时间：2024/10/03 02:44:09
摘自cuteping‘S BLOG
壹、前言
介面（Interface），顧名思義是指系統和使用者之間進行交互和訊息交換的媒介，例如用提款機提款時，操控面版及金融卡即是與人操作間的介面。所謂的數位教材介面即是指學習者進入教材，與電腦互動以使用操作教材的交流溝通管道。在數位教材裡，教學內容所代表的是設計理念，另需要透過教材呈現設計的形式，才能具體表達教材，而風格與介面設計更是教材呈現工作中的首要項目，教材的 介面設計 好壞，常會影響著學習者能不能可以正確操作教材、用起來順不順暢、讀起來好不好看、讀起來是否清楚等重要關鍵。希望藉由本文可讓你瞭解數位教材設計的介面設計之重點，以提高學習效果。
貳、介面設計的重要性
因為學習者使用教材時無法感受腳本、電腦呈現幕後所執行的程式碼，因此介面往往是最直接面對學習者的部分。在數位教材的介面，常可看到輸入裝置提供給學習者操作的界面，比方說按鈕、開關、音控、互動等，而教材回饋給學習者的包括顯示的方式、顏色、大小、文字、排列、音效等。
介面設計通常可包含教材架構呈現流程、教材裡所提供之教學功能、學習者操作教材之控制功能與工具、以及畫面上之螢幕排版設計。在介面設計時，最好遵守KISS：Keep it Simple and Stupid原則，以減輕學習者的障礙。比方說若將按鈕圖像設計得過於抽象，會產生操作上的困擾。另外應避免過多的字數，以免認知負載，也應盡量避免色彩明度鮮豔刺眼，以免影響閱讀性。而導引學習者方向及其所在位置是介面設計重要的功能之一，藉由清楚一致的教材架構，導覽學習者有方向性的瀏覽以獲得內容資訊。
參、數位教材介面設計參考準則
在開發數位教材時，我們主要可參考五大項介面設計的基本原則，以作為教材設計規劃及細部安排時的參考依據。
一、整體設計應符合學習理論與概念：舉例來說，若銀行行員欲學習如何操作終端機使用方法，可將教材介面模擬成行員的辦公桌面與電腦環境，來學習操作終端機的知識技能。另外我們曾提及人類學習之記憶模式，所以在設計教材時，應減輕短期記憶的負擔，並強化長期記憶的保存，以便學習者輕鬆學習。舉例來說，教材架構應具有邏輯性，以減輕記憶負擔。
二、應有適度之學習控制功能：介面設計應容許學習者掌控動作的執行，而非全部由電腦掌控。例如，給予學習者可以放大、縮小、前進、後退、暫停或靜音等可掌控教材畫面的動作。然而給予控制權之功能多寡應根據學習者的類型及其能力而定，並非所有教材都適用，例如新手較專家之操作功能則應較簡易。
三、教材畫面之排版配置：學習者的能力伴隨著經驗、知識與年齡的不同，對教材的操作與學習閱覽上也會有所差異。例如針對年齡較大的學習者，可能會有視力衰退或電腦操作的問題，所以在介面設計時可以採用放大字體或明確輔助引導的呈現方式。另外也可多利用視覺與文字隱喻，這是因為大部分學習者會從以往的經驗背景裡找尋解讀新事物的線索，並進一步的產生聯想，因此設計時應善用隱喻將去傳達介面設計欲表達的教學內容概念。舉例來說，可利用一個家的圖之視覺隱喻方式來傳達學習者可以回到首頁之概念、利用地圖的文字隱喻方式來傳達學習者可以連結到目前所在位置的概念。
四、說明文件與輔助功能：教材設計者可考慮採取以下幾種方式提供協助，比方說在啟動教材主題之前，電腦自動載入說明文字或測試應有之外掛程式；或是在教材內容中提供相關資訊的說明或小幫手功能；另外常見的是提供有關教材的書面使用說明文件與學習手冊。
五、一致的設計：教材介面除了考量功能面與使用面外，也應注意學習者的視覺舒適感受。整體的美感設計應涵蓋色彩色調搭配、多媒體呈現、文字字型與大小，及風格一致與賞心悅目的圖像等等。最後舉凡功能列位置、視窗操作方式，與色彩圖片運用等，都需做一致性的規範，例如我們可以固定設計教材的重點字顏色若為藍色，而有藍字加底線則是具有超連結之功能。。
在實際進行設計時，你將會發現這些原則很難滿足所有教材的需要，因此必須視狀況設計及取捨，活用出新的指導原則。筆者將常用之介面設計規範整理成下表，以方便實際設計時一一思考。
1.Introduction of the program
(1)Title Page
提供標題頁或是片頭動畫(splash screen) 。
標題頁製作的很清楚、有趣、簡潔。
如果標題頁包含影片、音樂或動畫的話，要允許學習者能用鍵盤或滑鼠操作跳過(skip)。
標題頁不要自行消失，應由學習者自行控制。
標題頁應提供如何進入內容或繼續運作清楚的說明。
標題頁應包含標題、作者、擁有者、著作權日期等說明，並應提供離開按鈕。
參與或貢獻者名單應不要太長，如果太長的話用獨立頁面呈現。
標題頁不要放選單及教學內容。
(2)Directions
指引很簡單，學習者毋須學習如何操作指引。
指引可很容易的跳過或離開。
學習者可以隨時跳回指引頁。
可運用rollover在指引的簡易說明上。(如將滑鼠移到按鈕上會浮出小文字的說明)
強調在如何操作該教材，不包含教學目標、專業內容。
(3)User Identification
如果使用該教材要登錄，則要有登錄頁。
登錄需輸入的帳號不要多或太長。
進入教材的程序要很清楚，避免冗長。
允許學習者可以修正其所輸入之資料。
密碼不能出現在螢幕上。
如果要鼓勵合作學習，要允許可多人一同登入進教材。
2.Learner control of a program
(1)What and How much Control to Provide
提供允許學習者進行學習的控制要項，如前一頁、後一頁等，及學習速度。
永遠提供學習者向前進展的功能。
不要使用到某一定的時間，畫面會自動跳到下一頁這類的功能。
允許學習者複習的功能，例如隨時可以回到前一頁。
允許學習者暫時結束教材，例如書籤的功能。
教材應有一致性的導覽介面設計，例如指引、求助、詞彙表等(global control)。
教材內容裡若有影片、旁白、動畫之類的媒體，應要允許學習者可暫停、繼續、重播或跳過之類的功能。(如果影片或其它媒體的時間長過20秒的話，可分頁處理)
給予成人比孩童更多的學習者控制功能。
學習者的先備知識較高時，可給予較多的學習者控制。
依據學習者的需求給予或設計適當的學習者控制，如英文非母語的學習者，其畫面就不用英文；如學習者的閱讀能力差異很大的話，則教材就運用除了文字外，還可用如旁白的方式供選擇。
學習者的問題解決及思考技能較高時，可給予較多的學習者控制。較低的學習者可多設計程式性的控制(program control)。
如果精熟教材是必要條件，則多設計程式性的控制。
如果學習成就較低時，應限制其學習者控制或給予學習者使用的建議。
(2)Methods of Control _menus
如果教材內容順序不是那麼關鍵必要的話，應提供選單。
給予成人比孩童更多的選單功能。
選單隨時都是要可以運作的。
選單要能顯示出學習進展，不要設跳過的功能。
選單頁要有標題，與內容一致。(如：不要標題寫選單，應寫教材名稱)
選單頁可呈現給學習者學習建議，如已完成的單元是…；下一個要進行的單元是…。
選單要很簡單易懂。
階層式的選單其層次不要過多。
如果教材架構較複雜，可提供map或流程圖。
選單也應包含global control，如help、離開等。
全螢幕的選單適合用在架構較簡單時。
Pull-down或pop-up的選單適合用在階層式或較複雜的選單時。
(2)Methods of Control_ hyperlinks
避免暗藏超連結。
文字的超連結應考慮其可讀性，如學習者習慣藍色字加底線是超連結，點下去也有功能，點選過後字會變顏色。
確保文字重點字不會與超連結功能混淆。
當滑鼠滑到有超連結效果的字或按鈕時，鼠標應有改變，如變成手的形狀。
若圖像上有設計超連結，滑鼠滑過應有變化，如鼠標變成手的形狀。
Global control，如help裡避免使用超連結。
(3)Modes of Control
滑鼠應為主要的控制方式。
若學習者是專家級的，鍵盤可為次要的控制方式。
常用的控制功能(如上下頁)或特定頁的local control(播放、暫停)可用按鈕設計。
超連結主要運用在文字上，用以解釋文字的意涵。
控制功能要很顯而易見且容易使用。
壹、前言
介面（Interface），顧名思義是指系統和使用者之間進行交互和訊息交換的媒介，例如用提款機提款時，操控面版及金融卡即是與人操作間的介面。所謂的數位教材介面即是指學習者進入教材，與電腦互動以使用操作教材的交流溝通管道。在數位教材裡，教學內容所代表的是設計理念，另需要透過教材呈現設計的形式，才能具體表達教材，而風格與介面設計更是教材呈現工作中的首要項目，教材的 介面設計 好壞，常會影響著學習者能不能可以正確操作教材、用起來順不順暢、讀起來好不好看、讀起來是否清楚等重要關鍵。希望藉由本文可讓你瞭解數位教材設計的介面設計之重點，以提高學習效果。
貳、介面設計的重要性
因為學習者使用教材時無法感受腳本、電腦呈現幕後所執行的程式碼，因此介面往往是最直接面對學習者的部分。在數位教材的介面，常可看到輸入裝置提供給學習者操作的界面，比方說按鈕、開關、音控、互動等，而教材回饋給學習者的包括顯示的方式、顏色、大小、文字、排列、音效等。
介面設計通常可包含教材架構呈現流程、教材裡所提供之教學功能、學習者操作教材之控制功能與工具、以及畫面上之螢幕排版設計。在介面設計時，最好遵守KISS：Keep it Simple and Stupid原則，以減輕學習者的障礙。比方說若將按鈕圖像設計得過於抽象，會產生操作上的困擾。另外應避免過多的字數，以免認知負載，也應盡量避免色彩明度鮮豔刺眼，以免影響閱讀性。而導引學習者方向及其所在位置是介面設計重要的功能之一，藉由清楚一致的教材架構，導覽學習者有方向性的瀏覽以獲得內容資訊。
參、數位教材介面設計參考準則
在開發數位教材時，我們主要可參考五大項介面設計的基本原則，以作為教材設計規劃及細部安排時的參考依據。
一、整體設計應符合學習理論與概念：舉例來說，若銀行行員欲學習如何操作終端機使用方法，可將教材介面模擬成行員的辦公桌面與電腦環境，來學習操作終端機的知識技能。另外我們曾提及人類學習之記憶模式，所以在設計教材時，應減輕短期記憶的負擔，並強化長期記憶的保存，以便學習者輕鬆學習。舉例來說，教材架構應具有邏輯性，以減輕記憶負擔。
二、應有適度之學習控制功能：介面設計應容許學習者掌控動作的執行，而非全部由電腦掌控。例如，給予學習者可以放大、縮小、前進、後退、暫停或靜音等可掌控教材畫面的動作。然而給予控制權之功能多寡應根據學習者的類型及其能力而定，並非所有教材都適用，例如新手較專家之操作功能則應較簡易。
三、教材畫面之排版配置：學習者的能力伴隨著經驗、知識與年齡的不同，對教材的操作與學習閱覽上也會有所差異。例如針對年齡較大的學習者，可能會有視力衰退或電腦操作的問題，所以在介面設計時可以採用放大字體或明確輔助引導的呈現方式。另外也可多利用視覺與文字隱喻，這是因為大部分學習者會從以往的經驗背景裡找尋解讀新事物的線索，並進一步的產生聯想，因此設計時應善用隱喻將去傳達介面設計欲表達的教學內容概念。舉例來說，可利用一個家的圖之視覺隱喻方式來傳達學習者可以回到首頁之概念、利用地圖的文字隱喻方式來傳達學習者可以連結到目前所在位置的概念。
四、說明文件與輔助功能：教材設計者可考慮採取以下幾種方式提供協助，比方說在啟動教材主題之前，電腦自動載入說明文字或測試應有之外掛程式；或是在教材內容中提供相關資訊的說明或小幫手功能；另外常見的是提供有關教材的書面使用說明文件與學習手冊。
五、一致的設計：教材介面除了考量功能面與使用面外，也應注意學習者的視覺舒適感受。整體的美感設計應涵蓋色彩色調搭配、多媒體呈現、文字字型與大小，及風格一致與賞心悅目的圖像等等。最後舉凡功能列位置、視窗操作方式，與色彩圖片運用等，都需做一致性的規範，例如我們可以固定設計教材的重點字顏色若為藍色，而有藍字加底線則是具有超連結之功能。。
在實際進行設計時，你將會發現這些原則很難滿足所有教材的需要，因此必須視狀況設計及取捨，活用出新的指導原則。筆者將常用之介面設計規範整理成下表，以方便實際設計時一一思考。
1.Introduction of the program
(1)Title Page
提供標題頁或是片頭動畫(splash screen) 。
標題頁製作的很清楚、有趣、簡潔。
如果標題頁包含影片、音樂或動畫的話，要允許學習者能用鍵盤或滑鼠操作跳過(skip)。
標題頁不要自行消失，應由學習者自行控制。
標題頁應提供如何進入內容或繼續運作清楚的說明。
標題頁應包含標題、作者、擁有者、著作權日期等說明，並應提供離開按鈕。
參與或貢獻者名單應不要太長，如果太長的話用獨立頁面呈現。
標題頁不要放選單及教學內容。
(2)Directions
指引很簡單，學習者毋須學習如何操作指引。
指引可很容易的跳過或離開。
學習者可以隨時跳回指引頁。
可運用rollover在指引的簡易說明上。(如將滑鼠移到按鈕上會浮出小文字的說明)
強調在如何操作該教材，不包含教學目標、專業內容。
(3)User Identification
如果使用該教材要登錄，則要有登錄頁。
登錄需輸入的帳號不要多或太長。
進入教材的程序要很清楚，避免冗長。
允許學習者可以修正其所輸入之資料。
密碼不能出現在螢幕上。
如果要鼓勵合作學習，要允許可多人一同登入進教材。
2.Learner control of a program
(1)What and How much Control to Provide
提供允許學習者進行學習的控制要項，如前一頁、後一頁等，及學習速度。
永遠提供學習者向前進展的功能。
不要使用到某一定的時間，畫面會自動跳到下一頁這類的功能。
允許學習者複習的功能，例如隨時可以回到前一頁。
允許學習者暫時結束教材，例如書籤的功能。
教材應有一致性的導覽介面設計，例如指引、求助、詞彙表等(global control)。
教材內容裡若有影片、旁白、動畫之類的媒體，應要允許學習者可暫停、繼續、重播或跳過之類的功能。(如果影片或其它媒體的時間長過20秒的話，可分頁處理)
給予成人比孩童更多的學習者控制功能。
學習者的先備知識較高時，可給予較多的學習者控制。
依據學習者的需求給予或設計適當的學習者控制，如英文非母語的學習者，其畫面就不用英文；如學習者的閱讀能力差異很大的話，則教材就運用除了文字外，還可用如旁白的方式供選擇。
學習者的問題解決及思考技能較高時，可給予較多的學習者控制。較低的學習者可多設計程式性的控制(program control)。
如果精熟教材是必要條件，則多設計程式性的控制。
如果學習成就較低時，應限制其學習者控制或給予學習者使用的建議。
(2)Methods of Control _menus
如果教材內容順序不是那麼關鍵必要的話，應提供選單。
給予成人比孩童更多的選單功能。
選單隨時都是要可以運作的。
選單要能顯示出學習進展，不要設跳過的功能。
選單頁要有標題，與內容一致。(如：不要標題寫選單，應寫教材名稱)
選單頁可呈現給學習者學習建議，如已完成的單元是…；下一個要進行的單元是…。
選單要很簡單易懂。
階層式的選單其層次不要過多。
如果教材架構較複雜，可提供map或流程圖。
選單也應包含global control，如help、離開等。
全螢幕的選單適合用在架構較簡單時。
Pull-down或pop-up的選單適合用在階層式或較複雜的選單時。
(2)Methods of Control_ hyperlinks
避免暗藏超連結。
文字的超連結應考慮其可讀性，如學習者習慣藍色字加底線是超連結，點下去也有功能，點選過後字會變顏色。
確保文字重點字不會與超連結功能混淆。
當滑鼠滑到有超連結效果的字或按鈕時，鼠標應有改變，如變成手的形狀。
若圖像上有設計超連結，滑鼠滑過應有變化，如鼠標變成手的形狀。
Global control，如help裡避免使用超連結。
(3)Modes of Control
滑鼠應為主要的控制方式。
若學習者是專家級的，鍵盤可為次要的控制方式。
常用的控制功能(如上下頁)或特定頁的local control(播放、暫停)可用按鈕設計。
超連結主要運用在文字上，用以解釋文字的意涵。
控制功能要很顯而易見且容易使用。