2. 文獻探討
2.2. 介面設計
2.2.1. 介面設計原則
「介面設計」（Interface Design）必頇考量到使用者的感官知覺（視覺、聽 覺..等）與個別差異（性別、年齡..等）（Fleming & Levie，1993）。本研究以不同 知覺偏好學童操作「故宮 e 學園-中國繪畫課程」之介面滿意度為主要研究內容々
「故宮 e 學園」在數位學習課程規劃上，採互動多媒體方式呈現，屬網頁式「線 上學習」（Online Learning）之範疇，本小節將依線上數位學習網站相關之介面設 計原則探討之。
Shneiderman（1988）藉由經驗與觀察互動系統後，將一些經驗法則歸納、
延伸後，提出使用者介面設計的八個黃金定律（Eight Golden Rules of Interface Design）〆
1. 力求一致性（Strive for consistency）〆在相似的情況下，操作應具有一 致性的順序々提示、選單與說明畫面中，應使用相似的名詞々使用色彩、
版型、字型大小、字體等具一致性。
2. 使用者能運用捷徑（Enable frequent users to use shortcuts）〆對於經常性 使用者而言，使用縮寫（Abbreviations）、特別鍵（Special keys）、隱藏 功能（Hidden commands）與綜觀全局（Macro facilities）等功能，可以
33
減少互動次數，增加使用效率。
3. 提供回饋資訊（Offer informative feedback）〆當使用者進行操作時，系 統應該給予某些方式的回應。使用頻繁的操作，其回饋的強度可較低一 些々重要或特殊的動作，而其回饋強度則需更顯著。
4. 設計結束的對話視窗（Design dialog to yield closure）〆開始、過程、及 結束的順序，應有系統的組織。當操作過程完成時，應該產生有效的資 訊回饋給使用者。
5. 操作錯誤的預防與處理（Offer simple error handling）〆設計出不會讓使 用犯下嚴重錯誤的程式。使用者操作錯誤時，系統應該要能查出錯誤並 提供簡單的、具建設性的、具體的指示來復原錯誤。
6. 簡單的復原功能（Permit easy reversal of actions）〆簡單的復原可減輕使 用者的焦慮，這個功能鼓勵使用者探索不熟悉的功能。
7. 支援進階操作需求（Support internal locus of control）〆有經驗的使用者 會有控制介面的需求。系統設計上要讓使用者成為觸發者，而不是回應 者。
8. 減少短期記憶負載（Reduce short-term memory load）〆著名的研究指出 人類短期記憶只能儲存七個片段訊息々設計簡潔的畫面或使用下拉式選 單、圖標，可以減少使用者的短期記憶負載。
Norman（1988）於「The Design of Everyday Things」中，建議介面設計時，
設計者應注意「良好的概念模型」（Good Conceptual Model）、「易識性」（Visibility）、
「良好的對應關係」（Good Mapping）、「回饋原則」（Feedback）等，四項基本原 則〆
34 表 2-9 Norman 介面設計基本原則
基本原則 良好的概念模型
（Good Conceptual Model）
一個好的概念模型，應該預先讓使用者知道操作介面時所引 起反應為何。
易識性
（Visibility）
使用者介面所產生的控制和功能，操作時需容易了解，才能 產生良好的對應關係。
良好的對應關係
（Good Mapping）
係指使用者操作介面的控制項時，可能觸動的結果，兩者之 間的良好對應。
回饋原則
（Feedback）
系統需要提供一個良好的回饋機制，以便將資訊回傳給使用 者。
資料來源〆整理自（Norman，1988）
William Lidwell、Kritina Holden 與 Jill Butler（2003）於「Universal Principles of Design」一書中，提出 100 個影響認知、增加美感，讓設計更好的關鍵法則，
本研究歸納與介面設計相關之 20 條規準，整理如下〆
1. 80/20 法則（80/20 Rule）〆圖形使用者介面把大部分功能隱藏在下拉式 功能選單中，並找出關鍵的性的百分之二十，讓他們出現在工具列中。
2. 容易使用（Accessibility）〆介面設計應簡易並能讓多人使用，且不需修 改，越多人可以適用越好。
3. 美就是好用的效果（Aesthetic-Usability Effect）〆美的設計被認為是好用 的、較容易接受々美觀的介面設計也較易吸引使用者。
4. 功能可見性（Affordance）〆軟體介面符號、圖示等物件，與使用者真實 生活、認知物件功能相符合，易於提示使用者其在軟體環境之功能。
5. 集群性（Chunking）〆結合不同單位的介面選單或資訊，成為限量單位 或組塊，以方便資訊的處理與記憶。
6. 顏色（Color）〆運用顏色來吸引注意，集合介面元素、表示涵義並增加 美感。
35
7. 一致性（Consistency）〆介面功能與外觀元素採取一致性設計，建立易 辨識、簡化、方便學習的系統。
8. 進入點（Entry Point）〆好的進入點介面設計，關鍵在於障礙少、良好的 方向暗示及引導、漸進式引誘。
9. 形象-背景關係(Figure-Ground Relationship)〆將介面元素與背景分開，
以便集中焦點，降低認知混亂。
10. 寬恕性（Forgiveness）〆介面設計應該能讓人避免發生錯誤，發生操作 錯誤時，把負面影響減至最低。
11. 追隨功能取向（Form Follow Function）〆介面設計的美感，來自純粹的 形式與功能。
12. 連續性（Good Continuation）〆介面設計中，可使用連續性來表示元件 之間的關聯。
13. 席克法則（Hick’s Law）〆把介面中做決定的選項降至最低，以減少反 映時間。
14. 需要的等級（Hierarchy of Needs）〆設計需求由低至高依序為（1）功能 性需求。（2）可靠性需求。（3）使用性需求。（4）熟練度需求。（5）創 意需求。確定滿足介面設計的低階需求後，再將資源用於滿足創意需 求。
15. 強調手法（Highlighting）〆利用強調手法把使用者的注意力帶到某一區 域。
16. 圖像表徵（Iconic Representation）〆利用圖像加強操作介面辨識度。
17. 容易辨識（Legibility）〆文字在視覺上的清晰程度，受字元大小、字體、
36
對比、文字區域、空格等因素影響。
18. 模組化（Modularity）〆將複雜的介面，將類似功能群組採模組化設計。
19. 奧卡姆剃刀（Ockham’s Razor）〆不需要的元素，會降低設計的效率，
選擇簡單的介面設計方式避免干擾。
20. 圖優效果（Picture Superiority Effect）〆使用者操作介面時，圖片比文字 容易記憶。
Nielsen & Tahir（2002）於「Homepage Usability〆50 Websites Deconstructed」
書中，詳列 113 條介面設計的評估與指導原則，提供設計者明確依循的方向，其
8 整合企業資訊，如關於我們（About Us），投資者相關訊息（Investor Relations），人力資源
（Employment），新聞中心（Press Room）等
9 確定首頁包括「關於我們」（About Us），這是用來讓瀏覽者粗略了解整個公司，並可在連 結到公司產品、服務、公司評價、商業主張、與管理團隊等其他相關資料的細節。
10 如果需要發布公司相關的新聞報導，在首頁加上「新聞中心」（Press Center）或「新聞室」
（News Room）的連結
37 14 別讓公司內部資料顯示於對外公開的網站中
15 如果網站有收集任何瀏覽者資訊，就必頇在首頁上提供隱私權的（Privacy Policy）的連結 16 如果不能清楚的顯現獲利來源，就必頇說明該網站如何創造利潤
38 42 對於類似的連結，不要提供多個導覽區
43 在首頁上，不要使用連結首頁的功能
44 導覽區的分類選單中，不要使用捏造的文字（例如〆uCommerce）或難以理解的文字（例如〆 Zeether）
45 若網站有購物車的功能，將其連結置於首頁上
46 只有在導覽區中使用圖示可以協助瀏覽者立即分辨出來才使用該圖示 搜尋
47 在首頁中提供瀏覽者輸入方塊以輸入想要搜尋的查詢詞，而不只提供一個到搜尋網頁的連結 48 輸入方塊必頇要有足夠的寬度讓瀏覽者查看以及編輯搜尋網站的條件
49 別爲搜尋取一個標題，輸入文字方塊的"search"按鈕來提示
50 除非進階搜尋是網站的基本條件，否則提供簡易搜尋即可，並在具有進階搜尋或搜尋技巧的
39
77 在商業網站首頁的網址應採用 http://www.company.com 的形式 78 跨國性的公司應註冊.com 作為最上層的網域
40
104 在商用網站上，不要提供流言版「Guess book」的功能，以免有不夠專業的感覺 日期和時間
資料來源〆整理自（Jakob Nielsen & Marie Tahir，2006）
國內學者陳建雄、邱柏清、蔡佳穎（2004）々陳建雄、陳盈秀、汪文政（2008）々 林千惠、周彥君（2009）等，於互動介面設計之使用者需求、互動介面「愉悅性」
設計與「網站介面品質」評估等研究中，針對介面設計原則提出看法，如下表所 列〆
41
林千惠等（2009） 美觀性（Aesthetics）。
多媒體性（Multimedia Effect）。
組織結構性（Structure）。
互動性（Interactivity）。
可及性（Accessibility）。
傳輸性（Transmission）。
連結性（Link / Navigation）。
資料來源〆整理自（陳建雄等，2004々陳建雄等，2008々林千惠等，2009）
Jakob Nielsen 是簡化優使性工程運動（Discount Usability Engineering）的創 始者，強調採用快速而有效的設計方式，來提升使用者介面的品質々Jakob Nielsen 與 Hoa Loranger（2006）於「Prioritizing Web Usability」中建議網頁設計者，介 面設計應避免在文字辨識與版面配置上出現下列幾項禁忌問題，干擾使用者介面 操作之流程〆
42 表 2-12Nielsen、Loranger 網頁介面設計問題
問題 內容
文字辨識問題 文字顯得太小或模糊。
文字不能很容易的改變大小。
文字的顏色和背景顏色的對比度不夠。
文字周圍的設計元素讓文字顯的不突出。
版面配置問題 頁面沒有按優先順序的高低來組織。
操作過於複雜，缺乏使用說明。
內容相關區域沒有被安排在比較靠近的位置。
沒有將元素對齊讓頁面顯得整齊 頁面上的元素太多
資料來源〆整理自（Jakob Nielsen、Hoa Loranger，2006）
一個設計良善的使用者介面，必需盡量符合眾人之需求，並在使用者與介面 之間，提供簡易、流暢、具一致性的互動過程。本研究分析歸納國內外學者 Shneiderman（1988）々Norman（1988）々William Lidwell 等（2003）々Jakob Nielsen、
Hoa Loranger（2006）々陳建雄等（2004）々陳建雄等（2008）々林千惠等（2009）
之研究，彙整出 12 項「介面設計」之原則，如下所列〆 1. 一致性的元件設計與呈現方式。
2. 簡化介面操作過程，及時提供操作訊息。
3. 減少操作錯誤，給予簡易、快速的復原資訊。
4. 良好的介面控制與互動回饋機制。
5. 整體設計要美觀但不繁複。
6. 物件與使用者認知或生活知識結合，易於辨識物件功能。
7. 採模組化方式，減輕使用者記憶負載量。
8. 介面元素與背景需有所區隔，降低認知混亂。
43
9. 減少介面選項，建構元件間連續性關係。
10. 文字需清晰、大小適中，或利用圖像代替加強操作介面辨識度。
11. 運用顏色吸引注意，提示元素涵義並增加美感。
12. 不干擾的原則下，適度使用互動多媒體或音效，提示使用者操作。
從設計的觀點來看，兼具「功能性」的設計才稱得上是美觀的設計（池谷義 紀，2008）。部分設計者可能覺得好用的設計，必頇捨棄許多美感元素，但若介 面設計未能讓使用者操作時產生流暢性、舒適性與自在感，那便失去了設計的原
從設計的觀點來看，兼具「功能性」的設計才稱得上是美觀的設計（池谷義 紀，2008）。部分設計者可能覺得好用的設計，必頇捨棄許多美感元素，但若介 面設計未能讓使用者操作時產生流暢性、舒適性與自在感，那便失去了設計的原