框架型網頁編排設計與意象之研究

A Study on Layout of Frame-Type and Image in Webpage

王欽泉(Qin-Quan Wang)

指導教授 ： 吳祖銘

國立臺灣師範大學/科技學院/圖文傳播學系/碩士(2007年)

摘要

本研究基於感性工學的理論基礎，將使用者對於框架型網頁所產生的意象感覺轉化成為設計要素的技術，使得設計者從事以導覽列為功能取向的框架型網頁設計同時，還能兼顧到使用者從視覺方面所產生的意象為考量，不僅保持框架型網頁的使用性(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.

並列關鍵字

frame-type webpage ； layout ； grids ； image

參考文獻

黃堅厚（1992）。社會及行為科學研究法。台北：東華書局。

黃心湘（2004）。台灣本土泡麵包裝之意象研究。中原大學商業設計研究所碩士論文。

楊清田（2001）。包裝容器的喜好度調查研究。藝術學報，69，1-14。

管倖生、林彥呈（2002）。以感性工學程序建構網頁設計系統之研究。設計學報，7（1），59-73。

洪育修（2006）。電腦繪圖軟體討論區之網頁版面構成與使用者認知風格關係之研究。大同大學工業設計系碩士論文。