色彩調和理論於網頁自動配色應用之研究

全文

(1)國立臺灣師範大學圖文傳播學系 . 碩士學位論文 . . . 色彩調和理論於網頁自動配色應用之研究 A Study on Automatic Color Scheme of Web Design Based on Color Harmony Theory. . 研究生：簡穩容撰指導教授：周遵儒教授 . 中華民國一〇二年八月 .

(2) . . 2.

(3) 中文摘要現今網頁設計方法與套裝軟體種類多元，但是無設計經驗者要配置出協調的色彩往往是困難的，時常產生網頁色彩不協調的現象。因此，本研究開發一套自動配色方法，以解決無設計經驗者在網頁配色上的困難。該自動配色方法先選取照片中的主色，再透過色彩調和理論之配色方法，選擇輔助色與點綴色，並且根據配色結果調整文字的明視度，最後將自動配色組合呈現於一般網頁版型中。本研究以無設計經驗者為系統評估對象，使用問卷調查進行自動配色方法的整體效果與滿意度評估，再將配色結果交由專家進行效果評估。研究結果顯示，大部份的無設計經驗者認為能有效解決配色耗時的問題，並且對於整體配色結果感到滿意。在設計工作者評估部分，研究結果指出本系統之配色結果雖然缺乏層次感，但整體配色仍然富有協調感。本研究提出的自動配色方法能符合無設計經驗者的需求，但對於業界設計工作者而言，在整體配色的視覺效果部分仍有改善空間。關鍵詞：色彩調和、色彩配置、網頁設計、自動配色 . . . i.

(4) ABSTRACT Nowadays, although there are diverse types of web design methods and software nowadays, it is still difficult for those users whom have no experience in web design to set the color in harmony on a web page. In this study, we propose an automatic method for color scheme in web design. The method can be summarized as follows: Firstly, the main color of web page is chosen from several photographs, then the auxiliary color and ornamented color are selected out based on color harmonic theory. Secondly, the legibility of text is adjusted according to the result of color scheme. Finally, the color combinations are presented into the layout of website. Participants whom have no experience in design were chosen for evaluating the satisfaction and effectiveness to this method by using questionnaires. Web pages our method produced were and also evaluated by four professional designers. Most participants thought they could save time by using this method while doing color scheme, and they felt satisfied with the result. To professional designers, although the color combinations were short of sense of multi-level, it’s still filled with harmony. The experimental results show that this automatic website color scheme method can meet the needs of users whom has no experience in web design, but there is still more room for improvement in visual effects for professional web design.. Keyword：Color Harmony、Color Scheme、Web Design、Automatic Color Scheme. ii.

(5) 誌謝為了避免自己侃侃而談忘記必需感謝的人，所以先感謝一下好了！首先，我沒想到我也有可以寫誌謝的這一天，所以我真的忘了要寫，還是影印店店員提醒我的，我真的是太感謝他了。再來要感謝論文指導教授—周遵儒老師，我是個設計底子的人，對於網頁程式的撰寫真的是遇上了重重的困難，非常謝謝老師這麼有耐心的陪伴我從無到有的創造了一個新的色彩應用領域，希望我們的專利能順利申請成功。另外，要感謝我的口試委員王希俊老師、戴孟宗老師，無論是論文計畫口試或是論文口試，都給我最棒的建議以及鼓勵。接著要感謝那些如果忘了感謝會恨我一輩子的人，第一要感謝我的超級天使瑋如，感謝妳總是在我需要協助的時候大力伸出援手。研究所的生活，無論是喜怒哀樂有妳真好，沒有妳真的是無法順利過完這有點煎熬的過程。還有李艾蒂真的是我的論文幕後推手，沒有你的協助我的網頁程式不會這麼順利產出。還要謝謝律民學長、小雞學長、Roger 學長、DCC 之父、琮傑、有為，感謝 DCC 的夥伴們在學術上無私的分享與協助，還有不時的提供歡樂，研究所的生活真的是多采多姿。學弟們要記得繼續保持 DCC 歡樂的氣息，不然周老闆會心情不好，然後論文就…..（自己想像）。還有很多沒有提到名字的你妳，不要難過，我都有放在心上，謝謝你們的支持與勉勵才能讓我逐漸邁向畢業的道路。真正進了研究所才體會到，研究所並沒有這麼好唸，要寫出一本論文真的要花很多時間，所以真的不要一直逼問研究生何時要畢業，因為我也沒想過我會念超過兩年。這三年來，對我來說真的是一個突破，我接觸了非常不熟悉的網頁設計，還有從來沒碰過的 PHP 程式。時間說長不長，說短也不短，這 1000 多個日子裡所面臨的挫折、無助、煩惱其實真的很多，不僅訓練了自己問題解決的能力，也讓自己的抗壓性越來越強了。最後，要感謝我的家人，我是那個最幸福的老么，感謝家人給我無憂無慮的生活，更沒有給我任何的經濟壓力，給我許多正向的幫助，陪伴我完成學業。親愛的家人們，我愛你們：）簡穩容謹誌於國立臺灣師範大學圖文傳播學系碩士班 . iii.

(6) 目錄中文摘要 .......................................................................................................................i ABSTRACT ................................................................................................................. ii 誌謝 ............................................................................................................................. iii 表次 ..............................................................................................................................vi 圖次 ............................................................................................................................ vii 第一章緒論 .................................................................................................................. 1 第一節 . 研究背景與動機 .................................................................................................. 1 . 第二節 . 研究目的 .............................................................................................................. 2 . 第三節 . 研究問題 .............................................................................................................. 2 . 第四節 . 研究流程 .............................................................................................................. 3 . 第五節 . 研究範圍與限制 .................................................................................................. 4 . 第六節 . 名詞解釋 .............................................................................................................. 5 . 第二章文獻探討 ......................................................................................................... 7 第一節 . 色彩理論 .............................................................................................................. 7 . 第二節 . 配色與調和 ........................................................................................................ 16 . 第三節 . 配色系統相關研究探討 .................................................................................... 26 . 第四節 . 文獻探討小結 .................................................................................................... 30 . 第三章研究方法 ....................................................................................................... 31 第一節 . 研究架構 ............................................................................................................ 31 . 第二節 . 自動配色系統開發 ............................................................................................ 32 . 第三節 . 自動配色系統評估 ............................................................................................ 38 . 第四節 . 實施程序 ............................................................................................................ 45 . 第五節 . 資料處理與統計分析 ........................................................................................ 46 . 第四章結果與討論 ................................................................................................... 47 第一節 . 自動配色雛型系統開發成果 ............................................................................ 47 . 第二節 . 無設計經驗者使用評估分析 ............................................................................ 51 . 第三節 . 專家評估分析 .................................................................................................... 56 . 第四節 . 研究討論 ............................................................................................................ 58 iv.

(7) 第五章結論與建議 ................................................................................................... 61 第一節 . 結論 .................................................................................................................... 61 . 第二節 . 建議 .................................................................................................................... 63 . 參考文獻 .................................................................................................................... 65 附錄一 ......................................................................................................................... 69 附錄二 ......................................................................................................................... 72 . . v.

(8) 表次表 2-1 奧斯華德色彩調和論的調和法則 ............................................................................. 10 表 2-2 明度差與配色的關係 ..................................................................................................... 20 表 2-3 彩度與配色的關係 ......................................................................................................... 20 表 3-1 色調概念分類 ................................................................................................................... 36 表 3-2 文字色彩明度判斷 ......................................................................................................... 37 表 3-3 業界設計工作者名單 ..................................................................................................... 39 表 3-4 自動配色系統評估問卷 ................................................................................................ 42 表 3-5 視覺效果評估問卷 ......................................................................................................... 43 表 3-6 配色效果評估 ................................................................................................................... 45 表 4-1 雛型系統開發成果 ......................................................................................................... 50 表 4-2 性別與就讀科系摘要表 ................................................................................................ 51 表 4-3 有用性之平均數與標準差摘要表 ............................................................................. 53 表 4-4 易用性之平均數與標準差摘要表 ............................................................................. 54 表 4-5 易學性之平均數與標準差摘要表 ............................................................................. 55 表 4-6 滿意度之平均數與標準差摘要表 ............................................................................. 55 表 4-7 視覺效果之平均數與標準差摘要表 ........................................................................ 56 表 4-8 專家評估視覺效果之平均數與標準差摘要表 ..................................................... 57 表 4-9 配色改善部分之平均數與標準差摘要表 .............................................................. 57 . . vi.

