平面設計公司網頁色彩認知研究與創作

全文

(1)國立臺中教育大學數位內容科技學系碩士班碩士論文. 指導教授：柯凱仁. 平面設計公司網頁色彩認知研究與創作 A Study on Color Cognition from Color Perception of Graphic Design Company Websites. 研究生：蔡佩伃. 撰. 中華民國一○一年六月.

(2) 誌謝一個階段的結束，過程中總需仰賴眾多人的幫助與指導，首先感謝指導教授柯凱仁教授循循善誘的教導，並且逐字推敲；讓我深深感受到柯教授對於教學的熱忱及從事學術研究須具備的嚴謹態度，同時感謝口試委員陳健文與盧詩韻兩位教授，對於本論文所提供的寶貴意見與建議，使其能臻至完善。另外還有本所所長王曉璿教授以及所上老師的指導，在此一併感謝。另外，同學間互相幫助的精神讓我非常感動與難忘，在我提出需要幫忙的訊息時，總是能馬上獲得援助，不勝感激。於此要感謝學弟偉廷幫我撰寫在研究設計所需的程式，以及學妹沐汶在實驗過程中的大力幫忙，還有濬仁、小葉、國松、士丞、傑倫、勇均、千舜…等同學在研究學習歷程中的砥礪，讓我在每個階段裡不會感到孤單或徬徨，當然還有要謝謝家人的支持，是你們給了我無限的信心與力量。最後，感謝這一路上曾幫助過我的任何人………. 蔡佩伃謹誌民國一○一年六月. I.

(3) 摘要本研究選用平面設計公司網站首頁之色彩配色為樣本，探討如何以多向度評量法輔助設計分析與評估，將感性的直覺判斷以科學研究掌握認知訊息，借實驗獲得最佳化的網頁配色組合。本研究以具指標性網頁設計類書籍《Web Design Index by Content》中（2005~2010 年出版）之平面設計公司網站首頁畫面為取樣來源，針對平面設計公司網站首頁色彩計畫，以多向度評量法進行色彩偏好認知訊息的分析與評估；透過集群實驗從九十九個樣本中篩選出十四個「典範樣式」，並由投射實驗取得十個屬性形容詞用語。接著，據此集群實驗和投射實驗結果進行偏好性認知實驗，結果顯示：「精緻的」與「獨特的」為平面設計公司網站首頁傳達色彩認知的主成份訊息，可作為設計基準，加以推廣或應用。最後，研究者根據分析結果，進行平面設計公司網站首頁配色創作，經由再偏好性實驗驗證顯示，本研究所創作之網站首頁能優化傳遞「精緻的」與「獨特的」的色彩意象。希望研究成果可提供網頁設計產業或相關研究單位之參考。. 關鍵字：色彩認知、色彩計畫、網頁色彩、多向度評量法. II.

(4) Abstract. This study aimed at investigating how to make judgments scientifically about color cognition from color perception, and how to optimize web color quantitatively. Multidimensional scaling analysis (MDS) was used to assess color scheme for homepages of graphic design company websites. Ninety-nine homepages, which are listed inside the book “Web Design Index by Content “from 2005 to 2010, were analyzed in this study. Fourteen homepage paradigms were presented from hierarchical clustering and ten characteristic adjectives were produced by projective experiment. Ten characteristic adjectives were unique, innovative, attractive, creative, delicate, explicit, professional, comfortable, coordinated, and clear. The result of preference experiment shown that ‘unique’ and ‘delicate’ were most important color cognition websites homepages should be. According to the results of investigation, innovative websites homepages were designed and subsequent preference experiment was done to show the homepages were fit for graphic design company websites. The conclusions and suggestions will be used as references for relevant industry and academia.. Key words:Color Cognition、Color Scheme、Web Color、MDS，Multidimensional scaling analysis. III.

(5) 目錄誌謝.......................................................................................................................................I 摘要.....................................................................................................................................II Abstract...............................................................................................................................III 目錄....................................................................................................................................IV 表目錄............................................................................................................................... VI 圖目錄.............................................................................................................................. VII 第一章緒論 ..................................................................................................................... 1 第一節第二節第三節第四節. 研究背景與動機 ............................................................................................. 1 研究目的 ......................................................................................................... 3 研究範圍與限制 ............................................................................................. 4 研究流程 ......................................................................................................... 5. 第二章文獻探討 ............................................................................................................. 7 第一節名詞釋義 ......................................................................................................... 7 1.1 網頁設計 ......................................................................................................... 7 1.2 色彩認知 ......................................................................................................... 7 1.3 色彩計劃 ......................................................................................................... 8 1.4 色彩調和 ......................................................................................................... 9 1.5 多向度評量法(MDS) .................................................................................... 10 1.6 投射實驗 ....................................................................................................... 10 1.7 集群實驗 ....................................................................................................... 10 1.8 偏好性實驗 ................................................................................................... 11 第二節認識全球資訊網演進與網站 ....................................................................... 13 第三節網頁視覺設計 ............................................................................................... 18 第四節網頁色彩與配色 ........................................................................................... 22 第五節色彩意象與聯想 ........................................................................................... 30 第三章研究方法 ........................................................................................................... 33 第一節研究架構 ....................................................................................................... 33 第二節研究設計 ....................................................................................................... 35 2.1 實驗 A：集群實驗 ....................................................................................... 35 2.2 實驗 B：投射實驗........................................................................................ 38 2.3 實驗 C：偏好性實驗(一) ............................................................................. 41 2.4 實驗 D：偏好性實驗(二) ............................................................................. 44. IV.

(6) 第四章研究結果 ........................................................................................................... 47 第一節 1.1 1.2 1.3 第二節第三節 3.1 3.2 3.3 3.4 3.5 3.6. 實驗 A：集群實驗 ....................................................................................... 47 「適合組數」之確認 ................................................................................... 47 「典範樣本」之確認 ................................................................................... 47 群化分析 ....................................................................................................... 50 實驗 B：投射實驗........................................................................................ 57 實驗 C：偏好性實驗(一) ............................................................................. 58 屬性向度變易量之決定 ............................................................................... 58 屬性形容詞相關係數分析 ........................................................................... 59 屬性形容詞主成分權值之分析 ................................................................... 60 屬性形容詞偏好與認知空間示意圖分析 ................................................... 61 偏好性認知排序之整理與分析 ................................................................... 63 小結 ............................................................................................................... 68. 第五章設計應用推廣與驗證 ....................................................................................... 69 第一節 1.1 1.2 第二節 2.1 2.2 2.3 2.4 2.5. 設計應用推廣 ............................................................................................... 69 色彩分析 ....................................................................................................... 69 設計應用說明 ............................................................................................... 70 驗證結果-實驗 D：偏好性實驗(二) ........................................................... 74 屬性向度變易量之決定 ............................................................................... 75 屬性形容詞主成分權值之分析 ................................................................... 76 屬性形容詞偏好性認知之空間示意圖之分析 ........................................... 77 偏好性認知分析 ........................................................................................... 78 小結 ............................................................................................................... 78. 第六章結論與建議 ....................................................................................................... 79 第一節第二節. 結論 ............................................................................................................... 79 建議 ............................................................................................................... 80. 參考文獻 ........................................................................................................................... 81 附錄 ................................................................................................................................... 85 附錄一：實驗 A 集群分析 99 個實驗樣本....................................................................85 附錄二：平面設計公司網站首頁創作..........................................................................93. V.

(7) 表目錄表 2-2-1 表 2-3-1 表 2-4-1 表 2-4-2 表 2-4-3 表 2-4-4 表 3-1-1 表 3-2-1 表 3-2-2 表 4-1-1 表 4-2-1 表 4-2-2 表 4-2-3 表 4-2-4 表 4-2-5 表 4-2-6 表 4-2-7 表 4-2-8 表 5-1-1 表 5-1-2 表 5-1-3 表 5-1-4 表 5-2-1 表 5-2-2. 網站評估原則彙整表.....................................................................................16 網頁內容組成彙整表.....................................................................................19 216 安全色 RGB 含量表.............................................................................24 色相配色方式及其效果呈現一覽表.............................................................26 明度配色方式及其效果呈現一覽表.............................................................28 彩度配色方式及其效果呈現一覽表.............................................................29 研究實驗程序表.............................................................................................33 屬性形容詞陡肘圖.........................................................................................41 網站首頁畫面設計.........................................................................................45 典範樣本.........................................................................................................48 實驗 C 偏好性向度變異量統計表.................................................................58 實驗 C 屬性形容詞相關係數.........................................................................59 實驗 C 偏好性向度主成分權值表.................................................................60 偏好實驗之 MDPREF 偏好性認知排序表....................................................63 實驗 C 較受偏好之偏好認知排序.................................................................64 實驗 C 較不受偏之好偏好認知排序.............................................................66 實驗 C 中較受偏好之樣本.............................................................................68 實驗 C 中較不受偏好之樣本.........................................................................68 實驗 C 中較受偏好色彩分析.........................................................................69 設計一色彩應用方式.....................................................................................71 設計二色彩應用方式.....................................................................................72 設計三色彩應用方式.....................................................................................73 實驗 D 偏好性向度變異量統計表.................................................................75 實驗 D 偏好性向度主成分權值表.................................................................76. VI.

