網站配色決策支援系統設計與實作-以企業識別系統商標標準色為例

(1)

國立交通大學

管理學院（資訊管理學程）碩士班

碩士論文

網站配色決策支援系統設計與實作-以企業

識別系統商標標準色為例

Design and Implementation of Color Matching

Decision Support System for Web Site - The Case of

Corporate Symbol Color

研究生：周耀庭

指導教授：陳安斌博士

(2)

網站配色決策支援系統設計與實作-以企業識別系統

商標標準色為例

Design and Implementation of Color Matching Decision Support

System for Web Site - The Case of Corporate Symbol Color

國立交通大學

管理學院（資訊管理學程）碩士班碩士論文

A Thesis

Submitted to Institute of Information Management College of Management

National Chiao Tung University In Partial Fulfillment of the Requirements

For the Degree of Master of Science

in

Information Management July 2010

Hsinchu, Taiwan, the Republic of China

中華民國九十九年七月研究生：周耀庭

指導教授：陳安斌博士

Student：Yao-Ting Chou Advisor：Dr. An-Pin Chen

(3)

I 網站配色決策支援系統設計與實作-以企業識別系統商標標準色為例研究生：周耀庭指導教授：陳安斌國立交通大學管理學院（資訊管理學程）碩士班摘要色彩學，牽涉到許多如美感與知覺的因素，使得美學難以量化評價。品牌價值與企業形象，是企業或組織最重要的無形資產之一，網際網路、個人電腦、手持系統、行動裝置等的高普及率，使得企業入口網站在傳達形象與產品的功能更顯重要。隨機或錯誤使用色彩，可能造成網站使用者閱讀上的不適、降低顧客再次拜訪網站意願、傳達錯誤的聯想、破壞企業識別形象等問題。另外，色彩專業領域的專家往往習慣使用HSV (色相、彩度、明度)色彩空間，一般電腦使用者或工程人員慣用RGB、CMYK 色彩空間表示法，但 RGB 超過 1677 萬種色彩組合，對於不熟悉光學混色的使用者，更是應用上的一大門檻。本研究能將各種色彩空間任意轉換，提供配色建議。以一般人對於常用的形容詞，如：亮、暗、濃、淡、類似、對比等詞彙進行色彩調整；進階得以比對專家知識模型與企業色票資料庫，將配色最佳化，提供實用的色彩決策建議。此系統也提供了色票轉出功能，可將色票以文字模式顯示，或匯入常見的影像處理與繪圖軟體，如Adobe Photoshop、Illustrator，方便應用於圖片製作，提供資訊人員更便利的應用選擇。

最後以「Fortune Global 500」企業和「ReBrand 100 Global Awards」獲獎品牌的企業識別系統商標標準色為範例，展示本系統應用於網站配色決策的可行性。本研究的軟體系統提供了可依循的色彩搭配建議，透過這方式，可讓其它企業或組織由既有的專家規則，提供該公司網站色彩應用參考。協助無專業色彩學知識的網站工程人員、網站策略決策者，帶來色彩學專家知識，提供網站建置參考依據。關鍵詞：色彩調和、配色、決策支援系統。

(4)

II

Design and Implementation of Color Matching Decision Support System for Web Site - The Case of Corporate Symbol Color

Student：Yao-Ting Chou Advisor：Dr. An-Pin Chen Institue of Information Management

National Chiao Tung University Hsinchu, Taiwan, Republic of China

Abstract

Due to the aesthetic sensation and perception property of Color Theory, it’s very difficult to quantify and to evaluate the color is beautiful or not. Brand value and corporate image are parts of the most important intangible assets of corporations or organizations, and the

popularization of internet, PC, personal handy-phone system, mobile device, etc. makes the corporation web portals more and more important in conveying image and products function. Thus, choosing colors inattentively or inappropriately might make website visitors unpleasant in visual perception and unwilling to visit the website again, cause improper association and destruction the image of corporate identity.

Furthermore, specialists in color theory field apply HSV color spaces habitually, while common PC users or software engineers are used to take RGB or CMYK color spaces. However, in RGB, there are over 16.77 million kinds of color combinations, and that makes an obstacle to apply it for those not familiar with the color mixing.

The research can transfer any color spaces freely into another, providing good

suggestions of color replacement. Adjusting colors according to common users’ description words, such as bright, dark, thick, light, similar, contrast and so on to compare to specialists knowledge model and corporation color swatches database and can optimize the color matching and provide useful color strategy. The system also provides the function of

"swatches outputs", enabling Swatches show in text. Moreover, it can import common image manipulation and graphics software installation, such as Adobe Photoshop, Illustrator, to make the graphics editing more convenient and to provide more convenient choices for the information system professionals.

Finally, taking example of C.I.S. symbol color with “Fortune Global 500” and “ReBrand 100 Global Awards”, the system presents the feasibility of color settlement strategy in

website.

The software system in this research provides color matching suggestions accordingly. By this method, it can let many corporate & organizations refer to color application base on original regulations. The system assist amateur website engineer, decision maker to bring the knowledge of color theory and the color solutions of website layout.

(5)

III 誌謝本論文的完成，首先要感謝我的指導教授陳安斌老師，從認識老師起，亦師亦友，除學業知識的充實外，更因老師的賞識與協助，打開了自己進入設計領域的另一扇窗，磨練出了更廣闊的廣告設計與行銷企劃視野；這段期間也感謝充滿著耐心與清晰思維的佳蓉，總能很有耐心的隨時提供最面面俱到的溝通聯繫與建議。在交大資管所求學過程中，感謝系上所有老師的指導，鈞凱、千足、紀慧、 Rita...等同學們一起陪著郊遊踏青及學業上各方面的協助。感謝從大學以來，一起開設工作室、並肩作戰的唐文政，因為這些心血與經驗的累積，提供了工作及學業上無盡的想像力。感謝圳宸、俊翰、泓文、Jo 及 Vivian 等網球球友，陪我一起分享在充滿陽光的紅土球場上的歡笑日子。感謝旻如和麗芬在論文撰寫期間英文上的專業協助，讓這份研究內容得以更加貼切本意。感謝我的同事蕭雅嵐，不厭其煩的提供了許多精湛的程式開發技術與建議，使這個系統得以順利完成。更感謝張小菁數年前不斷的鼓勵與協助準備，得以實現從小到大的夢想- 進入交大，創造了這段永遠難以忘懷的時光將此份研究的成果與喜悅，獻予我最親愛的父母周鎮國先生、吳欐櫻女士、弟弟周耀宗，以及手工婚紗小公主盈婕，感謝你們全力的支持，讓我能傾全力完成學業。謝謝陳安斌老師、劉敦仁老師及盛介中老師對於論文的審閱與指導，使得本論文的研究架構與組織更為嚴謹完整。最後，感謝周遭所有人的陪伴與砥礪，讓這段求學生涯充滿了美好的故事與回憶，謝謝你們！

(6)

IV 目錄摘要 ... I ABSTRACT ... II 誌謝 ... III 目錄 ... IV 表目錄 ... VII 圖目錄 ... VIII 符號說明 ... X 第一章緒論 ... 1 1.1 研究背景 ... 1 1.2 研究動機 ... 2 1.3 研究目的 ... 2 1.4 研究對象與範圍 ... 3 1.4.1 研究對象 ... 3 1.4.2 研究範圍 ... 3 1.5 研究流程 ... 4 第二章文獻探討 ... 5

2.1 企業識別系統(Corporate Identity System, CIS)與商標標準色 ... 5

2.1.1 企業識別系統 ... 5 2.1.2 商標與標準色探討 ... 6 2.2 色彩與視覺經驗之關聯 ... 7 2.3 色彩學探討 ... 8 2.3.1 色彩構成 ... 9 2.3.2 色彩體系 ... 10 2.3.3 色彩心理學 ... 23

(7)

V 2.3.4 色彩調和 ... 24 2.3.5 色彩面積比例 ... 32 2.3.6 色彩偏移 ... 33 2.4 網頁色彩與使用性探討 ... 33 2.4.1 網站視覺形象與使用者印象之關聯 ... 34 2.4.2 網頁色彩與視覺關係探討 ... 34 2.4.3 字體與色彩關係 ... 35 2.5 決策支援系統 ... 36 2.6 電腦色彩概論 ... 38 2.6.1 基本原理 ... 38 2.6.2 色彩空間 ... 39 第三章系統規劃與設計 ... 43 3.1 需求分析 ... 43 3.1.1 功能需求 ... 43 3.2 系統架構 ... 45 3.3 使用者介面設計 ... 46 3.4 配色模式設計 ... 47 3.4.1. 以色相為主的配色 ... 47 3.4.2. 以色調為主的配色 ... 48 3.4.3 色彩面積參考比例 ... 52 3.4.4 色彩屬性間轉換比例 ... 53 第四章系統實作 ... 56 4.1 系統使用工具 ... 56 4.1.1 Apache Server ... 56 4.1.2 PHP 與 AJAX ... 56

(8)

