美感情緒與網頁視覺信息的關係研究

博士論文

美感情緒與網頁視覺信息的關係研究

The Relationship between Aesthetic Emotion and

Visual Information of Webpages

研 究 生／蔡 子 瑋

指 導 教 授／莊 明 振 博士

協 同 指 導／王 鼎 銘 博士

The Relationship between Aesthetic Emotion and

Visual Information of Webpages

研 究 生：蔡 子 瑋

Student: Tzu-Wei Tsai

指導教授：莊明振 博士

Advisor: Dr. Ming-Chuen Chuang

協同指導：王鼎銘 博士

Co-Advisor: Dr. Ding-Ming Wang

國立交通大學 應用藝術研究所

博士論文

A Dissertation

Submitted to Institute of Applied Arts College of Humantities and Social Sciences

National Chiao Tung University in partial Fulfillment of the Requirements

For the Degree of Doctor of Philosophy

June 2009

Hsinchu, Taiwan, Republic of China

美感情緒與網頁視覺信息的關係研究

研究生：蔡子瑋 指導教授：莊明振 博士 協同指導：王鼎銘 博士 國立交通大學 應用藝術研究所 博士班

摘要

網頁是結合文字、圖像、色彩的視覺媒體，具有整體性及個別性的信息傳達效果， 引起使用者情緒上的感受，產生對其美感的評價。因此本研究主要目的在以信息美學 角度，探討網頁美感情緒與評價構成、網頁視覺風格形成、網頁視覺信息與複雜性的 構成、美感情緒與網頁視覺信息的關係及使用者特質對網頁視覺信息評估，及網頁美 感情緒影響的探討。 本研究整合美學理論、情緒理論、信息理論及複雜性的相關研究及文獻，建立網 頁美感特質、美感情緒與視覺信息的研究基礎，進行兩項探索性研究及三項實證研究。 相關研究方法與結果如下： z 網頁的美感情緒探索：以質性研究方法對使用者對網頁美感情緒的反應進行探討， 以了解網頁美感情緒的影響因素及架構。研究結果發現，以使用者觀點，影響美感 情緒的網頁元素包括網頁視覺元素的感知強度、變化性、使用性、功能服務等，網 頁美感情緒需包含了美感心理因素及人因性因素。 z 網頁視覺風格的形成機制：主要是以設計專家觀點獲得主要構成網頁的元素，以信 息熵的機率分析法，決定構視覺元素的信息率相關係數，來探討某種風格形成時的 信息的形成機制。研究結果提出六種網頁視覺風格(資訊型、融合型、對比型、水平 型、焦點型及幾何型)，視覺特徵因素決定的次序。 z 網頁視覺信息與複雜性研究：根據信息理論，以信息熵主客觀量測法，探討網頁主 客觀複雜性之間的關係。研究結果建構以衝突性、複雜性、新奇性及零散性等因子 構成網頁視覺信息的迴歸關係模式，及以文字數、字型數、色相數、圖像數、連結

及專業背景，對網頁整體視覺信息量及信息因子的評估沒有差異。 z 網頁美感情緒與評價：依探索性研究結果建置美感情緒量表，並進行網頁美感評價 量測。研究結果發現美感情緒包含愉悅情緒、偏好反應、自主感受及喚起情緒，並 建置以美感情緒構成的網頁美感評價迴歸關係模式。此外，研究結果發現使用者外 內向與情緒穩定性是影響對網頁美感情緒的重要因素。較外向或情緒較穩定者，有 較高的偏好反應及喚起情緒；性別對愉悅情緒與自主感受有影響；專業背景對網頁 美感情緒的反應會產生差異。 z 美感情緒與網頁視覺信息之關係：本研究以信息率量表量測網頁的視覺信息，並以 美感情緒量表式量測觀者網頁美感情緒反應，探討網頁視覺信息與觀者美感情緒反 應的影響及兩者間的關係，研究結果建構以網頁信息因素來預測美感情緒的模式， 並結合網頁信息、美感情緒及網頁主客觀視覺複雜性的相互關係，得到網頁信息與 美感情緒的關係模型，作為情意運算設計的基礎。 本研究以信息熵的方法，建構美感情緒及網頁視覺信息的關係，並提出使用者特 質對網頁視覺信息評估，及網頁美感情緒與評價的影響，建立網頁信息美學的理論， 作為網頁情意運算設計系統開發的基礎，提出之研究建議提供網頁設計師在實務設計 工作上之應用。 關鍵字：視覺信息、視覺複雜性、美感情緒、美感評價、網頁、信息熵

The Relationship between Aesthetic Emotion and

Visual Information of Webpages

Student: Tzu-Wei Tsai Advisor: Dr. Ming-Chuen Chuang Co-Advisor: Dr. Ding-Ming Wang

Institute of Applied Arts National Chiao Tung University

Abstract

Websites contain multiple visual stimuli. The visual complexes presented on webpages result in diverse levels of information uncertainty and induce viewers’ emotional responses and aesthetic evaluation.The aim of the research is to study the relationship between aesthetic emotion and visual information of webpages from the view of information aesthetics theory. The research issues grounded on the literature review about aethetics theory, emotion theory and information theory. The research involves two exploratory studies and three empirical studies. They are stated as follows:

z A study of visual information and complexity of webpages: The density and variety of webpages are computed through entropy equation. Result of the study demontrates the relationship between the objective computation and the subjective evealuation of visual complexity.

z An information entropy approach to the formation of web style: The entropy analysis is to realize the distribution of disorder over certain parameters; therefore, it is the index to figure out the complexity of the system and the interaction between variables.This study, is to analyze the the formation of web style with entropy approach. The exploratory result is to propose the decision mechanism of elements as reference for forming 6 web styles.

z A study of visual information and complexity of webpages: The aim of the study is to construct the framework of visual information of webpages. The objective computing of visual information of webpages is conducted through Shannon’s entropy equation.

information rate scale. Result of the study demontrates the regression model of visual information of webpages. Users’ traits have no effect on the evaluation of visual information of webpages.

z A study on aesthetic emotion and evaluation of webpages: Aesthetic evualuation of webpages is measured by aesthetic emotion measurement developed in the study. Result of the study demonstrates the regression model of aesthetic emotion and evaluation of webpages.Moreover, users’ extraversion and emotion stability affects aesthetic emotion responses to webpages.Gender has effects on pleasure and dominance emotion. Specialty training also has effects on users’ aesthetic evaluation of webpages.

z

A studuy on the relationship between aesthetic emotion and visual information of

webpages:

This study explored participants’ aesthetic emotional responses related to visual information of websites in the ground of information aesthetics. Participants evaluate information and respond to instruments. Result of multiple regression analyses suggest that the regressional correlations exist between the aesthetic emotions invoked in the viewers and the visual information and provide the basis for affective computing design of websites

To conclude, the research may be of importance in explaining the relationship between aesthetic emotion and visual information of webpages in information entropy approach, as well as in providing web researchers and designers with an understanding of how visual elements composed of visual information and complexity of webpages relate to users’ aesthetic emotion responses. The achievements of the research grounded the visual information aesthetics and the affective computation of webpages. Additionally, the proposed research suggestions will be applicable to the practical design work.

Keywords: visual information, visual complexity, aesthetic emotion, aesthetic evaluation, webpage, entropy

誌謝

本論文得以完成，要感激指導教授莊明振教授，在學生研究困頓之際，願付出心 力與時間，悉心耐心指導，包容理解學生之不足，給予如父般的關愛，每每踏出莊老 師研究室，都感到滿滿學習的喜悅。莊老師治學的風範、淵博的學識及活力十足的生 活態度，無論是在教學、做人處事上，皆為我今生學習之典範。感謝在應藝所博士研 究生涯，以生命陪伴我們的張恬君教授，即使身體因病孱弱之際，仍記念著給予學生 溫絢的鼓勵，張老師生命勇士的姿態，永留我心。感謝王鼎銘教授，在論文方法及組 織上的提醒，解開學生研究思考的困惑。感謝論文口試委員陳俊宏教授、嚴貞教授、 賴雯淑教授，於百忙中審閱論文，提供諸多寶貴意見，使本論文得以斧正缺漏，內容 更周延完整。 感謝交大應藝所鄧怡莘教授、陳一平教授、林盛宏教授等諸位師長，對我在課業 中的教導；感謝同窗好友惠瑜、偉明、鈺涓、俊智、芳武、華憫、家成、麗真；學弟 妹明勳、俊瑋、明鴻、英倫等等，在研究及論文撰寫過程的學術討論與協助，及情感 的分享，都使我在這段博士研究期間，更為豐足而美好。 感謝教學學校的李淙柏校長、王兆華老師、游耿能老師、游曉貞老師、黃鐉津老 師、謝寶泰老師、連德仁老師、趙樹人老師及其他同仁的加油惕勵，使我有持續的動 力； 感謝楊祐傑老師統計的諮詢；感謝主內好友 Lisa 在研究及口試期間的守望與陪伴； 感謝好友珊珊、本麗、姿瑤、純禎，對研究調查時給予的協助，與生活喜憂的分耽。 感謝我的家人，爸爸、媽媽、婆婆，對我的愛與關心；凱劭、姐姐、姐夫、弟弟 對我的包容；柔柔、真真及小潔，如天使般的歡笑。 感謝主，能讓我在這段期間，認識經歷主，體會從神而來的愛與恩典。「這莫大 的能力，乃是出於上帝」（哥林多後書 4 章 7 節）。 蔡子瑋 謹誌 國立交通大學應用藝研究所 中華民國九十八年六月