(8) 圖目錄圖 1-4-1 圖 2-1-1 圖 2-1-2 圖 2-1-3 圖 2-4-1 圖 2-4-2 圖 2-4-3 圖 2-4-4 圖 2-4-5 圖 3-1-1 圖 3-2-1 圖 3-2-2 圖 3-2-3 圖 3-2-4 圖 3-2-5 圖 3-2-6 圖 3-2-7 圖 3-2-8 圖 3-2-9 圖 3-2-10 圖 3-2-11 圖 4-1-1 圖 4-1-2 圖 4-1-3 圖 4-1-4 圖 4-1-5 圖 4-1-6 圖 4-1-7 圖 4-1-8 圖 4-1-9 圖 4-1-10 圖 4-1-11 圖 4-1-12 圖 4-1-13 圖 4-1-14. 研究流程...........................................................................................................5 產品形象尺度表...............................................................................................9 集群實驗樹狀分布圖.....................................................................................11 偏好性實驗認知空間示意圖.........................................................................12 RGB 加法混色................................................................................................23 網頁安全色.....................................................................................................24 色相環.............................................................................................................25 色相環上的調和區域.....................................................................................25 高低調子.........................................................................................................27 研究架構圖.....................................................................................................34 實驗 A 有效問卷統計集群實驗受測者分組人數表.....................................35 集群實驗受測樣本 99 個刺激物...................................................................36 實驗 A 集群實驗線上分群問卷示意圖-1....................................................37 實驗 A 集群實驗線上分群問卷示意圖-2....................................................37 實驗 B 有效問卷統計集群實驗受測者分組人數表.....................................38 投射實驗開放式問卷.....................................................................................40 投射實驗半開放式問卷.................................................................................40 實驗 C 有效問卷統計集群實驗受測者分組人數表.....................................41 實驗 C「偏好性實驗」(一) 問卷示意圖.....................................................43 實驗 D 有效問卷統計集群實驗受測者分組人數表.....................................44 實驗 D「偏好性實驗」(二) 問卷示意圖.....................................................46 集群分析陡肘圖.............................................................................................47 集群分析樹狀分佈結果圖.............................................................................49 第 1 群刺激物示意圖......................................................................................50 第 2 群刺激物示意圖......................................................................................51 第 3 群刺激物示意圖......................................................................................51 第 4 群刺激物示意圖......................................................................................52 第 5 群刺激物示意圖......................................................................................52 第 6 群刺激物示意圖......................................................................................52 第 7 群刺激物示意圖......................................................................................53 第 8 群刺激物示意圖......................................................................................53 第 9 群刺激物示意圖......................................................................................54 第 10 群刺激物示意圖....................................................................................54 第 11 群刺激物示意圖....................................................................................55 第 12 群刺激物示意圖....................................................................................55. VII.

(9) 圖 4-1-15 第 13 群刺激物示意圖....................................................................................56 圖 4-1-16 第 14 群刺激物示意圖....................................................................................56 圖 4-2-1 實驗 B 屬性形容詞加權陡肘圖.....................................................................57 圖 4-2-2 實驗 C 偏好性向度變異量統計示意圖.........................................................58 圖 4-2-3 實驗 C 之偏好性認知空間示意圖.................................................................61 圖 4-2-4 刺激物與編碼示意圖.....................................................................................62 圖 5-1-1 依三等分原則所繪製的隔線.........................................................................70 圖 5-2-1 實驗 D 網站首頁設計.....................................................................................74 圖 5-2-2 實驗 D 刺激物樣本編碼.................................................................................74 圖 5-2-3 實驗 D 偏好性向度變異量統計示意圖.........................................................75 圖 5-2-4 實驗 D 之偏好性認知空間示意圖.................................................................77 圖 5-2-5 較受偏好的色彩組合.....................................................................................78 圖 6-1-1 網站首頁創作圖.............................................................................................80. VIII.

(10) 第一章第一節. 緒論研究背景與動機. 近年來網際網路發展迅速，上網人口與日遽增。根據台灣網路資訊中心(TWNIC) 公布 2012 年台灣寬頻網路使用調查報告，截至 2012 年 5 月 27 日為止，台灣地區上網人口已突破 1,753 萬人，總計 17,533,980 人曾上網過（整體人口 0-100 歲）；12 歲以上之上網人口有 1,597,003 人，上網比例為 77.25%，比 2010 年增加了 2.33%，其中寬頻網路使用人數約為 15,302,621，寛頻使用普及率為 74.18%（TWNIC-財團法人台灣網路資訊中心，民 101）。許多企業、公司團體以及個人皆透過網站平台做為訊息傳達與宣傳的一種管道或手段，除了以往的平面視覺傳達方式外，更增添了數位化的視覺傳達。散佈於全球資訊網中的網頁種類與風格包羅萬象，網站數量更是多如繁星，由美國 Netcraft 資訊網路公司公佈統計，全球網站從 1995 年至 2012 年 6 月突破六‧六億，達到 665,916,461 個，而且到目前為止還陸續在增加當中。經台灣網路資訊中心查詢，台灣網站統計至 2009 年 12 月止，已超過 17 萬個註冊.tw 域名的網站。當我們漫遊在網際網路時，主要透過視覺器官進行瀏覽的行為以及接收視覺訊息，所以當進入一個網站開始瀏覽訊息、觀看網頁時，色彩便是最富有表現力和感染力的視覺元素之一；也是網頁中最能吸引瀏覽者視線的（宋青原、季興東，民 95）。換言之，在全球資訊網(WWW) 的相連網中，無論個人或機關團體，都可以透過網頁 (Web page)將自己的個人特色、團體的形象理念或經營內容與全球資訊網的使用者交流溝通，達到資訊無遠弗屆的全球化目標（趙涵捷、陳俊良，民 90）。在浩瀚無垠的網路世界中，存在著各式各樣類型的網站，為了吸引上網者瀏覽網站，如何設計出與眾不同並兼具風格及美感的網頁，將是從為數眾多的網站中脫穎而出的重要因素之一。但是在網頁設計上，網頁的版型設計、網頁色彩、網頁編排及多. 1.

(11) 媒體的應用等要素，皆會影響網站的傳播效果和瀏覽者的印象以及點閱率（張惠如、撰文，民 93）。在諸多影響網頁設計的關鍵因素中，色彩扮演了一個重要的角色。李立偉（民 96）指出：打開一個網站，給用戶第一印象就是網頁的色彩，色彩是網頁設計的關鍵因素之一，色彩既是網頁作品的表達語言，又是視覺傳達的方式與手段。吳東龍（民 90）也指出，色彩元素則是網頁設計中的首要考量，因此想要塑造網頁風格，則先從網頁的色彩設計開始。因此色彩是網頁設計的靈魂之一，展現了網頁整體的視覺風格與特色，也是最先烙印在瀏覽者腦海中的網站印象。當我們在進行網頁設計時，除了形式的創意之外，色彩是重點項目，運用網頁色彩計畫創造出具獨特性的網站，也是設計師的重要任務。然而，不同類別的網站各有不同訴求，其表現方式也大相逕庭，必須依據其產業的經營理念、追求的目的或目標等，來呈現最佳的視覺表現方式。Veen（1999）將網頁的呈現方式粗略分為圖書館類(Library)和美術館類(Gallery)的設計，圖書館類的網站較重視文字資訊的呈現，而美術館類則著重在風格與美感，較偏重色彩、創意以及氣氛的營造。許銘文（民 96）則將較強調視覺美感的網站，例如「平面設計」、「網頁多媒體」、「工業設計」等網站稱之為「設計藝術型」。而網頁的色彩呈現取決於業主與網頁設計者，對於色彩的選擇就必須由少數者依照其經驗做判定，如何在決策者主觀評斷前獲得客觀且合適的網頁色彩配置是極需探討的議題。此外，國內、外都有許多介紹網頁色彩設計的書籍與網站，在說明色彩配色時，大多以形容詞直接搭配色彩的組合方式呈現。綜上所述，本研究將選用平面設計公司網站首頁之色彩配色為樣本，探討以多向度評量法來將感性的直覺判斷做科學化的流程研究，並透過統計量化的方式以得到最佳化的網頁配色組合。. 2.