VI 4.1.3 MySQL ... 57 4.1.4 CSS ... 57 4.2 使用者介面設計 ... 57 4.2.1 輸入介面 ... 57 4.2.2 輸出介面 ... 58 4.3 系統模組建立 ... 60 4.3.1 色彩空間轉換模組 ... 60 4.3.2 色彩預覽模組 ... 63 4.3.3 基本配色模組 ... 63 4.3.4 明度與彩度調整模組 ... 64 4.3.5 色彩面積比例模組 ... 65 4.3.6 進階調和配色模組 ... 65 4.3.7 色票比對與建議模組 ... 66 4.3.8 色票產生模組 ... 67 第五章系統使用 ... 69 5.1 系統操作說明 ... 69 5.2 範例實作 ... 74 第六章結論 ... 77 6.1 研究成果 ... 77 6.2 建議與未來研究方向 ... 78 中文文獻 ... 79 英文文獻 ... 83 網站資料 ... 88

(9)

VII 表目錄表2-1 色彩的聯想 ... 23 表2-2 色彩調和相關理論...23 表2-3 色相之分類組合 ... 29 表2-4 彩度分類組合 ... 29 表2-5 明度分類組合 ... 30 表2-6 文字/背景顏色組合與易讀性等級 ... 36 表2-7 各軟體或應用程式 HSV(HSB)範圍表 ... 40 表3-1 網路使用者作業系統使用統計 ... 44 表3-2 COLORNAME 資料表欄位 ... 55 表3-3 COLORMATCH 資料表欄位 ... 55

(10)

VIII 圖目錄圖2-1 企業識別構成要素 ... 6 圖2-2 視覺經驗的屬性關係分類 ... 8 圖2-3 牛頓的色環 ... 9 圖2-4 牛頓以稜鏡分出之光譜 ... 9 圖2-5 HARRIS 色彩體系 ... 10 圖2-6 KIRSCHMANN 色彩雙圓錐體 ... 11 圖2-7 CHEVREUL 色彩半球 ... 12 圖2-8 CHEVREUL 色半球展開圖 ... 12 圖2-9 WUNDT 色球 ... 13 圖2-10 WUNDT 色圓錐 ... 13 圖2-11 孟塞爾色環的三個維度(一) ... 14 圖2-12 MUNSELL 色環的三個維度(二) ... 15 圖2-13 MUNSELL 表色系 ... 15 圖2-14 EBBINGHAUS 雙三角錐色立體 ... 16 圖2-15 OSTWALD 色相環 ... 17 圖2-16 OSTWALD 色立體 ... 18 圖2-17 OSTWALD 色立體的垂直剖面 ... 18 圖2-18 ITTEN 色相環 ... 19 圖2-19 展開後的 ITTEN 色彩體系 ... 20 圖2-20 PCCS 色相環 ... 21 圖2-21 PCCS 色調圖 ... 22 圖2-22 色環及其各種色彩調和組合 ... 28 圖2-23 四重組合與白色、黑色的調和組合 ... 28 圖2-24 色彩與面積比例 ... 32

(11)

IX 圖2-25：決策支援系統架構 ... 37 圖3-1 網路瀏覽器使用者統計 ... 45 圖3-2 系統架構圖 ... 45 圖3-3 資料庫實體關聯圖 ... 54 圖4-1 色彩輸入欄位概念圖 ... 58 圖4-2 色彩滑桿介面概念圖 ... 58 圖4-3 色彩預覽介面概念圖 ... 58 圖4-4 基本配色結果顯示介面概念圖 ... 59 圖4-5 進階配色結果顯示介面概念圖 ... 59 圖4-6 數值顯示介面概念圖 ... 60 圖4-7 匯出色票功能介面概念圖 ... 60 圖5-1 色彩值輸入欄位與滑桿 ... 69 圖5-2 色塊色彩輸入法點選方式 ... 69 圖5-3 色彩顯示範例 ... 70 圖5-4 各色彩值顯示區域 ... 70 圖5-5 明度與彩度功能按鈕 ... 71 圖5-6 進階配色功能按鈕 ... 71 圖5-7 進階配色顯示區域 ... 72 圖5-8 色票產生功能按鈕 ... 72 圖5-9 色票檔案下載視窗 ... 73 圖5-10 載入 PHOTOSHOP 色票視窗範例 ... 73 圖5-11 色票文字檔視窗 ... 74 圖5-12 示範商標 ... 75 圖5-13 商標標準色比對結果 ... 75

(12)

X 符號說明 H：色相值 S：彩度值 B：明度值 A：面積 𝑟：紅色色彩空間值 𝑔：綠色色彩空間值 𝑏：藍色色彩空間值：色相空間值 𝑠：彩度空間值 𝑣：明度空間值 Y：亮度值 V：明度值 𝑎：屬性間轉換時，色相權重 𝑏：屬性間轉換時，彩度權重 𝑐：屬性間轉換時，明度權重

(13)

1

第一章緒論

1.1 研究背景

網際網路使用者與普及率在全球不斷增長，網站對於企業之用途，也漸漸從資訊傳達，轉變為策略應用一環，如產品銷售、企業形象、與供應商顧客之互動平台等。根據Miniwatts Marketing Group 所作「Internet World Stats」之統計， 2000-2009 年全球網際網路使用者人口從 3.6 億成長至 18 餘億人，成長率 399.3%，占全球人口26.6%。由 IDC、Nua Ltd、Internet World Stats 自 1995 年 12 月至 2009 年9 月之統計也指出，全球上網人口 1.6 百萬人成長至 1,802 百萬人。台灣網路資訊中心（TWNIC）於 2010 年 1 月的「台灣網路使用調查」報告中顯示，台灣民眾家庭可上網比率佔76.79%，比起 2003 年成長 33.8%，上網率居亞洲地區第三名，僅次於韓國、日本。 Domain Tools 於 2010 年 7 月之統計，全球 IP 使用量達 3,222,790,912 個、其中美國排名第1 佔 1,556,721,201 個、台灣排名第 14，數量達 29,690,466 個。2010 年7 月 10 日時，使用中的第一級網域名稱，高達 120,808,005 個。可上網的個人電腦、行動裝置等的高普及率，使得以此為平台的行銷、市場等策略應用對企業來說更顯重要。某些色彩自然而然地吸引著我們，或者另我們避而遠之，它們提供了某些有用的資訊或者傳達警告、疆界等(Edwards, 2004)。色彩已經漸漸在企業形象中佔有重要比例，成為設計中流程的必備條件，網站更可藉著色相及色調的無窮組合產生各種變化，就如E. Lupton, J.C. Phillips(2008) 所說，色彩讓現代媒體栩栩如生，透過感性與顯著性，為頁面、螢幕和環境添加了活力。在一般的企業組織，往往無設計師或藝術顧問的配置，且專業的委外設計往往價格高昂，非一般中小企業願意負擔，也缺少了更新的即時性。加上設計師大多不擅長資訊技術、無工程技術背景。未受過任何美感訓練的工程與技術人員常得建置網站、製作軟體使用者介面(User Interface, UI)設計，導致視覺呈現上的不協調。

(14)

2 1.2 研究動機 1920 年代包浩斯學院的大師 Itten 曾說：「若能在無知的情況下運用色彩創造出傑作，那麼無知便是方法；如果無知無法使你創造出色彩的傑作，那麼就應該去探索求知。(Freeman, 2007)」認知科學的發展演進過程中，我們仍有許多值得學習的地方，特別是感知方面的研究(Andreu, 2007)。優美的色彩設計能提高產品的外觀質量和增強產品的競爭力，在設計階段中，必須注意產品色彩給予消費者的心理層面與心理期望所產生的影響(董佩珺, 2008)。到企業網站訪視的網友，就是企業最核心的目標讀者群，因此他們所提供的訊息可以幫助企業擬定網路公關策略(任永貞, 2001)。在高度競爭的市場中，企業網站應有效利用視覺優勢，在眾多類似的網站當中脫穎而出，不斷強化品牌形象與價值。因此欲藉此研究，歸納出網站設計時的色彩使用方法，輔助企業在非專家主導下，也能以企業識別系統之標準色為色彩搭配基礎，達到吸引網頁瀏覽者目光之目的。 1.3 研究目的

早期關於影像色彩的研究多以達成「所見即所得」(What You See Is What You Get)為目標，亦即能將眼睛所見的，如天空的藍色，與影像中藍色達到一致的結果(吳芳儀, 2006)。國內相關的研究文獻，探討色彩學與網頁設計文獻雖多，卻少有將知識實作為決策系統之相關研究。本研究透過國內外藝術家、心理學、社會學、物理學、化學…等領域學者之研究為基礎，發展出以企業商標標準色為基礎的人性化介面的網站配色決策系統解決方案。將一般人口語化的表達方式，轉為專業的色彩屬性因子，提供使用者能在不破壞色彩調和的範疇內，可隨喜好調整色彩，並提供儲存了大量知名企業專業配色資料庫供比對。以科學化的色彩配置理論與大量的專家知識，開發出網站工程師或設計師皆能使用的配色軟體系統。本研究探討在以企業識別系統為核心下，在眾多的色彩中，一個簡單規律的基本色彩使用方法，輔助無設計或美術背景的工程人員，能夠藉由此決策支援系

(15)

