在學習平台網站中，情境的形塑對於使用者學習的成效是有相當的影響力。網站若能呈現良好的情境氛圍，將可提高學習者的學習意願，並能助於迅速進入學習狀況。但就目前台灣數位學習平台介面設計的現況而言，網站平台的開發者大都以網站的功能設計為主要考量，這也造成網站介面上充斥著大量複雜的資訊內容與選單，讓學習者產生不知所措的恐慌，進而放棄學習機會。有鑑於此，本研究將藉由東方意境美學觀點所著重的「化繁為簡」的來探討在數位學習介面設計中運用的可行性。

在中國意境美學裡，強調以簡約的物象造型與大量的空間留白來形塑情境；而在日式極簡美學中，常以蘊含禪宗哲理的概念做為設計發想，以簡化代替複雜、以質樸代替華麗、以自然代替人為，讓作品能散發出獨特內斂的人文精神。因此，本研究將透過文獻探討、案例分析與創作設計，來探究東方意境美學觀置入於學習平台介面設計上的成效，以歸納出符合學習者學習情境的視覺參考要素。

從研究結果得知：一、在圖像造型的設計上，運用具有象徵隱喻的影像，除能營造出豐富的學習情境氛圍外，更能有效引導學習者自發性思考 。二、在色彩的應用上，以簡約自然的顏色為佳，避免使用過多的色感與艷麗的色調，盡量保持在三種色相為最佳狀態。三、在網頁空間的安排上，應保留40％的留白比例，以呈現出適宜的閱覽情境。

綜觀上述結果，可以得知在數位學習平台介面設計上，適度的置入意境美感的文化元素，將有助於提升學習成效。

The visual design is one of the key factors for the construction of e-learning websites. A well-designed website with an effective interface will help users to enter the learning atmosphere easily. However, most of e-learning websites in Taiwan do not pay much attention in building an attractive realm for users to receive and comprehend knowledge, instead of showing a massive content and functions. 

This research will use the way of literature review combing with the case study in the e-learning websites of Taiwan and Japan to explore how the aesthetic concept of the realm in Chinese and Japanese arts can be applied to the interface design of e-learning websites effectively. Moreover, through creating a prototype website with such eastern style to test Taiwanese users’ responses and evidence the merits of the idea of the realm.

The result of this study indicates three findings: 1) the use of visual imagery with metaphorical meanings can increase user’s learning capability and create a better learning atmosphere. 2) the use of colors in the e-learning website is better to be controlled in no more than three kinds of colors, and brings a simple and comfortable feeling. 3) the use of empty space maintained in the whole page of the e-learning website should contain at least 40 percent to build a better reading experience. From the above generalization, we can infer that applying the aesthetic concept of the realm to the interface design of the e-learning website will improve user’s learning effects.

目錄

第一章	緒論	1

第二章	文獻探討	4
第一節	中國意境美學	4
第二節	日式極簡美學	12
第三節	數位學習	20

第三章	研究方法	28
第一節	研究架構與步驟	28
第二節	研究方式	30

第四章	案例分析	33
第一節	案例篩選	33
第二節	分析要點	34
第三節	案例探討	35

第五章	設計創作	60
第一節  設計方法與目的	60
第二節  介面模組設計	61
第三節  樣本受測結果	73

第六章	結論與建議	80
第一節	研究結論	80
第二節	研究建議	82

參考文獻	
英文書籍	83
中文書籍	84
翻譯書籍	85
期刊與博碩士論文	85

附錄
實驗問卷	88


表目錄
表4-1 篩選案例屬性表	34
表4-2 視覺情境分析整理表	35
表4-3 人文藝術網的網頁流量統計表	36
表5-1 視覺情境影響的三方向	60
表5-2 具象的畫面情境之設計元素	62
表5-3 具象選單影像設計表	64
表5-4 抽象的畫面情境之設計元素	66
表5-5 抽象選單影像設計表	66
表5-6 三色應用表	69
表5-7 四色應用表	70
表5-9 構圖空間的圖示設計表	72
表5-10 「圖像造型」之實驗問卷	74
表5-11 「色彩應用」之實驗問卷	76
表5-12 「構圖空間」之實驗問卷	78