(9) 圖次圖 1-1 研究流程圖 ........................................................................................................................... 3 圖 1-2 自動化發展的三個階段 ................................................................................................... 5 圖 2-1 色料色相環(A)印刷色相環 (B)光源色相環 ............................................................... 8 圖 2-2 伊登色相環的組成 ............................................................................................................ 9 圖 2-3 色相的調和與不調和的範圍 ...................................................................................... 12 圖 2-4 伊登的色彩調和配色組合 ........................................................................................... 12 圖 2-5 PCCS 體系之色調概念圖 .............................................................................................. 14 圖 2-6 HSV 色彩模型示意圖與 ................................................................................................ 15 圖 2-7 HSV 色相環 ........................................................................................................................ 15 圖 2-8 單色配色範例 ................................................................................................................... 17 圖 2-9 類似配色範例 ................................................................................................................... 18 圖 2-10 對比配色範例 ................................................................................................................. 18 圖 2-11 多色相配色範例 ............................................................................................................ 19 圖 2-12 黃金比例矩形 ................................................................................................................. 22 圖 2-13 主色、輔助色、點綴色比例配置 ........................................................................... 23 圖 2-14 按主輔點比例配置之色彩 ......................................................................................... 24 圖 2-15 視認性較高的組合 ....................................................................................................... 25 圖 2-16 視認性較低的組合 ....................................................................................................... 25 圖 2-17 系統主要介面 ................................................................................................................. 27 圖 2-18 設計師色彩意象配色之輔助系統外掛程式示意圖 ......................................... 27 圖 2-19 雜誌封面自動設計系統畫面 .................................................................................... 28 圖 2-20 文章字體色彩採擷取方法 ......................................................................................... 29 圖 2-21 系統自動化過程範例 ................................................................................................... 29 圖 3-1 研究架構圖 ........................................................................................................................ 31 圖 3-2 配色方法設計流程 ......................................................................................................... 32 圖 3-3 將一影像的像素描繪於 RGB 色彩空間中 ............................................................ 33 圖 3-4 MEDIAN CUT 演算過程 .................................................................................................... 33 圖 3-5 HSV 與伊登色相環角度對應 ....................................................................................... 34 圖 3-6 依黃金比例安排輔助色與點綴色區塊位置 ......................................................... 35 圖 3-7 PCCS 體系之色調概念分類 .......................................................................................... 36 圖 3-8 社群網站使用者年齡分佈 ........................................................................................... 38 vii.

(10) 圖 3-9 社群網站使用者教育程度分佈 ................................................................................. 39 圖 3-10 配色實驗環境 ................................................................................................................. 40 圖 3-11 配色實驗畫面截圖 ....................................................................................................... 40 圖 3-12 配色比較畫面截圖 ....................................................................................................... 44 圖 3-13 研究實施程序 ................................................................................................................. 46 圖 4-1 雛形系統後台 ................................................................................................................... 47 圖 4-2 新增文章功能截圖 ......................................................................................................... 48 圖 4-3 增加照片功能截圖 ......................................................................................................... 48 圖 4-4 點選「版型修改」選擇照片 ...................................................................................... 48 圖 4-5 點選「送出」按鈕執行自動配色 ............................................................................. 49 圖 4-6 設計相關知識學習經驗圓餅圖 ................................................................................. 52 圖 4-7 經營個人網站的經驗圓餅圖 ...................................................................................... 52 圖 4-8 配色工作經驗圓餅圖 ..................................................................................................... 53 . viii.

(11) 第一章緒論本章分為六小節，分別為研究背景與動機、研究目的、研究問題、研究流程、研究範圍與限制、名詞解釋。. 第一節. 研究背景與動機 . 網際網路近年來發展迅速，對社會的影響力已漸漸深入每一個角落。根據網路統計資料庫顯示，臺灣地區網路（含寬頻上網、無線上網、行動上網）使用總人口數調查，截至 2012 年 3 月止，上網人口約 1,593 萬人（財團法人台灣網路資訊中心，2012），由此可知網際網路已成為現代人生活的重心。此外，架設網站也是行銷的管道之一，其扮演著展現特色與生活品味的重要角色。網站的設計與製作除了內容之外，如何讓網頁呈現一致性，並且讓網頁瀏覽者初次造訪網站時即產生好印象，這與網站設計所使用的色彩、圖像導覽系統、資訊環境等因素有密切的關係。這些因素讓使用者不僅會注意網站內容，同時更能感受到網站整體的氛圍（曾惠民，2003）。隨著電腦資訊的進步，製作網站的技術已經不像以往那麼困難，但是要設計出一個具有美感的網頁，對於非設計相關背景的人來說，還是具有一定的難度。現今網頁設計方法與套裝軟體種類多元，但套裝軟體中的版型設計套版時常無法滿足進階使用者的需求，因此有些人會自己著手進行網頁的版型設計與修改色彩配色來符合個人需求。然而，有許多人沒有學習過色彩相關的知識，或未受過設計之專業訓練，所以進行網頁色彩配置時，時常遇到許多難題，如畫面色彩不協調、色彩對比太強、 1.

(12) 文字視認性不佳等。目前學術上多為建立色票資料庫供設計師使用的研究居多，少有針對一般使用者的研究，而一般市面上販售的配色書籍，大多以色相環為色彩學基礎理論進行配色教學，或提供大量色票與色彩意象組合作為參考範例，但是讀者往往無法將書中的色彩原理與知識實際應用於網頁配色設計上，導致花費龐大的時間而無法達成目的，進而失去製作網頁的興趣。因此，本研究統整歸納常用之色彩調和理論，運用在網頁配色設計上，並將網頁配色工作自動化，其能有效解決使用者在網頁設計時所面臨的配色困難。. 第二節. 研究目的 . 本研究主要探討網頁配色設計時面臨的問題，歸納網頁設計師之配色設計經驗，以協助無設計相關背景的使用者在短時間內有效取得配色組合並應用於網頁設計上，歸納出研究目的如下： 1.. 開發自動配色演算法。 . 2.. 實作自動配色雛形系統。 . 3.. 評估自動配色方法的效果。 . 第三節. 研究問題 . 根據上述之研究背景與動機、研究目的，發展出以下四個研究問題： 1.. 如何進行自動配色演算法開發？ . 2.. 如何進行自動配色雛形系統實作？ . 3.. 如何實施自動配色方法的效果評估？ . 2.

(13) 第四節. 研究流程 . 本研究之研究流程如下： . 研究背景及動機 . 文獻探討與理論回顧 . 確立研究架構 . 研究方法設計 ·• 自動配色方法設計 ·• 自動配色雛型系統實作 ·• 自動配色系統評估 ·• 無設計經驗者 ·• 業界設計工作者 . 問卷統計分析 . 結論與建議圖1-1. 研究流程圖 . 3.

(14) . 第五節. 研究範圍與限制 . 為使研究範圍更加明確，本研究將所訂定的研究範圍與限制羅列如下： 1.. 本研究探討之無設計經驗者，限定為非設計相關科系者。 . 2.. 本研究探討之自動配色方法僅針對個人網站配色，一般具有企業識別色之網站不在本研究討論範圍內。 . 3.. 本研究僅探討網頁之文字與背景配色，不包含網頁的版型設計，因此僅以基本常用的版型作為配色示範。 . 4.. 本研究使用已存在相片中的色彩作為基本色相，僅探討以一般景物為主的照片，不包含人物照片。 . 5.. 本研究僅進行自動配色方法開發，無法將此方法應用於現有之個人網站平台。 . 4.

(15) 第六節一、. 名詞解釋 . 色彩調和 . 所謂色彩調和（Color Harmony）是二個或二個以上的色彩同時存在，並產生令人滿意的情緒，可稱之為色彩調和（Burchett, 1911）。影響色彩調和的主要因素包含在心理層面，所以只要能使心情愉悅的配色就是色彩調和（林書堯， 1993）。影響色彩調和的因素也可能因個人的生活經驗、地理及歷史背景等因素，使得色彩調和在每個人的感官中不容易達到一致的結果。Ou（2006）的研究也發現目前的色彩調和理論中超過兩種以上的色彩配置難以達到調和（Ou & Luo, 2006）。 . 二、. 自動化 . 自動化（Automation）即是利用所需的軟、硬體設備，而達到自動操作的境地（于劍平，2006）。它的重點是要能自動操作，不需要人在旁操縱。通常要達到有效的自動化作業，於整體的規劃必須先合理化，再配合各種的軟、硬體設備將其電腦化，而電腦化的推行，提升了整體作業流程，節省人力成本、縮短製造的前置時間。自動化的步驟應是先合理化，再電腦化，最後自動化。如圖 1-2 所示。合理化圖1-2. → . 電腦化 . → . 自動化發展的三個階段 . 資料來源：于劍平（2006）。自動化電腦整合製造。（頁 5） 5. 自動化 .