3 統呈現出企業欲傳達的形象與訊息，本研究的宗旨，希望具有學術研究價值外，期能提供企業網站設計時，色彩決策之參考。達到以下目的： 1. 以專業領域的知識，規劃一套人性化介面、互動功能且易於使用的網頁配色決策支援系統。 2. 量化色彩屬性配色特徵，建置系統模式，兼顧使用者需求與色彩調和需求。 3. 歸納出配色建議規範，提供做為日後企業網站設計時的色彩的理論、實務的依循或教育的標準。 4. 知名企業商標標準色與網站資料庫，協助企業尋找最接近商標色與網站設計參考，快速取得最貼近市場的設計風格。 1.4 研究對象與範圍 1.4.1 研究對象本研究收集自18 世紀至今的專家文獻與相關研究為理論基礎，歸納出科學理論與行為感知等對於色彩的研究成果，並將之分類。賡續以現代色彩學對於色彩間屬性值轉換與配色理論，同時彙整國內外商標色彩應用與網站色彩相關設計文獻，推導建立出常用的色彩調和模式，作為系統開發核心基礎。最後，以2010 年公布的 Fortune Global 500 企業及 ReBrand 獲獎品牌商標標準色建立色票資料庫，進行比對，提供網站色彩之參考。 1.4.2 研究範圍本研究之研究範圍以色彩屬性間調和理論為基礎，主要集中於常用的 HSV、 RGB 等色彩空間及顯示器色彩範圍內之色彩，而非一般視覺上所有相關的影響因子。色票比對資料庫，採用知名企業作為對象，一來因網路上網站繁多，設計品質參差不齊；二來為了排除因目的不同的差異，所造成使用者印象中有不同觀感或評論標準，故本研究的設計以針對企業網站所帶來的調和印象為基礎進行研究。

(16)

4 1.5 研究流程 本研究為企業網站色彩決策系統之設計，其研究流程依序可分為下列六階段如下：緒論相關文獻探討系統操作與使用結論系統實作系統規劃與設計使用者介面色票資料庫建立模式建立

(17)

5 第二章 文獻探討 本章節以企業商標用色、色彩偏好之科學與心理因素和網站視覺領域為主軸，進行探討。在文獻部分將針對企業識別系統與商標標準色、色彩與視覺經驗之關聯、色彩學、網頁色彩與使用性、決策支援系統及顯示器色彩等六個部分的相關文獻與研究探討。

2.1 企業識別系統(Corporate Identity System, CIS)與商標標準色 2.1.1 企業識別系統企業識別是企業為了讓顧客能描述及記憶企業的特質，所採用的一種手段 (Van Rekom, 1997)。企業形象在消費者行為上扮演極重要的角色，一企業若能建立良好且具有特色的企業形象，必定能加強消費者對其產品或服務的購買意願，得以有效進行行銷策略與活動，達成企業經營的目標(蘇森榮, 1990)。國際化的競爭環境下，建立企業印象個性化的外貌，與維護良好的企業形象，為企業經營的重要課題，企業識別系統與企業體本身產生同一性，亦成為市場營運的競爭動力 (林磐聳, 1985)。優良的企業識別系統，可將企業形象與理念傳達給消費者與社會大眾，創造良好溝通，進而使人們體認到該企業欲建立於人們心中的形象 (Ind, 1990)。洪惠瓊(2004)在其研究中實證發現當企業宣告有完整配套方案的 CIS 行銷，將會為公司股價帶來正向影響，獲得正向顯著的股價異常報酬。 CIS 以行為及符號的使用與企業內外部關係人進行溝通，並影響人們看待此企業的態度 (Birkight & Stadler, 1980；Olins, 1990)。鄭季虹(1990)認為視覺識別是企業識別系統中最能具體直接將企業精神表現出來的力量。

對於CI 的定義，Olins(1995)將其解說為：「利用一種企業的獨特手法向外界溝通，使之形成特有的企業文化標記。」

林磐聳( 1985)認為 CI 構成要素由下列三者組成：

1. 理念識別(Mind Identity, MI)：最高決策層次、導入 CIS 的原動力。

2. 活動識別(Behavior Identity, BI)：動態的識別形式。對外回饋、參與、活動；對內教育、管理、組織。

(18)

6

3. 視覺識別(Visual Identity, VI)：為靜態的識別符號，以具體、視覺化的形式傳達理念，效果最為直接。圖2-1 企業識別構成要素 (林磐聳, 1985) CIS 的強弱與否，主要的決定性因素還是屬於 VI。因為視覺傳設計的具體符號，本身所含有的意義不需經過理解，即可直接進入個人的感覺，創造企業的形象。(林盤聳, 1985) 2.1.2 商標與標準色探討「標準色」的定義是指企業以某組特定的色彩呈現視覺識別，運用在與企業相關的視覺呈現媒體上，透過色彩，影響知覺刺激與心理反應，用以凸顯企業的經營理念與願景。一般而言，林盤聳(1990)主張企業標準色的著眼點有三方向： 1. 基於塑造企業形象的原因：根據企業的經營理念或產品特質，選擇出符合企業形象的色彩，以表現公司經營理念等。 2. 基於告知生產內容的原因：能依據產品或服務及各種背景因素，產生固定的色彩形象，明確的告知企業生產的內容或提供的服務。 3. 基於強化競爭戰略的原因：選擇適合的色彩，增加企業競爭優勢，擴大企業、品牌間的差異性，達到企業識別、凸顯品牌印象的手段。羅凱(2007)在對全球 127 個知名品牌研究中，發現在色彩的使用上均非常單純，僅使用一個色彩的品牌識別高達61.42%；採用兩個色彩作為品牌識別設計，佔27.56%，顯示出高價值品牌在識別設計的色彩使用上偏向單純簡潔之特性。另 MI BI VI

(19)

7 外在品牌識別設計效果上，統計結果發現高達80.31%的品牌使用純粹平面的形態表現。 CIS 的標準色在企業所欲傳達的整體形象中，具有強烈的識別效果，且可做為企業策略應用的有利工具之一。 2.2 色彩與視覺經驗之關聯 色彩是一種主觀經驗、一種大腦的感覺(Verity, 1980)。色彩的觀點除考量到視覺經驗外，另外如空間性、時間性與變化皆與之有相關性。Burnham et al.(1963) 將視覺經驗的屬性分類分為五個觀點：1.物理觀點(Physical)、2.化學觀點 (Chemical)、3.生理學觀點(Physiological) 、4.心理-物理學觀點(Psychophysical) 、 5.心理學觀點( Psychological) 。視覺經驗與色彩的關係如圖 2-2：

(20)

8

大山正(1998)指出色彩研究歷史有相對的兩大派系。一是由 Newton 至 T. Young、H. Helmholtz，至於現今 CIE XYZ 表色系的測色學，是以產生色覺物理條件為中心的理論；另一派為現象學，以Goethe、Hering 為發展代表，以研究色覺經驗內容為對象。二十世紀以來，現象學派有顯著的成果。 2.3 色彩學探討 色彩伴隨著人類的文化與歷史，源遠流長。古希臘人認為光明與黑暗的鬥爭，產生了色彩；Aristotle(B.C 384- B.C. 322)認為色彩是連續的，白、黃、紅、藍、黑及其中間色連續排列；中國人五行中金、木、水、火、土各自以白、綠、藍、紅、黃為其相對應色，彼此間亦相生相剋。Ratliff(1971) 認為一般的色彩理論，可追溯至1520 年的 Leonardo Da Vinci 甚至更早，18 世紀由 Goethe 發展出更進階

經驗 Experience 其它經驗 Other 視覺經驗 Visual experience 聽覺經驗 Auditory experience 範圍 Extent 色彩 Color 期間 Duration 色相 Hue 彩度(飽和度) Saturation 明度 Brightness Size Shape Location Texture Glare Transparency Fluctuation Flicker Sparkle Glitter Movement 圖2-2 視覺經驗的屬性關係分類 (Burnham et al., 1963)

(21)

9

的色彩公式， Harris(1766)率先使用色相、彩度、明度的概念，而後 Chevreul(1835) 對此有更深入的研究。1874 年 Hering 提出了 Opponent-color Theory，其補色理論指出因人類的視覺系統無法在同一個單位同時呈現互補色，故當顏色同時呈現如黃與藍或紅與綠等互補色時，則會知覺到白色。 2.3.1 色彩構成 Issac Newton 於 17 世紀時，使用稜鏡將日光的光線分為由紅過渡到、橙、黃、綠、藍、靛、紫等顏色的七個光譜(spectrum)色帶。並將之繪成連續的色環。 (Newton,1704, 1718) 圖2-3 牛頓的色環 (I. Newton, 1704, 1718) 圖2-4 牛頓以稜鏡分出之光譜 (I. Newton, 1704, 1718)

(22)

10 藝術家和欲瞭解色彩的理論家們，皆非常重視色環 (Edwards, 2004)。自 Harris 後，色彩的使用者藉由色彩的三個屬性，色相、彩度、明度，調出所要的顏色。 Burnham et al. (1963) 認為色彩是一種可利用色相、彩度與明度等屬性加以量化描述的視覺經驗。人類所能辨識的色彩會隨著環境影響而產生變化，要掌握這種變化十分困難。但創作上所能利用的色彩，只要以色相、彩度、明度三種屬性加以控制，便能搭配出無限種組合 (Rin Yano, 2006)。 2.3.2 色彩體系 18 世紀起，至今大多數主流的藝術家與科學家們所提出之色彩構成、色立體等多以色相、彩度、明度為表現主軸。主要的色彩立體論點如下： 1. Moses Harris (1766) 以Newton 的光學理論為基礎，建立起由色相、彩度、明度這三原則構成的色彩體系，如圖2-5。將顏色間的關係編排成色環，使用減色法解釋藝術家們如何藉由基本的紅、黃、藍三色創造出更多種的顏色。此色環也影響了往後100 多年間各學者所發表的各類表色系統。

