以三分法解構網頁編排設計之研究

A study of analyzeing the web page layout design by the rule of thirds

藍穎筑(Ying-Chu Lan)

指導教授 ： 鄭月秀

元智大學/資訊學院/資訊傳播學系/碩士(2011年)

https://doi.org/10.6838/YZU.2011.00078

摘要

近年來，網路時代的蓬勃發展，使閱讀有了多樣性的選擇。透過網路平台，網頁能在短時間內傳遞大量、即時的資訊給使用者。但由於現今網頁設計的構圖與編排，並無具體及明確的研究準則以供參考，導致現行的設計者經常使用直覺性的編排習慣，往往錯失抓住使用者目光的機會。因此如何對網頁進行良好的編排，將訊息統整、清楚傳遞給使用者，是網頁設計中相當重要的議題。
本研究從DesignCharts網站中，擷取了78件優秀樣本作為分析樣本，從中測量不同的網頁構成對使用者所產生的感性認知及喜好影響，並透過內容分析與問卷調查的交叉比對，提出以「主視覺位置」、「圖文比例」、「留白量」、「整體構圖編排」等編排元素應用於首頁設計的設計原則。主要結論為：（1）「主視覺位於畫面中央」的構圖，能有效提升使用者對畫面意象的“特別感”。（2）「圖大於文」的構圖比例，能有效提升使用者在閱讀畫面時的“容易感”。（3）「40%~60%」的留白空間，能提升使用者在觀看畫面時的“簡潔感”，但效能仍有進一步探討的空間。（4）「主視覺中間，圖大於文，40%以上」的整體構圖編排，能有效提升使用者對網頁整體編排的“流行感”及 “喜愛感”。

關鍵字

網頁編排設計 ； 內容分析法 ； 問卷調查法 ； 三分法

並列摘要

The rapid development of Internet in recent years has offered us with a diversification of reading choices. The web pages are able to transmit large numbers of real-time information to users through the Internet platform. However, as the current composition and layout of web page design are lacked of specific and precise research guidelines for references, they often cause the designers to use the intuitive customary habit in designing and this prone to missing the opportunity to seize users’ attention. Therefore, how to lay out the web pages well and convey the integrated messages to users clearly is an important issue in web page design.
This study retrieved 78 outstanding samples from Design Charts website to serve as the analytical samples. The impact of emotional awareness and preferences on different web page compositions on users were measured, and proposals were made on “main visual position,” “graphic and text proportion,” “blank capacity,” “overall composition layout,” and other layout elements were cross-examined through a content analysis and a questionnaire survey to work as the design principles of web page design. The study discovered that: (1) The composition with “main visual position at the screen center” was able to enhance the “special feeling” of users on screen image effectively. (2) The composition proportion of “diagram bigger than text” was able to improve the “easy feeling” of users on reading the screen. (3) A blank space of “40%~60%” was able to upgrade the “simplicity feeling” of users while watching the screen, but there was still room for further exploration on the effectiveness. (4) The overall composition layout of “main visual position at the center, diagram bigger than text, and blank space larger than 40%” were able to improve the “popular sense” and “love feeling” of users on the overall layout of web pages.

並列關鍵字

web page layout design ； content Analysis ； questionnaire survey ； the rool of thirds.

參考文獻

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

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

胡淑珍（2010）。以型態構成要素與意象分析進行手提音響之外觀設計。先進工程學刊，5，119-128。

王翠蘭（2010）。感性工學應用於線上購物網站使用者介面設計之研究。工業設計，30，44-49。

許峻誠、朱若慈（2010）。個人化部落格介面之意象與偏好分析。工業設計，38，108-113。