目次

摘要... i Abstract ... iii 誌謝... v 目次... vi 圖目錄... xiii 表目錄... x 第 1 章 緒論... 1 1-1 研究背景與動機... 1 1-2 研究目的... 3 1-3 研究流程與架構... 4 1-4 研究範圍與限制... 7 1-5 名詞解釋... 8 第 2 章 文獻探討... 9 2-1 美感與情緒... 9 2-1.1 美學理論 ... 9 2-1.2 情緒理論 ...11 2-1.3 情緒的量測 ... 15 2-2 網頁視覺信息與複雜性... 17 2-2.1 信息理論 ... 17 2-2.2 視覺複雜性 ... 20 2-2.3 信息的量測 ... 30

2-3.2 性別 ... 38 2-3.3 專業背景 ... 38 2-4 美感情緒與視覺信息的關係... 39 2-5 小結... 42 第 3 章 網頁美感情緒探索... 44 3-1 研究目的... 44 3-2 研究方法與步驟... 44 3-3 研究結果... 45 3-3.1 引起興趣及注意的網頁視覺因素 ... 46 3-3.2 網頁引起的美感情緒 ... 47 3-3.3 網站瀏覽路徑與行為 ... 49 3-4 小結... 51 第 4 章 網頁視覺風格的形成機制... 53 4-1 研究目的... 53 4-2 研究方法與步驟... 53 4-3 研究結果... 59 4-3.1 資訊型風格網頁 ... 59 4-3.2 融合型網頁風格 ... 61 4-3.3 對比型網頁風格 ... 62 4-3.4 水平型網頁風格 ... 63 4-3.5 焦點型網頁風格 ... 64 4-3.6 幾何型網頁風格 ... 65 4-4 小結... 67 第 5 章 網頁視覺信息與複雜性研究... 69

5-2 研究方法與步驟... 69 5-3 研究結果... 78 5-3.1 網頁視覺信息構成關係 ... 78 5-3.2 網頁主客觀視覺複雜性的關係 ... 79 5-3.3 使用者特質對網頁視覺信息評估的影響 ... 81 5-4 研究討論... 82 5-4.1 網頁視覺信息構成 ... 82 5-4.2 網頁視覺複雜性 ... 83 5-4.3 網頁主客觀視覺複雜性的關係 ... 84 5-4.4 使用者特質對網頁視覺信息評估的影響 ... 86 5-5 小結... 86 第 6 章 網頁美感情緒與評價... 88 6-1 研究目的與問題... 88 6-2 研究方法與步驟... 88 6-2.2 統計方法分析 ... 93 6-3 研究結果... 94 6-3.1 網頁美感情緒的構成 ... 94 6-3.2 網頁的美感評價 ... 96 6-3.3 使用者特質對網頁美感情緒與評價的變異分析結果 ... 96 6-4 研究討論... 100 6-4.1 網頁美感情緒與評價 ... 100 6-4.2 使用者特質對網頁美感情緒及評價的影響 ... 101 6-5 小結... 103 第 7 章 美感情緒與網頁視覺信息之關係 ... 104

7-2 研究方法與步驟... 104 7-3 研究結果... 109 7-3.1 網頁視覺信息敘述統計 ... 109 7-3.2 網頁視覺信息量對美感情緒與評價產生的影響及關係 ... 109 7-3.3 網頁視覺信息因子對美感情緒因子的影響 ...111 7-3.4 網頁視覺信息因子與美感情緒之間的關係 ...116 7-3.5 使用者特質與不同網頁視覺信息量對美感情緒及評價的差異 ...119 7-4 研究討論... 127 7-4.1 網頁視覺信息量與美感評價的關係 ... 127 7-4.2 網頁視覺信息因子對美感情緒的影響 ... 128 7-4.3 網頁視覺信息與美感情緒的關係 ... 129 7-4.4 使用者特質對不同網頁視覺信息量美感情緒與評價的影響 ... 131 7-5 小結... 134 第 8 章 結論與建議... 136 8-1 研究結論... 136 8-1.1 網頁視覺信息構成 ... 136 8-1.2 網頁美感情緒與評價 ... 138 8-1.3 美感情緒與網頁視覺信息的關係 ... 139 8-1.4 使用者特質的影響 ... 140 8-2 研究建議... 141 8-3 研究貢獻... 142 8-4 後續研究建議... 143 參考文獻... 144 附錄... 156

表2-1 PAD 情緒量表中的 18 個形容詞對(Mehrabian & Russell, 1974) ... 15 表2-2 Hassenzahl 的美感情緒形容詞對(Hassenzahl, 2001)... 16 表2-3 主觀、客觀複雜性及多向度的相關研究... 22 表2-4 Michailidou 的網頁複雜性架構 (Michailidou, 2005)... 26 表2-5 Michailidou 的網頁複雜性判斷標準 (Michailidou, 2005) ... 27 表2-6 視覺複雜性的定義... 29

表2-7 信息率量表(Mehrabian & Russell, 1974)... 34

表2-8 賴氏人格測驗五種人格特質(賴保禎 & 賴美玲, 2003)... 37 表2-9 Berlyne 影響喚起電位的因素... 42 表3-1 引起興趣及注意的網頁視覺因素編碼... 46 表3-2 網頁引起的美感情緒主軸編碼... 47 表3-3 受訪者情境訪談敘述整理... 49 表3-4 描述網頁美感情緒重要語詞... 51 表4-1 專家小組成員 ... 58 表4-2 網頁風格的構成要素... 58 表4-3 資訊型風格網頁視覺元素變項編碼... 59 表4-4 資訊型風格網頁色相數與版面留白量兩變項信息熵及信息係數計算... 59 表4-5 資訊型風格信息係數矩陣表... 60 表4-6 融合型信息係數表... 61 表4-7 對比型信息係數表... 62 表4-8 水平型信息係數表... 63 表4-9 焦點型信息係數表... 65 表4-10 幾何型信息係數表... 66 表5-1 受試者背景資料 ... 70 表5-2 代表性受測網頁 ... 71 表5-3 視覺因素影響網頁複雜性的專家意見調查結果... 73 表5-4 專家焦點小組成員... 73 表5-5 網頁視覺複雜性的構成元素... 73 表5-6 網頁客觀視覺複雜性構成元素熵計測的操作型定義... 74 表5-7 信息率量表項目估計... 76 表5-8 本研究網頁視覺信息率量表... 77 表5-9 網頁視覺信息 4 因子的構成... 78 表5-10 網頁視覺信息與視覺信息 4 因子迴歸分析... 79 表5-11 受測網頁客觀視覺複雜性構成元素數量值及信息熵值... 79 表5-12 網頁元素信息熵、網頁視覺信息因子之相關係數... 80 表5-13 視覺元素熵與網頁複雜性迴歸係數估計... 80 表5-14 使用者人格特質對網頁視覺信息量及視覺信息因子變異數分析結果... 81

表5-16 表使用者性別對網頁視覺信息量及視覺信息因子變異數分析結果... 82 表6-1 本研究受試者主要資料描述... 89 表6-2 網頁美感情緒形容詞修改情形... 91 表6-3 美感情緒量表項目檢定... 92 表6-4 本研究美感情緒量表... 93 表6-5 美感情緒因子分析... 95 表6-6 受測網頁的美感評價及美感情緒因子得分平均數... 95 表6-7 網頁美感情緒因子與美感評價迴歸分析... 96 表6-8 使用者人格特質對網頁美感情緒因子與美感評價單因子變異數分析... 97 表6-9 使用者人格特質對網頁美感情緒與評價同質性子集分析... 97 表6-10 使用者性別對網頁美感情緒因子與美感評價單因子變異數分析... 98 表6-11 使用者專業背景對網頁美感情緒因子與美感評價單因子變異數分析... 99 表6-12 使用者專業背景對網頁美感情緒因子與美感評價變異主要效果... 100 表6-13 使用者專業背景對網頁美感情緒因子與美感評價同質性子集分析... 100 表7-1 本研究受試者主要資料描述... 105 表7-2 受測網頁視覺信息量及網頁視覺信息因子得分平均數及分群... 109 表7-3 網頁視覺信息量對美感評價與美感情緒因子的單因子變異數分析...110 表7-4 網頁視覺信息量對美感評價與美感情緒因子變異同子集分析...110 表7-5 網頁視覺信息量與美感評價之迴歸分析...111 表7-6 網頁衝突性對美感情緒因子的單因子變異數分析...112 表7-7 網頁衝突性對美感情緒因子變異同子集分析...112 表7-8 表網頁複雜性對美感情緒因子單因子變異數分析...113 表7-9 網頁複雜性對美感情緒因子變異同子集分析...113 表7-10 網頁新奇性對對美感情緒因子單因子變異數分析...114 表7-11 網頁新奇性對美感情緒因子變異同子集分析...114 表7-12 網頁零散性對美感情緒因子單因子變異數分析...115 表7-13 網頁零散性對美感情緒因子變異同子集分析...115 表7-14 美感情緒因子與網頁視覺信息因子的相關係數...116 表7-15 愉悅情緒與網頁視覺信息因子之迴歸分析...117 表7-16 偏好反應與網頁視覺信息因子之迴歸分析...117 表7-17 自主感受與網頁視覺信息因子之迴歸分析...118 表7-18 喚起情緒與網頁視覺信息因子之迴歸分析...118 表7-19 使用者人格特質與網頁視覺信息對美感評價的二因子變異數分析... 121 表7-20 使用者人格特質與網頁視覺信息對愉悅情緒的二因子變異數分析... 122 表7-21 使用者人格特質與網頁視覺信息對偏好反應的二因子變異數分析... 122 表7-22 使用者人格特質與網頁視覺信息對自主感受二因子變異數分析... 123 表7-23 使用者人格特質與網頁視覺信息對喚起情緒因子的二因子變異數分析... 124 表7-24 使用者性別與網頁視覺信息量對美感情緒因子與美感評價二因子變異數分析... 125 表7-25 使用者專業背景與網頁視覺信息對美感評價與美感情緒因子二因子變異數分析.. 126