(12) 第二節. 研究目的. 基於前述之背景與動機，整理本研究目的如下：一、經研究認識網頁色彩計畫相關知識，以建立論文之研究方向。二、掌握受測者對網頁色彩的認知訊息，以發現設計之評價基準。三、學習以多向度評量法輔助色彩評估，以定量解決定性的可能。四、推廣實驗所得之配色基準與配置系統模式，提供色彩設計創作之參考。. 3.

(13) 第三節. 研究範圍與限制. 一、本研究主要探討網頁色彩屬於視覺設計部分，並不涉及網站企劃、資料庫、圖形使用者介面等討論。二、本研究旨在探討網頁色彩認知；因此，有關圖文元素（造形、字體、按鈕、影像… 等）、聲音、動畫表現以及網路行銷策略等皆不在研究範圍內。三、《Web Design Index by Content》年刊自 2005 年誕生起現已發展成同行業最重要的出版物之一，每年都會對網頁設計的最新趨勢給予準確概述，書中的範例皆由本書編者從世界各地自行上傳到 Web design Index 網站所篩選出，其具有國際性和全球性之參考價值，本研究樣本限制在 2005~2010 年的指標出版網頁書籍《Web Design Index by Content》四、網站內容與結構會因產業趨勢有所變化，故本研究的網站樣本取自《Web Design Index by Content 1》~《Web Design Index by Content 5》書中範例，而無法顯示與無法辨識產業類別之網頁皆予以排除。五、色彩探討以電腦顯示色 RGB 為主，其他表色法亦不納入討論。. 4.

(14) 第四節. 研究流程. 圖 1-4-1 研究流程. 5.

(15) 6.

