影響網頁美感的視覺因素研究

摘 要：關于網頁美感的研究始于可用性研究的延展，但隨著人們對于其重要性的認識的不斷提升，從設計角度出發的相關研究正逐漸興起。一方面，現有的研究成果較為有限的同時，給出的設計規則也較為模糊抽象。因此借鑒其他領域的成熟理論，結合網絡界面的特點，尋找出影響網頁美學的因素，并總結歸納出相應的設計理論顯得十分重要。另一方面，從用戶真實的瀏覽行為，結合用戶的感知過程，更有利于影響網頁美感的視覺因素的發現。

關鍵詞：網頁美感；視覺因素；設計

1 研究背景

近年來，大量研究表明，視覺因素對于產品的用戶接受度有重要影響，由此引發了網頁交互設計對于美感體驗的重視。例如：Lindgaard和Dudek的研究結果表明，即使有大半部分的任務難以完成，用戶仍然對他們認為審美體驗較高的網站有較高的評價（Lindgaard Dudek， 2002）。Reeves、Nass以及Jung則表示人機交互本質上是一種社會行為，就如同樣日常溝通交流中，人們會對面容姣好的陌生人有所偏愛一樣，選擇網頁之時，人們也會偏愛審美體驗較高的網頁（Hoffmann Krauss，2004）。同時對于陌生的網頁，自打開網頁之時起，用戶平均會在5秒之內決定是否繼續停留在此網頁進行進一步的交互與使用。而對網頁第一印象的形成更是在50ms內便會形成，且這一印象有較高的穩定性（Lindgaard，Fernandes，Dudek， Brown，2006）。進一步的實驗結果更顯示，網頁未能形成具有吸引力的第一印象主要源于較低的審美體驗。因此，想要不斷吸引新的用戶使用網站，就必須在短時間內通過網頁界面為用戶提供較高的審美體驗。

2 國內外研究現狀

（1）網頁美感：如同美學的概念自產生以來就與物品的實用性聯系在一起一樣，對網頁美感的研究同樣是從可用性的角度出發開始的而非設計的角度。Neale及McCombe曾就如何設計出可用并且視覺愉悅的網站提出過自己的見解，但重點明顯傾向于功能性及可用性，而非設計（Lavie Tractinsky，2004）。Nielsen認為對于網頁設計有兩條基本準則，一為藝術展現，即設計師的個人展現；一為功能實現，即滿足用戶的需求（Nielson，2000）。他認為每個網頁都有其藝術性與趣味性的內在需求，用戶也同樣希望在瀏覽網頁時可以有愉快的體驗，但這些的重要性遠不及網站的功能性重要。因此，人們認為清晰及高效才是設計網頁的準則。

然而隨著研究的深入發現，用戶所追求的并不僅僅是清晰性。一些實驗結果頁顯示美感也是用戶選擇網頁的重要因素（Schenkman Jnsson，2000）。

Gait最早提出相關的問題，他認為有趣的界面可以更大程度的刺激用戶，并讓用戶保持在興奮與高效的狀態（Gait，1985）。而在近十幾年中，這類觀點正逐步深入人機交互領域，近期不斷涌現的相關研究也體現出人們對這一曾被忽視的領域的重視。Jordan認為在交互過程中，美學是決定體驗愉快與否的關鍵（Jordan，1998）。對于多種電腦產品，視覺呈現的質量可以影響用戶對其的態度（Kurosu Kashimura，1995；Tractinsky，1997；Tractinsky，Katz， Ikar，2000）。較高的視覺美感體驗更可以為網站吸引并留住用戶（Heimlich Wang，1999）。Lindgaard和Dudek的研究結果表明，即使有大半部分的任務難以完成，用戶仍然對他們認為審美體驗較高的網站有較高的評價（Lindgaard Dudek，2002）。對于美與丑，人們每時每刻都做著或有意識或無意識的判斷與選擇，而這其中大部分的選擇是處于無意識層面的，即使是極為“理性”的人在做出選擇時也很難不受到美學因素的影響（Karvonen，2000）。因此就如同樣日常溝通交流中，人們會對面容姣好的陌生人有所偏愛一樣，Reeves、Nass以及Jung認為在選擇網頁之時，人們也會偏愛審美體驗較高的網頁（Hoffmann Krauss，2004）。網頁視覺美感的重要性因此得到人們的重視。

（2）網頁美感的影響因素：Zettl認為人們審美的過程其實是人們檢測一系列視覺元素，并與之互動的過程。在這個過程之中，管著在其所處的視覺環境之中觀察、闡明、并進一步加強對事物的認識（Payumo et al.， 2008）。因此通過對視覺元素的合理安排，設計者就可以控制觀者所處的視覺環境，從而掌控觀者的感知和選擇。在與網站交互的過程之中，網頁就是設計師為用戶營造的視覺環境，合理利用所有的視覺元素，掌控用戶的視覺，就可以為用戶提供高質量的視覺體驗。

Djamasbi的實驗表明，視覺層次可以影響用戶瀏覽網頁的方式（Djamasbi，Siegel， Tullis，2011）。用戶在瀏覽網頁時，視線多集中在網頁的首個屏幕尺寸的內容之上。同時，在非任務引導的瀏覽方式之中，用戶多將視線集中在頁面的中心；而對于任務引導的網頁，即提供大量信息以幫助用戶達到特定目標的網站，人像的照片可以吸引用戶的注意力，而作為信息入口存在。因此他建議在商業網站中使用尺寸較大的圖片，尤其是名人的照片，以提高年輕人對網頁的評價（Djamasbi，Siegel， Tullis，2010）。Klett的研究結果則顯示，特定的視覺要素及呈現方式，如明亮或飽和度高的元素以及動態的元素和清晰的邊界所等可以引起注意和好奇，從而提高信息被關注的可能性（Klett，2002）。