圖目錄

圖1-1 研究流程與架構 ... 6 圖1-2 研究範圍 ... 7 圖2-1 Shannon 的信息傳達模式... 17 圖2-2 自動控制論的信息傳達模式... 18 圖3-1 瀏覽網頁的行為模式... 51 圖3-2 美感情緒體驗歷程... 52 圖4-1 信息係數矩陣表範例... 54 圖4-2 資訊型信息係數圖... 61 圖4-3 融合型信息係數圖... 62 圖4-4 對比型信息係數圖... 63 圖4-5 水平型信息係數圖... 64 圖4-6 焦點型信息係數圖... 65 圖4-7 幾何型信息係數圖... 67 圖5-1 網頁版面量計算範例... 75 圖5-2 網頁複雜性迴歸預測散佈圖... 85 圖6-1 人格特質對網頁美感評價比較... 97 圖6-2 人格特質對網頁美感情緒因子比較... 98 圖6-3 性別對美感情緒因子平均數比較圖... 99 圖7-1 線上問卷畫面範例... 106 圖7-2 二因子變異數分析流程... 108 圖7-3 網頁視覺信息量對美感評價的影響比較...110 圖7-4 網頁視覺信息量對美感情緒因子的影響比較...111 圖7-5 網頁衝突性對愉悅、偏好、自主及喚起的影響比較...112 圖7-6 網頁複雜性對愉悅、偏好、自主及喚起的影響比較...114 圖7-7 網頁新奇性網頁對愉悅、偏好、自主及喚起的影響比較...115 圖7-8 網頁零散性網頁對愉悅、偏好、自主及喚起的影響比較...116 圖7-9 網頁視覺信息量與美感評價迴歸曲線圖... 127 圖8-1 網頁視覺信息構成關係... 138 圖8-2 網頁美感評價的四個構面... 139 圖8-3 網頁視覺信息與美感情緒的關係模型... 140

第 1 章 緒論

1-1 研究背景與動機

根據Internet World Stats 最新資料顯示，截至 2008 年 6 月全球上網人口已達 14.6 億，未來上網人口更呈快速的成長(李雅萍, 2008)。網路研究單位 IAMASIA 也針對家庭 用戶的網路使用情形調查，發現台灣網友平均每月閱讀的網頁數為 1,615 個(陳世運, 2001)，由此可知網站幾乎漸成為資訊傳播的主流媒體。而網站設計從 1991 年 Tim Berners-Lee 給合 internet 及 HTML 語法，開創了第一個網頁以來(W3C, 1992)，隨著資 訊技術的發展，愈來愈豐富的視覺元素，得以運用在網頁設計，網頁視覺信息傳達的 問題也日益受到重視。 在許多人機介面的研究中，網頁被探討的問題大多在效率及功效方面，美感與情 緒等心理因素都一直被忽略，直到Norman (2002)提出的情感設計議題後，許多研究才 逐漸重視這些因素，並且成為國際研討會中的主要議題。例如NordiCHI 2004 Workshop 以 Aesthetic Approaches to Human-Computer Interaction 均以此為主題 ； HCI 2005 Workshop 中也以 the Role of Emotion in HCI 為主題；2003 年之後赫爾辛基大學每年舉 辦 Designing pleasurable products and interfaces 國際研討會；情緒與設計協會(The Society of Design and Emotion)則每二年舉辦 Design and Emotion 國際研討會。而對網頁 情感的學術研究，則有以感性工學來探討視覺設計元素與感性因素的關係，提出以情 感目標所形成的設計因素組成模式(林彥呈等 2000)。也有學者從環境心理學的角度探討 網站視覺信息對消費者心理及購買行為的影響(Machleit & Eroglu, 2000; Sautter, Hyman, & Lukosius, 2004)。在人機互動設計的研究方面，則從探討美感與使用性的關係(Mattews, 1999; Norman, 2004; Sutcliffe, 2002; Noam Tractinsky, 1997; N. Tractinsky & A.S. Katz, 2000; 林珮雯, 2004)、情緒與使用性的關係(Jinwoo Kim & Moon, 1997; J. Kim & Moon, 1998)、到開始重視個人情緒、經驗與文化上的差異(L. Davis, Wang, & Lindridge, 2007; Dormann, 2006; Simon, 2001)。雖然情感的因素在設計研究上逐漸受到重視，但對 於網頁視覺信息與情感、美感與使用性之間的關係研究，則仍嫌不足。

因，發現使用者對喜好的網站，所產生美感情緒，與欣賞藝術與接受環境刺激有類似 的反應，並會產生興趣 (interest)及愉悅(pleasure)等聯覺性感受(Berlyne, 1974)，如能對 使用者對網頁產生的美感情緒架構、影響因素及量測工具進行探討，將有助於了解使 用者對網頁的美感評價方式，及如何設計網頁才能引起使用者的正面情緒。 網頁是結合文字、圖像、色彩的視覺傳達信息的媒體，具有整體性及個別性的信 息傳達效果，例如風格是視覺整體性的效果，代表某種信息的呈現(Berlyne, 1971a; Mehrabian & Russell, 1974)，是由視覺元素傳達的個別性信息所組成的，因此探討個別 性構成元素的建構模式，有助於對整體性網頁風格的設計控制(許峻誠, 2001)。近來也 有研究以視覺複雜性來探討網頁視覺構成，例如Ivory, Sinha, & Hearst (2000)以字數、 連結數、圖像數、頁面構成，來預估使用者對網頁的評價。Germonprez & Zigurs(2003) 建議以內容 (content)、形式 (form)及認知(cognition)三項因素探討網頁視覺複雜性， Michailidou, Quan, & Harper (2008)則以網頁視覺複雜性的模式，來達成改善介面設計的 適用性。這些相關研究皆是期能透過探討個別視覺元素與整體視覺信息的關係，增進 對網頁視覺信息構成的了解。因此，網頁視覺信息是如何構成的?網頁視覺複雜性構成 元素為何? 客觀性計測與主觀性感知結果的關係為何? 皆值得進一歩探討。 此外，隨著網頁使用族群愈來愈廣，網頁設計對目標使用者的需求應更加細分化。 除了功能服務上的需求，情感及情緒上的需求也可能因使用者特質不同而有差異。例 如Averill (1999) 提出情緒向度會依個人特質不同而有所差異，人格特質會影響情緒反 應上的傾向。許多考慮到使用者特質的研究，通常僅於年齡、社會背景及電腦使用經 驗的比較，較少對人格特質進行探討(林佳燕, 2000)。因此人格特質對網頁視覺信息， 是否會有不同的美感情緒反應與喜好，值得探討。另外，有些研究發現性別在記憶力 (Mackiewicz, Sarinopoulos, Cleven, & Nitschke, 2006)、情緒反應及認知處理(Tranel, Damasio, Denburg, & Bechara, 2005)等因素上具差異，因此會對視覺刺激美感偏好產生 影響，但目前為止，性別對美感情緒反應的影響研究結果未有一致性(Farrell & Rogers, 1982; Lindauer, 1990)，因此性別因素是否會對網頁視覺信息所引起的美感情緒造成差異 值得探索。相關研究也發現，使用者專業背景的教育會影響其對視覺信息的解讀能力， 是造成其對視覺刺激複雜性偏好的原因(Silvia, 2005)，此結果是否適用於對網頁的視覺 信息，亦值得探討。使用者特質對網頁視覺信息評估，及對網頁美感情緒與評價影響 的探討研究結果，將有助於對網頁設計師以使用者情感為中心的角度，設計出符合使 用者期待的網頁。

根據信息美學理論，視覺信息所引起的美感情緒，可作為美感評價判斷的標準， 並可建立和視覺信息的構成關係。例如 Fechner(1876)提出愉悅是美感情緒中的重要反 應，並提出由兩大因素所構成美之公式，其中一因素和次序(order)、統一(unity)、和諧 (harmony)有關；另一項則為同於複雜(complexity)、多樣性(diversity)等；Eysenck(1968) 以愉悅作為美感量測因素，提出對幾何造形的美感偏好預測。雖然網頁美感評價的定 義在目前研究中仍有許多說法，但根據信息美學理論，以網頁視覺元素所引起的美感 情緒反應，了解網頁視覺信息與使用者美感情緒之間的關係，不僅可作為網頁信息美 學理論，亦可對設計工作提出實務上的建議。

1-2 研究目的