(16) 三、. 配色 . 將兩個或兩個以上的色彩加以組合配置，使其產生新的視覺感受，就是「配色」。配色因個人修養、時代風尚、地理環境而有所不同，因此各民族間有其獨特的色彩風格。色彩的運用雖然巧妙繁複，各盡其能，但基本上還是可以找出配色的基本原則，如均衡、強調、律動、漸層、支配等原則（鄭國欲、林磐聳，2002）。 . 6.

(17) 第二章文獻探討本章文獻探討共分為四個小節，第一節針對色彩理論相關的資料，探討內容以基本之色彩學理論，以及常用之色彩調和理論為主；第二節探討的內容為近代常用之色彩調和原理、配色方法，以及色彩面積與文字視認性；第三節為探討與本研究配色方法相關之文獻；第四節為綜合上面三節做一文獻探討小結。 . 第一節. 色彩理論 . 文獻探討第一節的內容主要探討色相環、色彩調和理論、HSV 色彩系統，藉由對色彩基礎理論的探討，了解各理論之色彩調和規則，以利開發自動配色演算法。 . 2.1.1. 色相環 . Moses Harris 於西元 1766 年創造第一個應用於繪畫的色料色相環。他認為紅色、黃色、藍色三色彼此有很大的差異，應該將此三個顏色以 120 度角間隔置於圓環上。Moses Harris 色相環是以減色法為混色基礎，可以從色相環得知色相混色之後的結果，但是因為同色異譜的現象，使得這種預測方法是有限的。色相環雖然不能解釋這種複雜的色彩現象，但仍然可以作為色彩混合規則教學中有用的教具。圖 2-1 為基本的六色色相環，紅色、黃色、藍色為色相環的第一次。印刷色相環是以色料混合為基礎，而光源色相環則是以色光混合為基礎（Westland, Laycock, Cheung, Henry, & Mahyar, 2007）。 . 7.

(18) . . (a) (b) 圖2-1 色料色相環(a)印刷色相環 (b)光源色相環資料來源：“Colour harmony”by S. Westland, K. Laycock, V. Cheung, P. Henry, & F. Mahyar, 2007. Journal of Society of Dyer and Colourists, 1(1), 1-15. 基本的色彩學中最常見的色相環為「伊登十二色相環（Itten Color Wheel）」，是約翰斯‧．伊登（Johannes Itten）於西元 1961 年於《色彩論》一書提出的。由於伊登的色相環在說明色彩的關係時，具有明瞭簡單易懂的好處，所以在臺灣的美術教育中的色彩學相關資料經常出現。伊登十二色相環是平面的二次元的色彩結構，伊登色相環只有色相的表現，不含明度與彩度上的變化，色彩初學者常用來作色彩調配的練習，因此有其重要性（戴孟宗，2011）。伊登色相環的結構是以「紅色」、「黃色」與「藍色」為三原色，也稱為第一次色。這三原色兩兩相互混和，即產生第二次色「橙色」、「綠色」及「紫色」。第二次色再與第一次色兩兩相互混和，產生第三次色「黃橙色」、「黃綠色」、「藍綠色」、「藍紫色」及「紅紫色」六種色彩。最後，綜合第一次色、第二次色與第三次色，發展成十二色相環，色相環中的任何一個色相都位於獨立的位置，其順序和光譜的順序相同，十二色相的間隔都相同，並以六個補色分別置於直徑相對的兩端。伊登色相環結構簡單，可以幫助我們瞭解顏料混合的情況，同時在可應用於色彩配色，如：對比色配色、類似色配色、三色配色、四色配色等生活中常見之主題分類做為自動配 8.

(19) 色方法開發之配色設計目標對象（Itten, 1986）。 . 圖2-2 伊登色相環的組成 . 2.1.2. 色彩調和理論 . 色彩學的知識應用在實際的生活當中時，色彩的配置調和與否顯得格外重要，而色彩調和理論也成為彩色應用的指南。以下藉由色彩調和的定義及常用之色彩調和理論法則對色彩調和理論做ㄧ探討。. 一、. 奧斯華德（Ostwald）色彩調和論 . 奧斯華德除了著名色彩系統之外，也提出色彩調和的論說。奧斯華德提出的色相環是依相對色性質排列的二十四色相，明度則分為八個階段，等色相三角形則是以白色、黑色、純色為頂點，三角形內做二十八格分割，分別標上奧斯華德記號以利表示。在此表色系中用來表示對應明度與彩度屬性的色票，其排列方式是利用特定的心理物理實驗（psychophysical experiment）的結果，設計成知覺性等比階的樣子。奧斯華德於西元 1981 年發表了色彩的調和論，其提出的理論較為清晰明瞭，. 9.

(20) 廣為大眾所接受。奧斯華德認為：「調和與秩序相等」（曾啟雄，2000），並主張「調和為法則的遵循」，其主要的法則如表 2-1 所示。. 表2-1. . 奧斯華德色彩調和論的調和法則類別 . 規則 . 無彩色調和 . 3 個以上的灰色，明度差等間隔為調和。 . 同一色相的調和 . 等白色調和、等黑色調和。 . 無彩色與有彩色之調和 . 同一條線的關係為調和 . 等純色調和 . 同一色相之三角形中，與垂直軸平行之縱線上的色彩，因純色度相等而調和，與繪畫之單色畫法的含義相同。 . 等價值色調和 . 色立體中心軸之水平面（純色量、白色量與黑色量相等之色相環）上方的色彩為調和。 . 色相間隔相近的調和 . 24 色相環中，色相差在 2 至 4 範圍的配色為調和。 . 異色的調和 . 24 色相環中，色相差在 6 至 8 範圍的配色為調和。 . 相對的調和 . 24 色相環中，色相差在 12 前後的配色為調和。 . 資料來源：林昆範（2008）。色彩原論。（頁 128-129）. 奧斯華德的調和法則，透過其所建立的色立體可以清晰且快速的找到調和配色，對具有時間限制的工作有莫大的幫助。但其調和法則未將面積的影響因素考慮在內，致其所提出的調和法則有所不足，不過仍然廣為設計界所應用。 . 二、. 曼塞爾（Munsell）色彩調和論 . 曼塞爾所創立的色彩系統是二十世紀的色彩系中重要的代表之一。曼塞爾調和論必須建立在其所建構的色彩系統上，他認為平衡是營造色彩調和最重要的因素，並以曼塞爾色彩系統為基礎，提出兩種讓色彩組合達到平衡的方法：(1)色彩強度的平衡 (2)配色面積的平衡。色彩強度是由明度以及彩度的乘積所定義出 10.

(21) 來的，當明度與彩度越高時，色彩強度就越強（Westland et al., 2007）。配色面積為達到平衡的要求，曼塞爾認為在大面積較大的配置上，應採用較「弱」的色彩，而小面積則採用較「強」的色彩，即面積與色彩的明度、彩度乘積成反比，可以運用明度變化配合、色相改變配合、不同彩度配合的方法達到色彩調和（曾啟雄， 2000）。. 三、. 慕恩與史班瑟色彩調和論 . 美國照明學者慕恩（Moon, P.）與史班瑟（Spencer, D. E.）在美國光學會（Optical Society of America）刊物發表三篇色彩調和論。此調和論是以曼塞爾的表色系統為基礎，重視幾何學視覺關係，並建立在計量的標準之上，以數字或公式來解釋配色的調和法則。其將調和的種類區分為同一調和、類似調和、對比調和，並將曖昧關係的配色列為不具調和特性的配色（林昆範、柯凱仁，1999）。慕恩與史班瑟對於配色的調和感覺之評價方式是主張給人產生愉悅與快感的配色視為調和，其調和基準如下：（1）色彩間隔差異清楚，不會產生曖昧的配色。（2）選擇在均等空間上形成簡單的幾何學關係者。此類配色的調和理論將調和的條件分類為「同一色相調和」、「類似色相調和」、「對比色相調和」，除此之外則歸類為不調和的「曖昧色相」，如圖 2-4（黃書倩，2003）。. 11.

(22) 圖2-3 色相的調和與不調和的範圍 . 四、. 伊登色彩調和論 . 伊登以十二色相環來解釋他所提出的色彩調和理論，認為在這個色相環中指定的兩個或者更多的色彩混合後，若能產生中灰色(neutral gray)，這些色彩組合後可以達到調和（Westland et al., 2007）。伊登的色彩調和配色方法包含：Triads、 Tetrads 及 Hexads 三種，分別用來表示三個色相、四個色相以及六個色相的組合時所產生的色彩調和關係（Birren F. 1900）。. Triads . . Tetrads . 圖2-4 伊登的色彩調和配色組合 12. Hexads .