(23)

11 2. August Kirschmann (1895, 1907) 色彩雙圓錐體以色彩的顏色、彩度與亮度構成，但其未標示出白與黑，而是在垂直軸線的兩端以0 到∞表示之。圖2-6 Kirschmann 色彩雙圓錐體以現代的觀點來看，若以此模型的0 與∞來表示白與黑，無法準確表達人類眼睛對於色彩明暗的真實感受。但這概念表現出了複雜的自然界色彩 (Kuehni, 2003)。

3. Michel Eugène Chevreul (1835)

提出以紅、黃、藍為主色組成的色彩半球，三原色經一次與二次混色後，共分為12 個色相。許多學者也將此視為 Munsell 與現代各色彩體系的雛形。 (1) 色相：分為 12 個色相，每個色相間再分為 5 個階段，共 60 個純色。 (2) 色調：每個純色以其與中心軸的位置變化，改變色調。愈接近軸心底部，越接近白色，越接近軸心上方，則越接近黑色。不過其色半球並未精準的描繪出明度與彩度的關係。

(24)

12

圖2-7 Chevreul 色彩半球(echo productions)

(25)

13 4. Wilhelm Max Wundt (1874, 1893)

以色球(1874)與色圓錐(1893)表示色彩體系。色球則以 8 個色相，中心軸為無彩度，越接近中心軸彩度越低；明度以球頂為最高呈白色，色球底部明度最低。色圓錐以6 個色相為圓錐底部，外圈為最高彩度的六個色彩，朝中心軸彩度漸減，至圓錐頂端成為黑色，越接近底部則明度越高。

圖2-9 Wundt 色球 (echo productions)

(26)

14 5. Albert H. Munsell(1898)

孟塞爾顏色系統(Munsell Color System)為 Munsell 發表的顏色描述系統，此系統基於「等感覺差」原則，以有秩序的方式解釋每種色彩的視覺屬性。圖2-11 孟塞爾色環的三個維度(一)(T. M. Cleland , 2004) 以中心軸為無彩色明度軸，由上而下，將明度由最亮到最暗分為11 階；彩度階垂直中心軸，中心軸彩度0。離中心軸越遠，彩度越高。所有色相中，以相同色相的純色的彩度最高。所有純色中，又以紅色彩度最高。 (1) 色相：以紅(R)、黃(Y)、綠(G)、藍(B)、紫(P)5 種色相為基礎，在加上黃紅、黃綠、藍綠、藍紫、紅紫五種間色，共 10 個色相。此外，每個色相又可再細分10 等份，成為 100 種色相，其色環中的顏色，即以各個色相的第5 等份為該色相代表色。 (2) 彩度：從無彩色開始，採等感覺差，來決定彩度階段，共分為 14 個階段，以0~14 表示。 (3) 明度：分為 11 個階段，從黑色到白色，中間有 9 個灰色階度，以 N0~N10 表示。N(Neutral)表示灰色、中性色之義。

(27)

圖2-1 (4) 優點度相 (5) 缺點 12 Munsell 色點：和明度相等。點：純色的色環的三個圖2-13 Mu 度軸垂直相的明度與彩 15 個維度(二)( unsell 表色相交的水平彩度不統一 Wikipeida,繪色系(朱介英, 平面上配置一，在配色繪圖：jaco ,1998) 置的各個顏色使用上可 obolus, 2007 顏色，每個可能導致困 7) 個色彩的明困擾。明

(28)

16 6. Hermann Ebbinghaus (1902) 發表雙重三角錐體所組成的色彩體系，由紅、黃、綠、藍四個原始色彩組成。色彩由中心到頂端以漸層方式呈現，以較亮的黃色色相漸漸接近白色，以較暗的藍色色相，漸漸接近黑色。現代的物理學已證實此色彩體系不符合真實的自然光線，但仍能表現出當時的色彩學，也是以色相與明暗度組合成各種顏色的意義。

(29)

17 7. Wilhelm Ostwald (1916) 雙重圓錐形色立體之構造，包含： (1) 色相主要彩色有為紅、黃、綠、藍四色。這些顏色再兩兩混合為中間的二次色分別為橙色、黃綠、藍綠、紫色，共8 個色相。若將每一色相再細分成3 色，以中間為正色，又可分成 24 色相。此為互補色環，相對於圓中心兩邊位置的色相成補色關係。圖2-15 Ostwald 色相環(鄭國裕、林磐聳, 1990) (2) 明度階段以 a、c、e、g、i、l、n、p 的記號表示由明至暗，分為 8 個等級。最明亮的白色以a 表示，以 p 表示最暗的黑色。在白色與黑色間，分為6 等級灰色調。 (3) 色彩都是由純色、白色及黑色以適當比例混合而成，因此純色與彩度的關係為：白量+黑量+純色量 = 100

(30)

18

圖2-16 Ostwald 色立體(Bond & Nickerson, 1942; 大山正, 1998)

圖2-17 Ostwald 色立體的垂直剖面(Bond & Nickerson, 1942；大山正, 1998) (3) 優點： ① 表色系的構成具有對稱性，方便用於同色調的選擇，如各個平行於中心軸(白與黑)的各個垂直列的彩度都是一致的。 ② 以混色原理配置顏色，比 CIE XYZ 表色系更清楚。(大山正,1998) ③ 各色相的白色、黑色含量統一，故用於配色參考上，即為方便。 (4) 缺點： ① 水平的色彩明度階段不一致。 ② 未包含現實生活中所有物體的顏色。 ③ 不同色相之符號雖然相同，但明度、彩度不一致。

(31)

19 8. Itten (1961, 1970) Itten 表色系以紅、黃、藍為三原色，使用相鄰的兩色等量混合，形成 3 種第二次色，再將6 種顏色相鄰等量混合成 6 中第三次色，形成 12 等份色環。此色環的色彩順序，與彩虹或太陽光分光後所產生的色帶順序相同，因為不是等感覺差分佈，故其6 對補色也分別為於直徑兩端相對的位置上。圖2-18 Itten 色相環其色立體是由球體構成，球體由上而下分為7 個區域，上下分別為白色與黑色，中間則是黑色與白色混合純色的階段變化。

(32)

20

圖2-19 展開後的 Itten 色彩體系 9. 日本色彩研究所 PCCS 色立體(1964)

為日本色彩研究所配色體系(Practical Color Co-ordinate System, P.C.C.S.) 發表之色彩體系。以色相-明度-彩度的順序表示色彩數值，如純紅色為 2R-4.5-9S。

(1) 色相：以光譜色的紅、橙、黃、綠、藍、紫為基礎，以視覺的等感覺差，進行第二次、三次混色，成為24 色相環。因為是以「等感覺差」為色相分布排列，故直徑相對色彩並非補色關係。

(33)

21 圖2-20 PCCS 色相環(日本色彩研究所) (2) 明度：白色與黑色之間做等感覺差分割，共分 9 階。白色在上端，以 9.5 代表最高明度，下端以 1.0 代表最低明度的黑色。中間配置 7 個灰色階段，以淺灰的8.5 與 7.5，代表中灰的 6.5，5.5，4.5 及代表深灰的 3.5，2.4 表示之。純色間的色彩，明度間距差不多。 (3) 彩度：彩度由無彩色到純色分為 9 階，彩度記號都加上 S，無彩度到最高彩度的純色，以1S~9S 表示之。鄭國裕與林磐聳(1990)指出彩度 3 階段以內，接近無色彩，不能顯現感情色彩。通常必須在5 個階段以上的彩度才能顯現色彩感情。

(34)

22 圖2-21 PCCS 色調圖(日本色彩研究所) (4) 優點： ① 兼具 Munsell 及 Ostward 兩色彩體系的優點 ② 將明度與彩度整合的色調考慮，將明度與彩度的強弱併在一起考慮，產生調子。 ② 色相值等距。故色相環對面的相對位置非互補色，但本系統有互補色環可作為替代。 ③ 掌握 Ostwald 系統中的無色彩到純色等距之概念。 (5) 缺點： ① 由於是以描述的方式為色彩名稱，描述的顏色範圍較光學表色系統色彩少。 ② 實際的彩度階段，因色相的不同，而有差異，較難直接以數值推論出。整體來說，色相通常以色相環中0°~360°的位置來標定，接近的色彩稱為近似色、對立的色彩叫做互補色。印刷三原色(青、洋紅、黃)就在紅、綠、藍的正對面。不過以繪畫三原色來說，其分布確沒有這麼整齊，因為它們對藍色和綠色的定義有些許的差異(Freeman, 2007)。

(35)