基於研究背景與動機，本研究為建立網頁信息美學理論，以探討美感情緒與網頁 視覺信息的關係為目的，分別了解網頁視覺信息與複雜性、網頁美感情緒與評價的因 素與構成模式，探討網頁視覺信息與美感情緒因素及評價的影響關係，建立以網頁視 覺信息預測美感情緒的模式。並針對使用者的人格特質、性別、專業背景等特質差異， 對網頁視覺評估及美感情緒所產生影響，進行研究，提出對不同使用者特質的網頁設 計建議。本研究主要目的說明如下： (1) 網頁美感情緒與評價構成：美感情緒是在美感活動和美感鑑賞時所產生的情緒，視覺 信息所引起的美感情緒，可作為美感評價判斷的標準。本研究目的期能探索網頁美 感情緒，了解網頁美感情緒的描述語詞，及網頁美感情緒的體驗過程，並建立網頁 美感情緒的量測架構。進一步探討網頁美感情緒的組成因子，及其與美感評價的構 成關係，作為網頁美感評價的方式。 (2) 網頁視覺風格形成：信息指的是事物的某種組成，在信息理論中，熵即信息量的量測， 表示系統中非秩序性的程度，也是各種組成機率分配的情況，系統的信息熵是了解 系統組成變化複雜性的一項指標。本研究目的在藉由網頁風格特徵因素表現的出現 機率，來探討設計某種風格時，特徵因素上應該決定的次序及影響其他因素的程度 成果，提供設計師進行設計決策時的參考，亦可作為日後發展成自動化設計決策的 依據。 (3) 網頁視覺信息與複雜性的構成：視覺信息是由複雜及次序的視覺信息所組成的，且視 覺刺激的複雜性與觀者感知、動機及審美的有關。本研究目的以信息熵的量測方法，

對網頁視覺信息的主客觀性進行評估，提出網頁視覺信息因子與信息量的構成模 式，及網頁視覺元素與視覺複雜性的構成模式。 (4) 美感情緒與網頁視覺信息的關係：根據信息美學理論，美感情緒和視覺信息間存在關 係模式。本研究目的為建立網頁信息美學，建立網頁視覺信息量與美感評價的關係 模式，獲得二者之間的影響相關性。此外，探討網頁視覺信息因子與美感情緒因子 的相關性，建立美感情緒因子與網頁視覺信息關係模式，獲得對美感情緒因子的預 測模式。綜合網頁視覺信息構成，與美感情緒構成的研究結果，探討美感情緒與網 頁視覺信息的相關性，獲得網頁情意運算的基礎模式。 (5) 使用者特質影響的探討：使用者不同的特質會影響使用者對視覺信息認知及感知的過 程及能力，因而造成對美感偏好及情緒反應的差異。本研究目的在探討使用者人格 特質、性別及專業背景，對網頁視覺信息評估、網頁美感情緒與評價，及對不同網 頁信息量產生網頁美感情緒反應的差異，研究結果可提出以使用者為中心的網頁設 計策略與建議。 根據主要研究目的，在各研究章節研究中提出研究問題，進行研究。

1-3 研究流程與架構

本研究流程與架構圖，如圖1-1。首先針對網頁引起使用者的美感情緒構成進行探 索，以使用者對喜好網頁的情緒描述，探討網頁美感情緒關鍵描述詞句，了解影響美 感情緒的因素及體驗過程，作為發展美感情緒量表之發展依據，並依此建立網頁美感 情緒量表。接著進行網頁美感情緒及評價量測，探討使用特質的差異是否會影響美感 情緒反應。另一方面對網頁視覺信息構成元素進行探索，探討構成網頁風格的視覺元 素，並以信息熵方法探討各元素間的關係，作為了解元素信息熵的準備；以主、客觀 視覺信息熵量測方式，分別對網頁視覺信息進行量測，建構網頁視覺信息的模式。美 感情緒與網頁視覺信息量測所獲得的研究資料，提供作最後美感情緒與網頁視覺信息 關係的分析與探討。 本研究流程分成五個階段性研究，前二者為探索性研究，結果提供後續研究之準 備；後三項針對網頁之視覺信息、主客觀視覺複雜性、使用者特質、美感情緒彼此之 影響關係，進行實證性研究。說明如下：

(1) 網頁的美感情緒探索：為探索性研究，主要以質性分析探討網站引起的美感情緒，作 為發展美感情緒量表之發展依據。 (2) 網頁視覺風格的形成機制：為探索性研究，主要以信息熵方法探討網頁風格視覺元素 之間的關係，提供接續研究受測網頁樣本的挑選參考，及決定構成網頁的視覺元素， (3) 網頁視覺信息與複雜性研究：為實證性研究，主要以信息理論，探討網頁視覺信息的 構成，及以構成網頁視覺複雜性的元素熵，探討網頁主客觀視覺複雜性之間的關係。 並且探討使用者人格、性別及專業背景等特質對網頁視覺信息評估的影響。 (4) 網頁美感情緒與評價：為實證性研究，探討網頁美感情緒與評價的構成因素及關係。 並探討使用者人格、性別及專業背景等特質對網頁美感情緒與評價的影響。 (5) 美感情緒與網頁視覺信息之關係：為實證性研究，探討網頁視覺信息、美感情緒與評 價之間的關係。並探討使用者人格、性別及專業背景等特質對不同網頁視覺信息量， 所引起的美感情緒反應。

1-4 研究範圍與限制

本研究範圍主要以網頁的視覺信息、美感情緒與使用者特質等主要議題進行研 究，探討此三項議題彼此之間的影響關係，研究範圍如圖1-2 所示。由於網站是由一頁 頁的網頁所結合的，探討網頁的美感情緒的研究結果，即可推展至整個網站的視覺設 計，因此本研究對象以網頁視覺信息為主，而不是整個網站，所以網站資訊架構的複 雜性，及實際操作行為的複雜性，不在本研究範圍內。此外，本研究以網頁的靜態視 覺元素所構成的視覺信息為研究對象，動態圖像、聲音等則不在此次研究範圍。 圖1-2 研究範圍 本研究對象及受測網頁的範圍與限制在於實證研究中，所使用的受測網頁，以中 文人文藝術類數位博物館網頁的首頁為主要研究對象，因為此類型網站重視視覺意象 的呈現及信息的傳達，不受商業目的限制，且不會因使用者對特殊網站類型偏好影響， 而產生偏頗的結果，因此適合作為研究使用者對網頁視覺信息，所引起的美感情緒與 評價的影響。受試者主要來自19-25 歲的青年人，符合所用人格測驗工具的目標測驗族 群，且青年人亦可能受到視覺信息刺激時，有較明顯的情緒表現，適合作為本研究的 受測者。

由於上述研究範圍與限制，研究成果會限制在網頁目標族群為青年人，網頁靜態 元素的視覺設計應用與貢獻上。

1-5 名詞解釋

針對本研究論文內容所採用的重要名詞，釋義如下： 美感情緒(aesthetic emotion)：美感情緒是在美感活動和美感鑑賞時所產生的情緒， 本研究將使用者對網頁引起的正面情緒感受，稱為美感情緒。 美感評價(aesthetic evaluation)：本研究美感評價為使用者對網頁產生美感情緒的感 受，以網頁在美感情緒量表各項目感受的程度分數總和平均數，作為對該網頁的美感 評價結果。 視覺信息(visual information)：本研究視覺信息的定義，為網頁透過視覺刺激所傳 達的不確定性、模糊、複雜、新奇、多樣、密集性等。 視覺複雜性(visual complexity)：本研究視覺複雜性的定義，為網頁視覺元素的密集 性、多樣性及可區別性等。

第 2 章 文獻探討

本章2-1 節從美學理論及情緒理論，探討美感情緒的定義及其相關研究；2-2 節則 以信息理論，探討視覺信息及視覺複雜性的定義及相關研究；2-3 節探討使用者特質和 美感的相關研究；2-4 節以信息美學理論探討視覺信息和美感情緒關係的相關理論及研 究。

2-1 美感與情緒

本節擬探討美學與情緒之間的關係，包括藝術的美學理論、情緒理論、美感情緒 與使用性的關係等相關文獻探討。

2-1.1 美學理論

藝術美學

American Heritage Dictionary 對美學(aesthetics)的定義為：研究美感和藝術經驗的心 理反應，這是源自柏柆圖和亞里斯多得的美學思想。若將柏柆圖美的哲學思想－真、 善、美，以現今的定義來看，美感的定義包含了藝術和人們感受、學習及文化間的關 係。美學家 Dewey 及李澤厚等情感主義學派，其論點著重於藝術品能否在觀賞者的內 心激起快感或強烈的感情，來決定藝術品的好壞或價值的高下。Dewey (1980)的「美感 即經驗」(art as experience)理論，將美感從欣賞藝術館作品的經驗，擴展到日常的生活 經驗。和環境或任何有機物保持動態性、持續性的互動，所產生的思考、動作和情緒， 都是Dewey 所稱的美感經驗的來源。Dewey 認為最初受到環境刺激，是因情緒的作用 而產生了注意力，進而和環境中的事物產生有意識的交互作用，重建出新的關係，如 吸引、喜好等。 中國美學研究者李澤厚(1996)則提出美學的新感性主義 (New Perceptualism)，特別 注重美感所引發心理情感之間的關係。李澤厚(1996)認為美感為心理科學的討論範圍， 為情感本體的哲學問題。將美感經驗定義為廣義的美感，美感感受定義為狹義的美感。

