簡易檢索 / 詳目顯示

研究生: 王欽泉
論文名稱: 框架型網頁編排設計與意象之研究
A Study on Layout of Frame-Type and Image in Webpage
指導教授: 吳祖銘
學位類別: 碩士
Master
系所名稱: 圖文傳播學系
Department of Graphic Arts and Communications
論文出版年: 2008
畢業學年度: 96
語文別: 中文
論文頁數: 124
中文關鍵詞: 框架型網頁版面編排格線原理意象
英文關鍵詞: frame-type webpage, layout, grids, image
論文種類: 學術論文
相關次數: 點閱:152下載:33
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 本研究基於感性工學的理論基礎,將使用者對於框架型網頁所產生的意象感覺轉化成為設計要素的技術,使得設計者從事以導覽列為功能取向的框架型網頁設計同時,還能兼顧到使用者從視覺方面所產生的意象為考量,不僅保持框架型網頁的使用性(usability)優點,並導入使用者感性的認知,以增加網頁的正面評價,讓使用者在視覺效果及網站功能的雙重取向達到滿意,符合使用者對於網站的期望。
    本研究主要分為二階段:第一階段,廣泛收集框架型網頁樣本及形容詞語彙,最後共收集103個網頁樣本、42組形容詞語彙,經由Cluster分析選出4個意象評量問卷用的框架型網頁樣本及14個實驗用代表性框架型網頁樣本,並使用實驗問卷方式篩選出8組代表性形容詞語彙。第二階段,將14個代表性框架型網頁樣本與8組代表性形容詞語彙進行實驗及複迴歸分析,最後找出影響意象產生的設計要素類目為何。
    研究發現框架型網頁以「頂部導覽+頁面分割」、「左側導覽+頁面分割」兩種結構較符合使用性(usability)的原則,在網站實例中仍以此兩種結構為主,尤以採用「頂部導覽+頁面分割」此種結構的框架型網頁比例較高。而形容詞語彙經由因素分析得知,使用者對於框架型網頁的意象可用「獨特的-普通的」、「活潑的-呆板的」、「整齊的-混亂的」、「迅速的-緩慢的」、「嚴肅的-輕鬆的」、「具象的-抽象的」、「夢幻的-現實的」、「互動的-單向的」此八組形容詞語彙來涵蓋之。使用者對於框架型網頁意象方面,大部份影響來自於使用「頂部導覽+左右框架的結構方式」、「輔助線規劃版面」、「純文字的超連結形式」及「1:1至1:3的圖文比例」此四項設計要素類目。研究最後從框架型網頁的設計、設計要素類目的使用及意象三方面提出14項設計準則作為日後設計者參考使用。

    The research is based on the theories drawn from the study of Kansei engineering. Its purpose is to enable users to apply their designing techniques and translate that ability into successfully conveying the conceptual images of a frame-type webpage. The designer achieves the outcome of being able to focus on the function-oriented aspect of the webpage as well as to ensure the satisfaction in the conceptual image on the part of the user simultaneously. As a result, the designer makes good of the usability of a frame-type webpage by tapping into the user’s awareness on a sensual level; and this in turn, will generate ever-increasing positive feedback on the webpage. To meet the satisfaction level of the users in terms of their expectations on the website, it is crucial to impress them with respect to the visual effects as well as the user-friendliness of the webpage in question.
    The research was composed of two stages. The first one being the extensive compilation of frame-type webpage samples as well as the repertoire of adjective words. In the end, a total of 103 samples and 42 sets of adjective words were collected. Four questionnaires were created using the frame-type webpage samples through Cluster. Furthermore, 14 additional questionnaires were also created based on the representative frame-type webpage samples that are typically used for experimental purposes. Eight sets of representative adjective words were chosen based on the results yielded by the questionnaires. In the second stage, the 14 final representative frame-type webpage samples and the 8 sets of the representative adjectives words were repeatedly experimented and analyzed; as a result, the research was able to show the different types of the key design elements that can influence an individual’s conception of images he perceives.
    The research shows that the structures of 「top navigation + frameset」and「left navigation + frameset」are more in compliance with the principles of usability on a frame-type webpage. The actual sample is mainly composed of these two structures nonetheless. However, in comparison, the adoption of the structure of 「top navigation + frameset」 seems to be more frequent than the other. Regarding the analysis of the adjective word repertoire, we learned that the eight sets of adjective words that users use to describe their feelings conceived by the images conveyed by a frame-type webpage include: extraordinary versus typical, fun versus dull, orderly versus cluttered, fast versus slow, serious versus relaxing, concrete versus abstract, dreamy versus realistic. Last, but not least, interactive versus unengaged. The four key design elements that influence a user’s conception of the images perceived from a frame-type webpage are 「top navigation + right and left frameset」, 「grids」, 「text of hyperlinks」, and 「1:1~1:3 picture and text ratio」. In conclusion, based on the comprehensive studies done on the design of various frame-type webpage samples, usage of the key elements of design and their respective impacts brought onto the users; the research has yielded 14 guidelines for future designers’ reference.

    中文摘要 i 英文摘要 ii 第一章 緒論 第一節 研究背景與動機 1 第二節 研究目的與問題 4 第三節 研究範圍 5 第四節 研究流程 5 第五節 名詞解釋 7 第二章 文獻探討 第一節 全球資訊網 8 第二節 網頁設計相關研究 13 第三節 感性工學 32 第四節 意象的測定基礎與方法 35 第五節 文獻小結 40 第三章 研究方法及步驟 第一節 研究架構 42 第二節 網頁樣本分析 43 第三節 形容詞語彙選取 53 第四節 實驗進行 60 第五節 研究工具 64 第四章 資料分析 第一節 複迴歸分析 65 第二節 結果分析 68 第三節 結果與討論 85 第五章 結論與建議 第一節 研究結論 94 第二節 研究建議 101 參考文獻 103 附錄 108

    【中文文獻】
    王石番(1991)。傳播內容分析法:理論與實證。台北:幼獅。
    王開立(2000)。Pixel 時代。台北:桑格文化。
    矢野(2007)。Web Layout 設計的美學。(王煦淳譯)。台北:旗標。
    李俊宏(1996)。網頁設計原則的研究-以大專院校首頁設計為例。國立雲林科技大學工業設計研究所碩士論文。
    李星宏(2002)。台灣企業網站素質之前因後果-探索式研究。國立中正大學企業管理研究所碩士論文。
    柳閩生(1990)。版面設計。台北:幼獅。
    施威銘(2006)。Dreamweaver 8魔法書。台北:旗標。
    洪育修(2006)。電腦繪圖軟體討論區之網頁版面構成與使用者認知風格關係之研究。大同大學工業設計系碩士論文。
    許峻誠(2001)。網頁風格與視覺要素對設計評價影響之研究。國立交通大學藝術研究所碩士論文。
    莊錦昌(2001)。網頁介面使用性之探討與意象研究。國立成功大學工業設計研究所碩士論文。
    翁康容(2005)。網路廣播網頁元素配置對於網頁使用效果影響之研究。國立中山大學傳播管理研究所 碩士論文。
    梅宜冬(2004)。從感性觀點探討數位產品造形意象特質-以數位攝影機為例。大葉大學設計研究所碩士論文。
    梁景紅(2006)。Web Designer:網頁設計關鍵Idea。台北:電腦人文化。
    陳玉玲(2004)。國內外前七十五大企業網站之建構要素研究。輔仁大學應用美術學系碩士論文。
    陳珮瑩(2005)。網站視覺設計評量模式之研究。銘傳大學設計管理研究所碩士論文。
    崔美善(2007)。Web Layout Design。(碩博文化編譯)。台北:碩博文化。
    張春興(2003)。心理學原理。台北:東華書局。
    張依真(2002)。片頭動畫首頁構成要素內容分析之研究。銘傳大學設計管理研究所碩士論文。
    馮淑萍(2000)。全球資訊網頁視覺傳達之使用者介面設計要素研究-以企業
    形象網頁為例。雲林科技大學視覺傳達學設計研究所碩士論文。
    曾惠民(2003)。Pixel Style網站設計元素對使用者意象影響之研究。銘傳大學設計管理研究所碩士論文。
    黃堅厚(1992)。社會及行為科學研究法。台北:東華書局。
    黃俊英(2000)。多變量分析。台北:華泰出版社。
    黃美菁(2000)。行動電話偏好意象建構造形法則之研究。國立成功大學工業設計研究所碩士論文。
    黃朝盟與趙美慧(2002)。.com 的策略規劃與設計。台北:商鼎文化。
    黃心湘(2004)。台灣本土泡麵包裝之意象研究。中原大學商業設計研究所碩士論文。
    黃涵貞(2006)。高齡者對網頁色彩配色之感覺意象及喜好度研究。銘傳大學設計管理研究所碩士論文。
    楊國樞、文崇一、吳聰賢、李亦園編(1989)。社會及行為科學研究法。台北:東華。
    楊清田(2001)。包裝容器的喜好度調查研究。藝術學報,69,1-14。
    管倖生、林彥呈(2002)。以感性工學程序建構網頁設計系統之研究。設計學報,7(1),59-73。
    蔡明錡(2000)。電腦輔助產品造形設計模式於網際網路上之應用研究。國立成功大學工業設計研究所 碩士論文。
    歐上晉(2003)。網站首頁視覺設計要素與使用者滿意度之相關分析研究─以汽車製造業首頁為例。銘傳大學設計管理研究所碩士論文。
    【英文文獻】
    Aitken, J., Childerhouse, P. & Towill, D. (2003). The impact of product life cycle on supply chain strategy. International Journal of Production Economics, 85, 127–140.
    Daniel, J. (2000). Developing usable Web sites-a review and model, Internet Research: Electronic Networking Applications and Policy, 10(4), 295-307.
    Flavian, C., Guinaliu, M. & Gurrea, R. (2006). The role played by perceived usability, satisfaction and consumer trust on website loyalty. Information and Management, 43, 1-14
    Hsu, S.H., Chuang, M.C. & Chang, C.C. (2000). A semantic differential study of designers and users product form perception. International Journal of Industrial Ergonomics, 25, 375–391.
    Lai, H.H., Lin, Y.C., Yeh, C.H. & Wei, C.H. (2006). User-oriented design for the optimal combination on product design. Int. J. Production Economics, 100, 253–267.
    Galitz, W.O. (1997). The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques. New York: Wiley.
    Gerald, P. M.(2002). Application of traditional system design techniques to web site design. Information and Software Technology, 44, 507–512
    Jiao, J., Zhang, Y. & Helander, M. (2006). A Kansei system for affective design. Expert System with Application 30, 658-673
    Morris, M. & Ogan, C. (1996).The Internet as mass medium. Journal of Communication, 46(1), 39-50.
    Matsubara, Y. & Nagamachi, M. (1997). Hybrid Kansei Engineering System and design support, International Journal of Industrial Ergonomics, 19, pp. 81-92.Prabhu, P. (Eds.).
    Nagamachi, M. (1995), “Kansei Engineering: A new ergonomic consumer –oriented technology for product development”, International Journal of Industrial Ergonomics, 15, pp.3-11.
    Newman, M. & Landay, J. (2000). Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice. In Proceedings of Designing Interactive Systems (DIS 2000). pp. 263-274, ACM, New York.
    Nielsen, J. (2000). Designing Web Usability, Indianapolis, IN: New Riders.
    Powell, T. A. (2000). The Complete Reference-Web Design, Berkeley, California: Osborne/McGraw-Hill.
    Pearson, R. & Shaik, P. V. (2003). The effect of spatial layout of and link colour in web pages on performance in a visual search task and an interactive search task. International Journal of Human-Computer Studies, 59, 327-353.
    Stover, M. & Zink, S.D. (1996). World Wide Web Home Page Design: Patterns and Anomalies of Higher Education Library Home Pages, Reference Service Review, 24(3), 7-20.
    Veen, J. ( 1997). Hot Wired Style: Principle for Building Smart Web Sites, Wired Book Inc, San Francisco, California.
    【網路資料】
    95年數位落差調查,取自2006. 3. 15,行政院研究發展考核委員會:http://www.rdec.gov.tw/mp.asp
    2007年消費者網路使用行為調查,取自2007. 3. 27,資策會推廣處FIND:http://www.find.org.tw/find/home.aspx
    台灣網路資訊中心網路使用調查,取自2007. 3. 27,資策會資訊市場情報中心:http://mic.iii.org.tw/intelligence/
    2006年大型企業對外建置網站報告,取自2007. 4. 12,資策會資訊市場情報中心:http://www.find.org.tw/find/home.aspx

    QR CODE