圖目錄
圖2-1 宋 文同 墨竹圖	5
圖2-2 元 吳鎮 戲墨寫竹	5
圖2-3 宋 蘇軾 墨竹圖	5
圖2-4 清 朱耷 游魚圖	6
圖2-5 清 朱耷 安晚冊	6
圖2-6 清 朱耷 梅花圖	6
圖2-8 塞尚《靜物》	7
圖2-9 宋　樑楷  潑墨仙人	8
圖2-10 宋　樑楷  秋柳雙鴨圖	8
圖2-11 定點透視圖	9
圖2-12 三遠分析圖	9
圖2-13 南宋 馬遠 山徑春行圖	10
圖2-14 南宋 夏圭 溪山清遠圖	10
圖2-15 北宋  石恪  二祖調心圖	11
圖2-16 MUJI廣告海報設計	13
圖2-17 MUJI廣告海報設計	13
圖2-18 禪畫	13
圖2-19 How High The Moon 倉俣史朗	13
圖2-20 光之教堂 安藤忠雄	14
圖2-21 器皿	15
圖2-22 茶室	15
圖2-23 花道藝術	16
圖2-24 果汁包裝設計 深澤直人	18
圖2-25 果汁包裝設計 深澤直人	18
圖2-26 壁掛式CD播放器 深澤直人	18
圖2-27 MSN表情圖示	21
圖2-28 科技教育學習網站	22
圖2-29 WII FIT	22
圖2-30 視覺化在數學上的應用	24
圖2-31 視覺化在科學上的應用	24
圖2-32 視覺化在數學上的應用	25
圖3-1 本研究架構	29
圖4-1 人文藝術學習網-學生版	35
圖4-2 網站架構圖	36
圖4-3 圖示運用1	37
圖4-4 圖示運用2	38
圖4-5 圖示運用3	38
圖4-6 色彩運用1	39
圖4-7 留白區域圖1	40
圖4-8 背景圖示1	41
圖4-9 國立交通大學「開放式課程」學習網站	41
圖4-10 網站架構圖	42
圖4-11 圖示運用4	43
圖4-12 圖示運用5	43
圖4-13 色彩運用2	44
圖4-14 留白區域圖2	45
圖4-15 背景圖示2	45
圖4-16 中小企業網路大學校-數位學習	46
圖4-17 網站架構	47
圖4-18 圖示運用6	48
圖4-19 圖示運用7	48
圖4-20 色彩運用3	49
圖4-21 留白區域圖3	50
圖4-22 背景圖示3	50
圖4-23 NavigStage線上學習網站	51
圖4-24 網站架構	52
圖4-25 圖示運用8	53
圖4-26 圖示運用9	53
圖4-27 色彩運用4	54
圖4-28 背景圖示4	55
圖4-29 m-School數位學習網站	55
圖4-30 網站架構圖	56
圖4-31 m-School數位學習網站	57
圖4-32 m-School數位學習網站	57
圖4-33 色彩運用5	58
圖4-34 留白區域圖4	59
圖5-1 日本學習網站之圖像影像設計	62
圖5-2 具象的畫面情境影像	62
圖5-3 具象選單影像	63
圖5-4 美國學習網站之圖像影像設計	65
圖5-5 抽象的畫面情境影像	65
圖5-6 抽象選單影像	66
圖5-7 整體圖像造型之實驗調查結果	75
圖5-8 整體色彩應用之實驗調查結果	77
圖5-9 整體構圖空間之實驗調查結果	79
圖6-1 東西方之圖像造型呈現方式	81

參考文獻

英文書籍
1.	Bilyk, R.（2005）， elearning that goes beyond text and graphics. T.H.E. Journal，33( 2)，36-38。
2.	Borsook, T. K. & Higginbotham-Wheat, N. （1991），Interactivity: What is it and what can it do for computer-based instruction? ，Educational Technology，31(5)，11-17。
3.	Bohdan O. Szuprowicz(1994)，Multimedia Networking，Charleston, S.C. : Computer Technology Research。
4.	Christine, Sevilla.，（2002），Information Design Desk Reference，Crisp Learning。
5.	Denton, C.（1991），Graphic for Visual Communication，McGraw-Hill，Inc.，Dubuque，IA。
6.	Galitz, W. O.（1992），User-Interface Screen Design，A Wiley-QED，NJ。
7.	Ha, L. & James, E. L. (1998)，Interactivity Reexamined: A Baseline Analysis of Early Business Web Sites， Journal of Broadcasting & Electronic Media,42(4)，457-474。
8.	Jonassen, D. H. (2000)， Computers as mindtools for schools: Engaging critical thinking (2nd ed.)，Upper Saddle River，NJ: Prentice-Hall。
9.	Levin, J. R., Anglin, G. J.& Carney, R. N. (1987)，On empirically validating functions of pictures in prose，In D. M. Willows & H. A. Houghton (Eds.)，The psychology of illustration: I. Basic research (pp. 51–85). New York: Springer。
10.	Marcus, A. （1992），Graphic design for electronic documents and user interfaces，MA：Addison-Wesley。
11.	Rogers, E. M. (1986)，Communication Technology: The New Media in Society，New York: Free Press。