四個階段： 美感態度：發生在準備階段，是人們在進入美感活動之前和之中，歷時短暫的心 情和態度。 美感注意：當美感態度碰到具體對象時，把注意力集中和停留在對象上面。主要 是對對象形式結構的注意，並從而發展其他心理功能，如情感、想像的滲入活動。如 對線條、形狀、色彩、聲音、時間、空間、節奏、韻律、變化、平衡、統一、和諧或 不和諧等形式的注意，並把主觀的各種心理因素，如感情、想像、意念、願望、期待 等，自覺或不自覺地投入。 美感活動：發生在實現階段。美感活動是由人的各種心理功能相互活動、交錯融 合的過程，可簡要分成感知、理解、想像和情感，為構成美感經歷的心理過程。 美感能力：發生在成果階段，即對美感感受的能力 其中和美感情緒有關的，發生在美感注意與活動的各種心理功能，說明如下： 感知：包含感覺（sensation）和知覺(perception)。感覺是人腦對直接作用於感覺器 官之事物的個別特性的反應。知覺是通過實踐在感覺基礎上形成的，是大腦對事物的 整體和事物之間關係的反應。人的感官對美感對象產生美感感覺，美感對象的整體形 象伴隨著情感及形式的和諧性，通過知覺進入人的內心世界。 理解：在感性中必須融合理性的理解，才能獲得美感。李澤厚認為審美的理解有 四層涵義。第一個層次為距離說，與對象融為一體卻又保持靜觀。如看戲劇時，並不 會對劇情中的打鬥作出反應；第二層次是必須對對象內容的認識，了解內容的背景與 涵義才能產生欣賞之情，如必須了解十字架、蛇等的特殊涵義，才能了解許多西方繪 畫。第三層次是必須了解審美對象的情感性及技術特徵；第四層則是較為內在和深層 的，是滲透在感知、想像、情感諸因素，並融為一體的某種非確定性認識，如「可喻 而不可喻，可解而不可解」的意會，而無法言傳的認識。 想像：感知和理解之間必須透過想像的介質。將感知的事物或經驗進行回憶、聯 想、類比、期待等加工過程，創造出新的概念。一方面享受到美感活動中，生理欲望 和心理滿足的感性影響； 另一方面是受到個人知識與經驗邏輯性思考的結果，使理解

結果多義且廣泛，是連結感性與理性的橋樑。

情感：美感中的情感活動是最活躍的心理因素，也是美感中最主要的因素。它支 配其他心理活動，使整個美感過程都帶有情感的色彩。美感包含生理及心理的快感。

李澤厚和 Dewey 美感經驗的相同點，在於他們都認為美感經驗是審美心理從對目 標 物 的 美 感 注 意 (attention) ， 經 過 美 感 活 動 (psychological activity) 的 美 感 感 知 (perception)，所產生的情緒(emotion)及情感(affection)是影響和事物交流經驗中的樂 趣，而認知 (cognition)則幫助更進一步的理解事物，並且達到內在滿意的喜悅。楊辛 (1993)認為人類在他所創造的世界中直觀自身，即在對象中看到人的自由創造活動，因 而在精神上體驗到一種特殊的快感和喜悅，這就是美感的本質。從層次來看，美感包 括了生理情緒及心理情感，都是屬於美感情緒的內容。

2-1.2 情緒理論

情緒的定義

情緒(emotion)一詞的定義至今仍未統一，其中有兩種說法是較為研究者所採納的： (1)情緒是對事件的反應，其中事件涉及個人的需求、目標或關注等； (2)情緒包含了生 理上、情感上(affective)、行為上及認知上的構成要素。譬如，「恐懼」是個人對造成 危害的狀況所做出的反應，會產生負面的情感效應；相反地，「高興」是對目標被滿 足所做出的反應，使人們形成正面的情緒狀態。情緒一詞在許多研究領域大抵未形成 專門用語，且語言及文學上，對於情緒的概念也多有模糊空間，因此與情緒相關的字 眼眾多，如：affection, emotion, sentiment, feeling, mood, motivation, 以及 qualia 等。 affection 通常泛指全面的概念，其中以情緒(emotion), 心情(mood)以及感受(sentiment) 最容易混淆(張華憫 & 鄧怡莘, 2004)。 人腦有三個主要區域負責情緒的運作：視丘、邊緣系統及大腦皮質(LeDoux, 1996)。 視丘為基本的訊號處理器，其處理後的訊號，僅由邊緣系統直接處理的則稱為原始情 緒(primary emotion)(Damasio, 1994)，為人類進化過程為了適應特定的環境所生成的， 如驚嚇、厭惡及受吸引等均為此類情緒；而訊號若經過大腦皮質進行較高層次的認知 處理，所產生的情緒稱為繼發性情緒(secondary emotion)，如挫折、驕傲、滿意等。情

緒又可從產生的因素而由不同角度來解釋：心理學家們對情緒的激發(activation)抱持不 同且對立觀點，一方主張情緒激發是在單一向度上量的改變；另一方則持相反的態度， 認為構成情緒的原因很多，且依個人經驗而有所不同。前者為基本範疇(fundamental category)的情緒激發，由不可分離的情緒種類所構成(Gross & Levenson, 1995; Philippot & Rimé, 1997)，是人類和動物都有的情緒，可稱為基本或主要的情緒 (Ekman, 1999)； 另一為多向度的(multidimensional)的情緒激發，此主張視情緒是由構成情緒空間的多重 向度所構成(Frijda, 1994; Gehm & Scherer, 1988; Ortony, Norman, & Revelle, 1988; Osgood, Suci, & Tannenbaum, 1957; Russell, 1980)，又稱為繼發性情緒(secondary emotions )(Gaunt, Leyens, & Demoulin, 2002) ，其會依個人特質不同而有所差異，且為 從主要情緒而衍生的情緒反應(Averill, 1994; Jinwoo Kim, Lee, & Choi, 2003)。

人們受到外界刺激會產生自主性情緒與非自主性情緒反應。Li and Zhang (2005)提 出情感 (affect)、情感品質 (affective quality,AQ)及感知情感品質 (perceived affective quality, PAQ)的區分。情感存在於人；而情感品質是存在於刺激物，為刺激物改變人們 核心情感的能力；刺激物可以是所有一切外界的事物；感知情感品質是人們對刺激物 情感品質的感知，感知情感品質始於一開始對刺激物的感受，並且影響接下來對刺激 物的反應 (Russell, 2003)，為主觀且因人而異的。Russell (2003)認為核心情感 (core affect)，是原始的情緒 (emotion)，為神經物理的狀態，是簡單、非反射性、有意識地 混合了快樂 (愉悅─不愉悅)與喚起 (沈睡─激發)的感受；歸因情感 (attributed affect)， 則是核心情感和感知原因 (如物件、人、地、行為、事件等等)的關係，包含三項要素： 核心情感的改變、物件及核心情感對感知物件的原因。

情緒模型

情緒大多以二維或三維模型來定義(Dormann, 2006)。例如 Wundt (1905)以愉悅及激 發性 (activation)的正負向度來說明情緒；Russell (1980)使用情感的正交二軸向度模型， 說明可用愉悅與激發來調查個人的情緒性格的差異，Lasen & Diener (1992)也使用類似 的方式；Waston & Tellegen(1999)提出正負激發 (positive and negative activation)二維向 度。情感的三維模型則包括了 Osgoods (Snider & Osgood, 1969) 以語意差別量表 (semantic differential scale) 說 明 人 們 對 信 息 的 判 斷 及 反 應 為 喚 起 (arousal) 、 愉 悅 (pleasure)及主控性 (potency)，Mehrabian (1996)亦提出愉悅(pleasure)、喚起(arousal)及 自主性(dominance)的 PAD 情緒模式，來說明當一個人受到環境信息刺激時，會引起的

三種情緒反應。無論情緒的二維或三維模型，都包含了三種基本的情緒反應：喚起、 愉悅及主控性，分別討論如下： 愉悅 (pleasure)：早從柏拉圖就主張愉悅是藝術功能的一部份，他曾說：美(beauty) 是帶給視覺與聽覺上歡樂(joy)感覺的；義大利神學家 Aquinas 定義美麗的事就是愉悅； 主張所有的藝術應該都給予愉悅感(Metzger, 1965)。19 世紀的實驗心理學家研究愉悅及 不愉悅的感覺，並以快樂狀態 (hedonic tone)來說明多種刺激對情緒影響的結果。愉悅 為從正愉悅(快樂)至負愉悅(不快樂)的向度(Clore, 1994)，許多心理學研究都得到證實， 愉悅的情緒反應鼓勵觀者能繼續探索信息的細節，例如Isen (1987)發現具正面情緒反應 的人，可以處理較複雜的信息，而且可以較樂觀的接受挑戰，且 Isen 也發現正面情緒 增加一個人對環境刺激的敏銳度。 喚起 (arousal)：生理學上的喚起指的是情緒被激發的狀態，其範圍從冷靜(calm) 到興奮 (Clore, 1994)。因為喚起是一種最原始的心理反應，因此當一個人接收外界刺激 時，喚起程度可視為美感判斷的一個向度(Liu, 2000)。Berlyne (1971b) 提出情緒動機論 (the categorical-motivation model of aesthetics)認為喚起是一種對人或動物喚醒、驚覺 ( alert)及興奮 (excited)程度的量測。情緒在動機心理學的用法，等同於趨動 (drive)與喚 起等動機性，Mowrer (1946)提出情緒可視為次要趨動力 (secondary drives)，又稱為必 要 趨 動 力 (acquired drives) ， 指 受 對 外 在 刺 激 引 起 學 習 的 動 機 程 度 (motivational conditions)，由於情緒一詞後來被廣泛的使用，包括害怕、愛等皆以情緒指稱，以情緒 來指稱動機狀態的描述則愈來愈模糊，因此以動機理論 (motivation theory)角度來說， 喚起 (arousal)程度用來說明因外在刺激引起的情緒心理的概念是較適合的。動機論者 對美感情緒的定義則在於能引起使用、趨近動機的能力。