23 2.3.3 色彩心理學色彩的心理效應，大部分可能因為性別、年齡、生活、民族…等因素，所產生個別或是群體的差異，這種差異大部分源自於心理上的不同反應，所以稱之為「色彩心理(Color Psychology)」 (林文昌, 1991)。故在對色彩作關於意象的呈現時，有必要考慮生活在其中者的感覺及認知態度(陳思玫, 2000)。所有的設計，不論是環境、產品或視覺設計，均可依照色彩意象進行分析，並做出所要求之意象的配色(小林重順, 1983)。隋嘉如(2005)認為色彩的喜好會因性別、年齡、生活環境以及對色彩的聯想因素而產生顯著的差異性，一般大眾會憑著生活經驗的累積，以及深沈腦海的刻板印象來解讀感覺並影響對事務的判斷。環境中，只要是人們可見的色彩，無論是自然或人造，皆有不同的型態與象徵意義，因而直覺或間接性的產生某中有形或無形的影像或象徵的印象。鄭國裕與林磐聳(1990)將「色彩的聯想」解釋為，當我們看到某種色彩時，常把這種色彩和我們生活環境或生活經驗有關的事物聯想在一起。色彩的聯想可分為兩類，一為具體事物的聯想，如紅色聯想到火焰、鬥牛士等；一為抽象的聯想，通常隨著年齡增長，抽象性的聯想也會跟著增加，如：紫色代表著高貴、以白色象徵純潔等。抽象性的聯想，又稱為「色彩的象徵」。顏色具體聯想抽象聯想紅血液、夕陽、火焰、心臟熱情、危險、反抗、喜慶、爆發橙橘子、柳橙、晚霞、秋葉快樂、溫情、明朗、積極黃香蕉、黃金、黃菊、注意信號明快、光明、注意、不安、野心綠樹葉、公園、草木、安全信號和平、理想、希望、成長、安全藍海洋、藍天、湖海、遠山沉靜、涼爽、憂鬱、理性、自由紫葡萄、茄子、紫菜、紫羅蘭高貴、神秘、優雅、忌妒、病態白白雲、白雪、白紙、護士純潔、樸素、虔誠、神聖、虛無黑夜晚、頭髮、木炭、墨死亡、恐怖、邪惡、嚴肅、孤獨表2-1 色彩的聯想 (鄭國裕、林磐聳,1990)

(36)

24 2.3.4 色彩調和色彩調和的組成，如超現實主義畫家Marc Chagall (1887-1985)所說：「所有的色彩都是鄰近色的友人和對比色的戀人。」(Lupton、Phillips, 2008) 將兩種以上的色彩依不同比例組合，稱為配色，自然界很少有色彩單獨存在的情況，因為當我們在觀看某一色彩時，必定受到周遭色彩的影響，然後產生比較的關係，進而產生視覺上的效果。色彩的調和就如兩種以上色彩放在一起，彼此影響的結果產生共鳴或者無衝突的感覺，只要色彩在三個屬性上全面達到平衡，便能引發美感反應，覺得賞心悅目(Edwards, 2004)。 Goethe 認為調和的色彩，就是引發人們喜悅感受的色彩組合。Chevreul(1839) 將色彩調和理論分為(1)類似調和與(2)對比調和兩種。Munsell 認為讓色彩在一個封閉、凝聚的組合中取得平衡，能創造出調和的效果。Heddell(1988)指出兩種色彩調和原則：(1)互補色配色原則以及(2)同屬性配色原則。 1. 表2-2 色彩調和相關理論：(整理：林書堯, 1981；陳昱帆, 2008；周耀庭) 學者年代色彩調和論點 1 Aristotle BC.384 ~322 色彩明度的白量與黑量配合比例成2:3 或3:4 等簡單的配色法，色調一定覺得舒適。 2 Goethe 1749-1832 在色彩組合中，當色彩面積與其相對明度成反比時，最能互相協調 3 Field 1845 認為優良的配色，應該是遠看的時候成為灰色調。 4 Chevreul 1839 主張的調和方式為：類似色與對比調和色調和。類似調和法，分為同色相而明度稍微有點差異的明度調和、色相相鄰而彩度相同等兩種。 5 Benson 1868 色彩調和，認為各色的用量以及色彩的強弱應該取得平衡。

(37)

25 6 Hatt 1913 色彩美是因為個人的喜好而不同，小孩子與未開化的人喜歡彩度高、鮮豔的色彩；成人或是接受過教育的人喜歡中間色調與彩度低的色彩，認為遠看會變成灰色調的色彩配合法為佳。 7 Munsell 1923 主張三種調和的配色法： 1.改變色相的配色法。 2.改變明度的配色法。 3.改變彩度的配色法。主張真正均勻的色調，是將所有的色料完全混合在一起，能成為中明度的灰色時，該色變是調和的色彩。 8 Ostwald 1931 1.認為色彩調和一定要合乎一定的法則 2.在無彩色系統裡間隔的三色可以調和 3.任何色彩與白與黑都可以調和 4.彩度與明度相等的不同色彩會調和 5.有時不完全調和的色彩會比調和的感覺好 6.對於某一主色，其他用來配合的兩個或是兩個以上的色彩，恰好會在主色的正對面。 9 Abbott 1947 1.同一色相的調和。 2.類似色調和，鄰近色彩所成的調和。 3.同一色相，對比色相的調和，比中間的色相的配合好。 4.色彩調和的評價，應該根據觀賞者的滿足和喜歡程度來決定。 5.白、灰、黑、銀、金，和任何色彩都能調和。 6.黑色最好能和兩個清楚色彩使用。 7.白色宜單獨和另一色彩一起使用。

(38)

26 10 Itten、Birren 1961, 1970 1.等量的黑色白色，純色的各色可以調和。 2.一定的白色量下，其他色相和黑色量都能保持秩序與平衡。 3.對比性的色彩應該單獨使用，類似色彩最好配合後使用。 4.鮮豔的色彩宜用在小面積上面。 5.暖色系的色彩和黑色，冷色系的色彩配合白色容易調和。調和色具有下列特色： (1)所有顏色的補色 (2)在12色色環上行程等邊或等腰三角形的三重組合；形成正方形或長方形的四重組合；形成等邊六角型的六重組合等。 (3)可在四重組合中，加入黑與白。 (4)可以此原則組合出更多調和色 11 Heddell 1988 以互補性配色或同屬性配色，可得調和色彩 12 Moon、Spence 1991 主張色彩調和應同時滿足: 1. 非曖昧色，且不炫目。 2. 色彩空間中，相互間的色彩，應該保時簡單的幾何學關係。如同一調和、類似調和、對比調和。 13 Edwards 2004 在一畫面中要使色彩達到平衡，需滿足： 1. 每個色彩都有對等的補色 2. 每個色彩都有相反的明度 3. 每個色彩都有相反的彩度 14 Rin Yano 2006 以四種配色法可達到調和色彩 1. tone in tone 2. tone on tone

(39)

27 3.色調配色法 4.區分配色法各種論點皆有其優缺點及較佳的使用時機。以目前而言，以Ostwald 之色彩體系調和及Munsell 的配色調和論點為主要參考依據。Munsell 以色相、彩度、明度的調和配色論點，為現代色彩學最常使用的手法。 2. 色相調和 Itten(1961,1970)主張常用的有二重、三重、四重、六重組合等。但仍可依據此法則，延伸出各式各樣的不同組合，各類組合之概述如下： (1) 二重組合：色環中徑向相對的兩種色彩為互補色，即色相環角度為 180°。兩種色彩若能在以色球中點為中心的對稱位置上，兩個互補色彩就可構成一種調和的二重組合。例如使用明度較高的紅色，對比色彩就是明度較低的綠色。 (2) 三重組合：從十二等份色環中選取位置呈等邊三角形的三個色彩，便可構成調和的三重組合。各色彩於色相環中間隔120°，如紅-黃-藍的原始三和弦，或第二層次的純色，如橘-紫-綠...等，都是三重組合的調和色彩。另外，如正三角形或等腰三角形的組合也是一種調和的組合。 (3) 四重組合：被選取的色彩於色相環中間隔90°。從色環中選取兩對互補色彩，當該兩對互補色彩在色環上的位置互呈垂直關係時，將可得出一正方形(或為矩形)。 (4) 六重組合： Itten 提出兩種方法：

(40)

28 ① 在十二等份色環中崁入一個六角型作為色彩間關係圖形，即於色環中，各色彩間隔為60°，即可得到三對互補色彩的調和六重組合。 ② 以四重組合的四邊形調和色彩，再加入白色與黑色。圖2-22 色環及其各種色彩調和組合(Itten, 1970) 圖2-23 四重組合與白色、黑色的調和組合(Itten, 1970)

(41)

29

(5 ) Moon & Spencer 對於色相為主的調和，以 Munsell 色相環為基礎，將配色組合區分為相同、第一曖昧、類似、第二曖昧、對比及互補色相，相隔色相差如表2-3：色相組合色相差同一色相色相差在 1 階以內第一曖昧色相 1~7 色相差類似色相 7~12色相差第二曖昧色相 12~28 色相差對比色相 28~50 色相差互補色相色相差 50 表2-3 色相之分類組合其中「同一」、「類似」與「對比」屬於調和區，而「第一曖昧」與「第二曖昧」則屬於不調和區。但色相環上的角度組合分配之觀點，通常牽涉到知覺，故數值上多有其模糊區域、無一定界線。整體而言，色相環上兩個色彩之間的間隔，角度越小越穩定、柔和；角度越大容易呈現出不穩定、刺激、強烈的感覺。 3.彩度的調和