(23) Triads 指的是三個色相的色彩調和，凡是在色相環中構成等邊三角形或等腰三角形的三個色相即是調和的配色組合。也可以把等邊及等腰三角形使其三個角在色相環中自由轉動，可找到更多的調和色彩組合。Tetrads 指的是四色調和，凡是在色相環中構成正方形或長方形的四個色相即是調和的配色組合（鄭國欲、林磐聳，2002）。Hexads 指的是六個色相的色彩調和，伊登認為理想的色彩和諧要選擇正確的對比方法來表示出強烈的效果，因此，六個色相的配色就是以三對對比色相為色彩調和的配色組合（Birren, 1900）。. 五、. 日本色研配色體系 . PCCS（Practical Color Co-ordinate System）是日本色彩研究所於西元 1965 年發表的實用性配色體系，對於日本及臺灣的教育與產業界也影響深遠。PCCS 結合了曼賽爾體系的表色法和奧斯華德體系的混色法，是針對色彩教育、色彩計畫、色彩調查等需求發展出來的實用配色體系（林昆範，2008）。將色調概念建構在色彩的空間中，是 PCCS 體系的特徵之一，由各色相發展出 12 個色調變化，各色相在個別的色調中，依據不同的明度高低予以適當位置，而在各色調之間也維持明度與彩度上的相對關係，如圖 2-5 所示。此種色調分類方法，比較符合日常生活用語，對於一般使用者來說，也較容易理解色調的感覺。. 13.

(24) 圖2-5 PCCS 體系之色調概念圖資料來源：林昆範（2008）。色彩原論。（頁 42） . 2.1.3. HSV 色彩系統 . HSV 是影像處理中常見的色彩系統，由 RGB 色彩空間透過一非線性的系統所得，此色彩系統是由 Alvy Ray Smith 提出。HSV 色彩系統是由色相（Hue）、飽和度（Saturation）、明度（Value）所構成的色彩空間（戴孟宗，2011），在 HSV 的色彩系統中，所有的顏色可用色相、飽和度、明度三個基本參數來描述。H（Hue）是指基本的色彩，由光波波長來區分，依序由紅色到紫色再回到紅色，圓形座標的角度是週期性的，以 0~360 度來表示；S（Saturation）指的是色彩的純淨程度，也就是色彩混和了白色光的量，愈靠近模型中心的色彩所含的白色光的量愈多； V（Value）則是指灰階上的明暗程度（鄭柏左，2004）。. 14.

(25) 圖2-6 HSV 色彩模型示意圖與資料來源： “Computer Graphics Color Space” by Florida Institute of Technology. Retrieved from http://cs.fit.edu/~wds/classes/cse5255/cse5255/davis/text.html. 圖2-7 HSV 色相環資料來源：“Example: HSV shading”by TEXample.net., Retrieve from http://www.texample.net/tikz/examples/hsv-shading/. HSV 也常被藝術與設計工作者稱為 HSB（B, Brightness），由於 HSV 是由 RGB 色彩空間經過非線性轉換(Non-linear Transform)所得的色彩空間，它的內容與色彩尺度與 RGB 色彩空間有相當密切的關係，但 HSV 在色彩選擇的操作上比較容易，而且更為接近一般人對色彩的感覺。所以與 RGB 加色法或 CMYK 減色法相較之下，使用色相、飽和度、明度的概念來描述色彩不僅符合對色彩的形容，且更加的自然且直覺。 RGB 與 HSV 色彩空間的轉換中存在著單方向的對應，S 值為 0 時，H 值沒有定義，即在沒有色彩飽和度的狀態時，就沒有色彩產生；而在 V 值為 0 時，S 15.

(26) 值沒有定義，意思是在沒有亮度時，就沒有色彩飽和度，因此 RGB 與 HSV 之間的轉換屬於非線性的。由 RGB 色彩空間轉換為 HSV 的數學公式如下： 𝑉 = 𝑚𝑎𝑥(𝑅, 𝐺, 𝐵) 公式（2.1） 𝑆=. !"#(!,!,!)!!"#(!,!,!) !"#(!,!,!). 公式（2.2） . V 值與 S 值可以由 RGB 直接求得，而 H 值則會視 RGB 三值何者為最大值有所不同。 !!!. 𝐻 = !"#(!,!,!)!!"#(!,!,!) 𝑓𝑜𝑟 𝑅 = 𝑚𝑎𝑥(𝑅, 𝐺, 𝐵) 公式（2.3） !!!. 𝐻 = 2 + !"#(!,!,!)!!"#(!,!,!) 𝑓𝑜𝑟 𝐺 = 𝑚𝑎𝑥(𝑅, 𝐺, 𝐵) 公式（2.4） !!!. 𝐻 = 4 + !"#(!,!,!)!!"#(!,!,!) 𝑓𝑜𝑟 𝐵 = 𝑚𝑎𝑥(𝑅, 𝐺, 𝐵) 公式（2.5） . 第二節. 配色與調和 . 第一節探討了許多過去的色彩調和理論學說，各學者的說法都有其優缺點，而本節針對近代常用之色彩調和原理做一探討，其以色彩三屬性為主軸探討色彩調和之配色方法，透過色彩三屬性歸納調和方法實能容易理解色彩調和的規則。. 2.2.1以色相為基準的配色一般以色相為主的配色大多以色相環為配色依據，有人稱為「角度配色法」，指的是按照色彩在色相環上的位置所成的角度作為配色依據，傳統上有六種基本的配色方式，較廣為使用，分別為「單色配色（monochromatic）」、「類似配色（ analogous ）」、「對比配色（ complementary ）」、「分離互補配色（ split complementary）」、「三角配色（triadic）」、「四色配色（tetradic，亦稱雙重互補配. 16.

(27) 色）」（Beaird, 2010）。使用角度配色法時，兩色所成的角度越小時，色彩相似性越大，對比性越小；反之，兩色間的距離越大，差異性越大，對比性也越強烈，而以位於直徑兩端的互補色相的配色最為強烈。在色相環上有四個曖昧區，也是兩色配色關係不是很明確的區域，以色相而言不容易討好的配色關係，必須在明度或彩度等其他色彩關係上加以變化，才可以得到良好的配色（鄭國欲、林磐聳，2002）。. 一、. 單色配色 . 單色配色的方式是由一個基底色與數種該色調之濃與淡的色彩搭配，僅以明度或彩度加以變化時，容易產生統一和秩序的效果（Beaird, 2010）。即為一個基底色加黑、加白加灰而形成的色彩，也是在色相環或色票上，同一個色彩編號的色相所包含的各種色調。此種配色較無變化，使人感覺穩定、溫和，但若色彩間的差異性太小時，會顯得單調而導致不調和，故在明度及彩度上適當變化，才能得到良好的配色。如圖 2-8 所示，中間為基底色，經過明度與彩度調整而搭配出其餘色相。. 圖2-8 單色配色範例資料來源：Adobe® Kuler., Retrieve from https://kuler.adobe.com/# . 二、. 類似配色 . 類似配色是同種類而各有不同的色相，在色相與色相之間具有某些共通性或類似性，因此容易產生具有統一性及穩定感的配色。類似配色使用的是色相環上. 17.

(28) 成 30 度至 60 度的顏色作為配色，其較單色配色的角度廣，因此在色彩的運用上可以做出適當的變化，以達到比單色配色更活潑且有朝氣的效果。類似配色是最受歡迎的配色方法，除了有和諧與平衡感覺，而且有律動感的表現（戴孟宗，2011）。若選擇的色相範圍差異太小，則會近於單色配色，反之，則會近於對比配色。因此，色相差異太小或太大，都會影響類似配色的效果。如圖 2-9 所示，中間為基底色，其餘色彩則是與基底色成 30 度至 60 度角的顏色。. 圖2-9 類似配色範例資料來源：Adobe® Kuler., Retrieve from https://kuler.adobe.com/# . 三、. 對比配色 . 對比配色使用色相環上彼此位置相對的顏色，此種配色表現較為豐富、活潑，容易引人注目，但是也可能產生矛盾與衝突的感覺。許多對於配色較無概念者往往無法考量配色的平衡與協調感，易直覺的使用對比配色，產生不協調的狀況（戴孟宗，2011）。藉由明度或彩度上的變化，或是調整面積比例可得到調和的關係，如圖 2-10，中間為基底色，右邊為對比色相，可藉由明度與彩度調整達到調和。. 圖2-10. 對比配色範例 . 資料來源：Adobe® Kuler., Retrieve from https://kuler.adobe.com/# . 18.