自主 (dominance)：一個人在環境中具有自主的感受，來自於他感覺不受限制，或 者說環境中提供了許多方式使得他可以選擇(Mehrabian, 1996)。Proshansky, Ittelson, and Rivlin (1970)提出選擇的自由(freedom of choice) 來作為情緒的一個描述向度，說明其在 環境中的自主性感受。例如具有隱私性及個人領域性是允許較大選擇自由的；而較正 式的社交場合是較限制人的行為的(Mehrabian, 1972)。以物理刺激來說，較密集的、較 有次序或者較有權威感的，會顯得較多限制性(Mehrabian & Russell, 1974)。

美感情緒

美感情緒(aesthetic emotion)指的是在美感活動和(或)美感鑑賞時所產生的情緒。美 感情緒可能每天發生，也可能在某種喜好、崇拜、美麗事物的情境下。美感情緒是所 有美感經驗的一部份，但為很重要的一部份(Wikipedia, 2009)。Cupchik (1994)將美感情 緒分為反應的模式 (the reactive model)(如輕鬆或喚起的身體狀態)及反思的模式(the reflective model)。情緒與情感有正面的反應，也有負面的反應；雖然美感情緒不只是美 的判斷(beauty judgments)，還包含其他情感反應 (Devereaux, 1997)，例如幽默、好笑、 酷、新潮、甚至醜陋、悲傷等。但在探討美感時，通常將其定義為正面的反應，因為 美感反應(aesthetic responses)會在另一感官產生快樂的感覺，即聯覺性 (synesthesia)， 例如興趣 (interest)及愉悅(pleasure)都是美所引起的聯覺性感受(Berlyne, 1974)。

美感情緒與使用性

Tarasewich, Daniel, & Griffin (2001)在美學與網頁的議題上，提出的問題有：網頁 的美感與使用性有關係嗎？什麼造成網頁愉悅的美感呢？網頁的美感可否被量測？當 人們使用網頁時，他們如何感受？美感在網頁經驗中扮演什麼角色？網頁美學重要 嗎？網頁美學與使用性，何者比較重要? 許多研究證實美感反應和使用性十分相關，例 如 Jordan (2000)發現使用性和美感都是電子產品創造愉悅性的重要因素；Tractinsky, Katz, & Ikar (2000)的實驗發現，系統的美感感知(perceived aesthetics)和使用性感知 (perceived usability)有極大的相關；Kurosu & Kashimura(1995)以提款機的操作螢幕不同 編版方式，進行外觀的使用性(apparent usability)及內在實際的使用性(inherent usability) 的相關性研究，結果發現美感和外觀的使用性有高度相關(r=0.59)，但和實際的使用性 的相關程度相當低。雖然使用性必須實際的使用才是真正的感受，但美感感受會影響 使用者對此系統的使用態度。

Kim, Lee,& Choi. (2003) 以電子商務網站進行研究，發現介面的喜好和顧客的滿意 度有正向關係，這個研究中，喜好及滿意度都是情感因素。購物的愉悅度 (shopping enjoyment)及網頁娛樂價值也都是對網頁環境產生美感情緒的反應(Koufaris, 2002)。 Tractinsky et al(2001)在美學與網頁設計的研究中，以 Contax Camera, Jennair,Stabucks Coffee 三個商業網站，探討美學在網頁設計中扮演的角色，及其如何影響使用者和網站 的互動。結果顯示喜歡、吸引、樂趣等美感情緒和使用及導覽性的感受是極具相關的，

其中吸引性及樂趣是關鍵因素，動畫、圖像及色彩則是影響吸引性的三項要素。Karvonen (2000) 則認為簡單化 (simplicity)和美 (beauty)影響人們詮釋設計及經驗，且這些感知 和文化背景、年紀及使用者的過去經驗有關，而網站的視覺信息引起網頁使用者最初 的情緒反應(如愉悅和喚起)與評價的結果，會促使使用者驅近或離開網站的行為動機 (Deng, 2006; Tsai, Chang, Chen, & Tsai, 2006)。

2-1.3 情緒的量測

情緒可由非口語及口語的測量方法，非口語的測量方法是量取姿勢、面部表情、 聲調而得；口語的測量方法常用的有自我陳述的情緒量測方式(Philippot, 1993)：差別情 緒量表(the Differential Emotions Scale ,DES)、語意差別法(the Semantic Differential ,SD) 及自由標示法(the free labeling method) (Osgood et al., 1957)。差別情緒量表是量測情緒 反應的強度；語意差別法是以成對的相反情緒用詞量測情緒的強度及傾向；自由標示 法則是由受試者在實驗時間內寫下他們的感受。此三者中，語意差別法最常用在探索 情緒的多元尺度。要估計觀者受到網站環境多種視覺元素的影響，而產生的情緒反應 是很困難的，因此 Mehrabian(1974)提出包含愉悅、喚起及自主性的 PAD 情緒量表(表 2-1 )，此量表可用來作為人們情緒特質的量測，也可作為人們接受信息刺激後的情緒反 應量度指標。

表2-1 PAD 情緒量表中的 18 個形容詞對(Mehrabian & Russell, 1974)

快樂的 happy – 不快樂的 unhappy 愉悅的 pleased – 惱怒的 annoyed 滿足的 contented – 憂鬱的 melancholic 滿意的 satisfied – 不滿意的 unsatisfied 希望的 hopeful – 絕望的 despairing 有趣的 relaxed – 無趣的 bored 刺激的 stimulated – 放鬆的 relaxed 興奮的 excited – 冷靜的 calm 瘋狂的 frenzied – 懶散的 sluggish 緊張的 jittery – 遲鈍的 dull 喚起的 aroused – 沈靜的 unaroused 清醒的 wide-awake – 昏睡的 sleepy 主控的 controlling – 受控的 controlled 有影響力 influential – 受影響的 influenced

控制中的 In control – 小心的 cared-for 自治的 autonomous – 受指導的 guided 自主的 dominant – 順服的 submissive 重要的 important – 敬畏的 awed

Hassenzahl (2001) 提 出 以 人 因 品 質 (ergonomic quality,EQ) 、 快 樂 品 質 (hedonic quality, HQ)及吸引性(appealingness )的情緒形容詞對，來評量 3 個不同的視覺螢幕設計 的美感情緒，如表2-2 表2-2 Hassenzahl 的美感情緒形容詞對(Hassenzahl, 2001) 人因品質 理解的comprehensible – 無法理解的 incomprehensible 支持的supporting – 阻礙的obstructing 簡單的simple – 複雜的complex 可預期的predictable – 不可預期的 unpredictable 清楚的clear – 困惑的confusing 值得信任的trustworthy – 不值得信任的 shady 可控制的controllable – 不可控制的uncontrollable 熟悉的familiar – 陌生的strange 快樂品質 有趣的interesting – 無趣的boring 昂貴的costly – 廉價的cheap 興奮的exciting – 遲鈍的dull 獨特的exclusive – 一標準化的standard 印象深刻的impressive – 難以形容的nondescript 原創的original – 一般的ordinary 創新的innovative – 保守的conservative 吸引性 愉悅的pleasant – 不愉悅的unpleasant 好的good – 壞的 bad 美的aesthetic – 不美的unaesthetic 歡迎的 inviting – 冷淡的 rejecting 受吸引的attractive – 不受吸引的unattractive 感動的sympathetic – 無情的unsympathetic 激勵的motivating – 不受鼓勵的 discouraging 渴望的desirable – 不渴望的undesirable

2-2 網頁視覺信息與複雜性

本節從信息理論、藝術作品及環境、網站等研究文獻來探討網頁視覺信息與複雜 性。

2-2.1 信息理論

信息理論(information theory)是以一組數學程式來說明信息傳達的模式與不確定性 (uncertainty)。Shannon 在 1948 年發表的論文 「傳播的數學理論」 ( the mathematical theory of communication) 裡面，提出一個重要的觀念，就是所有的信息傳播都是數位化 的形式，因此可以利用數學統計的方式來測量信息的流量(Shannon & Weaver, 1963)。 信息理論為通信系統的核心理論，Shannon 首先提出信號的輸送與傳送線路的情況及噪 聲 (noise)有關，探討在什麼條件下能可靠地準確地傳送信號，怎樣才能最快地傳送信 號等等。控制論研究者 引用從人的神經元中發現回饋 (feeback)的作用，探討信息的回 饋對系統下一次反應及控制的影響。信息理論研究者認為「人的思想不是物質流的產 物，而是信息流的產物」(郭錦鐘, 1984)。人和外界系統不僅是只有能量、物質的交換， 信息交換是關鍵。例如人的眼、耳、鼻、舌、身等的感知器官接收器，接收到光、溫 度、壓力等外界信息刺激，加上目前執行器在工作時所產生的回饋信息，傳導到神經 系統，神經系統把各種輸入信息結合起來，經判斷後對執行器發出希望動作的命令、 或儲存、認知。生物的學習歷程，就是靠自動控制的機制，在運作過程中透過感知及 回饋而不斷自行調整(圖 2-1,2-2)。藝術作品的創作與發表其實也是一種傳播的過程，因 此 Shannon 的理論不但可以應用在信息傳播方面，也提供視覺藝術作品的一個量化量 測的基礎。 圖2-1 Shannon 的信息傳達模式