Moon & Spencer 對於的彩度的調和與不調和區域，區分如表 2-4：

彩度組合彩度差同一彩度彩度差在 1 階以內第一曖昧彩度 1~3 彩度差類似彩度 3~5 彩度差第二曖昧彩度 5~7 彩度差對比彩度彩度差 7 階以上表2-4 彩度分類組合

(42)

30 其中「同一」、「類似」與「對比」彩度屬於調和區，「第一曖昧」與「第二曖昧」屬於不調和區。並指出彩度差超過8-9 階時，會產生眩耀(glare)現象，導致不調和(大智浩, 1975)。大山正(1998)指出高彩度時，色相差會因彩度在某種比較程度下而大不相同。 4. 明度調和 T. Worobiec(2009)指出美國知名攝影師喬‧梅耶洛茲(Joel Meyerowitz)攝影中所謂的「交越光」的攝影風格，將之說明為：「在攝影上用來形一種光線狀況，指被照亮的建築物與天空的光線兩者的亮度剛好吻合。當一幅影像可以在這樣的光線下完成，成像的效果應該會相當令人驚艷。」此例便為經典的明度配色方法。

Moon and Spencer 將明度組合區分如下：

明度組合明度差同一明度明度差極小第一曖昧明度明度差 0.5 以下類似明度 0.5~1.5 明度差第二曖明度 1.5~2.5 明度差對比明度 2.5~10 明度差眩目明度明度差 10 階以上表2-5 明度分類組合其中「同一」、「類似」與「對比」屬於調和區，「第一曖昧」、「第二曖昧」與「眩目」明度歸屬於不調和區。另外，若以P.C.C.S.色彩系統而言，明度差 1~2 階段稱為「類似明度」調和；明度差在3~5 階段以上，稱為「對比調和」；超過 8 階段則會產生不調和現象(鄭國裕、林磐聳,1990)。

Munsel1 表色系中，Moon & Spencer 認為明度 1 階段的強度相當於彩度 4 個階段，明度3 個階段的強度等於彩度 8 個階段的效果(大智浩,1975；鄭國裕、林磐聳,1990)。大山正(1998)主張屬性間相互關係為 1 個明度差=2 彩度差=3 色相差。歐立成(1997)研究顯示，在色光色的顯色條件下，三屬性差異中，對色彩調和程

(43)

31 度影響最大的因素可能是明度差。莊明振、葉青林(1998)利用變異數分析來檢定彩度平均值間的差異性，結果發現在配色中不論彩度差是否於調和區域，對調和度並無明顯的影響；另外以t-test 檢定，將等值與不等值配色的平均色彩調和度加以比較發現，只有等色相配色與等明度配色原則具有統計上的顯著差異性，但是等明度配色的調和度，反倒比不等明度配色的調和度低。其結論並發現，當等色相、等彩度、等明度之配色時，只有「等色相配色原則」可得到高調和度之結果。 5. 色調調和明度與彩度組成的色調，在配色中相對於其它因素，更顯重要。許多學者論點顯示，色調的變化較色相變化對視覺的影響度高。色相在曖昧區域之顏色關係因不明確，通常需在明度、彩度上變化，才可以得到良好的配色 (鄭國裕、林磐聳, 1990)。Itten(1970)在色相調和的方法中，多次提到須搭配明度深淺之變化； Hatt 與 Munsell 亦認為色調形成灰階時可達到調和色彩。以色調配對而言，在雙色配色上比較容易達到顯著差異(陳昱帆,2008)。Rin Yano(2006)認為只要依據一定的理論，便能確實獲得協調的配色。提出3 種類似色彩的色調配色方法： (1) Tone on Tone：從色相環中選取一個顏色，並以該色為基準，選出彩度、明度稍有變化的色彩。例如：可以紅色、亮紅與深紅等相似色彩做為搭配。 (2) Tone in Tone：由同一色相或緊鄰色相中選取色調沒有太大變化的色彩。 (3) 色調配色法(tonal)：從固定的色調中選擇色相具有一定差異的色彩。通常使用中明度、中彩度的暗沉色彩。綜整而言，色調之影響大於色相，而明度又高於彩度；色相處於「同一色相」與「互補色相」時，對於調和程度之影響又遠高於其他色相組合。故，色彩屬性

(44)

32 對於色彩之影響程度一般為：明度>色相>彩度；三屬性皆屬相似階度時，則影響度為色相>色調。色彩的調和雖是色彩使用者欲追求的目標，但有時不調和的情形，在某些情境下反而能達到好效果。誠如藝術家兼建築師Albers(1963)所說「色彩的調和雖然通常是配色的主要目標，卻非色彩間唯一值得追求的關係，色彩如同音樂，不協調音與協調音一樣美好！」事實上，色彩影響的差異不僅限於該色相、明度、彩度，而是三者間互相關係的因果，更可能受外在如環境、情緒...等無數因子影響而改變。 2.3.5 色彩面積比例在純色的狀況下，Goethe 表示在色彩組合中，當色彩面積與其相對明度成反比時，最能互相協調。黃、橙、紅、綠、藍、紫的明度比為9 : 8 : 6 : 6 : 4 : 3 (Freeman, 2007)。Feisner( 2006)描述相關色彩之比例關係。圖2-24 色彩與面積比例(Feisner ,2006) 在視覺上來說，當面積越大時，相對的明度與彩度的感覺也會增加；面積越小，明度與彩度的感覺也會降低。Munsell 主張色彩面積較大者使用低彩度色彩，較小面積運用彩度高的色彩，即面積與色彩明度、彩度乘積成反比。

(45)

33 與色彩的三個屬性相比，色彩面積影響度相對較小。高淑玲（2003)分析發現，在相同的色彩下改變不同面積比或是配色情況，大部分的意象不會因為面積比或是形狀的不同，而產生對於排序上的變化。陳昱帆(2008)研究亦指出，色面積雖然對於意象會有所改變，但是改變的大小不及改變配色相或是色調來的顯著，且大部分的面積比例變化並不會影響意象變化。 2.3.6 色彩偏移色彩對比能在無色彩領域中產生，在有色彩領域中亦會產生。有時周圍色的補色色相會偏離，但有時也因色彩組合而偏離(大山正, 1998)。如前文所述，各表色系統，也會因以科學數值或感覺差進行色相、明度、彩度之分階而各有實際應用上的優缺點，如：Itten 以對稱方式區分色相；Ostwald 以對稱性方式區分色相，但明度階段不整齊，且純色的白色量與黑色量並非0，導致該表色系的純色，並非100%純色；Musell 表色系，色相與彩度以等感覺差區分；P.C.C.S.表色系，色相與明度以等感覺差區分。如同樣是純色，黃色的明度明顯高於其他顏色；純紅色的彩度也比其他純色為高。故要完美的在色彩科學數值與感覺中取得平衡，有一定困難。色彩若要以感覺區分，則在科學數值的衡量上，將顯的不精準；但若以數值為主要表示，並展現出對稱性，則在感覺認上也會有所誤差。故色彩偏移的情形，亦難以單獨理論與案例來判斷正確或錯誤，在現實生活中，此問題也是多數靠設計者專業感覺進行調整。 2.4 網頁色彩與使用性探討 企業若無標準的色彩使用規範，非專家建構的網站色彩，將以自己的認知甚至隨機選擇為標準，難以達到視覺上的優勢。Lazar(2001)在研究中指出目前網站之所以不好用，是因為網路從業者採取了以設計者中心(designer center)思維，而非使用者中心設計所致，因為這些立意不同的目標，最終造成雙方在預期與使用經驗上的嚴重落差。

(46)

34 2.4.1 網站視覺形象與使用者印象之關聯在網站設計與使用者印象相關研究之正向關係研究，林佩儀(2000)在其研究中指出對於網路購物者而言，欲讓使用者留下良好的印象，網站設計要注重美觀易讀的原則。劉育德(2003)表示網路企業識別系統與網路品牌印象之關係，網路使用者認為網路視覺識別最重要且影響整體企業識別系統最大，且網路企業識別系統與網路品牌印象具有顯著的正相關。優良的視覺設計，能強化企業識別與品牌形象，更能吸引網站瀏覽者的目光，及使用上的舒適度。 2.4.2 網頁色彩與視覺關係探討全球資訊網已成為企業及品牌創新、企業識別與形象的關鍵工具，而色彩、外型、線條與形式則是構成視覺風格的要素(Schmitt, 1999)。蘇小鳳( 2003)在一項針對48 個大學生的研究中發現，以一致性原則而言，網站中的整體色系、背景顏色，字型樣式、大小，游標形狀、捲軸樣式、超連結等的顏色應該予人一致的感覺，且在顏色與字型的使用上，簡單明瞭與不使用過多的顏色或字型混淆使用者的視覺，有較高的使用者介面評分。李俊宏(1996)針對台灣各大專院校網頁首頁設計，並參照國內外相關研究，提出網頁設計五個參考原則：版面編排、超連結方式、圖像設計、內文、色彩等，以幫助網頁視覺化的閱讀與搜尋。Daniel(2000)認為網站設計可以視為內容、視覺呈現、可用性三要素的組合。 Tullis(1998)於網頁視覺設計偏好評價上，使用了版面格式、吸引力、色彩等屬性進行評估。影響對首頁設計風格辨識的依據：1.訊息呈現形式、2.構成元素的使用、3.編排手法、4.色彩、5.情感意象、6.使用感受、7.技術問題、8.網站類比等八個類別(許峻誠,2001)。掌握好的用色，如對比與調和間的平衡，對於閱讀的辨認性與易讀性影響程度極高，如對比強的色彩組合可以增加閱讀時的便利性，反之則會造成瀏覽的壓力(魏澤群,2007)。