(29) 四、. 多色相的配色 . 多色相的配色有三色相配色、四色相配色兩種。三色相配色是以基本色為主，在色相環上形成三角形的三色配色。三角形為正三角形或等腰三角形，如圖 2-11 所示（Fraser & Banks, 2004）。正三角形可以得到比較強烈、活潑、華麗的配色效果；等腰三角形可以得到安定、穩重的配色效果。色相環上內接四角形位置的四色配色，四角形為正方形或矩形，如圖 2-11 所示，或是任何兩組的補色配色（Beaird, 2010）。正方形配色是兩對互補色的搭配，對比性較強，變化較大；長方形配色對比較弱，統一性大（鄭國欲、林磐聳， 2002）。. 圖2-11. 多色相配色範例 . 資料來源：修改整理自鄭國欲、林磐聳（2002）。色彩計劃。（頁 76） . 2.2.2以明度為基準的配色從上一節的文獻探討得知，慕恩與史班瑟色彩調和論中提及明度是影響調和的因素之一，認為明度對比明顯的色彩才會達到調和。明度差較大的對比關係，視覺明瞭性較高，隨著明度差的縮小，視覺也趨於模糊，不易辨識（林昆範，2008）。在畫面上的明度差異及明暗分佈，更是引發各種不同情感的主要因素。進行配色工作時，應注意明度差與配色的關係，其關係如表 2-2：. 19.

(30) 表2-2. . 明度差與配色的關係類別明度差與色相差成反比明度差與彩度差成反比明度差與面積比成正比. 規則明度差越小，色相差越大；明度差越大，色相差越小。明度差越小，彩度差越大；明度差越大，彩度差越小。明度差越大，面積比越大；明度差越小，面積比越小。. 資料來源：修改整理自鄭國欲、林磐聳（2002）。色彩計劃。（頁 80） . 2.2.3以彩度為基準的配色彩度在配色工作上具有相當大的功能，也是色彩三屬性中最不易理解的性質。一般來說，二個色彩的彩度差異從同一彩度到類似彩度、對比彩度，其差異越大，視覺越容易被強調（林昆範，2008）。進行配色工作時，應注意彩度與配色的關係，其關係如表 2-3：. 表2-3 彩度與配色的關係類別色相差與彩度差成正比. 彩度差與明度差成反比彩度與面積比成反比. 規則色相差越小，彩度差越小；色相差越大，彩度差越大。彩度差越大，明度差越小；彩度差越小，明度差越大。彩度越強，面積比越小；彩度越弱，面積比越大。. 資料來源：修改整理鄭國欲、林磐聳（2002）。色彩計劃。（頁 82） . 20.

(31) 2.2.4以色調為基準的配色依照色相配色再利用色調調整可以增加配色樣式，並能掌握色彩的整體感。以色調來進行配色能夠容易表達其色彩印象，使用色調配色可以套用至整個版面，也可以只用於部分區塊。色調配色可分為同一色調的配色與不同色調的配色兩種。同一色調的配色方法對於背景色或圖像的點綴有非常好的效果，但相同色調的色彩多半明度相近，反而不適合用在文字色和背景色的組合上（iku，2008）。不同色調的配色可在明度與彩度上做變化，以增加色彩之間的差異。由於不同色調的組合容易給人雜亂感，所以可將某個色調當做主要的配色重點，以增減其色彩面積方式來變化。選擇以明度差來表現不同色調時，色彩明暗對比較明顯，能搭配出分明的配色（鄭國欲、林磐聳，2002）。. 2.2.5常見之網頁配色方法網頁色彩的選擇是設計過程中重要但常被忽略的一步，坊間許多網頁設計相關的書籍對於網頁配色的方法種類相當多。由於人對於色彩的感覺是主觀且感性的，許多人會根據個人偏好或習慣來選擇色彩。然而僅憑藉著個人的感覺，未必能得到好的配色結果。現今網頁設計相關書籍時常以網站的主題為要點，首先必須思考網站主題為何，並為其選定符合網站目的的基礎色，或以企業識別色彩為主，當做基本的主題色，以此色彩為主再加入其他顏色就能搭配出各式各樣的配色效果。統整配色時各色彩的面積所佔比例很重要，其中又以基本色為穩定整體的主要色彩，也是給予使用者整體感的重要關鍵（iku，2008）。主題色彩度高時，可以小面積重複的方式來使用，使整個畫面顯得較為安定。反之，彩度低時，可使用較大的面積來加深印象。 21.

(32) 決定好一個主題色之後，再加入其他色彩點綴，使用同一色相或選擇類似色相是最安全的組合，並可以主題色為主，選用明度或彩度差距稍大的色彩搭配。其概念如同以色相、明度、彩度及色調為基準之配色方法，製作出符合主題的視覺效果。. 2.2.6色彩面積與黃金比例在色彩設計中，面積屬性是非常重要的一個元素。形態與色彩之間有非常獨特的關係，當配色比例發生改變時，即使是使用同一個顏色組合，和諧的比例關係可以提升色彩的表現力，而比例拙劣的形態構圖，卻可以破壞色彩的美感。在平面設計與版型設計中，黃金比例佔有相當大的重要性，除了應用於畫面分割外，黃金比例也可應用於色彩配置（莊惠淳，2009）。黃金分割的特色是它產生了一種協調的特殊效果，亦即它能將不同組成元素結合為一個整體，而每個組成元素又能保持各自的獨立完整性，並繼續衍生出更大的完整個體（吳國慶， 2008）。大自然有自己的生長原則，黃金比例 1:1.618，如圖 2-12 就是以貝類螺旋外殼產生的漸變紋路而來。黃金比例除了是動植物生命成長中最重要的比例關係之外，也是人類跨越種族、地域和文化的共同審美偏好。藉由大自然的比例的概念，均衡套用在設計與配色上，就能達到具有美感的效果（領先空間商用色彩研究中心，2009）。. 圖2-12. 黃金比例矩形 22.

(33) 北京領先空間商用色彩研究中心結合設計與面積的種種關係，建立了色彩設計中的面積與黃金比例（1:1.618）的關係，提出了色彩設計的「黃金比例與主色、輔助色（又稱配合色）、點綴色（又稱強調色）的關係」，簡稱「主輔點」，如圖 2-13（領先空間商用色彩研究中心，2009）。. 圖2-13. 主色、輔助色、點綴色比例配置 . 資料來源：領先空間商用色彩研究中心（2009）。全新商用色彩設計指南：色彩量化設計。（頁 29） . 根據色彩的主題性結合黃金比例配置，能使畫面具有層次感，以下為主色、. 輔助色、點綴色與面積比例的關係：一、主色：在衣服色彩圖案設計中，佔被描述主題對象最大面積的色彩，用以作出整體感的顏色，通常主色的數量不超過一個，約佔總面積 70％，如圖 2-14。二、輔助色：除主色以外處於次要面積的色彩，用以輔助主色的顏色，通常輔助色的數量為二至三個或更多，約佔總面積 25％，如圖 2-14。三、點綴色：在整個設計中僅佔極少面積，讓重點更醒目的顏色，在色相環中與主色間隔達到 135 至 180 度的任意色相，彩度達到 50 至 100 度範圍內的顏色為點綴色，也稱之為「黃金點」，點綴色一般為一至二個，約佔總面積 5％，如圖 2-14。 . 23.

(34) 圖2-14. . 按主輔點比例配置之色彩 . 資料來源：領先空間商用色彩研究中心（2009）。全新商用色彩設計指南：色彩量化設計。（頁 29）每個網頁至少都有三個區域需要配色，包含標題、導覽列、背景，這三個區域在每個網站都可以看得到（Ueki & Azuma, 2003）。因此可以應用主輔點的配色方式達到協調效果，這三種色彩各自有各自的作用，使用時作為主要感覺的是主色，搭配襯的是輔助色，需要更醒目的部分則使用點綴色來點出。這些色彩使用時最需要注意的是，主色若選用高彩度的色彩，在畫面上分配的比例過大時，會給人很繁雜的感覺。遇到這種情形時，就要減少主色的使用面積，當減少使用主色的同時，另外兩種色彩的使用也要依比例減少才能達到協調。輔助色的最終目的是配合主色而使用，但使用時不能比點綴色醒目，輔助色若是使用與主色相同色系，能使整體色調統一，若使用不同色系的色彩，則能產生具動感的配色。. 2.2.7文字與背景的視認性以往的研究多著重於網頁技術性的角度來探討網站設計因素對於使用者的使用效率或績效所產生的影響（Schaik & Ling, 2001）。成熟的網頁排版設計，能夠創造出某種視覺暗示，它能有效的提高網站上文字的可讀性，並且協助使用者快速掃瞄頁面（Nielsen & Loranger, 2006）。而網頁結合了文字與影像等元素，文字對瀏覽者的資訊傳遞也相當重要，可從視認性（legibility）探討網頁文字的視 24.

