簡易檢索 / 詳目顯示

研究生: 施彥舟
Shih, Yen-Chou
論文名稱: 能源教育網站背景與框架色彩之研究
A Study of Energy Education Websites Frame Color and Backgroud Color
指導教授: 簡佑宏
Chien, Yu-Hung
學位類別: 碩士
Master
系所名稱: 科技應用與人力資源發展學系
Department of Technology Application and Human Resource Development
論文出版年: 2013
畢業學年度: 102
語文別: 中文
論文頁數: 84
中文關鍵詞: 能源教育網站網站背景色彩網站框架色彩
英文關鍵詞: Energy education website, Website background color, Website frame color
論文種類: 學術論文
相關次數: 點閱:176下載:0
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 近年來隨著能源議題漸受重視,各式能源教育網站建置數量也逐漸增加。國外能源教育網站色彩多樣化如橘色、黃色、紅色、黑色等色彩,國內能源教育網站色彩則以藍色和綠色為主,相較之下色彩較為單調且網站之間無獨特性。有鑑於此,本研究目的以大學生為研究對象,探討使用者在使用能源教育網站時,網站之背景色彩與框架色彩對於視覺疲勞度、學習效益、學習動機、網站評價是否具有其影響性,以作為未來網站設計者在設計能源教育相關網站時的參考基準。
    本研究分三個實驗階段,第一階段實驗調查 30 位大學生對於 18 種網站背景色彩的主觀喜好程度,並透過 SPSS 群集分析選出 4 種背景色彩(紫紅色、黃橙色、藍色、綠色);第二階段實驗則根據第一階段實驗所選出 4 種背景色彩(紫紅色、黃橙色、藍色、綠色),搭配 2 種框架色彩(框架色彩分離與框架色彩不分離)共 8 種網站頁面進行能源教育網站設計並進行視覺疲勞度量表、能源認知測驗及教材動機量表;第三階段則依據第二階段結果進行整體評估並選出 2 種背景色彩(紫紅色、黃橙色)與框架色彩(框架分離),加上原始能源教育網站共 3 種網站
    頁面對學習者進行網站實質及感覺層面的評價調查。本研究三個實驗階段之研究結果顯示:
    1. 背景色彩為紫紅色與黃橙色的能源教育網站,對於大學生能源知識學習效益上高於藍色與綠色的能源教育網站。
    2. 框架色彩分離的能源教育網站,對於大學生的視覺疲勞度高於框架色彩不分離的能源教育網站。
    3. 背景色彩為紫紅色與黃橙色且框架色彩分離的能源教育網站,對於大學生在能源知識的學習效益較佳。
    4. 網站評價的實質層面,背景色彩為紫紅色與黃橙色且框架色彩分離的能源教育網站,優於原始網站色彩。
    5. 網站評價的感覺層面,背景色彩為紫紅色且框架色彩分離的能源教育網站,優於黃橙色與原始網站色彩。
    本研究結果顯示,背景色彩為紫紅色、黃橙色且框架色彩分離的能源教育網站在學習效益不差於背景色彩為藍色和綠色的能源教育網站,並且背景色彩為紫紅色、黃橙色的能源教育網站在網站評價上也高於原始能源教育網站色彩。因此在能源教育網站的建置上可考慮使用如紫紅色、黃橙色等其他色彩,不但可維持能源教育網站學習者的學習效益,也可增加該網站與其它能源教育網站在色彩上的不同進而產生差異化,可吸引更多學習者瀏覽與使用。

    In recent years, as energy issues receive more and more attention,various energy education websites have also gradually increased in number.
    Foreign energy education websites use multiple colors, such as orange,yellow, red and black, while domestic ones mainly use blue and green and thus, in comparison, are more monotonous in color and less original. In view of the foregoing, this study chooses college students as study subjects to explore the influence of website background colors and frame colors on visual fatigue, learning effectiveness, learning motivation and website rating when users use energy education websites so as to provide a reference standard in designing energy education-related websites for website designers in the future.
    The study is divided into three stages of experiments. In the first-stage experiments, we investigated 30 college students’ subjective preference of 18 website background colors and selected four background colors (purplish red,
    yellowish orange, blue and green)through SPSS luster analysis. In the second-stage experiments, we combined the four background colors (purplish red, yellowish orange, blue and green) selected in the first-stage experiments with two kinds of frame colors (separate or non-separated frame colors) to generate eight kinds of web pages for energy education website design, and then we conducted visual fatigue scales, cognitive tests on energy, and motivation scales on teaching materials. In the third-stage
    experiments, we carried out an overall evaluation on the results in the second stage and selected two background colors (purplish red and yellowish orange) and a kind of frame color (separate frame colors), together with the original energy education website, to investigate the learners’ rating in terms of substantive aspects and feeling aspects on these three kinds of web pages.
    The findings of the three stages of experiments in this study indicate the following:
    1. College students’ learning effectiveness in energy knowledge for the energy education website with purplish red and yellowish orange as background colors is higher than that for the one with blue and green as
    background colors.
    2. College students’ visual fatigue for the energy education website with separate frame colors is higher than that for the one with non-separated frame colors.
    3. College students has better learning effectiveness in energy knowledge for the energy education website with purplish red and yellowish orange as background colors and with separate frame colors.
    4. The energy education website with purplish red and yellowish orange as background colors and with separate frame colors receives a higher rating in terms of substantive aspects than the one with the colors of the original website.
    5. The energy education website with purplish red as background color and with separate frame colors receives a higher rating in terms of feeling aspects than the ones with yellowish orange or with the colors of the original website.
    The findings of this study show that the learning effectiveness for the energy education website with purplish red and yellowish orange as background colors and with separate frame colors is not lower than that for
    the one with blue and green as background colors. In addition, the energy education website with purplish red and yellowish orange as background
    colors also receives a higher rating than the one with the colors of the original energy education website. Therefore, other colors like purplish red and yellowish orange may be considered to be used in the construction of an energy education website, which not only preserves the learners’ learning effectiveness for the energy education website but also allows the website to
    be distinguished from other energy education websites due to the difference in color, thereby attracting more learners to navigate and use the website.

    中文摘要 ................................................. i 目錄 .................................................. iii 表次 .................................................... v 圖次.................................................... vii 第一章 緒論 ............................................... 1 第一節 研究背景與動機 ................................... 1 第二節 研究目的 ......................................... 6 第三節 研究範圍與限制 ................................... 6 第四節 重要名詞釋義 ..................................... 8 第二章 文獻探討 ........................................... 11 第一節 色彩理論 ........................................ 11 第二節 網站框架色彩 .................................... 16 第三節 學習效益 ........................................ 19 第三章 第一階段實驗 ........................................ 23 第一節 主觀喜好度實驗 .................................. 23 第四章 第二階段實驗 ........................................ 29 第一節 能源教育網站實驗 ................................ 29 第二節 實驗數據分析 .................................... 37 第三節 綜合討論 ........................................ 51 第五章 第三階段實驗 ........................................ 55 第一節 網站評價實驗 .................................... 55 第二節 實驗數據分析 .................................... 59 第三節 網站評價討論 .................................... 62 第六章 結論與建議 .......................................... 63 第一節 研究結論 ........................................ 63 第二節 研究建議 ........................................ 66 參考文獻 ................................................. 67 一、中文部分 ........................................... 67 二、外文部分 ........................................... 71 附錄 .................................................... 75 附錄一 色彩主觀喜好度量表 ................................. 77 附錄二 正式問卷 .......................................... 78 附錄三 網站評價量表 ....................................... 84

    一、中文部分
    于富雲(2002)。教育網站的設計。教育資料與圖書館學,40(2),186-197。
    于富雲、謝孟達、陳引幹、連雅玲(2007)。全國高中生高溫超導科學競賽活動:教育網站評鑑:學習輔助性與功能完備性之差異研究。教育資料與圖書館學,44(4), 393-412。
    朱介英(1994)。色彩設計計劃。台北市:美工圖書社。
    朱祖祥、曹立人(1994)。目標─背景色的配合對彩色 CRT 顯示功效的影響。心理學報,26(2),128-134。
    朱彩馨(2002)。以科技中介架構探討線上學習成效之詮釋研究。國立中山大學資訊管理研究所博士論文,未出版,高雄市。
    江衍勳(1997)。企業建立網站的五大步驟 。全球網際網路雜誌,9,35-37。
    行政院環境保護署(2012)。環保義工-按年齡別。2012 年 9 月 27 日,
    取自 http://www.epa.gov.tw/FileDownload/FileHandler.ashx?FLID=19352.htm
    吳明清(1976)。國小兒童之認知型式及其對題解表現之影響。國立臺灣師範大學教育研究所碩士論文,未出版,台北市。
    吳東龍(2001)。網頁色彩配色與感覺意象之對應關係研究的建構─以個人網頁為例。國立交通大學應用藝術所碩士論文,未出版,新竹市。
    李天任(2000),非藝術性選配色方法之研究。載於中國文化大學舉辦之「色彩應用與色彩科學研討會」會議論文集(頁 73-86),台北市。68
    周斯畏(1999)。網路科技對教育的影響—學習環境、學習型式、師生互動、與教學內容的探討。中華管理評論,2(3),89-96。
    林書堯(1989)。色彩學。台北市:三民。
    林伯賢(1999)。國人色彩偏好之調查分析。藝術學報,64,1-10。
    林清泉(2000)。螢幕種類、環境照明、與文字/背景色彩組合對終端機視覺作業影響之研究。國立台灣科技大學工業管理所博士論文,未出版,台北市。
    林品章(2003)。台灣近代視覺傳達設計的變遷。台北市:全華科技圖書。
    洪明洲(1999,5 月),網路教學課程設計對學習成效的影響研究。載於國立中正大學舉辦之「遠距教學系統化教材設計國際研討會」會議論文集(頁 1-24),嘉義縣。
    洪碩延、漆梅君(2006)。視覺傳達設計中之符號理論。中國廣告學刊,11,70-84。
    徐易稜(2001)。多媒體呈現方式對學習者認知負荷與學習成效。國立中央大學資訊管理研究所碩士論文,未出版,桃園縣。
    崔美善(2007)。Web Layout Design -最優的版面風格設計。台北市:碩博文化。
    張柏駿(1997)。螢幕文字/背景亮度與色彩對視覺績效與主觀偏好影響之研究。國立台灣科技大學管理技術研究所碩士論文,未出版,台北市。
    張春興(2003),心理學原理。台北市:台灣東華。
    教育部(2011)。教育部補助大專能源科技人才培育資源中心計畫徵件事宜。2012 年 9 月 13 日,取自 http://www.energyedu.tw/AFile.php?cid=8&id=549.htm
    梁景紅(2006)。Web Designer:網頁設計關鍵 Idea。台北市:電腦人文化。
    莊錦昌(2001)。網頁介面使用性之探討與意象之研究。國立成功大學工業設計研究所碩士論文,未出版,高雄市。
    莊明振、羅英倫、孫宗凰、蔡佩真(2006)。產品設計要素對使用者情緒激發與偏好影響之模糊推論模式(I)。行政院國家科學委員會專題研究計畫成果報告(NSC 94-2213-E-009-074-)。新竹市:國立交通大學應用藝術研究所。
    許銘津、劉明洲(1997)。CAI 軟體色彩組合對不同特質學童記憶單字、片語與句子之影響。花蓮師院學報,7,427-447。
    許峻誠(2001)。網頁風格與視覺要素對設計評價影響之研究。國立交通大學藝術研究所碩士論文,未出版,新竹市。
    郭璟諭(2003)。媒體組合方式與認知型態對學習成效與認知負荷之影響。國立中央大學資訊管理研究所碩士論文,未出版,桃園縣。
    陳振甫(1995)。色彩傳達與設計。設計,61,38-41。
    陳明德(1997)。螢幕文字/背景色彩組合與相關作業特性對視覺績效與視覺疲勞影響之研究。國立台灣科技大學管理技術研究所博士論文,未出版,台北市。
    陳麗如、何榮桂 (1997)。Web-Title 之使用者介面設計。資訊與教育,64,
    21-28。
    陳俊宏、楊東民(1999)。視覺傳達設計概論。台北:全華科技圖書公司。
    陳建雄(1999)。色彩辨識度與應用在使用者介面設計上的探討。工業設計,27(2),58-63。
    陳彙芳、范懿文(2000)。認知負荷對多媒體電腦輔助學習成效之影響研究。資訊管理研究,2,45-60。
    陳順孙(2005)。多變量分析(第四版)。台北市:華泰文化。
    陳建雄、陳尤澤、簡佑宏(2006)。攜帶型行動通訊電腦介面之資訊呈現與色彩配置方式對使用者視覺搜尋績效之影響 。設計學報,11(1),23-39。
    傅惠筠(2008)。國立臺灣師範大學學生能源認知與能源態度之研究。
    國立臺灣師範大學工業教育研究所碩士論文,未出版,臺北市。
    黃朝盟、趙美慧(2001)。.com 的策略規劃與設計。台北市:商鼎文化。
    黃書倩(譯)(2003)。山中俊夫著。色彩學的基礎(色彩学の基礎)。台北市:六合出版社。
    楊永鳳(2007)。色彩密碼-專業設計的色彩美學。台北市:碁峰資訊。
    經濟部能源局(2006)。能源科技研究發展白皮書。2012 年 9 月 13 日,
    取自http://web3.moeaboe.gov.tw/ECW/populace/content/ContentLink.
    aspx?menu_id=473.htm。
    經濟部能源局(2011)。98 年全國能源會議。2012 年 9 月 27 日,取自
    http://yearbook.stpi.org.tw/pdf/2009/99-Feature%20report-3.pdf.htm
    經濟部能源局(2011)。中華民國 99 年能源統計手冊。2012 年 9 月 13
    日,取自http://web3.moeaboe.gov.tw/ECW/populace/content/wHand
    MenuFile.ashx?menu_id=144.htm。
    劉奕岑(2011)。臺灣行業別網站首頁之色彩比例研究(三)。美學與視覺藝術學刊,3,52-72。
    劉奕岑(2012)。臺灣行業別網站首頁之色彩比例研究(ㄧ)。樹德科技大學學報,14(1),217-242。
    歐秀明(1999)。應用色彩學。台北市:雄獅圖書。
    鄭昭明(2006),認知心理學:理論與實踐。台北市:桂冠圖書公司。
    龍開誠(2006)。室內空間色彩意象與與色彩偏好之研究。中原大學室內設計研究所碩士論文,未出版,桃園縣。

    二、外文部分
    Aggarwal, A. K., & Bento, R. (2000). Web-Based Learning and Teaching Technologies: Opportunities and Challenges. PA: Idea Group.
    Branch, R. M., Kim, D., & Koenecke, L. (1999). Online educational materials for use in instruction. Retrieved March 26, 2013, from http://www.oid.ucla.edu/units/tatp/old/lounge/pedagogy/onlinematerials-eric.htm
    Bruce, M., & Foster, J. J. (1982). The visibility of colored characters on colored background on view data displays. Visible Land, 32, 382-390.
    Burnham, R., Hanes, R., & Bartleson, C.J. (1963). Color: A Guide to Basic Facts and Concepts. NY: John Wiley.
    Eysenck, H. J. (1981). Aesthetic preference and individual differences. Psychology and the Arts, 12, 57-65.
    Fogg, B. J., Marshall, J., Laraki, O., Osipovich, A., Varma, C., Fang, N., et al. (2001). What makes Web sites credible? A report on a large quantitative study. Paper presented at the ACM CHI 2001 Conference on Human Factors in Computing Systems, New York.
    Galitz, W. O. (1997). The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques. NY: John Wiley & Sons.
    Hassenzahl, M., Platz, A., Burmester, M., & Lehner, K. (2000). Hedonic and ergonomic quality aspects determine a software’s appeal. Paper presented at the CHI 2000 Conference, New York.
    Heuer, H., Hollendiek, G., Kröger, H., & Römer, T. (1989). Die ruhelage der augen und ihr einfluß auf beobachtungsabstand und visuelle ermüdung bei bildschirmarbeit. Zeitschrift für experimentelle und angewandte psychologie, 36(4), 538-566.
    Keller, J. M. (1983). “Motivational design of instruction,” In C. M. Reigeluth (Ed.) Instructional design theories and models, Hillsdale, NJ: Erlbaum.
    Khan, B. H. (1997). Web-Based Instruction. NJ: Educational Technology Publications.
    Leidener, D., & Fuller, M. (1997). Improving Student Learning of Conceptual Information: GSS Supported Collaborative Learning vs. Individual Constructive Learning. Decision Support System, 20(2), 149-163.
    Lindgaard, G., Fernandes, G. J., Dudek, C., & Brownet, J. (2006). Attention web designers : you have 50 milliseconds to make a good first impression!. Behaviour and Information Technology, 25(2), 115-126.
    Ling, J., & Schaik, P. V. (2002). The effect of text and background colour on visual search of Web pages. Displays, 23(5), 223-230.
    Lyon, G. R., & Krasnegor, N. A. (2001). Attention,Memory,and Executive Function. Maryland : Paul H.Brookes Publishing Co.
    Mahnke, F. H., & Mahnke, R. H. (1987). Color and Light in Man-Made Environments. NY: Van Nostrand Reinhold Co.
    Marki, R. H., Maki, W. S., Patterson, M., & Whittaker, P. D. (2000). Evaluation of a Web-based Introductory Psychology Course: I Learning and Satisfaction in On-line Versus Lecture Courses. Instruments and Computers, 32(2), 230-239.
    Matthews, M. L. (1987). The influence of colour on CRT reading performance and subjective comfort under operational conditions.
    Applied Ergonomics, 18(4), 323-328. Murch, G. (1985). Colour graphics-blessing or ballyhoo? Computer Graphics Forum 4 (2), 127-135.
    Musen, G., & O’Neill, J. E. (1997). Implicit memory for nonverbal associations. Journal of Experimental Psychology: Learning, Memory and Cognition, 23, 1192-1202.
    Musen, G., & Viola, J. (2000). Attentional requirements for object-location priming. Psychonomic Bullin and Review, 7(4), 646-653.
    Newman, M. W., & Landay, J. A. (2000). Sitemaps, storyboards, and specification: a sketch of website design practice. Paper present at the Processes, Practices, Methods, and Techniques, NY.
    Nielsen, J. (2000). Designing Web Usability, Indianapolis : New Riders. Nielsen, J., & Tahir, M. (2002). Homepage Usability: 50 Websites Deconstructed, Indianapolis : New Riders.
    Osaka, N. (1985). The effect of VDT colour on visual fatigue in the fovea and periphery of the visual field. Displays, 6(3), 138-140.
    Pastoor, S. (1990). Legibility and subjective preference for color combinations in text. Human Factors, 32(2), 157-171.
    Powell, T. A. (2000). The Complete Reference-Web Design. CA:
    Mcgraw-Hill Osborne Media.
    Park, S., Choi, D., & Kim, J. (2004). Critical factors for the aesthetic fidelity of web pages : empirical studies with professional web designers and users. Interacting with Computers, 16 (2), 351-376.
    Robins, D., & Holmes, J. (2008). Aesthetics and credibility in web site design. Information Processing and Management, 44 (1), 386-399.
    Snyder, H. L. (1988). Image quality. In M. Helander (Ed.), Handbook of Human-computer Interaction (pp.437-474). Amsterdam: Elsevier science Publishers.
    Sanders, M. S., & McCormick, E. J. (1993). Arrangement of components within a physical space, Human Factors in Engineering and Design. NY : McGraw-Hill.Inc.
    Schmitt, B. H., & Simonson, A. (1997). Marketing Aesthetics : The Strategic Management of Brands, Identity and Imag. NY : The Free Press. Schenkman, B.N., & Jönsson, F.U. (2000). Aesthetics and preferences of web pages. Behavior and Information Technology, 19 , 367-377.
    Schaik, P. V., & Ling, J. (2001).The effects of frame layout and differential background contrast on visual search performance in Web pages. Interacting with Computers, 13(5), 513-525.
    Scherer, K. R. (2005). What are emotions? And how can they be measured? Social Science Information, 44(4), 693-727.
    Tinker, M. A., & Paterson, D. G. (1931). Studies of typographical factors influencing speed of reading. VII. Variations in color of print and background. Journal of Applied Psychology, 15(5), 471-479.
    Zajicek, M., Powell, C., & Reeves, C. (1998). A Web Navigation Tool for the Blind: Paper present at the Assets'98 Proceedings of the third international ACM conference on Assistive technologies, New York.

    無法下載圖示 本全文未授權公開
    QR CODE