(47)

35

良好的視覺呈現在網頁設計領域，已是決定性的重要因素之一，色彩更是其中不可或缺的要素。色彩使用是一般使用者介面的設計者，常犯的居多錯誤之一，在色彩的運用也最好使用一致性與標準化的色系搭配，更要重視整體訊息的美感與介面調性的均衡感(黃如足, 2002)。不當的濫用色彩，將導致視覺作業績效的負面影響，甚至發生高度視覺疲勞的不利結果(Bruce & Foster, 1982; Luria et al., 1989； Matthews, 1987；Radl, 1982)。

2.4.3 字體與色彩關係

J. Nielsen & H. Loranger(2006)在一項針對 42 個重新設計的網站的研究中發現，在針對可行性進行重新設計後，網站的可用性程度大幅提高了135%，其研究中指出文字和背景的對比關係建議： 1. 正確的顏色對比與正確的字體和大小，確保了網站的易辨識性和易讀性。螢幕閱讀要比紙上閱讀更加困難，具有高對比的文字和背景色會使閱讀容易一點。 2. 在使用互補色組合時要小心。這些顏色的對比度很高，但過於明亮的顏色在電腦將造成文字的振動效果，使之難以閱讀。 3. 深顏色對於文字來說是最好的顏色，冷色調和不飽和顏色對於背景來說是最好的顏色。較低的對比度會引起眼睛的疲勞和不適。Munsell(1969)亦認為灰階色彩本身就是調和的。

(48)

36 顏色組合易讀性等級白色背景上的黑色文字高：對比度高，能感受明顯的顏色差別白色背景上的藍色文字高：只要使用深藍色，就能感受明顯的顏色差別灰色背景上的黑色文字中等：視顏色組合與飽和度而定，具有中等到明顯的差別藍色背景上的白色文字低：難以閱讀，因為人們會覺得深色的背景壓倒了白色的文字白色背景上的灰色文字低：對比度低，顏色差別不容易被感知灰色背景上的白色文字低：對比度低，顏色差別不容易被感知藍色背景上的紅色文字極低：大膽的顏色組合會讓眼睛容易疲勞黑色背景上的紅色文字極低：大膽的顏色組合會讓眼睛容易疲勞

表2-6 文字/背景顏色組合與易讀性等級(Nielsen & Loranger,2006)

劉映辰與李文淵(2008)探討英文字型美感及喜好程度的研究裡，結果顯示色彩對美感和喜好有顯著影響。另外，如Shieh and Chen (1997)研究文字/背景色彩組合對視距的影響，發現以綠底紅字，主觀偏好評分最差。Pastoor(1990)針對 VDT(Visual Display Terminal)上文字/背景顏色組合對績效及主觀偏好影響的研究指出，在二種固定亮度對比下，對800 種顏色組合做主觀評量，結果發現彩度似乎是影響評分的最重要因素，不飽和的顏色組合有較佳的評分。J. Nielsen & H. Loranger(2006)建議在網站的主要區域中的文字不要使用超過四種顏色，否則就會顯得缺乏組織和不夠專業。 2.5 決策支援系統 決策支援系統是結合人類智慧與電腦功能，幫助管理者面對半結構化問題時，協助改善其決策品質的電腦系統(Keen & Scott,1978)。Alter(1977)提出「任何支援決策制定的系統都是決策支援系統」Turban 及 Aronson(1998)在其「決策支援系統」一書中，建構其架構模式，除對話產生及管理系統(Dialog Generation and Management System, DGMS)、資料庫管理系統(Data Base Management System, DBMS)、模式庫管理系統(Model Base Management System, MBMS)外，另外加入

(49)

37

了知識管理系統，如圖3-2。Laudon & Laudon(2006)表示決策系統的組成要件，包括：1. 使用者介面的軟體系統、2. 模式、3.資料庫、4. 資料挖掘及其他分析工具。

1. 使用者介面(User Interface, UI)

蘋果電腦於1984 年推出圖形使用者介面(Graphical User Interface, GUI) 操作界面作業系統以來，證明了良好的人機介面讓使用者的學習、使用操作上更為便利。良好的人機介面軟體很容易就可以讓初學者在短暫的時間內學會一套軟體的操作，這就是視窗環境最大的優點所在(李健興, 2002)。Shneiderman (1998)提出使用者介面設計的八條準則：1.追求一致性、2.允許熟練的使用者運用快捷鍵、3.提供有益的回饋、4.一系列動作由一連串對話的方式完成、 5.提供錯誤預防與簡單的錯誤控制、6.准許動作還原被簡單地執行、7.提供完全的控制、8.減少短期記憶的負載。圖形使用者介面(GUI)指使用者可利用小圖示和滑鼠等下指令或做選擇(Laudon, 2006)。資料庫程式庫 DBMS MBMS DGMS 使用者圖2-25：決策支援系統架構 (Sprague and Calson, 1982)

(50)

38 2. 模式庫

決策支援系統目的為協助結合資料與複雜的分析模式，支援半結構化與非結構化決策的制定。主要透過模式來提供預測、推理、分析、創造可行方案、比較可行方案、最佳化及模擬等能力。Laudon & Laudon(2006)將此模型解釋為一個抽象代表，表示一個現象的組成要件或關係，包含了1. 實體模式(Physical model)、2.數學模式(Mathematical model)、3.口語上的模式(Verbal model)等三類。

3. 資料庫

自1970 年代，決策支援系統問世，學術各界也已確認了「一個獨立分離且客製化的資料分析資料庫」，對決策支援系統之設計上，有其架構上有其明顯優勢(Sprague and Waston，1996)。決策支援系統資料庫(DSS Database) 從許多的應用與群體中蒐集了現在與過去的資料，此資料庫可能是存在於個人電腦的一個小型資料庫，也可能是不斷更新的大型資料倉儲(data warehouse)(Laudon & Laudon, 2006)。此資料庫系統通常包括下列之四個元件：1.資料庫、2.資料庫管理系統、3.資料字典、4.查詢工具。

4. 資料挖掘與分析工具

包括用來進行資料分析的軟體工具等(Laudon & Laudon,2006)。 2.6 電腦色彩概論 2.6.1 基本原理全彩顯示器獨立地控制每一個畫素的色彩及亮暗，這就會用到色彩的三原色原理。一個畫素是由三個次畫素組成，它們包含了紅（R）、綠（G）、藍（B）三個顏色。若能適當調整三者之間的比例，就可以呈現出要表達的顏色(韓斌, 2009)。彩色的顯示器呈現的畫面由像素組合而成，每一個像素(pixel)主要是由 r d、g d 與b d 這三數位訊號(digital count)來儲存，每一個通道用 8bits 來儲存，單一像素所需記憶體為24bits (Berns, 1996)。

(51)

39 電腦繪圖所用的記憶裝置，通常將螢幕上的每一個點(pixel)所接受到的紅、綠、藍三色電子束強度的數位彩色資料儲存起來，而大部份有關電腦色彩的計算都利用RGB 三原色的強度資料來進行(廖偉民,1994)。 2.6.2 色彩空間在各類媒體設備的色彩中，交換色彩資訊的標準格式可分為兩類型：一種為使用CIEXYZ、LAB、LUV 等方式表示色彩的設備獨立色彩(Device Independent Color)；另一種是使用 RGB、CMYK 等方式表示色彩的設備從屬色彩(Device Dependent Color)(李佩瑛、王雅萍、高朗軒, 2009)。色彩空間轉換(Conversion)即根據各媒體設備的「色彩特性描述檔」(Profile)數值資料，將影像的色彩資料由「設備從屬色彩空間」轉譯至「設備獨立色彩空間」的過程(張世錩,1999)。因兩者的色彩空間不同，故在實際應用上RGB 或 CMYK 值與 LAB 間沒有轉換的簡單公式，而須仰賴設備間的調整轉換(李佩瑛、王雅萍、高朗軒, 2009)。 1. RGB 色彩空間 RGB 影像使用紅、綠、藍三種顏色組成螢幕上的顏色。在每個顏色 8bits 的影像中，彩色影像的每個RGB 元件 (紅、綠、藍) 強度值範圍是從 0 (黑) 到255 (白)，三色混合後轉換為每個像素 24bits 的色彩資訊(Adobe Systems Incorporated, 2008)。RGB 是標準的色彩模式，但表示的精確顏色範圍可能會依應用程式或顯示裝置而變化。也是目前電腦上使用率最高的色彩空間表示法。 2. HSV(HSB)色彩空間吳東龍(2001)指出 RGB 色彩屬硬體導向(hardware oriented)，只需將 RGB 三數值輸入，顯示設備即無須經過轉換，能調配所需色彩，但使用者相對需要較多的色彩知識。使用者導向(user oriented)的色彩模式，相較之下，可讓使用者以較接近人的知覺模式，經由色相(Hue)、彩度(Saturation)與明度 (Value，或稱亮度 Brightness)這三種色彩屬性構成。