(35) 覺表現（Williams & Tollett, 2000）。文字的機能在於傳達，最佳的文字傳達則需要正確的字句以顯現可讀性的效果，除此之外，更應進一步要求易於閱讀的條件，即視認性的問題（邱駿鵬、陳圳卿，2007）。視認性也可稱為可讀性、易讀性，背景與圖像的色彩明度反差越高，視認性也越高。此概念也能應用在網頁設計當中，最能在視覺上淺顯易懂的表達出內容就是視認性良好的配色。視認性最為明顯的是黃色底搭配黑色圖形，相反的，最不明顯的就是黃色底搭配白色的圖形，如圖 2-15、圖 2-16。在配色設計時，文字的可讀性和色彩亮度的差別有著直接的關係（iku，2008）。色彩的組合不僅僅為了美觀，忽視視認性會導致文字的視認性降低，反而影響閱讀的舒適感。. 圖2-15. 視認性較高的組合 . 圖2-16. 視認性較低的組合 . 視認性高的黑黃配、紅白配這類型的色彩組合，雖然容易辨識，但因為色相、明度、彩度差異過大的配色，在螢幕上閱讀時會容易產生眩目感，因此這類型的配色不適合長時間閱讀。視認性最佳的配色是黑白配，除此之外的配色雖然視認性高，但是讀起來不容易（iku，2008）。進行網頁設計時需要特別注意文字與背景色彩的配合，才能達到良好的視認性。. 25.

(36) 第三節. 配色系統相關研究探討 . 本節探討與配色系統開發相關之研究，將過往的配色系統研究面臨的問題做一探討，以提供本研究作為開發系統之參考與改進，並增進本研究開發自動配色系統之工作效率。. 2.3.1. 類神經遺傳演算法應用於產品配色系統之建立研究 . 此研究發現當現有的配色理論直接應用在產品設計上時，時常無法準確預知該色彩配置是否會受到產品特有的形態與屬性影像，與目標意向產生偏差。因此其針對手機產品配色，以線上問卷的方式，並使用類神經學習與遺傳演算推演出前四名最佳配色組合。但次研究發現類神經雖能有效模擬個人的色彩感受，但受限於個人的主觀色彩偏好影像，容易造成焦點模糊。並且在實施問卷測驗時，須考慮顯示器易造成問卷結果不一致（蔡淑娟，2003）。. 2.3.2. 以案例式擷取機制建立臺灣意象輔助設計系統 . 此研究使用 CIE△E2000 色差公式與 LCH 色彩空間，並以案例式推理與問卷統計結果，建立臺灣意象輔助設計系統。為了使以往搜尋繁瑣的過程能更加自動化，另結合「最近鄰居搜尋演算法」找尋相似的色彩意象，以提供設計師擷取相似的色彩，其系統開發成果如圖 2-17 所示（楊文斌，2007）。. 26.

(37) 圖2-17. 系統主要介面 . 圖片來源：楊文斌（2007）。以案例式擷取機制建立台灣意象輔助設計系統。（頁 26）. 2.3.3. 設計師色彩意象配色之輔助系統研究 . 此研究以視覺傳達設計師為使用對象，針對設計師的需求，開發一電腦輔助系統，協助設計師在短時間內有效取得配色組合。其以「Color Index」配色字典為系統的色彩意象資料庫，並建立系統主色、配色方式、色彩意象詞的規則推演法則，最後提供一套輔助配色外掛應用程式系統供視覺傳達設計師使用。將配色外掛工具建立在 Adobe Illustrator 繪圖軟體之中，如圖 2-18 所示，其能繼承繪圖軟體的優點，操作與使用上較為方便（陳佩琳，2009）。. 圖2-18. 設計師色彩意象配色之輔助系統外掛程式示意圖 . 圖片來源：陳佩琳（2009）。設計師色彩意象配色之輔助系統研究。（頁 87） 27.

(38) 2.3.4. 雜誌封面自動化設計(Automatic Design of Magazine Covers). 此篇研究設計一自動排版系統，結合量化、藝術和美學的概念，將雜誌封面設計的工作自動化。其分析雜誌封面所需元素進行系統開發設計，輸入主要封面照片後，系統將會針對圖片分析主輔區域，並進行文字、色彩配置。其研究結果透過專業設計師的意見回饋，得知此系統設計之封面與設計師之想法是一致的，其系統介面如圖 2-19 所示（Jahanian et al., 2012）。. 圖2-19. 雜誌封面自動設計系統畫面 . 資料來源： “Automatic design of magazine covers”by S. Jahanian, A., Liu, J., Tretter, D. R., Lin, Q., Damera-Venkata, N., O’Brien-Strain, E., … Allebach, J. P., 2012. Proceeding of SPIE-IS&T Electronic Imaging, SPIE, 8302, 1-8.. 2.3.5. 使用內容圖像特點的半自動雜誌版面編排(Semi-Automated. Magazine Layout Using Content-based Image Features) 此研究與Jahanian et al.（2012）的研究雜誌封面自動設計相似，但是此研究是進行電子雜誌的編排，非封面設計，並使用HTML5與CSS3進行電子雜誌的版面設計。該研究最特別的部分是文章首字的色彩截取方式，其以照片內容為配色基礎。文中提及色彩在視覺體驗上和品牌管理是非常重要的，因此它挑選多張與. 28.

(39) 主題相關的照片，並截取這些照片的主要色彩，再結合成一個色彩做為文章中字體的顏色，如圖2-20所示。. 圖2-20. 文章字體色彩採擷取方法 . 資料來源：“Semi-automated magazine layout using content-based image features” Kuhna, M., Kivelä, I., & Oittinen, P., 2012. MM '12 Proceedings of the 20th ACM international conference on Multimedia.. 此研究透過Skin color map、Color saliency map、Textureness map，以及Edge map分析照片元素，形成一個重要的圖像，並透過分析結果，將影像切割成不同大小，以供不同版面所需。而色彩選取部分則是擷取照片中顯眼的色彩，形成一調色盤，並分析多張文中的照片後，結合所有調色盤的色彩，最後再挑選一個顏色作為文章首字的色彩，詳細步驟如圖2-21所示（Kuhna, Kivelä, & Oittinen, 2012）。. 圖2-21. 系統自動化過程範例 29.

(40) 資料來源：“Semi-automated magazine layout using content-based image features” Kuhna, M., Kivelä, I., & Oittinen, P., 2012. MM '12 Proceedings of the 20th ACM international conference on Multimedia.. 第四節. 文獻探討小結 . 本節綜合上述之文獻探討內容做一小結，本研究依時間先後順序探討色彩調和理論，從中發現調和論學說中各學者所提出之調和方法都有其優缺點。透過對以往色彩調和理論的了解，發現現今常用的配色原理中，對色相、明度、彩度及色調之調和原理，不但擷取色彩調和理論中的優點，也用色彩三屬性與色調的表現方法呈現，此方法使人較容易理解調和配色的概念。而現今市售之網頁設計與配色相關書籍的知識中，時常以主題色相為主，再依主色相進行網頁配色工作，與本研究欲以照片中之主題色彩進行配色方法設計相符。另外，色彩與黃金比例之關係能應用於網站中的色彩面積配置，使得整體畫面更加協調，最後再以視認性最佳的黑色與白色進行文字色彩的調整。最後，透過配色系統相關文獻探討了解，過往的配色系統研究面臨的問題，以提供本研究作為開發系統之參考與改進，並增進本研究開發自動配色系統之工作效率。. 30.

(41) 第三章研究方法本研究主要目的是開發一自動配色系統，降低無設計經驗者進行配色工作時面臨的問題。首先訂定出研究架構，說明研究方法的設計與執行步驟，再依照研究問題與系統開發的流程分別討論自動配色方法開發，以及系統評估方法。本章節共分為五小節：第一節研究架構、第二節自動配色系統開發、第三節自動配色系統評估、第四節實施程序、第五節資料處理與統計分析。. 第一節. 研究架構 . 本研究的研究架構如圖 3-1 所示，乃依據本研究之研究目的與問題設計，整體架構分為三個階段，依序為自動配色方法設計、自動配色雛形系統實作、自動配色系統評估。最後將系統評估之問卷資料進行統整和分析後，歸納出本自動配色系統開發之結論與建議。. 自動配色方法設計自動配色雛型系統實作自動配色系統評估問卷統計分析結論與建議 . 圖3-1 研究架構圖 31.

