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

Research of Analyzing the Web Page Layout Design by the Rule of Thirds

鄭月秀(Giffen Yueh-Hsiu Cheng) ； 藍穎筑(Ying-Chu Lan)

《設計學研究》 15卷2期 (2012/12) Pp. 103-131

https://doi.org/10.30105/JDS.201212.0006

摘要

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

關鍵字

網頁 ； 編排設計 ； 三分法

並列摘要

In recent years the rapid development of Internet 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 design collage students 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 ； the Rule of Thirds

參考文獻

Christine, S.(2002).Information Design Desk Reference.Menlo Park:Crisp Publications Inc..

DesignCharts (2006), “Top Ten Website for Weeks between 30 May 2010 to 1 August 2010”, website: http://www.designcharts.com (Accessed: 30 May 2010 ).

Elam, K.(2004).Grid systems: Principles of Organizing Type.New York:Princeton Architectural Press.

Kassarjian, H.(1977).Content Analysis in Consumer Research.Journal of Consumer Research.4(1),8-18.

Newman, M.,Landay, J.(2000).Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice.New York:ACM Press.