(52)

40 色相，如：紅、橙、黃、綠…等顏色，指的是色彩的相貌，或是區別色彩的名稱，在電腦中以0~360°度表示之。明度指的是色彩明暗的程度，在無彩色中，以白色明度最高、黑色明度最低，中間則為各種明度組成的灰色。若於有彩色中，則可以加入白色提高明度，或者加入黑色降低明度，由最暗到最亮以0~100(%)表示。彩度指的是色彩的飽和程度，任何顏色中，皆以純色的彩度最高；若顏色中，不含純色，則彩度最低，如白色、灰色、黑色，稱為無彩色，彩度由低到高以0~100(%)表示之。應用程式色彩空間 H 範圍 S 範圍 V/S/L 範圍 Paint Shop Pro HSL 0-255 0-255 L：0-255

Photoshop HSV(HSB) 0-360° 0-100% B：0-100% Windows HSL 0-240 0-240 L：0-240 Linux/KDE HSV 0-360° 0-255 V：0-255 JAVA HSV(HSB) 0-1.0 0-1.0 B：0-1.0 Apple HSV 0-360° 0-100% V：0-100% 表2-7 各軟體或應用程式 HSV(HSB)範圍表 3. CIE 色彩空間：目前誤差最小、最科學化的色彩表色法為國際照明委員會(CIE,

Commission Internationale de l'Eclairage)所訂的 CIE 表色法，以物理性光學的測色法，利用儀器將色彩的分光特性或染料的化學成分等分析出來的方法。 (1) CIE XYZ：以 X 代表紅色、Y 代表綠色、Z 代表藍色，這三個原色並非

物理上的色彩，而是虛擬的假想色，XYZ 與 RGB 間關係，可經由方程式換算：

x = (0.490r+0.310g+0.200b) / (0.667r+1.132g+1.200b) y = (0.117r+0.812g+0.010b) / (0.667r+1.132g+1.200b) z = (0.000r+0.010g+0.990b) / (0.667r+1.132g+1.200b)

(53)

41

亮度(luminance)可形容為光的強度(intensity)，意指單位面積上反射或發射的光的強度。明度與亮度的實際意義不同，其間的關係，也非線性關係。

Munsell 明度值 V 在視覺上是成均勻的分佈，但其明度和 CIE Yxy 的亮度因子Y 相對應，對明度而言 Y 屬於非等間隔，亦即 Y 呈等差變化時，明度不會均勻性的增加。為了使明度變得均勻，可將 Y 因子做修正成為均勻明度標尺，關係示表示為：

Y= 1.2219V-0.23111V^2+0.23951V^3-0.021009V^4+0.000840V^5 (3) CIE LAB：簡稱 LAB。由明度(L)，範圍從最暗到最亮以 0 到 100 表示，

以兩個視覺互補色軸：1.偏紅/偏綠的色軸 A、2.偏黃/偏藍色軸 B 所構成。 LAB 色彩空間最接近人眼的所見色彩，且色彩範圍也最大，且包含了 RGB 與 CMYK 色域裡的大多數顏色，由於 LAB 範圍太大，因而在工作時容易導致飽和度扭曲或色調分離的範圍。其次大部分的設備都無法涵蓋LAB 的所有範圍，顯示器上根本看不到編輯後的真正結果(李佩瑛、王雅萍、高朗軒,2009)。 CIE 表色法的測色儀器昂貴，計算方法複雜，測得的數值也不易判斷所表示的色彩為何，對於一般性的色彩傳達並不實用(鄭國裕、林磐聳,1990)。吳東龍(2001)亦指出即使 CIE 對於描述色彩提供了一個共通的方式，但許多研究還未能對於其在顯視器上色彩再現的方式提出統一的標準模式。 4. CMYK 色彩空間以青(Cyan)、洋紅(Magenta)、黃(Yellow)、黑(Skeleton 或 Black)四色，由減色法組成，其色域範圍較小，主要用於印刷之色彩表示。現階段市場上 Firefox、Chrome、Safari、Opera 等瀏覽器皆支援此色彩空間，但使用率最高的Microsoft Internet Explorer 瀏覽器，至第 8 版尚不支援此色彩格式，且以此格式儲存圖片將占據較大空間。

(54)

42 5. 網頁色彩表示法網頁呈現顏色的表現方式可分為如JPG、GIF、PNG 等類型圖形檔的顏色，另一種為以HTML 直接呈現在網頁上的色彩。以圖形檔表現的方式，大多數以RGB 格式儲存。而呈現於網頁上的色彩，則分為 10 進位與 16 進位碼兩種定義法。標準的HTML4 支援 16 進位模式，以#RRGGBB 的形式表現，如：黑色(0,0,0)以#000000 表示、藍色(0,0,256)以#0000FF 表示之。CSS (Cascading Style Sheets,串聯樣式表)，則同時支援 RGB 與#RRGGBB 兩種形式。

(55)

43 第三章 系統規劃與設計 3.1 需求分析 3.1.1 功能需求本研究中以使用者輸入之企業商標標準色，為資料最初來源。據第二章所提文獻之研究，多數知名品牌商標採用單色，雙色次之；型態以純粹平面設計為主。故此系統之色彩輸入比對模組，將以單色輸入，系統提供之配色則為3 組色彩組合、各3 色。將色彩以專家的配色經驗與知識進行處理，進而轉換為各種色彩空間、配色建議、面積比例參考數值，排列後顯示於系統上。功能需求如下： 1. 基本配色功能過程中將標準色資料，量化轉換為HSV 屬性值，經由模式庫中各模式權重處理，找到良好的配色建議。 2. 明度與彩度調整功能使用者可將基本的配色結果，依喜好增減各項條件，如：增加與減少明度、提高或降低飽和度，系統亦會將之組成調和色彩，提供使用者色彩參考建議。 3. 色彩調和配色功能除基本配色功能外，系統提供進階功能，讓使用者可以以「類似」、「對比」口語化的概念，由系統自動選擇模式庫套用，使用者若不滿意，系統將參考前一次不滿意的配色模式，調整屬性權重，直至使用者滿意為止。 4. 色票比對與建議功能將輸入之色票，透過模式庫色彩屬性值間與色彩調和條件間關係，依權重進行主、副顏色比對與總和評判，選出資料庫中近似的知名企業標準色。依此標準色間之關係，推導出演算規則，套用至輸入色票，調配建議色彩。

(56)

44 5. 時間標記

色彩之使用，往往牽涉到流行性與當時時空環境策略應用。故色票比對功能含時間標記，方便使用者瞭解該企業使用此色票的參考時間點。 6. 系統執行支援跨平台

(1) Server 端以 Apache Server、MySQL 資料庫、PHP 及 Java Script 開發，經測試，安裝於全球市占率前10 名(見表 3-1)之非行動裝置作業系統，如：Windows 7、Windows Vista、Windows XP、Windows 2003、Windows 2000、Mac OS X、Linux(Red Hat Fedora 13 ) 等作業系統上，均可順利運行。名次作業系統百分比 1 Windows XP 49.98% 2 Windows Vista 17.10% 3 Windows 7 15.76% 4 Mac OS X 6.25% 5 Linux 1.71% 6 Windows 2003 0.89% 7 iPhone OSX 0.79% 8 Windows 2000 0.34% 9 WAP 0.09% 10 Android 0.07% 表3-1 網路使用者作業系統使用統計(W3Counter, Awio Web Services LLC., 2010)

(57)

45

(2) Client 端需安裝之應用程式為瀏覽器，為避免使用者介面錯誤，使用 W3C 標準之HTML4 與 CSS2 編輯使用者介面。網際網路瀏覽者的瀏覽器使用狀況如下頁圖3-1：

圖3-1 網路瀏覽器使用者統計(W3Counter, Awio Web Services LLC., 2010) 3.2 系統架構 本研究之系統架構如圖3-2：外部資料庫 _模式庫處理單元對話單元圖3-2 系統架構圖

(58)

46 1. 對話單元：使用者介面負責與使用者溝通，可輸入資料與顯示結果。 2. 處理單元：包含伺服器、資料處理與轉換作業，連結資料庫、模式庫與使用者。 3. 外部資料庫：儲存企業色票資料，提供色彩比對建議之用。 4. 模式庫：儲存配色規則模式。本研究建構模式有： (1) 色彩空間轉換模式 (2) 基本配色模式 (3) 明度與彩度調整模式 (4) 色彩面積比例模式 (5) 類似與對比色彩調和模式 (6) 色票比對與建議模式 3.3 使用者介面設計 戴嘉成(2001)歸納一個好的使用者介面應具備四個條件： 1. 讓使用者減少錯誤的發生 2. 介面能提供正確的文字或是圖像資訊 3. 系統即時性的反應 4. 介面和程式功能有著緊密的連結一個可信度高的軟體，最重要的是使用時軟體正常運作與回應，達到介面一致性，避免造成使用者的混淆不清，提供詳細且易於理解的介面工具或按鈕，只要使用者點選該按鈕，即可馬上正確無誤的執行該程式功能。本系統延續一般網頁瀏覽者由上而下的使用習慣，與高視覺化的互動操作流程，依序為： 1. 輸入色彩數值欄位 2. 點選功能鈕，呼叫決策模型