網頁視覺設計相關研究

網頁要能吸引瀏覽者的注意，是建立網頁時的共同目標。Newman與Landay (2000)指出網頁視覺設計應運用包括色彩、影像、文字、編排等視覺要素使畫面 具吸引力，達到有效資訊傳遞目的。因此，如何將豐富的資源訊息透過適當的網 頁設計來吸引讀者目光，並產生良好第一印象就顯得相當重要(Nielsen, 2000)。

一、 網頁視覺設計

（一） 視覺吸引力（Visual Attractiveness）

視覺吸引力係指刺激視覺注意的過程中，所產生的感知視覺聯繫(Lindgaard, 2007)。視覺吸引力為畫面構成之具美感、張力與視覺特性，是一種內在感知的 反應，即人類會根據不同理解與視覺刺激，對視覺注意結果產生不同的解讀。以 版面設計而言，Heijden(2003) 認為視覺吸引力是個人觀看網頁的美感程度，視 覺吸引力越高的網站，有助讀者感知網站實用性、易用性與享樂性。

過去的研究指出，人的視覺會在接觸網頁的o.o5秒內即決定對於該網頁的喜 好與感興趣項目(Lindgaard, Fernandes, Dudek, & Brown, 2006)。而第一眼接觸網 站時對於視覺的吸引力是視覺駐留的關鍵，也影響使用者對該網站產生的使用動 機(Sutcliffe, 2002)。過去研究歸納吸引人的網頁特徵包含：有趣、良好設計、色 彩配置、整體佈局、想像力、滿意度及感知易用等(Cao, Zhang, & Seydel,2005；

Heijden, 2003；Kim, 2008；Lindgaard, Dudek, Sen, Sumegi, & Noonan, 2011；

Lindgaard et al., 2006)。換言之，視覺吸引力是瀏覽者對網頁整體評價是否具美 感的最主要影響因素，也是決定網站質量與是否會吸引瀏覽者進一步到訪的重要 影響因素。意即瀏覽者注視網頁畫面時感受的是整體視覺印象所呈現的氛圍，當 視覺吸引程度越高，則越能引起瀏覽者的正面評價(Moshagen & Thielsch, 2010；

柯佑欣，2010)。

18

（二） 美感設計（Design Aesthetics）

Cyr 及 Ivanov (2006) 對美感設計的定義為瀏覽者對於視覺設計持續於情 感上所投注的吸引力，而網頁美感設計則是藉由色彩、文字、圖像、佈局等視覺 元素傳遞(Li & Yeh, 2010)。在美學辭典中對於美感的詮釋為由客觀的審美屬性，

所引起人在包含感受、知覺、想像、情感及思維等心理功能上的愉悅狀態(王世 德，1987)。

研究指出，美感在內在層次上亦能影響使用者的認知易用性、滿意度與愉悅 感主觀評價(Li & Yeh, 2010；Moshagen, 2010)。易用性指的是版面整體感統一與 單純，訊息容易傳遞給使用者(Nadkarni & Gupta, 2007)；滿意度與網頁是否易於 瀏覽具有關聯(Braddy , Thompson , Wuensch, & Grossnickle, 2003)；美感愉悅使 人容易信任，相對表示其服務具有可靠與安全性。因此，美感亦與信譽、信任與 安全具有關聯(Robins & Holmes, 2008；Li & Yeh, 2010)。Robins等人(2010)針對 31個健康資訊網站的視覺美感偏好研究指出，在網頁設計之初有必要先瞭解使用 者如何被網頁設計影響，在版面編排上應以使用者為中心，並設計可滿足使用者 需求之友善設計，以吸引使用者注意並幫助使用者獲得更多可靠的訊息。顯然網 頁視覺美感在使用者評價中起著重要的作用。

（三） 廣告圖片與美感的關聯

圖片在整體網頁視覺中具增強網頁美感作用，尤其是高品質圖片更能夠引起 注意並具有效傳遞訊息，也能提高使用者對於整體網站的滿意度(Dahal, 2010；

Oh, Fiorito , Cho, & Hofacker, 2008)。Schenkman 及 Jönsson 針對網頁美學與喜好 的研究發現，使用者傾向喜好網頁上有較多的圖表、注重網頁的流暢度以及美感 等因素(Schenkman & Jönsson, 2000)。

Nielsen(2010) 指出，能吸引人們注視的網頁圖像具有以下特徵：(1)色彩具 有較高對比度與較好品質；(2)版面圖片尺寸比例合宜；(3)與網頁內容具有高度 相關；(4)有吸引人的元素；(5)沒有過多細節與易於理解。

19

因此，圖像除具有吸引使用者注意的特徵外，在針對年紀介於18-31 歲的 Y 世代使用者的眼動研究指出，Y 世代族群特別重視網頁美學(Djamasbi, Siegel, &

Tullis, 2010)。其中大圖像、小文本、直覺搜索框及名人圖像等為影響 Y 世代使 用者視覺吸引力的重要特徵；並且圖像的質感與螢幕上的呈現視覺感受亦為影響 因素。具體而言，在講求快速有效傳遞訊息的服務中，圖片在版面中的編排佔有 重要影響成分。

（四） 完形組織法則（Gestalt）

完形心理學(gestalt psychology)又稱「格式塔心理學」，係由德國心理學家 Max Wetheimer於1912年創立。完形心理學派中的「完形」有「整體結構」或「完 整型態」的概念，認為個體會自然組織或分斷訊息，因而給予人的印象是超越部 分的總和。完形心理學的基本理論為部分之總和不等於整體，因此整體不能分割，

並且整體是由各部分所共同決定(鄭麗玉，2006)。完形心理學派以Gestalt為理論 主軸，主張人類對視覺圖像的認知，是通過知覺系統組織後的型態與輪廓，並非 所有各自獨立部分的集合。