(42) 第二節. 自動配色系統開發 . 本節包含第一階段自動配色方法設計，以及第二階段為自動配色雛型系統實作。第一階段以文獻探討歸納出色彩學基本原理，進行初步的配色方法設計，擷取照片中的主要色彩作為個人網頁的主題色，再透過類似配色、對比配色方法，選擇輔助色與點綴色，並且調整色彩之明度與彩度，提供三種不同色調作選擇。最後根據配色結果之明度調整文字的視認性。配色方法設計流程如下圖：. 圖3-2 配色方法設計流程 . 3.2.1. 選取主色. 本研究以 Median Cut 演算法選取相片中的主色。Median-Cut 演算法是一個對於速度和品質很好的運算方式（Herbert,1982）。此方法是將影像的像素描繪於 RGB 的色彩空間中，並用一立方體包圍所有像素的分佈區域，RGB 數值皆量化為從 0 到 255 的數值，0 對應的亮度最小，255 對應的亮度最大，如圖 3-3 所示。. 32.

(43) 圖3-3 將一影像的像素描繪於 RGB 色彩空間中資料來源：“Color reduction and image dithering” by Molecular Expressions, 2006, Retrieved from http://micro.magnet.fsu.edu/primer/java/digitalimaging/processing/colorreduction/ind ex.html 典型的切割方法是將該色彩空間立方體切割成 256 個小的立方體，每一個小的立方體中的像素數目都相同，利用這種方法分割色彩空間，將這個方法反覆進行，直到所需的小立方體產生，最後取每個小立方體的中心為該立方體所有顏色的代表值（賈秋菊、王小銘，2005），如圖 3-4 所示。. 圖3-4 Median Cut 演算過程資料來源： “Color reduction and image dithering” by Molecular Expressions, 2006, Retrieved from http://micro.magnet.fsu.edu/primer/java/digitalimaging/processing/colorreduction/ind ex.html. 3.2.2. 色彩空間轉換. 經過 Median-Cut 演算法所擷取之相片主色是以 RGB 表色法來表示，而本. 33.

(44) 研究之配色方法是採用伊登色相環作為配色工具，進行自動配色設計時，必須利用圓形座標的角度 0～360 度才能正確選擇色彩，故需將 RGB 色彩空間轉換為 HSV 色彩空間，利用其色相之表色法 H（Hue），依序由紅色到紫色再回到紅色，如圖 2-7 所示，圓形座標的角度是週期性的，以 0～360 度來表示。其轉換公式如下： 𝑉 = 𝑚𝑎𝑥(𝑅, 𝐺, 𝐵) 公式（3.1） 𝑆=. !"#(!,!,!)!!"#(!,!,!) !"#(!,!,!). 公式（3.2） . 色彩學相關理論中提及的色相環皆以色料方式呈現，除了各學者提出的色相數目不一之外，色相位置分配差異不大，本研究擷取伊登的配色概念做為選色的方法。但是取出主色後再經過色彩空間轉換的色相是以 HSV 之表色法呈現，其與色彩理論中的色相環有極大的差異。其他配色系統相關研究與配色網站中常以 HSV 表色法做系統開發，但是並未發現針對色相位置的問題提出解決方案，容易造成選色結果與色彩理論不符的現象，因此本研究透過色相角度對應的方式挑選出與色彩理論概念相符的色相，角度對應方式如圖 3-5 所示： . 圖3-5 HSV 與伊登色相環角度對應 . 3.2.3. 選擇輔助色與點綴色. 每個網頁至少都有三個區域需要配色，一般網頁設計師在從事網頁設計時，比較少會使用同一種顏色，大部分以不超過三種顏色為原則來進行配色，並運用 34.

(45) 簡潔的色彩來加深網頁的視覺表現（廖鵬文、盧康渝，2004）。因此本研究以三色配色為主要的配色方法，選出主色相與輔助色相。再根據北京領先空間商用色彩研究中心所提出的色彩面積與黃金比例（1:1.618）的關係，加入對比色配色為點綴色，置於面積最小的區塊，如圖 3-6。. 圖3-6 依黃金比例安排輔助色與點綴色區塊位置 . 3.2.4. 色彩調整. 為增加色彩組合的變化性，可藉由色調調整的方法，讓使用者有更多選擇。本研究依據伊登色相環的結構選擇色彩，而伊登色相環為二次元之色彩空間未提及明度、飽和度與色彩調和之間的關係。但是從曼塞爾、奧斯華德、慕恩與史班瑟、PCCS 實用配色體系的色彩調和理論中得知，可經由明度與彩度調整，達到色彩調和的目的，因此本研究以主色相之明度與彩度為基準，調整輔助色之明度與彩度。本研究以 PCCS 的色調分類概念調整配色效果，其特徵是由色相與色調這兩個要素所構成，使用日常生活中常用的「鮮、明、柔、淡」等色調的表現方式來 35.

(46) 做色彩領域的分類。將 PCCS 體系的色調概念之有彩色部分，依照色調名稱歸納成三個類別，如圖 3-7 與表 3-1 所示。. 圖3-7 PCCS 體系之色調概念分類表3-1. . 色調概念分類效果 . 色調名稱 . 形容詞 . 色票範例 . 淡 Pale 1 . 淺灰 Light Grayish . 素淨的、優雅的、柔軟的、. 淺 Light . 清澈的、古雅的、沉穩的 . 灰 Grayish 2 . 暗灰 Dark Grayish 鈍 Dull 暗 Dark . 輔助色1 主色輔助色2 . 柔 Soft . 低調的、樸實的、沌濁的、厚重的、堅固的、結實的、成熟的 . 輔助色1 主色輔助色2 . 明 Bright 3 . 強 Strong . 鮮豔的、華麗的、明亮的、. 深 Deep . 健康的、熱情的、動感的 . 鮮 Vivid . 輔助色1 主色輔助色2 . 最後，再依據各色塊之明度來調整文字與色彩的視認性，而根據文獻探討得 36.