相較于以上從信息傳達效率考慮出發而得出的視覺因素，不少學者也從設計的角度出發，提出了自己的見解。Ngo認為網頁美感的因素有十四個，即：平衡、對稱、均衡、整體、密度、比例、凝聚力、簡潔、整齊、經濟、和諧、韻律、秩序（Ngo，Teo， Byrne，2002）。Talia Laivie和Noam Tractinsky則通過對一系列實驗的結果進行總結，將影響網頁審美體驗的因素歸為兩類。一類為強調有秩序及清晰的設計的“經典美學因素”；而另一類為關注網頁的創造性與獨特性的“表現美學因素”（Lavie Tractinsky，2004）。而視覺的清晰性和豐富性也同樣被認為是影響用戶審美體驗的重要因素。視覺上簡潔的網頁也更易為用戶帶來美的體驗（Michailidou，Harper， Bechhofer，2008）。

雖然對于影響網頁美學因素的研究已然興起，但或仍偏重于界面效能，或過于模糊，難于遵循。在對網頁美學重要性不斷提到的同時，人們對于更為清晰并較易遵循的設計原則的需求在不斷增加。參考如繪畫、建筑等其他領域的成熟理論，結合網絡界面的特點，尋找出影響網頁美學的因素，并總結歸納出相應的設計理論顯得十分重要。

（3）相關研究方法：一些學者站在美是由客觀因素決定的基礎之上，希望通過實驗來驗證某單一元素或形式對觀者行為的影響，以尋求美的普遍規律。這類實驗出現于19世紀，以較為科學理性的方式分析影響美的因素（Lavie Tractinsky，2004）。其中Berlyne的理論對此類研究頗具影響，即認為只有將元素割裂，逐一的進行控制，并對其對觀者的影響進行獨立的學習才可以真正理解美感是如何形成的。他認為每個元素的最終美感表現與其喚醒潛質之前成倒U型曲線對應關系（Berlyne，1974）。然而隨著研究的深入，人們逐漸認識到將對象作為整體認知或許比割裂地看待事物的單一特性更為有意義。Arnheim等人也認為各項因素共同作用所形成的平衡比單個因素對整體美感的影響更大（Lavie Tractinsky，2004）。

因此有些學者另辟蹊徑，將被評價的作品作為一個整體的同時，嘗試從更高的層面探尋并歸納影響人們對美的感知的因素。這類研究相較于作品中各因素的客觀特征而言，更關注于人們的感知過程。基于Pickford的研究，Hussain將美感的感知過程分為三個階段：第一階段為“情感評價”，即由刺激物帶來的第一直觀印象；第二階段為“感知評價”，包括對刺激物細節及特性的整體感知；第三階段為“美學評價”，即綜合前兩階段的評價所得出的整體評價（Lavie Tractinsky，2004）。

鑒于現代美學理論，美的感知同時受刺激物客觀屬性及觀者主觀的雙重影響，兩種研究方法對于進一步探究網頁的美感均有幫助。然而對于基于網頁美感的研究目前多集中在對客觀因素的研究上，鮮有將主觀感知過程考慮在內的。在諸如眼動儀等現代儀器及技術快速發展的今天，借用相關技術，以用戶真實的瀏覽行為為依據，以其主管感知為指導，將會為此類研究帶來更多發現。

3 總結

本文通過對相關文獻的整理總結發現，相較于貫穿于人類始終的對于美學的探究，對于網頁美學的研究僅有短短十幾年的歷史。此類研究始于可用性研究的延展，但隨著人們對于其重要性的認識的不斷提升，從設計角度出發的相關研究正逐漸興起。現有的研究成果較為有限的同時，給出的設計規則也較為模糊抽象。因此借鑒其他領域的成熟理論，結合網絡界面的特點，尋找出影響網頁美學的因素，并總結歸納出相應的設計理論顯得十分重要。

同時，鑒于現代“美的感知同時受刺激物客觀屬性及觀者主觀的雙重影響”的美學理論，以用戶的真實瀏覽行為及感知過程為依據，相較于對網頁上所呈現的視覺因素，分析用戶所感知的視覺因素將會為相關領域的研究帶來更多的發現。

參考文獻：

[1] Berlyne，Daniel E.（1974）.Studies in the new experimental aesthetics：Hemisphere Publishing Corporation.

[2] Djamasbi， Soussan， Siegel， Marisa， Tullis， Tom. （2010）. Generation Y， web design， and eye tracking. International Journal of HumanComputer Studies， 68（5）， 307323.

[3] Djamasbi， Soussan， Siegel， Marisa， Tullis， Tom. （2011）. Visual hierarchy and viewing behavior： An eye tracking study HumanComputer Interaction. Design and Development Approaches （pp. 331340）： Springer.

[4] Gait， Jason. （1985）. An aspect of aesthetics in humancomputer communications： pretty windows. Software Engineering， IEEE Transactions on（8）， 714717.

[5] Heimlich， Joe E， Wang， Katy. （1999）. Evaluating the structure of web sites.

[6] Hoffmann， Ralf， Krauss， Kirstin. （2004）. A critical evaluation of literature on visual aesthetics for the web. Paper presented at the Proceedings of the 2004 annual research conference of the South African institute of computer scientists and information technologists on IT research in developing countries.

[7] Jordan， Patrick W. （1998）. Human factors for pleasure in product use. Applied ergonomics， 29（1）， 2533.