完形心理學的視覺法則中，主要包含以下幾項特性(Robert J. Stemberg/李玉 琇、蔣文郝譯，2006)：

(1) 圖與地(figure-ground):在知覺中主體圖形較為突出，視野中其他部分退 後變成背景。

(2) 接近性(proximity):人類知覺外在各種物體時，易將彼此接近的物體視為 群組。

(3) 連續性(continuation):人類傾向知覺到平順的流動或連續的形狀，而非中 斷或不連續。

(4) 封閉性(closure):人類傾向將未完成的物體，視為封閉或完成。

(5) 簡單性(simplicity):人類傾向將所見物體由中央分開而形成鏡像。

20

(6) 相似性(similarity):人類傾向利用物體彼此之間的相似性進行歸類。如彼 此間的形狀、屬性、動作、方向、色彩、尺寸、意義接近時，容易被視 為彼此之間具有關聯而形成一個整體。

藉由完形心理學所提出的理論和觀點，可以得知網頁設計中圖片在視覺中扮 有重要的角色。因此，本研究在探討圖書館網站首頁廣告圖片在不同版面編排的 位置時，完形視覺法則中的接近性與相似性，與視覺元素彼此之間的關係，也在 設計本研究實驗用圖書館網站首頁時納入考量。

二、 網頁視覺設計原則

（一） 版面編排（Layout）

網頁版面編排(layout)主要的意義在於如何將構成網頁的要素，作整體且適 當的安排。版面編排在英語中稱之為Layout，係由 lay 和 out 兩字組成，lay 具有 設置、鋪設、制定計劃之意，out 則有顯現的意思。因此，layout 是指配置、規 劃的意思(南雲治嘉，2010)。版面編排主要目的在於將文字、圖像及色彩等視覺 元素，藉由視覺的整合配置，使得所設計的內容變得更為生動易讀，以達賞心悅 目的傳播溝通目的(楊勝雄，2003)。

Stover 及 Zink(1996) 認為，網站編排須重視瀏覽者視覺上的興趣與直覺溝 通方式，以視覺性的層次引導使用者易於瀏覽，以提升對重要訊息的注意。除此 之外，也應能引起瀏覽動機與降低認知負荷，並具有協助記憶、理解的功能(李 興宏，2002）。

林俊良(2004) 指出，進行網頁設計版面編排時除了應以訊息傳達為首要前 提之外，也應兼顧版面的視覺性、審美性，並且其中主從關係、視覺動線與空間 性等原則亦須掌握。主從關係係指版面中能展現何者為主角，讓使用者對於內容、

主題一目瞭然；視覺動線則是指版面視覺的流暢性、順序性與系統性；空間性原 則除了可襯托主題外，也有隔離干擾要素、突顯主題，以及均衡調和的效果(楊

21

勝雄，2002)。此外，主題明確、使用便利、直覺的版面配置、具視覺引導、律 動感、考量視覺複雜度、應用編排原理、訊息清楚等，亦是影響使用者瀏覽偏好 的重要因素(林价興、王年燦，2006)。

Sutcliffe(2002) 的研究指出，一致性的視覺風格，注重版面結構與佈局和對 稱性，是引起使用者注意力的關鍵。換言之，好的網站呈現並非僅是將視覺元素、

資訊緊密組合在一起而已，重要是設計內容呈現一致，並且具有令人賞心悅目的 使用介面，重視使用者對於版面的整體意象。

版面編排除參考設計原則與營造視覺美感外，螢幕尺寸大小及解析度的限制，

亦須加以考量，避免瀏覽者被版面編排所影響，以提高使用者瀏覽網頁的注意力 (Tullis, 1998)。Catledge 及 Pitkow (1995) 觀察瀏覽者觀看網頁的頻率與模式，

提出網頁版面設計的方針包括：（1)網頁中過多連結及繁雜資訊呈現，將導致瀏 覽者需花費過多時間來獲得相關資訊，此一問題可利用圖像呈現或調整螢幕空間 方式解決；（2）將相同性質文件或項目聚集，以減少瀏覽者在網頁瀏覽過程中迷 失；（3)針對不同層級使用者提供不同服務；（4）定期針對系統進行評估，重視 瀏覽者的滿意度；（5)依據多數使用者最常瀏覽路徑進行記錄與追蹤，提供路徑 指引。

（二） 網頁版面編排與訊息傳遞

網頁版面編排雖需面面俱到，但進行之初最重要的是瞭解如何有效傳達訊息 給使用者？良好的網頁編排設計，可提高非語言溝通（Nonverbal Communication）

效益。Stover 及 Zink (1996) 認為網頁版面若能針對文字、圖像、符號、色彩 等視覺要素進行精心安排，不只能引起瀏覽者的注意及興趣，更能使訊息更迅速 傳遞與被解讀。

人類大腦有立即思維任務最多不超過七大類之心理學法則，此一魔術數字七 加減二心理學法則係由George A.Miller 於 1956 年所提出(Miller, 1956)。該法則 認為人一次能掌握的事情約為七個，因此也被運用至網頁編排上。此外，如何建

22

立明確資訊清楚的版面編排設計，才能達到效用與目的，整理如下(Nielsen, 2010；

雲南治嘉，2010):

（1）需考量人們訪問這個網站的目的?

（2）需考量機構希望人們訪問這個網站時注意什麼與做什麼?

（3）需考量網頁設計的優勢版面(吸引用戶注意)區域為何?

（4）需考量運用視覺要素使網頁視覺設計吸引力，資訊易於理解 (Newman & Landay, 2000）。

因此，版面編排和設計的效用與目的應認清各自目的，再進行版面編排，才 能完成有效果的版面設計。

23