(47) 知，視認性高的黑黃配、紅白配這類型的色彩組合，在螢幕上閱讀時會容易產生眩目感，且奧斯華德的色彩調和理論中提及，任何色彩都可以與白色、黑色調和。因此本研究之自動配色方法的文字色彩採用可讀性最佳的配色是黑白配色。首先將明度 0~100 分為 10 個階段，再依照背景的明度與彩度，調整文字的視認性，其規則為背景色彩越暗，其文字色彩越亮，統整歸納如表 3-2 所示。. 表3-2. . 文字色彩明度判斷明度判斷 . 文字（16進位） . v<=10 . . K10 (#E5E5E5) . . v>10 & v<=20 . . K20 (#CCCCCC) . . v>20 & v<=30 . . K30 (#B2B2B2) . . v>30 & v<=40 . . K40 (#999999) . . v>40 & v<=50 . . K50 (#7F7F7F) . . v>50 & v<=60 . . K60 (#666666) . . v>60 & v<=70 . . K70 (#4C4C4C) . . v>70 & v<=80 . . K80 (#333333) . . v>80 & v<=90 . . K90 (#191919) . . v>90 . . K100 (#000000) . . 3.2.5. 自動配色雛形系統實作. 本研究第二階段將自動配色方法應用於一般常用網頁版型的設計中，以呈現整體配色效果。本雛形系統以 Dreamweaver CS5、JavaScript、PHP，開發一個動態（Dynamic）網頁，主要功能為照片上傳、文章發表，並透過此動態網頁來呈現自動配色方法的效果。. 37.

(48) 第三節. 自動配色系統評估 . 本研究第三階段將進行配色方法評估，透過無設計經驗使用者配色實驗與問卷調查法實施自動配色系統評估。無設計經驗使用者配色實驗是讓使用者在無自動配色系統輔助的狀態下實施配色實驗，接著再以問卷進行系統評估。問卷調查分為兩部分，第一部分以一般無設計經驗者作為實驗對象進行滿意度調查，第二部分將配色結果交由專家進行效果評估。經統計分析結果，提供此配色方法做一修正與改進。. 3.4.1. 研究對象 . 一、. 無設計經驗者 . 根據創市際 ARO 網路測量研究於 2011 年 7 月研究結果指出，使用無名小站、痞客邦與 Xuite 的使用者大多分佈在 20-29 歲的年齡層，如圖 3-8 所示，並且教育程度集中於大學、大專生，其比例顯著高於其他族群，如圖 3-9 所示。本研究以非隨機抽樣中的立意抽樣（Purposive Sampling）方式抽取樣本進行問卷調查。研究對象的年齡為 20-29 歲，且為非設計相關科系之大專院校的學生。 . 圖3-8 社群網站使用者年齡分佈資料來源： ARO 網路測量研究─社群服務發展概況。創市際(InsightXplorer)市場研究顧問公司（2011）。http://www.insightxplorer.com/index.html 38.

(49) 圖3-9. 社群網站使用者教育程度分佈 . 資料來源：ARO 網路測量研究─社群服務發展概況。創市際(InsightXplorer)市場研究顧問公司（2011）。http://www.insightxplorer.com/index.html . 二、. 業界設計工作者 . 本研究為了更了解本系統之配色結果是否對於網頁設計有實質的幫助，將無設計經驗者自行配色結果與透過自動配色系統的配色結果，交由專家進行配色效果評估。本研究選定之專家為業界設計工作者 4 名，名單如表 3-3。. 表3-3. . 業界設計工作者名單名稱 . 學歷 . 服務單位 . 職稱 . 年資 . 設計師 A . 研究所 . 暴風半徑設計工作室 . 負責人 . 16 年 . 設計師 B . 大學 . 中央廣播電台 . 美編 . 16 年 . 設計師 C . 大學 . 傳奇路遊戲公司 . 美術設計 . 3 年 . 設計師 D . 大學 . 傳奇路遊戲公司 . 美術設計 . 1 年 . . 3.4.2. 無設計經驗使用者配色實驗 . 本研究為得知無設計經驗者在無自動配色系統輔助時，自行配置的色彩組合，所以使用選擇選色較為方便之 Adobe® Illustrator 繪圖軟體為實驗工具，並建立比. 39.

(50) 例 1:1 的網頁版型，色彩選擇則提供網頁 216 色之色票與 RGB 色版，電腦系統為 Mac OS，如圖 3-10 與圖 3-11。測試圖片來源為本校資訊中心授權之專業影像圖庫，並以隨機抽樣方式挑選世界風景照，每位受試者需實施二張照片之色彩配置，時間限制為五分鐘。. 圖3-10. 配色實驗環境 . 圖3-11. 配色實驗畫面截圖 . . 3.4.3. 問卷設計 . 問卷指的是特別設計來萃取對分析或許有用的資訊的工具（邱泯科、陳佳穎、蔡毓智、姜馨彥，2006），問卷調查一開始要確立目的和主題，必須釐清想藉由. 40.

(51) 問卷調查瞭解的內容，為確認自己想知道、想調查的事，必須對問題內容進行具體的探討。問題確認後接著必須考慮問題的提出順序。本研究的問卷調查分為兩部分，第一部分以一般無設計經驗者作為實驗對象，針對無設計經驗之使用者進行自動配色系統整體評估，評估該系統的整體效果與滿意度；第二部分將無設計經驗者自行配色結果與透過自動配色系統的配色結果，交由專家進行配色效果評估。. 一、. 無設計經驗者使用評估部分. 本問卷分為三部分，分別是「個人基本資料」、「自動配色系統評估」、「視覺效果評估」，說明如下。 (一) 個人基本資料本問卷採不記名方式進行，並採取封閉式問題設計，封閉式問題的主要特性在於可能的答案都是事先預定的，研究者能夠更有信心地肯定這些答案，不但可獲得相關與貼切的資料，也能見少無效問卷的問題產生。在基本資料部分，題項分別為性別、系級，以及學習設計相關知識的經驗、經營個人網站的經驗、配色工作經驗，而系級的題項視為篩選題，用以確認使用者為非設計相關科系的學生。 (二) 自動配色系統評估本研究開發之系統之主要目的為有效減少無設計經驗者於網頁配色時耗費的時間，所以針對系統之「有用性」、「易用性」、「易學性」及「滿意度」4 個部分進行自動配色系統評估。上述 4 個構面為修改自 Lund（2001）的系統評估問卷題項，如下表 3-4 所示，共計 25 題，無反向題設計，問卷的量尺採用李克特式五點量表作為衡量方式。每道題目皆採用李克特式五點量表，同意程度由「非 41.

(52) 常不同意」到「非常同意」，共分為五等。計分方式依「非常不同意」、「不同意」、「普通」、「同意」、「非常同意」，分別給予 1、2、3、4、5 的衡量的數值。. 表3-4. . 自動配色系統評估問卷構面有用性. 易用性. 易學性. 滿意度. 題號. 問卷題目. A1. 該系統能幫助我進行網頁配色. A2. 該系統能讓我在製作網頁時更有生產力. A3. 該系統對於使用者是實用的. A4. 該系統能有效節省配色所耗費的時間. A5. 該系統使我要完成的任務更容易完成. B1. 該系統使用方法容易. B2. 該系統使用方法簡單. B3. 該系統對使用者而言是便利的. B4. 該系統能使用最少的步驟完成工作. B5. 該系統在進行配色時是順暢的. B6. 不需要寫操作方法我就能使用該系統. B7. 使用該系統時整體結果是一致的. B8. 無論是經常或不經常使用的使用者都會喜歡該系統. B9. 我可以快速的且輕鬆的從操作錯誤中恢復. B10. 我每次都能成功的使用該系統. C1. 該系統很容易學會使用. C2. 我很容易記住如何使用該系統. C3. 該系統的使用步驟容易理解. C4. 我能很快的熟悉使用該系統. C5. 我能快速學會使用該系統. D1. 我對該系統的整體配色結果感到滿意. D2. 使用該系統進行網頁配色是有趣的. D3. 該系統的運作結果就如同我想的那樣. D4. 我覺得我需要該系統來協助我進行網頁配色. D5. 使用該系統是愉快的使用經驗 42.

(53) (三) 視覺效果評估此部分為視覺效果評估，用以調查無設計經驗者對於本研究之自動配色方法呈現之整體配色感受。視覺效果評估部分之問卷修改自陳俏君（2009）針對無障礙網頁色彩配置美感分析的研究，如下表 3-5，共計五題，無反向題設計。每道題目皆採用李克特式五點量表，同意程度由「非常不同意」到「非常同意」，共分為五等。計分方式依「非常不同意」、「不同意」、「普通」、「同意」、「非常同意」，分別給予 1、2、3、4、5 的衡量的數值。. 表3-5. . 視覺效果評估問卷構面. 題號. 視覺效果. E1. 該系統的配色結果能引起我的注意. E2. 該系統的色彩區塊位置安排得宜. E3. 該系統的色彩搭配具有層次感. E4. 該系統的色彩搭配具有協調感. E5. 該系統的文字看得很清楚. 二、. 問卷題目. 專家評估問卷. 經過無設計經驗者使用評估之後，本研究將其配色結果與自動配色結果做比對，將 32 位受試者之配色實驗結果與六張自動配色系統的網頁畫面截圖製作成一份圖檔，如圖 3-12，並交由業界設計工作者做評估。進行方式為使用同一螢幕瀏覽配色結果再進行問卷填寫，本問卷分為二部分，分別是「個人基本資料」、「配色效果評估」，說明如下。. 43.

(54) 圖3-12. 配色比較畫面截圖 . (一) 個人基本資料本問卷題項採取封閉式問題設計。在基本資料部分，題項分別為學歷、服務單位、職稱、設計工作年資，其用意為瞭解受訪者之經歷與背景。 (二) 配色效果評估配色效果評估分為「視覺效果」、「配色改善」二個構面。其中視覺效果部分與無設計經驗者使用評估的視覺效果評估之題項相同，用以了解二者對於本系統配色結果之看法是否一致，而配色改善部分之題項為評估本系統是否能改善無設計經驗者的配色困擾之問題，如表 3-6 所示，共計 8 題，包含一題反向題。每道. 44.

(55) 題目皆採用李克特式五點量表，同意程度由「非常不同意」到「非常同意」，共分為五等。計分方式依「非不常同意」、「不同意」、「普通」、「同意」、「非常同意」，分別給予 1、2、3、4、5 的衡量的數值。表3-6. . 配色效果評估構面. 題號. 視覺效果. F1. 該系統的配色結果能引起我的注意. F2. 該系統的色彩區塊位置安排得宜. F3. 該系統的色彩搭配具有層次感. F4. 該系統的色彩搭配具有協調感. F5. 該系統的圖文色彩視認性良好. G1. 該系統提供三種不同色調的選擇是有幫助的 . G2. 使用該系統後的配色組合較為協調 . G3. 使用該系統後的配色結果無明顯改善 . 配色改善. 問卷題目. 第四節. 實施程序 . 本研究實施程序分為三個階段進行，分別為「自動配色方法設計階段」、「自動配色雛形系統開發階段」、「自動配色系統評估階段」，如圖 3-13。第一階段進行系統之配色方法設計，並解決色彩空間轉換問題；第二階段為雛形系統開發，將第一階段之設計結果，透過程式撰寫開發一雛形系統；第三階段為系統評估，將雛形系統之配色效果做無設計經驗使用者與專家評估問卷，原始問卷回收之後，將進行電腦化的資料處理工作，利用適當的統計方法進行驗證。 . 45.

色彩調和理論於 網頁自動配色應用之研究

色彩調和理論於網頁自動配色應用之研究