圖2-2 自動控制論的信息傳達模式

信息熵

信息是客觀世界在萬物和人類彼此之間的相互感受和認識中的再現，它反映了被 感受對象和所考察事物的狀態、特性和變化(李衍達, 2001)。對於信息的描述，依照信 息理論的說法，信息量等於熵值。「熵」(entropy)是統計熱力學常用的名詞，其表示系 統的無組織程度或混亂程度，當一個系統的無組織程度增加時，它的熵就增大。因此 熵是量測系統複雜程度的，熵值增加，表示可能形成的組成形式增加，則信息量增加。 信息是系統某種次序組成的呈現，當外在因素加入系統時，一個系統的無組織程度增 加，即熵值增加。 熱力學理論以熵表示系統的複雜性；信息理論稱熵為不確定性的狀態，信息熵即 量測系統各種組成出現機率的期望值總和，即此系統可能傳達的信息量。依修改的第 二形式熱力學定律的說法，在任何孤立系統中，熱熵和信息熵的總和是恆定的。若從 其他系統輸入信息熵，即負熱熵，則使內部熱熵減低，使系統更朝有序性的方向發展。 此說明與外界交換信息對系統進化的重要性，這是世界形成的原因，從無序至有序的 自發組織現象(李衍達, 2001)。對設計系統來說，設計的變項即是輸入信息熵，某種設 計組成(如風格)的呈現即是輸出的結果。某一變項信息熵，即計算此變項在作品中，可 能出現組成的機率期望值總和而得。例如要了解色相數量在某種網頁風格所具有的信 息熵，可先找出可能出現的色相數量作為次變項，從次變項出現的機率，計算其信息 熵值。 關於熵值說明如下：（1）若視熵值為某一事件發生的「驚訝程度（surprise level）」， 則熵值愈大，表示該事件發生之機率愈小，即該事件發生令人驚訝程度愈大；（2）若 視熵值為衡量某一事件所需「信息（information）」的多少或其所能傳遞的信息多少， 則熵值愈大，表示需要愈多的信息量去說明該事件的發生，或代表其傳遞的信息愈少； （3）若以熵值為衡量事件發生的「不確定性（uncertainty）」，則熵值愈大，表示該 事件發 生之 不確定 性愈 大；（4）若以熵值來衡量 N 個事件發生的「機率分配

（distribution）」，則熵值愈大，表示愈傾向於「均一分配（uniform distr ibution）」， 或「隨機亂度（randomness）」愈大(徐若倩, 2004; 馮正民, 1998)。

信息熵及視覺藝術作品

用信息理論來解釋視覺藝術的創作，最早應起於安海姆以熵分析藝術創作的論說 (Anheim, 1971)。安海姆的理論基本上大半源自完形心理學，從知覺出發，認為藝術作 品即是一個知覺場。對創作者而言，在一特定藝術作品中，藉著安排各種形狀、色彩、 運動等元素動力的交互作用，而使各種動力最終達到平衡的狀態，即達到大自然中的 熵平衡，此種狀態即是完形。他認為即使是靜態的繪畫作品，也是由於刺激大腦視覺 中心，產生生理抗拮的力量。我們在靜止形象裡，看到的是「有方向的張力」或「運 動」(Anheim, 1971)。從信息和次序的闗係中，Arheim 所討論的秩序其實是某種組成 (structure)狀態。對信息理論者而言，組成無法作為預測的基準，有很多不可預期的自 然發生；但對藝術家來說來說，組成提供很多信息，如宗教壁畫人像的信息提供了宗 教功能；Andy Warhol 展現整排排列的照片，此信息代表現代生活機械因素的逐漸涉 入。造形構成提供了許多信息，因此對藝術家來說，信息相當於造形的構成規則。

France and Henaut(1994) 提出熵和藝術之間的闗係，其認為藝術作品中的熵愈高， 表複雜性愈高，亦即所可能出現的不同次序組成也愈高，因此蘊含愈多的信息量。他 們認為複雜性、信息率和熵所指示的事實相同，都是用來解釋及說明傳達的要素。視 覺藝術家、設計師希望透過作品來傳達他們所欲表達的信息，在作品中包涵愈多的信 息，愈易影響及打動閱聽者。當然，觀賞者有不同的文化與生活背景，因此只要視覺 作品中，有某些特質與觀賞者有交集，觀賞者則能與創作者的美學情感產生共鳴。基 於此項觀點，創作者有義務在作品中提供信息複雜可能性。Xenakis 則談到：美和醜並 不具有意義，音樂中聲音的好壞也不具意義，有意義的是音樂中所包涵的信息量，它 才是真正評量作品的標準。以科學的傳達美學角度，France and Henaut 提出比喻的說 法：視覺作品會在不同的文化背景的閱聽者，得到不同的觀賞熵值。他們以爬山來比 擬，山就如同視覺藝術作品，但不同技巧及狀況的人，爬同座山卻使用不同的肌肉量， 並對它的困難度及經驗有不同的評價。崎嶇的山，其弧熵 (curvature entropy)值高，表 示不確定性高，信息熵高，必須有好的技巧及體力的人，才能體會它的美；而平坦的 山，弧熵值低，不確定性低，信息熵低，則一般體力的皆能征服。因此他認為，視覺 藝術作品應有其內在的動態性 (internal dynamism)，創作者將他個人對社會、文化、生

活的觀點，以複雜隨機的表現方式融於作品中，作品本身是活的。此外，Petrov(2002) 比較三位蘇俄藝術家 Kuznetsov, Korovin, Mashkov 的繪畫作品，以感知因素 (畫作大 小、長寬比、色相數、代表色的出現、色調)及社會因素 (類型、平面數、人數)作為因 子，將信息熵的量測加入統計的概念，兩兩因子的信息係數為相關係數，代表彼此影 響性，探討每位畫家的創作模式及風格的穩定性。

2-2.2 視覺複雜性

簡單及複雜的分界，主要在於大腦進行偵測(detection)、區別(distinguishing)及辨識 (recognition)等認知階段時，常被定義成簡單圖形的結構特質(configuration character)或 複雜性(Granovskaya, Bereznaya, & Grigorieva, 1987)。對於空間與時間的信息處理 (information processing)主要由右腦所執行，可同時顯示視覺物體造型的特徵及整體。在 許多造形的再現(representation)過程中，複雜性是其中一項，其包含了圖式空間和動態 轉換，如規則性、與輪廓掃描起始點之間的距離及外觀角度或弧度，這些都是會影響 圖式輪廓視覺分析時間長短的原因。生物會偵測最精簡的特徵數量，作為圖形辨識 (figure reconginition)及分類(classification)的判斷，此數量取決於圖形表面結構的複雜 性，例如對於簡單幾何圖形，特徵數量可能為2-3 種；複雜圖像則可能大於 10 種。複 雜性的量測常源自於信息理論的熵(entropy)值，也就是其所蘊涵的信息量(information capacity)(Berlyne, 1963)。

複雜性定義

複雜性(complexity)的字源來自於拉丁字 complexus，意旨交錯(entwined)、扭曲在 一起 (twisted together)。這也可以解釋為構成複雜性，必須有二個以上的組成物，以某 種方式結合在一起，並且很難加以區隔或分開。牛津字典定義 complexity 為緊密結合 的組成物 (it is "made of (usually several) closely connected parts")。可識別的組成物愈 多，且其關係愈密切，則系統愈複雜，需要愈多時間搜尋和計算。在此定義中，可區 別性 (distinction)及關連性 (connection) 是決定複雜性的兩大特徵因素。可區別性指的 是綜合體中可區別的組成物 (different parts of the complex)，關連性指組成物間的依附 關係 (the knowledge of one part allows the determination of features of the other parts)。換 言之，複雜性只有在可區別性及關連性同時出現時在存在；完全的混亂(disorder)及完全

的規則化(order)都不是複雜性的定義(Heylighen, 1996)。圖樣複雜性可以定義為「一個 圖像被口語化描述的困難程度」(Heaps & Handel, 1999; Aude Oliva, Mack, Shrestha, & Peeper, 2004)，或者「視覺圖式的組成物很難被區分出來」(Aude Oliva et al., 2004)。圖 像的複雜性感知決定於視覺群組化的數量、在畫面中可觀察到組成物的數量、對畫面 景像的熟悉性和對畫面中物體既存的知識。而視覺複雜性(visual complexity)則主要是由 構成物體的數量、淩亂、開放、對稱、組織和色彩的多樣性所表示(Aude Oliva et al., 2004; Rayner, 1998)

為更加了解視覺複雜性的定義向度，以下整理視覺複雜性在實驗美學、環境、網 頁及其他視覺信息上的定義與研究：

實驗美學的複雜性

複 雜 性 具 有 三 種 特 性 ： 客 觀 複 雜 性 因 素 (objective complexity)、主觀複雜性 (subjective complexity)及多向度的概念(multidimental concept) (Berlyne, 1971c)。