(16) 第二章. 文獻探討. 文獻探討之目的在於瞭解所研究領域之資訊的彙整，有助於研究者在研究過程中得到所需的知識。以下，本章將先對於相關之名詞加以釋義，再逐節針對全球資訊網概述與網站、網頁視覺設計、網頁色彩與配色、色彩意象與聯想等四大議題，進行相關文獻之探討。. 第一節. 名詞釋義. 1.1 網頁設計網頁設計包含資訊(Information)、導覽(Navigation)、圖形或視覺(Graphic or Visual) 設計等三個領域，資訊設計是指網站相關內容的一致性與清楚呈現給瀏覽者，導覽設計是規劃出完整的組織架構，方便瀏覽者取得想要的資訊，而圖形或視覺設計則是將資訊做視覺化的溝通，例如色彩、影像、字型、版面的設計，讓網站的畫面美觀(Newman, & Landay, 2000），而本研究所探討的網頁設計就是以視覺設計為主。. 1.2 色彩認知認知(cognition)是一種心理作用(function)，係指人們對事物的知曉歷程（Zimbardo , 1989），這是一種複雜的過程，藉由這個過程，人們對感官的刺激加以挑選、組合，產生注意、記憶、理解及思考等心理活動，並給予解釋成為一種有意義和連貫的圖像（Zimbardo, 1990）。感覺是認知的起源，認知則是經由感知覺系統輸入的刺激所形成的心理歷程（陳烜之，民 96），人類對於色彩各種的認知取決於以往的色彩經驗的累積，色彩常常經由五官以及其他所有器官發生各式各樣的判斷，諸如：色彩的前進後退、膨脹收縮、色彩的輕重或軟硬、冷暖感覺、積極性與消極性與注目不注目的顏色的判斷等等，而這些色彩判斷是色彩對人類感情作用的影響，它們都是日常的、普遍的色彩生活現象（林書堯，民 80）。由此可知，色彩的認知是外在經由器官感覺連接我們的色彩經. 7.

(17) 驗，所產生的各種感情、心理現象與任何想法。. 1.3 色彩計劃人類環境中的各種細節都需要色彩來調節，而將色彩運用在生活中的各種方式且與以分類整理產生秩序化、合理化，使色彩進入人類生活領域中的各種事物，均能獲至完美的效用，這種將色彩有條理、有組織的應用到系統的作法，稱為色彩計劃（林文昌，民 76）。鄭國裕與林盤聳（民 76）認為，色彩計劃具備了以下特性： . 科學化：繼承色彩學中有關色彩的感覺、色彩的現象等客觀的特性，依照市場調查與測試的結果，設定符合色彩需求，滿足消費型態的色彩戰略。. . 類別化：在作業嚴謹、方法科學的市場調查中，明確的區隔品牌的不同，突顯本身的差異性與吸引力。. . 階段化：配合產品的生命週期、發展階段、消費型態…等考量，制訂一套合適的色彩計劃，且伴隨不同的階段產生相對性的色彩。. . 系統化：將抽象的色彩語言與色彩形象加以系統化，成為客觀、科學的色彩形象尺度，並可從尺度的位置了解其特殊的意義。例如：透過圖 2-1-1 之產品形象尺度表，我們可以系統化地分析不同產品之色彩設計。. 8.

(18) 圖 2-1-1 產品形象尺度表 (資料來源：鄭國裕、林盤聳（民 76）。「色彩計劃」。台北市：藝風堂出版社。). 1.4 色彩調和配色的主要目的在於將色彩的配置效果做有系統的整理，分類與歸納出一個提供設計或作畫時的著色參考，利用色彩與色彩互相對應的關係與效果進而吸引觀者的注意，以達預設的成效（朱介英，民 90）。有些色彩單獨存在時色感很好，假使和其他色彩組合時，沒有調和感，也就不能保持其優點與美感（太田昭雄、河原英介，民 80）。因此，配色又可稱做色彩調和，兩個或兩個以上的事物互相作用時，產生秩序、統一與合諧的現象，謂之「調和」，所謂「色彩調和」的意義，即是指兩種或兩種以上的色彩互相配色，產生調和（林文昌，民 77）。. 9.

(19) 1.5 多向度評量法(MDS) 多向度評量法(MDS，Multidimensional Scaling)最常被使用在從一群事物或感覺刺激間相似的資料，建構出一個合理的多向度認知空間，幫助使資料系統化。MDS 可以進行認知向度的擷取，其刺激在擷取出空間上的彼此距離，大致和刺激間彼此的差異性一致，並且可以讓我們更清楚的了解與掌握人對於這些事物或感覺的認知方式（鄭守益，民 90）。其研究方法是將受測者對刺激物產生的認知資料，以數學模式加以運算，並將結果以可理解、可視覺化的空間圖表加以呈現，進而能夠從刺激物在空間中的分布，觀察分群的狀態和找出隱而未見的認知意義（柯凱仁，民 85），使我們猶如在一張地圖上看到這些事物彼此間的關連性。. 1.6 投射實驗投射實驗的目的是在收集受測者對問題的「意象用語」，此稱為「屬性形容詞」；以成為偏好性實驗時轉化受測者對刺激物的偏好性矩陣資料，實驗經「開放式」與「半開放式」問卷，統計分析後可獲得數個最重要的用語，為偏好性實驗中對於實驗刺激物偏好程度之「評價用語」（柯凱仁，民 94）。. 1.7 集群實驗集群分析在於辨識某些特性相似的事物，並將這些事物按照特性分成幾個集群（黃俊英，民79），其目的在將實驗的樣本加以群化，同一群中的樣本具有高度的相關性，如圖，而不同的群組則差異性較大。其演算程式分為兩類；其一是「層次集群分析（Hierarchical method），採用層級式集群分析，可將刺激物按其特性，由最相似至最差異，依序結合分群成樹狀架構，再由分群變異量掌握最佳化之群組數（柯凱仁，民96）。. 10.

(20) 圖 2-1-2 集群實驗樹狀分布圖 (資料來源：本研究). 1.8 偏好性實驗偏好資料的多向度分析（ Multidimensional Analysis of Preference Data；簡稱 MDPREF），是一種可將受測者認知資料，以向量模式運算（翁註重，民 83）。在建構的空間上以點座標呈現之，若將刺激物對某一評量做正投影，即得此一屬性評價的偏好程序。於此，MDPREF 架構的認知空間是整合全體受測者偏好與屬性用詞的結果，對其可解釋的適用程度以向度數量變異量表之，一目了然(如圖 2-1-3)。此外，兩兩屬性向量的相關係數或夾角值，可視為兩屬性的相關程度，角度越小表示相關性越高，若近成直角則表示兩屬性在認知上毫無關聯，在主成分結果中，可看出各屬性向量的重要權值，由此可判斷應以哪些因素為主要的評量基準，在實驗之前必須以客觀且合理的方法蒐集屬性形容詞，藉以將研究結果的錯誤率降到最低（柯凱仁，民 85）。. 11.

(21) 圖 2-1-3 偏好性實驗認知空間示意圖(資料來源：本研究). 12.

(22) 第二節. 認識全球資訊網演進與網站. 網際網路已突破傳統的媒體，沒有預算成本、時間和空間上的多重限制，為大眾提供多元資訊及寬廣視野，也拉近了彼此間的距離。網際網路除了具有無遠弗屆的傳輸功能外，張惠如（民 93）還認為網際網路具有以下四項特點： . 便利性. 網路具有資訊串連之強大功能，使用者可利用上網瀏覽網站資訊，藉由搜尋(search) 功能的便利性，不受時間的限制，以網內及網外相互連結方式取得所需的資訊。 . 時效性. 網路比起一般媒體不但提供更即時、更快速且具低成本的優勢，其顯著的時效性功能，對於注重時效資訊的產業及現代人快速變化的生活有其重大幫助。網路比傳統媒體更能及時掌握訊息及新知，更能使上網者與世界資訊同步接軌；網站維護者的定期更新、維護，與立即上傳便可形成的網站資訊傳播，造成即時性的時效功用。 . 互動性. 網際網路的資訊傳播，可透過事先的設計及規劃以達到與網路使用者的互動；上網瀏覽資訊的使用者可依據其偏好與需求，自由選擇網站中部分內容進行瀏覽；此外，網站頁面常見的「聯絡我們」及「客戶服務」等連結功能，更是企業與客戶(使用者)間取得快速溝通及直接聯繫的管道，其連結功能創造良好的網站互動模式。 . 多元性. 網際網路協定使用超連結功能，提供不同企業達到其網站相互連結的便利性，在內容上可同時包含並連結不同業別的訊息告知，並運用不同視覺化元素，諸如：動畫、影片、音樂等，使網頁視覺的呈現不再像傳統媒體僅依賴文字及圖片的傳達，網際網路的多元性功能，適時地提供使用者更豐富、更多變的視覺化官感及. 13.

(23) 注入瀏覽時的絕佳視聽情境。基於上述便利性、時效性、多元性、互動性等特點，網際網路成為從上個世紀末期邁向本世紀，科技影響人類生活最大的一項發展。在這一波的科技進展中，全球資訊網的出現則為網際網路開創了一條新的科技新體驗。全球資訊網（World Wide Web，簡稱 WWW），是網路上發展最快的資料庫查詢系統，WWW 伺服器可以經由一個具有使用者圖形介面(Graphic User’s Interface, GUI)的瀏覽器(Browser)展示各種影像、聲音、動畫等多媒體檔案（趙涵捷、陳俊良，民 90）。 WWW 是以網頁(page)的方式來發佈資訊，我們所說的首頁(homepage)，在搜尋資料時可以在不同的網頁間瀏覽，最初為歐洲核物理學研究所(CREN)在 1989 年為提供閱覽研究論文所開發的一套網路系統（Giggs, 2007）。1990 年 CREN 完成了第一個網路瀏覽器，不過當時 CREN 的網路只有一個網站，僅在學術上使用，後來在 1991 年向大眾發表了第一個簡易的瀏覽器，但只能連結為字，指令也必須用輸入的，所以當時並引起資訊界很大的迴響，直到 1993 年的伊利諾大學的國家高速運算應用中心(NCSA)推出第一個可連結圖文的瀏覽器馬賽克(Mosaic)，開啟了網路圖片與影像傳送的功能，後來 1995 年網景公司(Netscape)以圖形指令為主的第一個商用網路瀏覽器，可將圖文、影音、動畫整合起來，讓網頁畫面更加豐富（趙涵捷、陳俊良，民 90），也由於全球資訊網提出的新型態網路協定模式及技術的不斷更新，帶領網路使用者由傳統文字介面走向圖形化介面，因此拓展企業在網際網路中的商業應用（林佩儀，民 89）。網際網路的不斷應用與改良，致使網際網路世界中，充斥著不勝枚舉的各類型網站，從過去相關文獻可知，網站類型並無絕對的歸類方式，例如：Powell（2000）根據不同瀏覽對象作為網站類型進行區分，可包含商業、資訊、娛樂、入口、社群、藝術及個人網站等七項類別；李俊宏（民 85）將網站類型分為個人特色、教育研究、機關組織、商業團體、網路服務等；許子謙（民 87）則以網站的服務性質作為區分，分為學術性、商業性及個人性等三大主要類別。. 14.

(24) 而不同性質的網站，其所訴求的對象不同，因此呈現的形式就有所差異。「資訊導向網站」(information – based sites)強調網站內容的豐富性與資訊更新的時效性，其內容的編排較具有邏輯且有條理分明的選單，以提高閱讀效率作為設計考量，呈現清晰及簡明的操作介面風格，此類型網站包含新聞網站、雜誌網站及入口網站等類別；而「經驗導向網站」(experience – based sites)則著重在以鮮明的視覺風格，突顯網站的形象及其文化屬性，並利用切題的色彩搭配與圖像設計，創造網站整體的趣味性及高識別性，此類型網站包含機構網站、娛樂業網站、藝術類網站及個人網站等類別（王開立，民 89）。不過，現今絕大多數的網站皆兼具資訊導向及經驗導向的雙重特性，並依其服務性質之不同，於兩種導向之間的比重亦有所不同（李賢輝，民 89）。當然，網站可透過使用不同形式的媒體來進行呈現，不但可以豐富網頁內容，還可增進網路使用者對網頁內容的了解程度及對網站本身的滿意度（Otondo, Scotter, Allen and Palvia，2008）。除此之外，Pandir 與 Knight 從網頁美學觀點，嘗試使用 Berlyne 理論對十二個網頁進行個人偏好的分析，研究顯示網頁的偏好會隨著個人的品味和生活方式的改變，研究並建議網頁應加入趣味性和新奇性的設計( Pandir & Knight, 2006)。過去一些相關文獻陸續提出網站評估的原則，為了檢視這些原則，本研究彙整出表 2-2-1。表 2-2-1 的內容提供了我們在進行網站設計或評估相關工作時，一個參考的資訊，同時表中也看到部分文獻特別針對網頁的視覺設計加以分析，顯示網頁的視覺設計在網站評估上，是相當重要的一環。Moshagen 與 Thielsch（2010）研究便指出，網站中的視覺美感會影響網站設計對網路使用者在認知的可用性、滿意度及愉悅感上所產生的效果。. 15.

(25) 表 2-2-1 網站評估原則彙整表文獻出處. 網站評估原則及相關重要結論與建議. 游立光（民 91）. 1. 提出了五大類別之網站設計原則。 2. 有關視覺設計類別之設計原則是：（1）清晰協調的畫面─畫面簡潔美觀、畫面分割避免複雜、考慮畫面大小及空間配置、圖像避免混亂與過度使用（2）文字表達簡明扼要─使用熟悉的語言文字、段落明確單純、階層式呈現資訊、明確項目名稱、可知覺的資訊、標題與用詞明確。. 歐上晉（民 91）. 1. 清楚傳達性─將焦點集中於使用者及任務。主要是讓使用者瞭解和知道其要執行的任務與所處的環境。 2. 使用者經驗─真正成功的使用者介面設計是經過深思熟慮，並以使用者為中心的系統或經驗設計之自然擴展。 3. 使用者習慣─科學家研究使用者瀏覽習慣，以便發展更適合且快速的科技來配合大眾的瀏覽行為。 4. 使用者需求─在製作的過程中不斷地反覆修正。因為設計是需要反覆測試與重新設計，直到能達到使用者的期望為止。. 楊雅淳（民 90）. 1.在探討網站介面設計之使用者滿意度評估時，將網站設計原則分為三個面向：視覺外觀、使用性及其他。 2.對視覺外觀提出了五個評量項目，分別為整體設計、文字與圖像佔有比例、整體色彩搭配、引起注意力及畫面平衡。 3.視覺外觀之相關設計原則：（1）善用圖像，藉由圖像特徵之差異瞭解視覺感知（2）減少文字訊息（3）強調「視覺注意力」，讓使用者容易搜尋、瀏覽，且提高互動（4）著重視覺興趣與直覺性溝通，由視覺設計提升對重要訊息的提醒（5）與網站架構相關的訊息應置於網頁主體（6）網頁之間具一致性（7）畫面分割避免過於複雜（8）整體性美學。. 16.

(26) 陳俊男（民 86）. 1. 使用熟悉的文字：文字表述上儘量使用多數瀏覽者熟悉的語言文字，並適度強化使用動機。 2. 系統設計的一致性：網頁的指標、節點位置、圖案及主要資訊會重複出現，在版面排置時要維持一貫風格不宜輕易改變相關位置，讓瀏覽者能清楚順利的獲取資訊。 3. 避免過多的記憶需求：在瀏覽網頁的過程中，應該要有一個明確的指引，讓瀏覽者知道自己目前的狀況，並了解每項動作的結果，可減少瀏覽時的認知負荷。 4. 提高系統的有效性和可調性：在從事網頁設計時要避免預設使用者的立場，應盡量符合不同程度、不同目的瀏覽者的需求。 5. 簡潔美觀的畫面資訊：版面配置、網頁畫面的設計以及色彩、文字大小等涉及網頁的視覺要素都必須整體考量，都影響著瀏覽者是否樂於使用的重要因素。 6. 段落內容明確單純：網頁的設計要以相同主題為準，以傳達同一訊息為主，避免同頁面內的主題過多增加辨別困難。 7. 階層式的呈現資訊：欲提供瀏覽者的資訊要依其詳細程度分層表現，針對相同議題中不同詳細程度的資料，以不同畫面顯示，即是系統設計上分層的概念。 8. 功能完整的瀏覽系統：建構分層式的系統結構，讓使用者在讀取所在畫面資訊後，欲瀏覽其他主題下的子資料時，能夠提供完善的連結通路。 9. 使用 CGI(Common Gateway Interface)增強系統的互動性：善用不同的輸入表格(Form)提供輸入數字、文字、下拉式視窗選項或可提供滑鼠選取的按鈕，加強系統和使用者之間的互動性。 10. 使用明確的項目名稱：超連結項目必須簡單明瞭易懂，而非抽象的表達。 11. 畫面分割避免過於複雜：避免在同一個畫面中顯示過多的視窗，造成畫面繁雜錯亂，適當的畫面分割，可加強系統對使用者的指引，並強化瀏覽功能及減低使用者的記憶負荷量。. 17.

(27) 第三節. 網頁視覺設計. 網站由數個網頁所組成，是眾多資訊的載體，各種資料都可以在裡面取得，網站也像一個資訊分門別類後放置其中的一個立體空間，瀏覽者可以快速的點選，從一個頁面跳到另一個頁面（梁景紅，民 95），所有的訊息都在網頁內透過視覺的設計傳遞給瀏覽者，其中每個構成元件皆扮演著資訊與使用者溝通的角色（王開立，民 89）。網際網路剛開始發展的時候，電腦通訊科技是以文字為主，到了 1990 年代初期，電腦影像、多媒體和超文本的發展令全球資訊網開始成為一種商業實體，而全球資訊網是網際網路裡的一塊區域，連結儲存在世界各地電腦檔案裡的大量資訊。至今，所有的檔案都是用共同的語言寫成（HTML，超文本標記語言），其形成了圖形豐富的超媒體介面，可以存取包含聲音、影像和文字的檔案，是嶄新的視聽場域，全球資訊網因其對視覺影像的強調而大受歡迎，這說明著電腦使用者已經習慣透過圖片和影像（使用電腦滑鼠）來駕馭軟體和資料，電腦使用者和網頁之間的關係是互動的（陳品秀，98）。為了瞭解網頁內容及其組成元素，研究者整理過去部分相關文獻（如表 2-3-1 所示），從表 2-3-1 中可知，雖然各家分析結果不盡相同，但是可看出網頁中的一個重要共通元素便是視覺設計。. 18.

(28) 表 2-3-1 網頁內容組成彙整表研究者（年代）. 網頁內容組成. 李佳穎（民 98） 1. 文字、2. 圖像、3. 色彩、4. 版面設計配置朱仕信（民 97） 1. 品牌資產：CIS 企業識別、企業文化、組織精神、廣告行銷等資產，是決定網頁設計的基礎，例如網頁所採用的顏色、基調、技術、圖片（示）、風格、資訊內容等。 2. 資訊架構：內容架構為網頁規劃階段的源起，也是組成一個網站的重要核心，包括網站設立的目的與必須達成的目標。 3. 視覺影像：圖片、影像、圖示、動畫、底圖背景、版面規劃等是網頁設計的組成因子，強調網頁視覺的設計。 4. 文字風格：網站內從小自 Button 的文字大到主體的內容敘述文字都必須小心處理，這關係到與使用者的溝通是否暢通。 5. 聽覺聲音：因光纖寬頻時代的來臨，加速了資訊傳播速度，有越來越多網站及網頁的呈現都加入了聲音的元素作為提升與使用者溝通的媒介。 6. 動線規劃：動線的規劃明顯的影響使用者是否能成功完成瀏覽的動作，應評估動線操作上的流暢度、花多少時間可完成一項有效的活動，並瞭解對使用者產生何種意義、完成哪種任務。 7. 網頁技術：網頁技術被視為多媒體的表現空間，如何整合多媒體製作技術使網站或網頁呈現達所需要的效果是設計人員必須仔細規劃的。張楠溪（民 96） 1. 文字、2. Logo、3. 導覽列、4. 圖片、5. FLASH 動畫、6. 廣告、 7. 頁面背景王建財（民 95） 1. 文字、2. 圖形、3. 圖像、4. 標誌、5. 色彩等造型要素及標題、 6. 訊息選單、7. 訊息正文、8. 標語、9. 單位名稱顏春煌、郭秋田（民 95）. 1. 背景、2. 標題、3. 超連結、4. 內文、5. 圖形、6. 動畫、7. 背景音樂. 梁景紅（民 95） 1. 文字、2. 圖片、3. 動畫、4. 音樂張志強（民 93） 1. 標題列、2. 選單、3. 文字方塊、4. 圖片、5. 動畫或影片、6. 廣告、7. 線條及色塊、8. 背景、9. 音樂及音效、10. 彈跳視窗、11. 框架頁 Powell（2000）. 1. 標誌、2. 超連結、3. 文字、4. 色彩、5. 動畫、6. 背景。. 19.

(29) 近年來隨著網際網路技術的進步與使用的普及，使得從事網頁設計的人員日益增加，學校與坊間紛紛開設網頁設計製作的相關課程，然而除了網站企劃、內容與技術層面的提升外，網頁視覺美感也是養成的重點（王開立，民 89）。Ma, Yao, Wei, 與 Zhang (2009) 認為，網站介面配色的好壞會影響到瀏覽者的情緒，透過顏色的不同可以進行分組、標示重點，讓瀏覽者容易辨識網站的架構。網頁視覺的展現是企業、網路使用者與媒體評斷網頁設計優劣與提案是否成功的第一道關卡（朱仕信，民 97）。網頁設計的技術和其他電腦技術的比較起來發展的時間並不長，早期的網頁設計很單純，把內容以網頁的格式裝飾起來，再放到網站上呈現給全世界的網際網路使用者瀏覽，直到商業化的網站出現後，影響力也跟著增加，網站的規模便日益擴大，許多網頁設計與規劃的書籍與論述紛紛出現，顏春煌、郭秋田在《網頁設計實務》一書中就建議網頁設計者在從事網頁設計前必須應考慮以下因素（顏春煌、郭秋田，民 93）： . 網頁構圖配置：構圖設計必須有組織概念，使網頁元素能自然融入網頁當中。. . 操作介面：網頁屬於階層式的樹狀架構，由首頁可以看到主要的連結選單，點選進入後又有許多不同層次的連結，所以指引的圖示或文字必須一目瞭然，介面也必須要方便操作。. . 頻寬的考慮：網頁所有呈現的資訊內容皆會影響頻寬的使用量，使用太多的頻寬會造成瀏覽者的等候，所以網頁的內容控制是相當重要的。. . 色彩的搭配：不同的顏色搭配會產生不同的視覺感受，而色彩的使用有一定的原則，其為本研究的探討重點，將在第四節詳細說明。. 鄭毓晴（鄭毓晴，民 95）就以國內外美術館數位典藏的網站為調查樣本，從中得到網站的設計策略，建立一套評估方法，將網頁設計分為：網頁介面設計、網頁資訊內容、以及網頁視覺設計等三個類別來分析各個網站，其中網頁視覺設計是將網站資訊發揮最大效能的主因，張裕幸（民 95）就提出了以下網站視覺設計原則：. 20.

(30) . 網頁頁面的主題與內容必須做有關聯的安排，以作有效的傳達。. . 網站的可讀性：根據資訊的需求，考量文字與色彩和背景的可閱讀性。. . 色彩的印象空間：顏色可以營造出網站的氛圍，給瀏覽者的感覺印象也隨著色彩的搭配與組合變化，呈現出各種色彩語言。. . 色彩的選擇：強調色彩的視覺協調，同一個頁面最好不要超過三個色相。. . 保持視覺休息空間：過多的訊息呈現於單一頁面，等於沒有提供有效的重點資訊，保持空間感讓視覺短暫休息，更具可閱讀性。. . 影像處理：圖片必須根據網頁資訊做不同的呈現方式，可運用影像處理做合成、特效或是結合文字。. . 設計的互動性：根據網頁的性質加入互動性與趣味性，強化網頁對瀏覽者的吸引力，可運用 FLASH 技術增加網站的互動效果。. 從上述文獻對網站視覺設計原則的建議中可以發現，網頁色彩的設計是共通必要的考量重點，故網頁色彩與配色是進行相關研究所應深入探究的議題。. 21.

(31) 第四節. 網頁色彩與配色. 葉祥逸（民 100）研究指出，網頁色彩的改變能夠帶給使用者不同的心理影響，合適的網站色彩的確能夠更貼近主題並有效地突顯商品的特色，善用色彩配置性、整體性、舒適性的因素考量進行網站色彩設計，可瀏覽者願意花更多時間停留在網站上。謝佳珣（民 99）也指出，網站美感的好壞，會先影響消費者的情緒反應，進而影響消費者對網站的態度，最終則導致消費者接近意圖的影響。色彩以無數種樣貌存在於生活環境裡，更豐富了人類的視覺感受與審美經驗，當人們在表達色彩時大多是用語言和文字的方式來陳述，而語言對於色彩的詮釋有時是無法明確表示清楚的，每個人所認為的紅色可能就有好幾種，再加上文化與民族間的差異，產生了色彩認知上的不同，因此，色彩的表示不能只停留在語言和文字的階段，必須具有科學化的標示和組織管理（鄭柏左，民 93）。我們所看見的各種色彩皆是由光所組成，光線透過直接與間接的路徑進入我們的眼睛因而產生了視覺，在瀏覽網頁時就是透過視覺感知圖片影像色彩，而網頁上所看到的色彩皆是由色光混合所組成，屬於「加法混合」(圖 2-4-1)，紅(orange red)、綠 (green)、藍(violet blue)為基礎的表色法，主要應在底片、電視、電腦影像之傳達（楊清田、魏碩廷，民 96），這種色光混色現象又稱為正混合，是屬於一種增加光量來提高反射率與明度的混色情形，所有的色光都可以由上述的色光三原色-RGB 混合而成（陳烜之，民 96）。這種色光混色現象又稱為正混合，是屬於一種增加光量來提高反射率與明度的混色情形，所有的色光都可以由上述的色光三原色-R G B 混合而成（林書堯，民 80）。其中 R 表示 Red、G 表示 Green、B 表示 Blue，在電腦上三原色的顯示範圍為 0 到 255，0 表示無色彩，例如 RGB 為(255, 0, 0)表示全紅，而(0, 255, 0)表示全綠，(0, 0, 255)表示全藍，而(0, 0, 0)表示黑色，(255, 255, 255)表示 RGB 三色光全混色，也就是白色（林信良，民 98）。. 22.

(32) 圖 2-4-1 RGB 加法混色. 生活中的電視或是其他視訊媒體都是以 RGB 色彩模式為基礎的色彩模式，甚至 RGB 色彩模式電腦的影像應用軟體上必備的基本模式（鄭柏左，民 93）。由這三種最基本顏色的光再去混合，就可以產生很多種不同的顏色，這三原色的光隨著能量的不同，可以有各式各樣的混合，甚至可產生 1600 萬種以上的顏色（楊朝銘，民 92）（24 位元色彩深度）。網頁安全色是安全的調色盤(圖 2-4-2)，使得色彩不會隨著電腦的作業系統、電腦的等級及瀏覽器的不同而有所改變，也不會產生色偏(color shift)的 216 種顏色，是網頁設計上作為色彩選擇的基本要素。. 23.

(33) 圖 2-4-2 網頁安全色（圖片來源：楊朝明（譯）（民 92）。Web 好色-網頁色彩學。（原作者：Image Research Institute Inc. ）。台北，博碩文化股份有限公司。）安全色是由紅、綠、藍的數位訊號以 0, 51, 102, 153, 204, 255 等數值依照 6×6×6 所組成的數位色彩，共有 210 種有色彩和 6 種無色彩共同組合，其中 RGB 被分為六個階段，分別為 00、33、66、99、CC、FF，而三原色的組合則產生 216 色，在網頁使用的表色法中，常能看到「#FFCC33」等的標色方式，其實是依序 RGB 的含量所排列，而 #FFCC33 中的 FF 為 R 色光的含量，CC 為 G 色光的含量，33 為 B 色光含量(表 2-4-1)（楊朝明民 92）。表 2-4-1 216 安全色 RGB 含量表 (少) ←. 含量. → (多). R. 00. 33. 66. 99. CC. FF. G. 00. 33. 66. 99. CC. FF. B. 00. 33. 66. 99. CC. FF. (資料來源：I.R.I) 在我們生活中的色彩並不是單一出現的，往往是兩種以上的組合呈現，其組合方式千變萬化，不同的色相、明度與彩度能展現不同的色彩氛圍，而在處理色彩時，要讓即使不了解色彩理論的人也能感受到調和或是得到視覺的舒適感，所以配色也是一. 24.

(34) 門學問。楊朝銘（民 92）認為，在網頁配色的規則，首先設定網頁的主要色彩(Main Color)，然後再選出適合的次要色(Sub Color)來組合。鄭國裕、林盤聳（民 76）進一步指出，色相、明度、彩度為構成色彩的三個基本要素，故在配色時應從這三個方向下手。在色相配色方面，一般以色相為主的配色，大多都會以色相環（圖 2-4-3）照色彩在色相環上的位置所形成的角度搭配色相環上的調和區域（圖 2-4-4）來配色，其色相配色方式及其效果呈現則如表 2-4-2 所示。. 圖 2-4-3 色相環（圖片來源：鄭國裕、林盤聳（民 76）。色彩計劃（頁 71）。台北，藝風堂）. 圖 2-4-4 色相環上的調和區域（圖片來源：鄭國裕、林盤聳（民 76）。色彩計劃（頁 71）。台北，藝風堂）. 25.

(35) 表 2-4-2 色相配色方式及其效果呈現一覽表配色方式. 效果呈現. 同一色相配色：同一色相中的顏由於配色的範圍只有單色的明暗、深淺變化，使色，包括明度的深淺變化，所構人感覺是穩定、柔和、統一、幽雅、樸素的效成的配色效果，稱之為同色相果。配色。近似色相配色：在色相環中距離近似色的配合，距離的角度愈大，愈顯得活潑而主色60°之間的每一個顏色，均富朝氣。距離的角度愈小，愈具有穩定感和統一可稱之為近似色。性。近似色的色調配色效果，予人甘美、清甜、和諧、共鳴、浪漫、唯美、柔和、文質彬彬的感覺。對比色相配色：在色相環中距離對比色配色，角度大，距雛遠，顏色差異大，互主色呈120°至150°左右兩色關係相配置會產生活潑、跳躍、華麗、璀瑰、明朗、，稱為對比關係。爽快的效果，如果兩色都同屬於高彩度配置的話，對比非常強烈，顯得刺眼、眩目與令人不快。補色色相配色：位於色相環上直徑約兩端，其兩個顏色的關係稱為補色，呈現 180°角度之補色調和。. 補色的配色是對比最為強烈的配色，如果彩度都很高的話，會令人產生刺眼、辛辣、心跳加速、衝激性強烈、喧鬧不調和之感，必需用明度、彩度變化的方式緩衝，才可避免激烈的衝突。. 資料來源：鄭國裕、林盤聳，民 76。「色彩計劃」（頁 76）。台北，藝風堂。在明度配色方面，一個作品的情感會隨著畫面的明朗或陰暗而給人快樂或憂鬱的感覺。而畫面上的明暗差與分佈，則是引起這些情感發生的主要原因。所以色彩的明暗度是所有色彩配色中影響最大的因素。均衡的明暗度比，可使畫面活潑或穩定，因此考到明度配色，可分高低調子和明度差兩點來考慮。所謂高低調子（如圖 2-4-5 所示），便是指一組色彩配置後所構成的明暗程度整體而言的總稱，而明度差是指經由一組色彩配置的畫面中，最明度與最暗度的差距比例，明度配色方式及其效果呈現則可用表 2-4-3 來說明。. 26.

(36) 圖 2-4-5 高低調子（圖片來源：鄭國裕、林盤聳，民 76。色彩計劃（頁 76）。台北，藝風堂）. 27.

(37) 表 2-4-3 明度配色方式及其效果呈現一覽表配色方式. 效果呈現. 高低調子. 1. 低調子是 N1 至 N3 的區域；可賦予色彩具有嚴肅、謹憤、穩重、神秘、苦悶、豐富、溫暖、鈍重的特質，讓畫面展現出深沉、厚實、莊重、安定、幽靜、苦澀、陰森、苦難、怨恨、嫉妒、失望的效果。 2. 中間調子是 N4 至 N6 的中閒區域；可賦與色彩具有柔和、幻想、甜蜜、高雅、端莊、古典、豪華、輝煌、豔麗的特質，讓畫面表現出高貴、雄偉、繽紛、耀眼的效果。 3. 高調子是 N7 至 N9 的明亮區域；可賦予色彩具有積極、快活、愉悅、爽朗、輕快、開朗、親切、華美、甘美等表情，讓畫面表現華美、高尚、年經、明亮、乾淨、醒目、柔美、揉情、細緻、自由、通暢的效果。. 明度差. 1. 等明度差─明度差在一階之內，如果一組色彩系統，明度差是等明度差，則會出現灰暗、模糊、不調和的效果 2. 類似明度差─明度差在三階之內的範圍可得到柔和的調和效果，又稱短調效果。 3. 對比明度差─明度差在三階至五階時的範圍，是最寬廣的明度差配色法，活潑、生動、明亮、完整效果，又稱長調效果。 4. 高明度差─明度差在八階以上的高明度差效果，兩色容易產生不協調的眩目現象。. 資料來源：鄭國裕、林盤聳，民 76。「色彩計劃」（頁 76）。台北，藝風堂。. 在彩度配色方面，彩度高低的功能，是決定畫面吸引力大小，以及主題色彩的強調、襯景色彩的微弱等配色因素，而其配色方式及其效果呈現則如表 2-4-4 所示。. 28.

(38) 表 2-4-4 彩度配色方式及其效果呈現一覽表配色方式. 呈現效果. 類似彩度配色. 指六階之內的彩度變化配色，差異不大，高彩度的類似彩度配色有鮮艷、華麗的效果，低彩度的類似彩度配色，則呈現柔和、穩重、樸素、典雅的特質，若再加入色相及明度的變化，可使畫面顯得更加活潑、生動。. 對比彩度配色. 距離六階以上的彩度變化配色效果，會產生鮮明、突出的特色，若再加上色相及明度的變化，則會增加華麗、鮮艷、輝煌、耀眼之感。. 資料來源：鄭國裕、林盤聳，民 76。「色彩計劃」（頁 76）。台北，藝風堂。. 上述有關色相配色、明度配色、以及彩度配色的基本原則，提供設計者在進行網頁視覺設計時，一個明確的色彩和配色上的依據。然而，瀏覽者在接受網頁色彩的刺激時，對於色彩意象與聯想則是另一個涉及認知心理層次的議題。. 29.

(39) 第五節. 色彩意象與聯想. 色彩意象是將色彩的屬性及色彩心理綜合考慮的色彩特質，而評價性、活動性及潛在性則是色彩意象的三個重要因素（鄭國裕、林盤聳，民 76），茲分述如下： . 色彩的評價性：如色彩的美/醜、雅/俗等. . 色彩的活動性：色彩的動/靜；明/暗，引人注目/不引人注目等. . 色彩的潛在性：色的強/弱、輕/重，男性化/女性化等. 為了描寫意象，以特定意象的感覺性色彩組合，進行色彩配色是其中一種方式。單色色彩意象與多色配色的意象有許多共同之處，以具溫暖感的二至三個色彩組合的配色，同樣產生溫暖感，相同的效果也適用於寒色系色彩。當以色彩表現特定意象時，若加上形的要素，則更能強調出所要表現的意象感覺（林昆範、柯凱仁譯，民 88）。色彩的聯想可分為兩種，一種是想到具體事物的類型，例如看到紅色就連想到火焰，另一種是抽象概念的聯想，比如看到紅色想到熱情。鄭國裕、林盤聳（民 78）指出，對於具體事物的色彩聯想常見於幼年時期對於動、植物、風景等身邊具體事物的聯想，成人則因為受到個人的體驗、記憶、知識、年齡、性別等與社會生活發生關聯，有較多的抽象概念的聯想。在成年階段中，雖會受到個人的因素或是境影響造成差異，但其中也有一些共通的基本要素，如果這些共通的要素與社會傳統相結合而漸漸被一般化，那麼就會形成色彩的象徵，具有特定的意義。. 30.

(40) 第六節. 小結. 資訊科技蓬勃發展開啟網際網路新世代，也讓人類的活動由實體社會環境進入虛擬的網域之中，不同類型的網站猶如現實社會中形形色色的機體（公司、機構、個人等）。透過網頁訊息的傳遞，建立起瀏覽者與網站兩者之間的溝通與交流，更進一步可以突顯網站的特色和功能。在本章中，研究者針對網際網路與網站、網頁視覺設計、網頁的色彩和配色、以及網頁色彩意象與聯想進行相關文獻之探討發現，網頁的色彩和配色、以及網頁色彩意象與聯想是網頁視覺設計的重要因素，而可以吸引瀏覽者視線、強化訊息傳遞、並能引起瀏覽者共鳴的網頁視覺設計，則將是網站成敗的關鍵。因此，當企業企圖以網站建置發展並行銷其專業時，透過網頁視覺設計尋求一個最佳化的網頁配色組合，絕對是一件必要且有趣的事。. 31.

(41) 32.

(42) 第三章第一節. 研究方法研究架構. 本研究將分為三階段進行之。在前導的資料調查中，著重於釐清平面設計公司網站首頁的網頁配色，並蒐集網頁色彩相關資料，採用偏好性問卷設計調查之結果經統計之分析，進行運用多向度評量法 MDS(Multidimensional Scaling)中偏好資料的多向度 (Multidimensional Preference，簡稱 MDPREF)分析方法來演算於第一階段調查中受測者對網頁色彩意象偏好性之資料，建立受測者對色彩意象認知偏好性的認知空間，並藉此分析出平面設計公司網站首頁色彩的偏好組合，以下將本研究實驗程序說明如下：表 3-1-1 研究實驗程序表步驟第一階段. 實驗 A. 名稱. 說明. 集群實驗. 運用 PHP 程式製作線上分群問卷，將刺激物以 640×480 像素的圖像呈現於畫面，並編碼於圖片下方，根據呈現的圖片，讓受測者將整體色彩搭配相似的刺激物分為同一群，數量與群組數不拘，再以 HICLUST 分析軟體進行層次集群分析，統計出最佳群組數並得到典範樣本，作為實驗 C 之受測樣本。. 實驗 B. 投射實驗. 主要目的是針對「屬性形容詞」之取得，以開放式與半開放式問卷對受測者進行測試，最終得到「屬性形容詞」最為偏好性實驗程度評語詞。. 第二階段. 實驗 C. 偏好性實驗(一). 綜合實驗 A 與實驗 B 之結果，經由 MDS 進行偏好性分析，再藉由分析後所的到之認知空間圖，進一步瞭解典範樣本和「屬性形容詞」間的關連性。. 第三階段. 實驗 D. 偏好性實驗(二). 從實驗 C 研究結果歸納出設計方向，作為網頁色彩設計創作之輔助，將此設計創作首頁與實驗 C 中較偏好之設計融合後，同樣以偏好性實驗進行之，將檢驗設計成果是否得到輔助設計之目的。. 33.

(43) 圖 3-1-1 研究架構圖(資料來源：本研究). 34.

(44) 第二節. 研究設計. 2.1 實驗 A：集群實驗本實驗主要在縮減過量的樣本，透過實驗歸納色彩配色相似的分析，以獲得典範樣本。實驗說明如下：一、受測對象受測對象受測對象包含台中教育大學師生、長智造型設計補習班學生、批踢踢實業坊問卷板瀏覽者；有效問卷之受測者設計背景、性別與年齡分組詳見圖 3-2-1。. 圖 3-2-1 實驗 A 有效問卷統計集群實驗受測者分組人數表二、實驗工具 . 樣本蒐集：本研究從 2005~2010 年出版具指標性網頁設計類書籍《Web Design Index by Content》中平面設計公司網站首頁為取樣來源，合計收集 99 個網站首頁畫面。. 35.

(45) 圖 3-2-2 集群實驗受測樣本 99 個刺激物 . 實驗程式：將從前端軟體獲得之矩陣資料，利用集群分析法 HICLUST 演算出最佳化分群結果。. . 輔助程式：應用柯凱仁、栗永徽（2000），所製作的前端軟體《MDS HICLUST data 1.0 for Win》，輔助演算問卷資料之矩陣。. 三、實驗做法： . 受測者分配：一人為一組，依照個人所認知做色彩配色相似性的歸類分群。. . 問卷作法：運用 PHP 程式製作線上分群問卷，將刺激物以 640×480 像素的圖像呈現於左方畫面，並編碼於圖片下方，根據呈現的圖片，讓受測者將整體色彩搭配相似的刺激物分為同一群，數量與群組數不拘，只要按下右方箭頭按鈕，圖片就會收進該群組中；如需重新選擇，則直接點選圖片，圖片就會重回左方區域呈現。. 36.

(46) 圖 3-2-3 實驗 A 集群實驗線上分群問卷示意圖-1. 圖 3-2-4 實驗 A 集群實驗線上分群問卷示意圖-2. 37.

(47) 四、判別依據： . 適合群組：數透過輔助程式整理資料，將數據輸入集群分析程式中，將結果繪製成樹狀圖並找出分界點。經由正交所擷取的點數為最佳群組數。. . 典範樣式：從繪製的樹狀圖中可得知，最早群聚者為該群組之典範樣式，因此各群組均會產生一至二個典範樣式，此作為實驗刺激物。. 2.2 實驗 B：投射實驗實驗目的在於將受測者對於平面設計公司網站色彩配色既有的印象轉化成可解釋的「屬性形容詞」，並將其運用在之後的偏好性實驗上。. 一、受測對象受測對象受測對象包含台中教育大學師生、長智造型設計補習班學生、批踢踢實業坊問卷板瀏覽者；有效問卷之受測者設計背景、性別與年齡分組詳見圖 3-2-5。. 圖 3-2-5 實驗 B 有效問卷統計集群實驗受測者分組人數表. 38.

(48) 二、實驗工具：依照柯凱仁(2007)於「多向度評量法科學哲學之研究」中所解釋，分別設計開放與半開放問卷，並加註主題性命題，取得受測者針對該命題的感覺全是該有的語詞做為屬性形容詞。三、實驗作法： . 開放式實驗：以開放式問卷進行測試，對受測者做測試。經統計後，扣除重疊部分，整理出平面設計公司屬性形容詞語，作為半開放式問卷，命題見圖 3-2-6。. . 半開放式實驗：從開放式屬性形容詞整理出的用語再設計出半開放式問卷，對受測者做測試，藉由累進選擇次數的結果，來統計受測者對於屬性形容詞之重要性。透過加權統計並由軟體精確的整理出結果，並將此屬性形容詞分別編碼 01、02、03…，以作為階段二偏好性實驗中問卷評量之用，命題見圖 3-2-7。. 39.

(49) 圖 3-2-6 投射實驗開放式問卷. 圖 3-2-7 投射實驗半開放式問卷. 40.

(50) 四、判別依據：以統計結果之曲線明顯「肘部」為判別依據，略去趨於平緩之區域，其餘作為偏好性實驗問卷中對於實驗刺激物偏好程度的「評價用語」。表 3-2-1 屬性形容詞陡肘圖. 2.3 實驗 C：偏好性實驗(一) 本實驗進行「偏好性實驗」，主要目的是以上一階段「集群實驗」所得的「典範樣本」作為「刺激物」，並配合「投射實驗」所得「屬性形容詞」為評量重點，以分析受測者的認知與偏好，進而獲得其設計要點。一、受測對象受測對象受測對象包含台中教育大學師生、長智造型設計補習班學生、批踢踢實業坊問卷板瀏覽者；有效問卷之受測者設計背景、性別與年齡分組詳見圖 3-2-8。. 圖 3-2-8 實驗 C 有效問卷統計集群實驗受測者分組人數表. 41.

(51) 二、實驗工具以多向度評量法之 MDPREF 偏好分析為主要運算工具。三、實驗作法將實驗 A 與 B 所得之「典範樣本」與「屬性形容詞」進行問卷測驗，問卷中的評比量尺依受測者的感覺程度，將認知化為計量進行評比的作業，量尺分數從一至七組成，最多給 7 分，最少給 1 分。四、判別依據 . 依三維運算輸出資料，數據大小為判斷依據，從中獲得向度一、二和三之各屬性形容詞重要程度。. . 兩屬性向量的關係係數或夾角值，可被視為是兩著的關係程度，角度越小就表示關係程度越高，若近直角表示毫無關聯。其評價準，可由主成分權值判別。. . 將 MDPREF 偏好性運算結果加以整理，可看出受測者之屬性形容詞評比排序，對此可針對刺激物做進一步分析。. 42.

(52) 圖 3-2-9 實驗 C「偏好性實驗」(一) 問卷示意圖. 43.

(53) 2.4 實驗 D：偏好性實驗(二) 本實驗目的在於將實驗 C 的結果，觀察與分析其色彩組合並進行網站首頁設計，將設計完的網站首頁結合實驗 C 中較偏好的頁面，進行第二次的偏好性實驗。一、受測對象受測對象受測對象包含台中教育大學師生、長智造型設計補習班學生、批踢踢實業坊問卷板瀏覽者；有效問卷之受測者設計背景、性別與年齡分組詳見圖 3-2-10。. 圖 3-2-10 實驗 D 有效問卷統計集群實驗受測者分組人數表二、實驗工具以多向度評量法之 MDPREF 偏好分析為主要運算工具。三、實驗作法 . 將實驗 C 中整理出較受偏好刺激物。. . 分析受偏好刺激物之色彩組合，以其為基準作另一組網站首頁的配色方式，共設計 3 個首頁畫面。. . 將設計完成之網站首頁色彩畫面與實驗 C 之較偏好之頁面重新編號進行第二次偏好性實驗。. 四、判別依據 . 依三維運算輸出資料，數據大小為判斷依據，從中獲得向度一、二和三之各屬性形容詞重要程度。. 44.

(54) . 兩屬性向量的關係係數或夾角值，可被視為是兩著的關係程度，角度越小就表示關係程度越高，若近直角表示毫無關聯。其評價準，可由主成分權值判別。. . 將 MDPREF 偏好性運算結果加以整理，可看出受測者之屬性形容詞評比排序，對此可針對刺激物做進一步分析。. 表 3-2-2 網站首頁畫面設計. D01. D03. 45. D06.

(55) 圖 3-2-11 實驗 D「偏好性實驗」(二) 問卷示意圖. 46.

(56) 第四章. 研究結果. 本研究的集群實驗與偏好性實驗，總共歷經了五次的資料蒐集與問卷調查，在上一個章節中，說明了所有研究方法與流程，本章將各實驗透過 MDS 多向度評量法的集群分析法與偏好分析法，用圖片、表格與文字的方式，詳細的說明與解析所得到的結果。. 第一節. 實驗 A：集群實驗. 1.1 「適合組數」之確認將實驗結果整理成表以利分析，受測者原始分組數在 3 到 20 組之間，經過程式運算並畫出陡肘圖中，在 29-30-31 次演算分別有較明顯的肘部，取第 30 次為分界點，共獲得 14 組最佳群組數（詳見圖 4-1-1）。. 圖 4-1-1 集群分析陡肘圖. 1.2 「典範樣本」之確認本實驗以第 30 次運算為分界點，經正交可得 14 個最佳群組，並選出 14 個典範樣式如表 4-1-1。. 47.

(57) 表 4-1-1 典範樣本. 48.

(58) 圖 4-1-2 集群分析樹狀分佈結果圖. 49.

(59) 1.3 群化分析從集群分析結果的樹狀圖(表 4-1-1)中，可讀出群化的成因與特色，本研究以色彩的共徵與認知試分析各集群特色如下：一、第 1 群：共有 12 個刺激物，編號 65 與 04 在第 3 階演算聚集，為本群典範樣式。 . 外顯共徵：本群色彩反差性高，刻意營造整體氛圍，強調色彩的感受度。. . 色彩認知：使畫面具有「明確的」視覺印象。. 圖 4-1-3 第 1 群刺激物示意圖二、第 2 群：本群共有 10 個刺激物，編號 27 與 28 在第 2 階演算聚集並為典範樣式。 . 外顯共徵：運用大面積的黑色來彰顯主要傳達的文字與圖像，增加注目度。. . 色彩認知：讓人有「獨特的」視覺感受。. 50.

(60) 圖 4-1-4 第 2 群刺激物示意圖. 三、第 3 群：總計共有 6 個刺激物，編號 06 與 68 在第 1 階演算聚集後為典範樣式。 . 外顯共徵：本群特色在運用醒目鮮明的顏色，來強調視覺的力量，使瀏覽者印象深刻。. . 色彩認知：傳達「活潑、快樂感」。. 圖 4-1-5 第 3 群刺激物示意圖. 四、第 4 群：本群只有兩個刺激物分別為編號 16 與編號 38，色相為最一致的分群，在第 6 階演算聚集並為典範樣式。 . 外顯共徵：以紅、灰兩種色彩的比例分配來表現整體配色。. . 色彩認知：給人「現代感」的視覺印象。. 51.