中文書籍
1.	王國維（1973），《人間詞語》，臺北市：樂天出版社。
2.	王雲東著（2007），《社會研究方法：量化與質性取向及其應用》，台北：威仕曼。
3.	生活百科叢書編譯組編譯（1982），《美與色彩心理》，台北：國家。
4.	江祖望（2004），《水墨畫與臺灣美學 : 臺灣水墨畫所象徵的特殊意義》臺北市：臺北利氏學社。
5.	李世忠、何政興(1998)，《電腦教學軟體介面設計》，台北：立威出版社。
6.	李佩玲（2002），《和風賞花幕－日本設計美學的演繹》，臺北市：田園城市文化事業公司。
7.	宗白華（1989），《美學與意境》，臺北市：淑馨出版社。
8.	邱貴發（1996），《情境學習理念與電腦輔助學習－學習社群理念探討》，台北市：師大書苑。
9.	梁景紅（2006），《Design玩設計: 專業網站設計與配色實例解析》，臺北市 : 電腦人文化。
10.	倪再沁著（2005），《水墨畫講》，台北：典藏藝術。
11.	黃光男（1993），《宋代繪畫美學析論》，台北：漢光。
12.	馮曉（1993)，《中西藝術的文化精神》上海：上海書畫出版社。
13.	黃朝盟、趙美慧（2001），《.COM 的策略規劃與設計》，台北：商鼎圖書。
14.	葉美莉（2000），《商用色彩學》，台中市：果岩。
15.	蔣勳（1986），《美的沈思 : 中國藝術思想芻論》P.175臺北市：雄獅。
16.	鄭國裕，林磐聳編著（2002），《色彩計劃》，臺北市 : 藝風堂出版社。
17.	鴻文慶等編撰（2001），《中國名畫賞析》，台北縣：錦繡。
18.	賴賢宗（1993），意境美學與詮釋學，臺北市：國立歷史博物館。

翻譯書籍
1.	Lawrence Neuman著（2002），王佳煌，潘中道，郭俊賢，黃瑋瑩譯，《當代社會研究法- 質化與量化取向》，台北：學富。
2.	Roger D. Wimmer,Joseph R. Dominick著（2003），黃家振等譯，《大眾媒體研究》，台北：學富。
3.	Semir Zeki著（2001），潘恩典譯，《腦內藝術館─探索大腦的審美功能》，台北：商周。
4.	Shneiderman, B., & Plaisant, C.著（2005），曾志軒譯，《人機介面設計-有效的人機互動策略》，台灣培生教育。
5.	Winner,E.，（1982），陶東風等譯，《創造的世界─藝術心理學》譯自《Invented Worlds:The sychology of the Arts. MA:Harvard University Press.》。台北：田園城市文化出版社。
6.	岡倉天心著（2006），許淑真譯，《茶之書－茶道美學》，臺北市：典藏藝術。
7.	原研哉著（2009），李伯黎譯，《原研哉的設計》，臺北市：雄獅圖書公司。
8.	鈴木大拙等著（1982），劉大悲譯， 臺北市：天華出版事業公司。 

期刊與博碩士論文
1.	王銘顯；孫銘賢（2007），跨文化演變後臺灣元素之日本茶道，藝術欣賞3卷4期，P.16-24。
2.	李岱芳（2001），《情境式學習在「氧化還原」網站之應用與研究》，靜宜大學資訊管理學系研究所碩士論文。
3.	李俊宏（1996），《網頁設計原則的研究-以大專院校首業設計為例》，國立雲林技術學院工業設計研究所碩士論文。
4.	李浩羽（2007），《文化創意商品對顧客價值及消費者態度之研究－以日本良品計劃株式會社之台灣「無印良品」商品為例》，中華大學科技管理研究所碩士論文。
5.	李宜珍（1992），談高效應的多媒體介面設計，國際視聽教育學術研討會論文集，P.265-271。
6.	李佩玲（1999），設計文化新啟蒙-日本設計美學的初探， P.119~206。
7.	林千玉（1999），螢幕上長篇內文之每行字數對閱讀速度之關聯性研究，1999 跨世紀人文科技國際設計學術交流研討會論文集，頁155-161。
8.	林菁（1996），動畫中的顏色和背景與兒童記憶和理解學習之探討，嘉義師院學報，P.41-55。
9.	林榮泰、莊明振（1991），從圖像語意探討人機介面圖像的設計，工業設計，20卷，第2期，P.85-91。
10.	林麗娟（1996）。多媒體電腦圖像設計與視覺記憶的關係。教學科技與媒體，第28期，P.3-12。
11.	林菁、李曉媛(2003)，網路教學的媒體呈現方式之研究，教學科技與媒體，第65期，P.34-58。
12.	陳麗華（2002），《意境與形式─以張大千的繪畫為例論中國繪畫的藝術哲學》，中國文化大學哲學研究所博士論文。
13.	莊錦昌、蕭世文（2001），《網頁介面使用性之探討與意象之研究》，國立成功大學工業設計研究所碩士論文。
14.	姬明暐（2006），《電腦輔助教學介面設計次原則研究》，私立大同大學工業設計所碩士論文。
15.	陳麗如、何榮桂（1998），Web-Title之使用者介面設計，資訊與教育，第64 期，P.21-28。
16.	黃美珠（1997），電腦輔助教學軟體設計原則之探討，視聽教育雙月刊，第38卷，第5期，P.17-24。
17.	葉盈秀（2006），《數位學習教學平台視覺介面之設計與發展》，淡江大學教育科技學系研究所碩士論文。
18.	蔡錫濤，楊美雪（1996），情境式學習的教學設計，教學科技與媒體，第30期，P.48-53。
19.	鄭晉昌（1993），自「情境學習」的認知觀點探討電腦輔助中教材內容的設計－從幾個教學系統談起，教學科技與媒體雙月刊，第12期，P.3-14。
20.	顧大維(2005)，從數位教學平台使用的迷思：看教學設計在數位學習應扮演的角色，教育研究月刊，第131期，P.118-126。