客觀複雜性：客觀複雜性指的是元素數量增加，或過多的視覺刺激等因素，這些 客觀性條件因素會影響主觀性複雜性(Attneave, 1957b; Chipman, 1977; Chipman & Mendelson, 1979; A. C. Hall, 1969)。客觀性複雜性和主觀複雜性相關，但不等同(Attneave, 1957b)。有些研究以客觀性複雜性的量測結果來預測主觀複雜性，例如 Berlyne(1963) 以16 個圖形在「元素排列的不規則性(irregularity of element disposition)、元素的數量 (amount of elements)、元素間的異質性 (heterogeneity)、形狀的不規則性(irregularity of shapes)」上的變化，探討統一性(unity)、不對稱性(asymmetry)及不一致性(incongruence) 的主觀判斷結果。但有關客觀複雜性的實驗性研究，由於使用的對象物不同(多角形、 棋盤、圖像等)，或者使用量測的方法不同，和美感偏好的相關性也有不同，因此需視 研究對象來定義客觀複雜性的定義。

主觀複雜性：每個人所感知的複雜性取決於他(她)組織畫面的方式，即人們如何組 織景象中所出現的元素(Hogeboom & van Leeuwen, 1997; Strother & Kubovy, 2003)。將 感知的元素，如線、角度或外觀等交互作用形成有意義的圖式，為知覺組織 (perceptual organization)的結果。Heckhausen(1964)稱此為自然部份(natural parts)，是圖像(image)的 元素組織被整體性感受和觀察的結果，例如圖地 (figure and ground)關係、群組關係等。

斷，是有機體知覺過程和刺激物物理特質之間的關係。一個圖式(pattern)對某人來說， 可能比另一個人、或不同時間點，感覺較新奇、複雜或模糊。Berlyne (1971a)認為刺激 物的快樂價值 (hedonic value)和客觀性複雜性無直接關係，而和主觀複雜性有關，因為 只有物體感受的結果(what is perceived)，才會產生影響行為的效果(Heckhausen, 1964)。 主觀複雜性通常會以主觀性評分量表來量測，且會和由古典信息理論所發展的客觀量 測方式來比對(Berlyne, 1974)。 多向度的概念：由於複雜性的定義隨著刺激物的屬性不同，及對感知系統了解的 不足，一直沒有確定的定義及向度，但可確定的是視覺複雜性其來自多向度的。 表2-3 是基於 Berlyne 複雜性理論，驗證主觀、客觀複雜性及多向度的相關研究。 表 中 分 別 整 理 出 各 研 究 中 所 採 取 的 研 究 對 象 、 複 雜 性 量 測 向 度 及 觀 點 。 例 如 Heckhausen(1964)質疑單從信息理論解角度，將複雜著重在元素的特質，例如元素的數 量、位置，來尋求複雜與審美偏好的關係，而提出在實驗中必須有受試者的行為參與， 表示複雜性並不是刺激物本身，而是和感覺複雜的方式有關。他認為物體感受是元素 組織整體性地被感受和觀察的結果，且認為複雜是多向度的現象(multidimentional phenomenology)。 表2-3 主觀、客觀複雜性及多向度的相關研究 研究者 研究對象 客觀複雜性向度 主觀性評分 觀點 Heckhausen(1964) 圖像 圖像組成元素的 數量、大小、位 置 偏好程度評分 (1) 需考慮整體性的元素組 織被感受和觀察的自然特 質，例如圖地關係、群組 關係。 (2) 複雜是多向度的現象 Attneave(1957) 多角形 圖形頂點的數量 複雜程度評分 Berlyne(1963) 16 個圖形 圖形組成元素排 列的不規則性、 數量及異質性 統一性、不對 稱性及不一致 性的程度。 這些向度是獨立且可代表 70-90%的複雜性，易作為 分辨判斷因素之一 Hall(1969) 幾 何 圖 形 的 物理特質 色彩 邊數 複雜程度評分 (1) 有無色彩不會影響複雜 性判斷 (2) 切面數和頂點數和複雜 性判斷有高相關 Nicki(1972) 棋 盤 中 的 棋 子 棋子數量，以信 息 熵 計 算(4.36 -900 bits) 對棋盤圖式的 記憶與關連性 評分 主觀和客觀呈現U 型關係 Rump(1968) 許多材質 不 對 稱 、 多 樣 偏好程度評分 (1) 每個判斷複雜性的因素

性、異質 是獨立，彼此間沒有關係 的，建議每次只判斷一個 因素 (2) 每個人判斷影像的複雜 性由於注重的不同而有不 同結果。

Kieitler, Zigler & Kreitler(1974) Berlyne(1963 )實驗的圖 圖形組成元素異 質性、排列的不 規則性、數量 不規則的形狀、 並列元素的不一 致性 量測觀看時間 偏好程度評分 (1) 複雜性無法由單一或確 定的指標來衡量，必須是 多元的 (2) 在知覺組織上具有意義 的圖形會認為是較簡單的

環境視覺複雜性

Oliva,Mack , Shrestha & Peeper (2004) 對環境景象的複雜性進行研究，提到複雜性 的感知和視覺刺激的變化(variety)是相關的。變化有二種，第一種是視覺複雜性會隨著 物件的量(quantity )和範圍(range)而增加，第二種是當物體的數量與及外表是維持一致 時，則視覺複雜性會隨著材質(materials)及外觀風格( surface styles)的變化而增加。真實 世界景象的複雜性包含了物體數量及外觀風格的。Heaps & Handel (1999)認為材質的複 雜性可以從單一的知覺結構向度評估：材質中重覆性(repetitive)和統一性(uniform)的圖 案，比未組織的圖案會被判斷為較低複雜性的，這和對稱、重覆、類似性等規則化原 則相同，都是具有簡化視覺圖案複雜性效果 (Feldman, 1997; Palmer, 1999; van der Helm, 2000)。假如組成物很難區分時，視覺圖案會被認為是複雜的。換句話說，當組成物容 易區分或者視為整體時，則複雜性減低，圖案會視為較簡單的(Heylighen, 1996)。由此 可得知，視覺複雜性取決於觀察者在景象中所感知到的群化數目，即獨立組成物的數 量。

除此之外，環境視覺複雜性也和圖像中的信息及功能任務有關，Heaps and Handel (1999)主張參與者在真實世界中，用來判斷視覺複雜性的三種形式：

獨一的感知向度 (unique perceptual dimension)：將複雜性以一個感知向度評斷時， 是非常受到主觀性及任務限制影響的。例如風景圖像會被認為是自然的或人造的呢? 這 是非常主觀性的 (A. Oliva & Torralba, 2001)

多向度的空間再現 (multi-dimensional space representation)：大部份視覺複雜性會以 不同向度來解釋的，例如不同組成物的數量多寡、變化性等。雖然每個向度的功能任

務不同，但用來描述環境的主要向度是相同的 (Gardenfors, 2000)。 彈性的空間再現：人們使用圖像特徵，如結構、群集、開放性、對稱性、色彩變 化性等，來表達視覺複雜性的特徵，也會以不同功能任務及注意機制，來表達視覺複 雜性的特徵，並沒有特定的語彙來再現視覺複雜性。 這三種方式是不併存的，例如對特定的任務來說，視覺複雜性可說成傾斜的線， 此為以感知優先的方式；但對另一任務來說，空間的視覺複雜性可能需要用多向度的。

網站視覺複雜性

視覺美感藉由視覺元素(例如色彩、文字風格和大小、圖像和動畫)的操控，可以改 變觀者的感知(Hoffmann & Krauss, 2004)，並促使使用者自然地沈浸在網頁的信息中 (Krauss, 2004)。Hoffman and Krauss 的研究指出，視覺的簡潔(visual clarity)與豐富性 (visual richness)是兩項重要的美感向度，視覺的簡潔性指的是古典(classical)的美感品 質，如乾淨(clear)、對稱的設計；視覺豐富性則是表現(expressive)的美學，如創意、原 創、打破規範的能力，此所談的視覺豐富性即視覺複雜性。許多網頁視覺複雜性的相 關研究，主要是探究如何以網頁設計元素的特質，來作為網站評價的結果，例如Ivory et al.從許多不同類型的網站中評判網站的內容、架構、引導設計、視覺設計、功能、互動 性等其他使用經驗，發現網站特質的差異性，呈現在編排品質、螢幕範圍及信息品質 等許多向度上，因此其量化分析網頁的特質，發現字數、連結數、圖像數、頁面構成 等，能63%地正確預估使用者對網站評價的結果(Ivory, Sinha, & Hearst, 2001)。

網站複雜性的定義方式需同時兼具美學與使用的因素，必須以網站的信息傳達、 感知、認知來探討。此說明了網站的複雜性是兼具主觀感知及客觀量測的。因此，有 關網站複雜性的問題，需對主觀感知及客觀分別量測，或者結合兩者之間關係的來探 討。 Germonprez & Zigurs(2003)建議從內容 (content)、形式 (form)及認知 (cognition) 三項因素來探討網站複雜性的因素：

內容：網頁視覺信息可能是不確定的、模糊的、新奇、複雜且密集的(Schneider, 1987)。不確定 (uncertainty)指的是提供的信息量與所需信息量之間的關係(Daft & Lengel, 1986)；模糊(ambiguity)指可以解譯同 一信息方式 的數量 (Daft & Lengel, 1986) ；新奇(noverlty)指不符合某種認知基模的能力(Kiesler & Sproull, 1982)；複雜