中文語意分析應用於部落格自動配色系統之研究

全文

(1)國立臺灣師範大學圖文傳播學系碩士論文. 中文語意分析應用於部落格自動配色系統之研究 A Study on designing an automatic system of color harmony for Blog Based on Chinese Semantic Analysis. 指導教授：周遵儒博士研究生：郭曉媚撰. 中華民國一○四年五月.

(2) 誌謝這是個肯定自己的過程，很高興我熬過去了。在業界工作經歷許久後再回到校園研讀，著實需要花不少體力與功夫，忙碌的生活充實著自我的身心。撰寫論文過程中遇到的各種困難，就如同良師一般，不斷提醒著自己的閱讀還不夠多、不夠廣，研究的精準度也常常磨練著個人神經的緊張程度。能夠順利完成師範大學圖文傳播研究所的學業並且順利寫完論文，首先感謝一路上支持與鼓勵我的指導老師─周遵儒老師，在跨領域研究裡，老師嶄新的思考與獨到的眼光，讓學生受益良多，在學術研究上的堅持與態度也鼓勵著學生，希望持續學習這樣的精神不怕困難的努力向前。還有中華電信數據分公司的長官與同事們，感謝有你們的協助與優質的隨意窩部落格平台，以及技術團隊的努力，讓我的研究可以順利完成。感謝口試教授─陳舜德老師與顏榮泉老師，對於論文的精闢見解，讓我的論文有機會以更好的狀態展現在世人面前。還有一起努力的碩士班同學─欣伶、美君、明賢、安晴、智萍，感謝有你們這群志同道合的同學，除了在課業上互相協助，有困難想聊聊的時候，你們也都很樂意傾聽，能夠跟大家成為朋友並且互相鼓勵的時光，是此生精彩的回憶。最後特別要感謝的是，無條件支持我求知道路的家人─先生跟寶貝女兒們，不管是在論文與工作無法兼顧的時候，還是遭遇困難無法超越的時候，先生的一句：「你可以的！」，總是能讓我再度打起精神。女兒們圍繞在專心寫論文的媽咪身邊，體貼的不發出聲音吵鬧，都讓媽咪感到十分窩心，真的很謝謝妳們能夠體諒，並且忍耐媽咪因為學習而不能陪在妳們身邊的寂寞。未來我們會有更多需要一起面對的挑戰，不管如何，只要還能夠緊握著彼此的雙手，看著彼此眼神中的信任與理解，便已讓我們有足夠的勇氣，一起面對未知的世界。郭曉媚（Mei Kuo）謹誌於國立臺灣師範大學圖文傳播學系碩士班 2015.Aug i.

(3) 中文摘要目前部落格網頁樣版與配色主要以部落格供應商（Blog Service Provider， BSP）提供的固定樣版為主，重複性高且文章內容與部落格樣版無相關性，部落格使用者也因為無設計相關經驗，導致自訂的部落格網頁樣版與色彩配置缺乏美感與規律性，再者修改樣版的 CSS 樣式表需要專業的網頁技術知識，一般使用者無法勝任。因此本研究開發一套部落格網頁樣版自動配色系統，透過分析部落格文章內容與網頁樣版配色之關係，提供部落格使用者具有調和色彩且快速的網頁樣版配色系統，並增進文章內容與部落格樣版配色的相關性。本研究開發的部落格網頁樣版自動配色系統主要使用中文語意分析技術（Semantic Analysis）。透過詞意資料庫辨識文章類型，以群眾分類法（Folksonomy）對應文章類型與主題圖片，搭配圖片自動調和配色系統，最終提供部落格使用者，一個自動配色的 CSS 樣式表。研究結果顯示，本研究提出的部落格自動配色系統，文章符合性、配色協調性、喜好度方面皆高於標準值。研究結果有效提升現有部落格網頁樣版配色，可作為部落格使用者、部落格供應商以及色彩相關產業單位參考運用。關鍵詞：色彩配置、色彩調和理論、中文語意分析、群眾分類法、部落格. ii.

(4) Abstract The BSPs (Blog service providers) nowadays give their bloggers certain number of blog Templates to apply on their blogs. Not only make everyone's blog look similar to one another, those fixed and pre-setted style sheets are also irrelevant to their blog's content. Besides, one's blog may be lack of beauty and taste due to having no ability to match colors properly, not to mention that it also requires a special skill to modify CSS style sheets on their own. Therefore, in this study it presents an automated color-harmonizing system for blog's template. By analyzing the relationship between blog content and pages of color patterns, this system provides bloggers templates with harmonized color-matching and ease of use that could enhance the degree of color-harmonization and content-consistency.. The automated color-harmonizing system for blog's template of this research is mainly based on the technique of Chinese semantic analysis. In conjunction with the post type identified through the semantic relational database, the system automatically generates theme images by the method of hybrid image folksonomy and a CSS style sheet with harmonious combination of colors. The results show that the automated color-harmonizing system for blog's template makes the content-consistency, color-harmonization and likability higher than the standard value, and improves the color schema of existing blog templates. This study also serves as a reference of bloggers, BSPs and color-related industries. Keywords: Color combinations, Color harmony, Folksonomy, Blog Website, Semantic Analysis.. iii.

(5) 目次中文摘要......................................................................................................................... i Abstract ........................................................................................................................ iii 目次............................................................................................................................... iv 表次................................................................................................................................ v 圖次............................................................................................................................... vi 第一章緒論............................................................................................................ 1 第一節研究動機與背景................................................................................ 1 第二節研究目的與問題................................................................................ 5 第三節研究範圍與限制................................................................................ 5 第四節研究架構與流程說明........................................................................ 6 第五節名詞解釋............................................................................................ 8 第二章文獻探討.................................................................................................. 11 第一節語意分析(Semantic Analysis) ......................................................... 11 第二節群眾分類法(Folksonomy) ............................................................... 19 第三節色彩配置與調和理論...................................................................... 20 第四節電腦輔助配色相關研究.................................................................. 35 第五節部落格發展與網頁樣版現況.......................................................... 38 第三章研究方法.................................................................................................. 47 第一節研究架構.......................................................................................... 47 第二節部落格網頁樣版配色系統實作...................................................... 48 第三節部落格網頁樣版配色系統評估...................................................... 57 第四節實驗操作.......................................................................................... 60 第五節資料處理與分析.............................................................................. 62 第四章自動配色系統成果與評估...................................................................... 63 第一節部落格樣版自動配色系統建置成果.............................................. 63 第二節網路問卷評估結果.......................................................................... 67 第三節實驗評估結果.................................................................................. 73 第四節自動配色系統評估結果.................................................................. 78 第五章結論與建議.............................................................................................. 81 第一節研究結論.......................................................................................... 81 第二節建議與未來展望.............................................................................. 82 參考文獻...................................................................................................................... 83 附錄一.......................................................................................................................... 89 附錄二.......................................................................................................................... 90 附錄三.......................................................................................................................... 95 附錄四.......................................................................................................................... 98 iv.

(6) 表次表表表表表表表表表表表表表表表表表表表表表. 2-1：國內中文語料庫列表 ................................................................ 15 2-2： Folksonomy 與 Taxonomy 比較 ................................................ 19 2-3：應用程式軟體 HSV(HSB)範圍表 ............................................. 34 2-4：現有部落格 CSS 樣式表編輯方式比較表 ............................... 43 2-5：網頁樣版資源網站分類 ............................................................ 43 2-6：現有部落格網頁樣版與配色資源網站表 ................................ 44 3-1：主要標記變數 ............................................................................ 55 3-2：基本資料問項 ............................................................................ 58 3-3：樣版配色系統評估─問項(必填).............................................. 59 3-4：實驗評估─問項(必填).............................................................. 61 4-1：主題圖片配色範例 .................................................................... 65 4-2：文章分類結果 ............................................................................ 66 4-3：性別與年齡百分比 .................................................................... 67 4-4：設計相關背景 ............................................................................ 68 4-5：是否有使用部落格的經驗 ........................................................ 68 4-6：配色系統評估統計 .................................................................... 70 4-7：設計背景與問項的單因子變異數分析 .................................... 73 4-8：實驗性別與年齡百分比 ............................................................ 73 4-9：實驗設計相關背景 .................................................................... 74 4-10：實驗配色系統評估統計 ............................................................ 75 4-11：實驗設計背景與問項的單因子變異數分析表 ........................ 77. v.

(7) 圖次圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖. 1-1：社群社交數位能力比例分析 ...................................................... 2 1-2：不同網路服務滿足的需求程度 .................................................. 3 1-3：研究流程圖 .................................................................................. 7 2-1：廣義的巨量資料 ........................................................................ 12 2-2：色彩對比 .................................................................................... 22 2-3：色彩印象座標 ............................................................................ 23 2-4：色彩語意意象尺度表（Color Image Scale System） .............. 24 2-5：色相表 ........................................................................................ 25 2-6： Inter-Society Color Council 色調概念圖 ................................... 26 2-7：色調漸層與色相漸層範例圖 .................................................... 27 2-8：曼塞爾色彩系統簡圖 ................................................................ 28 2-9：色相的調和與不調和範圍 ........................................................ 29 2-10：奧斯華德色立體與等色相三角形 ............................................ 30 2-11：PCCS 色彩體系圖...................................................................... 31 2-12：PCCS 體系的色調名稱及色相色分布圖 ................................ 31 2-13：HSB 色彩空間模型 ................................................................... 34 2-14：Colour Harmoniser 自動配色系統說明圖 ................................ 36 2-15：衣料色彩配色系統說明圖 ........................................................ 37 2-16：手機產品配色系統說明圖 ........................................................ 38 2-17：Xuite 隨意窩日誌樣版網頁語法架構圖 .................................. 42 3-1：配色系統流程架構圖 ................................................................ 48 3-2：語意分析系統程式架構概念圖 ................................................ 50 3-3：主題圖片管理後台擷圖 ............................................................ 51 3-4：配色圖片範例 ............................................................................ 52 3-5：隨意窩 Xuite 部落格 CSS 樣式框架 ........................................ 53 3-6：版型套組示意圖 ........................................................................ 54 3-7：實驗進行狀況 ............................................................................ 61 4-1：配色系統前台 ............................................................................ 64 4-2：輸入部落格網址系統推薦類型 ................................................ 64 4-3：配色系統推薦部落格網頁樣版 ................................................ 64 4-4：是否具有相關設計背景圓餅圖 ................................................ 68 4-5：是否有使用過部落格經驗圓餅圖 ............................................ 68 4-6：較常使用的部落格樣版方式圓餅圖 ........................................ 69 4-7：是否希望自己部落格樣版有獨特性圓餅圖 ............................ 69 4-8：是否覺得部落格樣版配色很困難圓餅圖 ................................ 70 vi.

(8) 圖圖圖圖圖圖圖圖. 4-9：部落格類別與配色系統色彩協調性的影響 ............................ 71 4-10：部落格類別與配色系統色彩喜好度的影響 ............................ 72 4-11：部落格類別與配色系統類別符合度的影響 ............................ 72 4-12：是否具有相關設計背景圓餅圖 ................................................ 74 4-13：系統類別與文章符合性與類別之關係圖 ................................ 75 4-14：系統配色樣版配色協調性與類別之關係圖 ............................ 76 4-15：系統配色樣版配色喜好度與類別之關係圖 ............................ 76 4-16：配色與分類符合性之關係圖 .................................................... 77. vii.

(9) 第一章. 緒論. 部落格平台累積大量的圖文，不同的類型的部落格使用者在平台上分享圖文資訊，成為網路搜尋資訊的來源，部落格網頁樣式與配色對於訊息的傳達有重要的影響，然而個人化的部落格網頁樣式修改需要具有設計及網頁技術才能完成，一般使用者不容易勝任。雖然部落格供應商（Blog Service Provider，以下簡稱 BSP）會提供專業設計的樣版，只是制式化的官方樣板，似乎不符合使用者追求獨特性的需求，網頁使用者介面的文獻也很少有部落格色彩協助的工具，可以提供合適的配色。因此本研究介紹運用色彩調和理論，分析部落格文章類型來提供樣版配色的技術，開發自動配色的部落格樣版系統。提供使用者簡易更改樣版與配色，減少因為無設計相關經驗而增加的困難度。本章共有五小節，首先說明本研究之動機與背景、第二節說明研究目的與問題，第三節確立研究範圍與限制、第四節為研究架構與流程說明、最後一節將對於本研究所提之重要名詞作定義與解釋. 第一節研究動機與背景依據 2013 年資策會對於網路使用現況分析調查顯示（數位媒體研究群， 2013），96.2%的網路使用者兩周內曾經使用網路社群。這表示虛擬的網路社群已經成為人們生活中經常使用的服務。社群網站有分眾的特色，可以讓使用者上網即能取得感興趣的資訊或是個人動態，簡易地分享生活經驗，並且快速地獲得其他使用者的回應，於是無分眾的入口網站時代，漸漸轉移成社群網站時代。個人化網路社群網站科技日新月異，因應不同溝通特質發展出符合各式各樣使用者屬性的社群平台，如：部落格、微網誌、即時通訊（instant messaging）平台、社交網站，回歸本質都是因應人與人之前的溝通所衍生出的新媒體，也就是所謂的 Social Network。網路累積大量圖文資訊，在日常生活中廣泛傳播。因應個人化需求，衍生的社群網路中，部落格提供簡易的相簿、日誌、影音等個人 1.

(10) 化使用需求的功能，成為網路使用者選擇紀錄完整生活經驗與發表個人觀點的社群平台。相對於 FB、Twitter 等微網誌服務，強調實名制，須登入瀏覽，屬於群組明顯的個人化社群平台，平台上的資訊還可以設定不被搜尋引擎檢索。與其相較，部落格分享資訊不需登入都可以瀏覽，為對不特定對象公開的開放平台，對於瀏覽者沒有限制，所以成為網路使用者了解產品與消費意圖的重要參考依據（王彥麟、謝寶泰，2013；黃欣怡、陳宜棻，2013），也因為影響力漸長，使用部落格建立個人品牌轉換成商業利益，也成為網路時代常見的獲利模式。在資策會的調查數據中（圖 1-1），有 54.2%的使用者會經常瀏覽家人朋友的部落格或社群網站。32.5%的使用者會經常利用部落格或社群網站與家人朋友互動，顯示部落格或社群網站，在數位生活裡成為常態的資訊分享平台，透過瀏覽與網站提供的功能，達到延伸實際人際關係與交流的目的。. 圖 1-1：社群社交數位能力比例分析資料來源：數位媒體研究群（2013）。個人化社群網站使用行為分析。台北市：資策會產業情報研究所。（頁 12）根據調查全球 53 個國家的「社群媒體」的資料顯示（動腦新聞，2010），以不同網路服務滿足的需求程度來看，臺灣閱讀「部落格」比到訪朋友「社群網站」的人多（圖 1-2）。且其中針對 19 個面向的網路服務需求，部落格/微網誌除了在「認識新朋友」功能上略遜於社群網站，在其他 18 面向上都優於社群網站，足見部落格在表達自己、知識分享等等面向更滿足網路使用者需求，是很重要的社群傳播方式。 2.

(11) 圖 1-2：不同網路服務滿足的需求程度資料來源：動腦新聞（2010）。【調查報告】社群網站會逼退部落格嗎？。取自 http://www.brain.com.tw/News/NewsPublicContent.aspx?ID=14661#ixzz30FDo2Ns D 臺灣數位生活族群的調查研究發現超過三成網路使用者懂得利用網路社群建立個人品牌（數位媒體研究群，2013），網路使用者習慣社群社交平台來進行個人自主創作，文字創作（如無名小站、Blogger）、照片創作（如 Instagram）、影片創作（如 YouTube）、聲音創作（如 Myspace、Last.fm）與圖像創作（如 pick app），文字、圖片與影音將網路環境變成個人發表資訊、生活經驗的舞台。部落格的研究成為熱門的議題，研究範疇多從社群溝通的效益、行銷模式、使用動機以及商業營利的價值（林世健、張景行，2011）等角度切入。由於部落格為使用者展現自我特色的舞台，除了圖文的獨特性，使用者仍會搜尋各種網頁技術造就部落格外觀上的差異，以期達到自我風格，然而部落格使用者大多沒有設計背景，對於部落格網頁樣版的修改與配色，難免會覺得有門檻，因此發展部落格網頁樣版自動配色系統是一個值得深入研究探討的議題。網路使用者在搜尋資訊時，部落格提供了重要的消費與意見參考依據，資訊呈現時，網頁樣版所呈現的版型與色彩對於瀏覽者是最直接的感受差異，部落格樣版的色彩可以幫助瀏覽者理解部落格的特性，和閱覽網頁的舒適度息息相關。 3.

(12) 相較於過去網頁介面設計而言，部落格在樣版設計以及提供使用者的功能都比以往的網頁設計技術要更加靈活（Hsu, 2012a），部落格使用者並非每個人對美學與網頁語法技術都熟悉，在選擇部落格網頁樣版與配色，大多依賴 BSP 提供的官方樣版作為個人部落格網頁樣版。但是由於 BSP 提供的部落格網頁樣版數量有限、重複性高、且內容關聯性低，容易產生個人部落格網頁樣版無法與他人的部落格網頁樣版產生差異。就如同店面裝潢統一化，反而無法突顯其特殊性，雖然大多數 BSP 也提供使用者隨意自訂網頁 CSS 樣式表功能，但是更新網頁 CSS 樣式表對於沒有設計專業知識背景的使用者而言仍是有相當的困難度。造成使用者感覺困難的主要原因，不外乎想要配置出具有專業質感的網頁配色，對於使用者而言除了要有基本的美學之外，還必須擁有網頁程式語言能力，然而部落格使用者多為非專業人士，往往花費大量時間調整仍出現色彩不協調的網頁配色與設計：比如選擇的網頁 CSS 樣式表與部落格文章內容無相關性、色彩種類過於複雜、配色不調和與圖片選擇不當等等…問題。本研究希望發展部落格文章類別應用於配色技術，改善以上敘述的部落格網頁樣版配色問題。目前個人部落格網頁樣版是使用者自行從管理後台選擇套用，部落格網頁樣版配色與個人部落格內的文章內容並無關聯性。文章內容的語意分析技術目前已經被廣泛運用，目前語意分析技術多用於廣告推播機制上，藉此吸引網友主動點閱廣告，增加廣告點閱率，最終達到增加廣告營收之目的。本研究意欲分析部落格文章內容，將使用群眾分類法（Folksonomy）所分類的主題圖片對應文章類型後，以主題圖片為主軸，將調和配色應用於部落格網頁樣版的 CSS 樣式表。系統使用的語意庫也會透過持續分析部落格文章而陸續擴充，達到較佳的分析效果。希望透過語意分析技術推薦適合的樣版給使用者套用，讓部落格使用者能夠快速並且有效率地搭配出合乎色彩理論與文章類型的網頁樣版配色，期望本研究的成果，能夠提升部落格網頁樣版配色的質與量，自動配色的技術也具有跨領域的工程與學術之應用價值。. 4.

(13) 第二節研究目的與問題一、研究目的本研究旨在經由中文語意分析技術（Semantic Analysis，以下簡稱 SA）將部落格文章內容解析出類型，透過這些類型與圖樣對應的資料庫，經由自動色彩調和配色技術，快速並且有效率的搭配出合乎色彩調和理論的部落格網頁樣版，提供部落格使用者套用，研究目的可歸納如下： (一) 開發部落格網頁樣版自動配色系統。 (二) 評估部落格網頁樣版自動配色系統。. 二、研究問題本研究提出語意分析部落格類型應用於自動配色之系統，可以讓部落格使用者易於變化部落格網頁樣版色彩，減少配色時間，創造個人化的樣版配色。根據上述之研究背景與動機、研究目的，發展出以下兩個研究問題： (一) 如何開發部落格網頁樣版自動配色系統？ (二) 如何評估部落格網頁樣版自動配色系統？. 第三節研究範圍與限制本節針對研究的範圍與限制說明，以界定研究所能討論的限制，詳述如下：. 一、研究範圍 BSP 所提供的部落格平台功能不盡相同，部落格官方樣版可套用的 CSS 樣式表標籤內容也各有不同，為提高研究可行性，本研究的自動配色部落格網頁 CSS 樣式表以中華電信提供的部落格平台─隨意窩為主。. 二、研究限制 5.

(14) (一) 本研究主要探討部落格網頁樣版與色彩屬於視覺部分，不涉及部落格平台架構、資料庫與使用者介面等議題。 (二) 本研究探討部落格網頁樣版色彩配置。其字體、造型、按鈕、文章照片等圖文元素表現不在研究範圍內。 (三) 本研究目前僅討論使用 Xuite 隨意窩部落格平台建置之部落格，使用其他部落格平台建置之部落格不在討論範圍內。 (四) 部落格網頁 CSS 樣式表可以呈現各種的樣版版型，本研究僅就單一網頁樣版版型做區塊配色呈現，選單、欄位配置、文字色彩、文章區塊不在討論範圍內。. 第四節研究架構與流程說明本研究發展重點在找出文章類型與部落格網頁樣版配色之間的關係，並且建立一套自動配色系統，目的在於對部落格使用者變換網頁樣版配色提供協助─當使用者在進行部落格網頁樣版配色作業時，系統能自動提供部落格網頁樣版配色樣式，作為使用者在進行樣版配色選擇的一個參考。配色研究的開發分為四個部份，第一個部份是探討語意分析方法，解析文章內容與文章類型關聯度，第二部份為文章類型對應於主要視覺圖片並設定主要色彩之相關研究，第三部份利用奧斯華德（Ostwald）色彩體系與 PCCS 的調和配色方法將自動配色應用於部落格平台的網頁 CSS 樣式表中，產生調和的色彩搭配。第四部份評估配色系統效果。本研究希望提出語意分析部落格類型準確達到配色方法之樣版系統，可以讓部落格使用者易於變化部落格網頁樣版色彩，減少配色時間，達到輔助部落格樣版配色目的。. 6.

(15) 圖 1-3：研究流程圖. 對照以往部落格網頁樣版的套用方式，經由語意分析類別套用主題圖片直接自動產生配色 CSS 樣式表，可以省去以往為了挑選配色適合的網頁樣版所花費的時間與精力。另外也減少使用者在複製網際網路上分享的網頁 CSS 樣式表語法，轉貼至個人部落格 CSS 樣式表管理後台過程中。因為無網頁語言設計經驗而導致轉貼過程原始碼缺漏，而有錯誤的現象發生。. 7.

(16) 第五節名詞解釋本節將針對研究中主要的名詞進行解釋，以利定義本論文使用名詞之意涵，關鍵字彙分別為：語意分析（Semantic Analysis）、群眾分類法（Folksonomy）、部落格網頁樣版、調和配色，釋義如下：. 一、. 語意分析（Semantic Analysis）. 人類語言結構以主詞、動詞、受詞為構成要件，將文章內的主詞、動詞、受詞斷詞處理後擷取語料並分析三者之間的關聯性，導出原始句子所要表達的意義以形式化表示的過程，即為語意分析。研究使用從部落格分析出來的語料，建立語意空間，可以掌握含有眾多語料的句子意涵，並且呈現出語意關聯性，常用的句意表示形式有謂詞邏輯、語意網路、框架和概念依存圖等。. 二、. 群眾分類法（Folksonomy）. 與傳統分類方式不同，群眾分類法是種使用者主動參與分類的分類模式。分類權力由使用者主導的概念以”Folksonmy”這個新詞彙為代表，”Folksonmy”這個概念由 Vander Wal（2005）提出，是”Folks”和”Taxonomy”兩個詞彙組合而成。這樣的分類法是一種群眾從下而上的社群性分類模式（ Bottom-up Social Classification）（West, 2007），使用者自發性提供群體智慧（Collective Intelligence）。將圖像、影音、書籤或文章的特色經由文字標籤標示出來，在網際網路中能讓其他使用者透過所下的標籤內容與類型來認知資訊。. 三、. 部落格網頁樣版（Blog Template）. 部落格網頁樣版是透過修改 CSS（Cascading Style Sheets）樣式表達成更換部落格畫面的需求，CSS 樣式表字義翻譯為階層樣式表。部落格網頁樣版也有稱作模版、佈景主題、版型、樣式、面板、範本。網頁的顏色、字型、文字大小、 8.

(17) 顏色、背景圖案、排板等呈現網頁外觀之元素，在網頁語法結構中，皆可使用 CSS 樣式表來控制。在部落格網頁程式架構中，CSS 樣式表是以嵌入的方式，目的是將部落格網頁的 CSS 樣式表分離在原有部落格平台網站結構外，方便管理。. 四、. 調和配色（Color Harmony）. 自然界中充滿豐富的色彩，人們有幸可以擁有辨別各種色彩的能力，將複數的色彩刻意加以配置，產生令人安心的視覺感覺，稱為調和配色（Whitfield & Slatter, 1978）。色彩影響人們生理與心理的感受，比如暖色系的色彩會提升心跳數、刺激自律神經系統，寒色系則有相反的作用（伊達千代，2008）。美國藝術教育者曼賽爾（A.H.Munsell, 1858）、化學家奧斯華德（W.Ostwald, 1853）等學者也曾提出各自色彩的空間體系。因應色彩在立體空間體系的相對位置，並發展出許多典範的色彩調和（Color Harmony）理論。. 9.

(18) 10.

(19) 第二章. 文獻探討. 本研究要發展的部落格網頁樣版配色系統預計運用語意分析技術、群眾分類法（Folksonomy）、色彩調和配色理論。文獻探討分為五小節，第一節對於語意分析技術的相關資料，探討目前語意分析應用範圍與語意資料庫概況；第二節探討群眾分類法應用範圍與研究；第三節針對近代經典調和配色理論與研究與色彩空間的色彩討論；第四節探討目前電腦輔助自動配色研究的發展現況；第五節探討目前部落格網頁樣版發展與現況，本章擬針對這些領域的背景理論相關文獻加以探討。. 第一節. 語意分析（Semantic Analysis）. 現今網路已大量使用語意分析技術，比如：在搜尋網站的輸入框打入關鍵字的第一個字，搜尋引擎馬上就列出相關的關鍵字，而通常候選的關鍵字中就有你想要打入的文字？或者是網路購物系統推薦的物品，而剛好也正是你想要的？這些都是運用語意分析與資料探勘技術才能精準投放使用者的需求。自動化運算科技發展如火如荼，專家們無不費心研究電腦類神經演算的技術以期望簡化人類作業流程，使用電腦替代人工，經由電腦學習過程，可以將人類的判斷機制及制式化的操作自動化節省人工的成本。並且由於 web 2.0 網際網路發達，人們在網路上透過部落格（Blog）、社群網站、手持裝置、監測器各種裝置上傳了文字、影音、圖片累積了巨量的資料，這些來自生活環境的資料是以難以想像的速度成長。這些巨量的資料也稱為大數據（Big Data）。由於這些儲存資料有著非結構化的特性，如果可以經由電腦學習自動整理與分析這些資料，並且從資料中擷取特定的數據，建立起關聯資料庫（relational database），便可以分析出人們的各種行為，比如商品或趨勢的情緒反應。讓企業掌握關於市場的行銷趨勢，或是產品的觀感與口碑，進而開發需求或是進行商業行為獲利。電腦自動化運算是具有經濟產值的技術。其中分析文字結構的語意分析便成為目前電腦人機溝通領域研究的重要課題。在城田真琴、梁世英等人鍾慧真（2013）《大數據的獲利模式》一書中對於廣義巨量資料的定義為「在 3V：數量（volum）、多樣性（variety）、速度（velocity）的方面難以管理的資料，以及為了儲存、處理與分析這些資料的技術，還有包括 11.

(20) 為了分析這些資料，並且能夠從中萃取有用資訊或洞見的人才與組織」。如圖 2-1 所示，從以往系統化儲存的結構化資料運用，到後來運用資料處理與分析技術來分析非結構化資料，都屬於狹義的巨量資料範圍，加上人才、組織就成為了廣義的巨量資料，然而要如何在這些資料中尋找隱藏的重要訊息，將每個點狀的非結構化資料連結成線狀的關聯資料庫，則得仰賴分析技術，其中機器學習（Machine Learning）、語意分析為資料處理技術的核心課題。. 圖 2-1：廣義的巨量資料資料來源：梁世英、鍾慧真（譯）（2013）。Big Data 大數據的獲利模式（原作者：城田真琴）。（頁 54）. 一、語意分析技術針對非結構性的資料處理，語意分析技術（Semantic Analysis，SA）因為可以從文章中確定詞彙之間的關係，電腦可以透過學習建立語意空間，建立語意庫，進而應用於資料探勘、巨量資訊搜尋，成為企業做決策的因素，所以在社群網路研究中方興未艾。在本研究中文章內容需要先分析為部落格文章類別，以語意分析技術流程可以分成三個步驟： (一) 建立目錄索引：使用 Ncapture 擷取網路文本與社群資料。 (二) 字詞處理： 12.

(21) 斷詞演算是處理語意分析重要的前置作業，主要目的是要從文章內容中擷取出代表詞彙。中文斷詞處理方法分為詞庫斷詞、混合斷詞法與 N-Gram 斷詞法，詞庫斷詞需使用現有語料庫來分析，而 N-Gram 斷詞法主要用於尋找新字詞，由於各有利弊，所以也有研究先使用語料庫斷詞後交由 N-Gram 找出新字詞的混合斷詞方法。 (三) 集合文章的詞彙：經由標題與文章內容所分析的詞彙，透過抽象化取得抽象語法，並將詞彙的權重做權重加成，關聯性越大的詞彙，數值越高，也越能代表文章的屬性，由於部落格用詞日新月異，所以本研究詞彙用資料探勘方式定期搜尋文章，使用人工智慧方式進行，自建部落格詞彙的中文詞庫。由於 web 2.0 蓬勃發展，社群網站所累積的資料量相當龐大，學術界在語意分析處理也引進了本體論（ontology）的概念（Lord, Steven, Brass & Goble, 2003），表達特定領域中詞彙與詞彙之間的關係，內容包括有物件（object）、物件特徵（property）與物件間的關係（relation），讓電腦可以搜尋、認同文字意義，有效使用在提升同意詞或多意詞的分類精度（Choi, Song & Han, 2006）。由以上可得知，語意分析的趨勢，主要從社群網路快速累積的巨量資料上，將社群相關資料，分析為有價值的數據，部落格支援 XML 與 RSS 等資料，是語意分析主要的分析來源，因為這些開放式文字交流格式廣泛應用於部落格，使得資料來源大開，與此技術相關的技術，如：潛在語意分析（LSA，Latent Semantic Analysis，簡稱 LSA）、巨量資料（Big Data）、資料探勘（DataMining）或是網頁探勘（Web Mining），其中十分相關的語意庫技術發展也如火如荼，如利用機器學習（machine learning），將大量資料與訊息完整及有效的解譯，以期推升知識密集度（Mika, 2005），以及建立更有效的部落格搜尋技術提供給企業使用（Chen,Tsai & Chan，2008）。. 二、潛在語意分析發展與應用 13.

(22) 潛在語意分析是指將文章中所含的象徵詞彙分析出來，並且將語意與語意相對應的關聯性建構出詞意空間。透過資料庫技術、資料探勘、詞意處理技術將詞彙、文章、句子所含的語意內容表現出來，最早是由 Deerwester 等人（1990），利用數學線性代數建構詞彙與詞彙關聯的語意空間模型，應用於代表意義相近的詞彙，比如「棒球」與「大聯盟」，透過奇異值分解（Singular Value Decomposition）與維度約化（Dimension Resuction），可以推導出隱含在文章中的關聯性，在自然語言以及搜尋檢索應用層面極廣，LSA 可以在語意空間中正確表達詞彙與語句的關聯性，在使用上由於部落格文章多接近口語文字，LSA 的分析方法可以比較接近部落格文章所要表達的意思，也因此本研究選擇 LSA 模型來進行部落格文章語意的分析，並且將分析結果與部落格日誌分類方式做媒合，提出主題類別圖片與部落格網頁樣版配色的關聯方法。由於斷詞方法、語料庫、語意分析技術都影響建立的語意空間精確度，所以斷詞演算法的實驗研究，語料庫建立的技術，還有以分群方式與關聯度方式精進中文分析技術的研究皆如雨後春筍一般出現在學術研究上： (一) 斷詞演算：郭益豪（2013）使用 N-Gram 斷詞法改良的潛在語意分析，將新聞文件做為測試資料集，做關鍵字的數量與權重比較，陳稼興、謝佳倫等人許芳誠（2000）運用遺傳演算法提出改良的非人工斷詞模型，可以依據詞彙長度與語句出現次數，呈現較佳的斷詞結果，陳明蕾、王學誠等人柯華葳（2009）在自動比對詞彙與詞彙的潛在語意分析技術上著墨不少，研究網頁裡有斷詞以及詞頻分析工具，可以輸入文章查詢文章用詞的頻率。 (二) LSA 演算技術：彭華瑞（2002）提出可以擷取長距離資訊的語言模型，用於改良原有 N-gram 模型的缺點，黃信捷（ 2008 ）以分群方式製作文章摘要器（ clustering text summarizer），根據研究中指出使用 LSA+SOM 語句摘要器準確率有 53.39%。除了將範圍分群，另外陳家毅（2011）依照句法結構增加權重方式，實驗三種權 14.

(23) 重函改進 LSA 技術的語意空間中所缺乏的詞彙順序與文法結構，提升準確率。應用於電腦輔助教學上的研究，周智勳與丁泓丞（2013）研究使用關聯性指標將相似度低的文章語句，提高 2%的正確分類率。潛在語意分析應用文字探勘領域的研究，目前主要分析面向以下列方向為主： (一) 文章情緒方面：了解文字內容的情緒意涵，從正面/負面的情緒探索，可以統計出在特定事物中，群眾對於該事物的真實意見；進而提供數據讓組織做正確決策使用， Strapparava & Mihalcea（2008）研究可以從文本中判別出憤怒，厭惡，恐懼，快樂，悲哀和驚奇六種基本情感的鑑定方式。 (二) 推薦系統方面：經由探索產品敘述與文字內容，可以經由特定演算法，尋找相關性較強的其他文章與產品，如在網路商務應用方面，推薦購物者相互關聯的品項，提高成交率與銷售金額，是最直接獲利的方式。由於資料探勘與語意分析運用範圍十分廣泛，也因此研究領域上也朝向跨領域方向為主，如 Stone & Dennis（2011）運用 TASA（Touchstone Applied Science. Associates）語料庫研究 1089 個網頁發展出以眼球運動科技，來設定網頁上語意分析預測模型，將體感科技與語意分析連結。由於語言字詞結構不同、語系差異，語料庫內容也會不同，以中文而言，有以下幾個著名的中文語料庫資源：. 表 2-1：國內中文語料庫列表網站名稱. 網址. 網址及簡介. 漢字偏誤語料庫. http://free.7host05.co m/bluekid828/%20. 由鄧守信教授帶領製作，漢語學習者之漢字偏誤數據資料庫。. CWS 中文詞彙特速描系統. http://wordsketch.ling. 除了一般的關鍵詞及語境查詢外，更提供了詞彙特性速描（ word sinica.edu.tw/ sketches）、語法關係以及同近義 15.

(24) 詞分析等自動產生的語法知識古漢語語料庫. http://www.sinica.edu. tw/ftms-bin/ftmsw3 或 http://www.sinica.edu. tw/~tibe/2-words/oldwords/. 古漢語語料庫包含以下五個語料庫: 上古漢語、中古漢語（含大藏經）、近代漢語、其他、出土文獻。部分資料取自史語所漢籍全文資料庫，故兩者間略有重疊。此語料庫之出土文獻語料庫，全部取自史語所漢簡小組所製作的資料庫。. 近代漢語標記語料庫. http://www.sinica.edu. tw/Early_Mandarin/. 為應漢語史研究需求而建構的語料庫。目前素語料庫所蒐集的語料已含蓋上古漢語（先秦至西漢）、中古漢語（東漢魏晉南北朝）、近代漢語（唐五代以後）大部分的重要語料，並己陸續開放使用；在標記語料庫方面，上古漢語及近代漢語都已有部分語料完成標注的工作，並視結果逐步提供上線檢索。. 現代漢語平衡語料庫. http://www.sinica.edu. tw/SinicaCorpus/ 或. 主要針對語言分析而設計，由中央研究院資訊所、語言所詞庫小組完成，內含有簡介、使用說明，現行的語料庫是 4.0 的版本。. http://www.sinica.edu. tw/~tibe/2-words/mod ern-words/ 或 http://www.sinica.edu. tw/ftms-bin/kiwi.sh 唐詩三百首. http://cls.admin.yzu.ed 以國中、小學學生為主要使用對象，提供吟唱、繪畫、書法等多媒 u.tw/300/ 體資料，文字資料包含作者生平、讀音標注、翻譯、註解、評註、典故出處等資料；檢索點包含作者、詩題、詩句、綜合資料、體裁分類等；檢索結果可以列出全文，並選擇標示相關之文字及多媒體資料。並提供了一套可以自動檢查格律、韻腳、批改的「依韻入詩格律自動檢測索引教學系統」，協助孩子們依韻作詩，協助教師批改習作。. 樹圖資料庫. http://treebank.sinica.e 「中文句結構樹資料庫」是中央研究院詞庫小組從中央研究院平衡語 du.tw/ 16.

(25) 料庫（Sinica Corpus）中，抽取句子，經由電腦剖析成，結構樹並加以人工修正、檢驗後的所得的成果。在中文句結構樹中標示了中文句語意和語法的訊息。目前開放網上檢索及資料移轉，以供學者專家在中文句法、語意關係研究參考之用。結合詞網，知識本體，與領域標記的詞彙知識庫。. 中英雙語知識本體詞網. http://bow.sinica.edu.t w/. 搜文解字. 、「文學之美」、「遊 http://words.sinica.edu 包含「搜詞尋字」戲解惑」、「古文字的世界」四個單 .tw/ 元，可由部件、部首、字、音、詞互查，並可查詢在四書、老、莊、唐詩中的出處，及直接連結到出處，閱讀原文。. 文國尋寶記. http://www.sinica.edu. tw/wen/. 在搜文解字的基礎之上，以華語文學習者為對象，進一步將字、詞、音的檢索功能與國編、華康、南一等三種版本的國小國語課本結合，與唐詩三百首、宋詞三百首、紅樓夢、水滸傳等文學典籍結合，提供網路上國語文學習的素材。. 漢籍電子文獻. http://www.sinica.edu. tw/~tdbproj/handy1/. 包含整部 25 史與整部阮刻 13 經、超過 2000 萬字的臺灣史料、1000 萬字的大正藏以及其他典籍。. 紅樓夢網路教學研究資料 http://cls.hs.yzu.edu.t 中心 w/HLM/home.htm. 元智大學中國文學網路系統研究室所開發的「網路展書讀—中國文學網路系統」，為研究中心負責人羅鳳珠老師主持，紅樓夢是其中一個子系統，其他還包括善本書、詩經、唐宋詩詞、作詩填詞等子系統。此網站為國內網際網路最大中國文學研究資料庫，提供使用者最完整的中國文學研究資料。. 資料來源：修改整理自中央研究院網站─語料庫資源，擷取自 http://elearning.ling.sinica.edu.tw/resources.html 17.

(26) 三、以部落格為來源做語意分析的相關研究網際網路上的文章內容資訊聚集虛擬平台初步分類有：部落格、討論區、電子佈告欄、微網誌、電子郵件與社群網站，以上能夠聚集較長文章的平台以部落格為首選，也因此許多語意分析是基於部落文章為內容來源的研究，以部落格為主的研究整理出兩大議題： (一) 分類推薦：使用群聚演算法可以找出同種類或相近的部落格文章，以便進行瀏覽推薦，鄭光廷與吳欣怡（2013）研究結合使用者偏好度、社群緊密度與文章新鮮度為多維度指標作部落格的個人化數位內容推薦，提升文章閱讀次數以及部落格滿意度。陳德美（2009）將語意分析應用在單篇文章內容特徵化，並從文件結構探討正面或反面的評價，發展語意感知模型試圖減少消費者決策時間的研究，此部分推薦多用於個人化推薦，最常被使用於廣告推薦。 (二) 資料探勘：在部落格所儲存的圖文隱藏著各種資訊，如： Park、Lee、Jung 等人（2012）利用群聚資料與群聚匹配的方法可以找尋出部落格目前的熱門關鍵字詞，可以得知目前部落格熱門的話題有哪些。楊昌樺等人（2007）曾以時間軸切分文章，透過 Support Vector Machine（SVM）判讀語句的情緒傾向，將情緒趨勢的分析用來解讀網路社群對於特定議題的情緒變化，進而推論出對於某些事件，網友的真實看法。也有從網友的回應評論中做意見探勘，實作部落格意見搜尋系統的研究（高虹安，2008）。根據前言所述，部落格仍是重要的個人發布訊息的管道，但是由於臉書（Face Book）發展迅速，短訊的傳播多轉向類似臉書這樣的平台，部落格平台面臨考驗。Yang、Weng、Hsiao 等人（2014）建議從服務內容（人性化、個性化、使用性、社群溝通與人際交流）以及部落格平台（微型化、設計靈活度、技術相容性、篩選機制、引用廣播機制、版本控制、分享機制）兩個方向創新，提升用戶經驗，研究顯示創新功能成為部落格是否能再次發展的主因。本研究創新使用潛在語意分析應用至部落格網頁樣版，提供 BSP 業者在部落格平台革新一個新方向，以 18.

(27) 期創造部落格的新型態的服務。承上，使用語意分析確立文章內容類型之後，類型與圖像的關係是接下來要探討的部分，雖然許多研究以自動影像註解（automatic image annotation, AIA）運用於圖樣辨識（李昱勳，2009），然而圖像除了本身包含的意涵還有觀看者所解讀的意涵，圖像中的訊息符碼會經由不同瀏覽者的民族與文化影響判斷的意涵，再者圖像辨識多受限於圖像資料規模而僅能以單一範圍作檢索（謝秉諺，2003），目前仍未出現完備的圖像辨識技術存在，所以圖像分類部分並不選用自動註解的技術，只是相較於傳統分類學方式，群眾分類法由於定義標籤者為內容使用者，所以認同度較高，且具有回饋性質，並且能呈現流行的主題，故研究使用群眾分類法來分類圖像，以下就群眾分類法，試述之。. 第二節. 群眾分類法（Folksonomy）. 網際網路新媒體的互動因為平台技術發展快速，發佈資訊困難度大幅降低，使用者都可以操作簡易的網路平台介面而參與、主導訊息發佈的機會，為了圖片、影音、資料在網路上傳播方便，使用者也參與主動分類。而分類權力由使用者主導的概念以“Folksonmy”這個新詞彙為代表，“Folksonmy”這個概念由 Vander Wal （2005）提出，是“Folks”和“Taxonomy”兩個詞彙組合而成，他認為這是一種群眾由下向上的社群性判斷分類模式（Bottom-up Social Classification），使用者自發性提供群體智慧（Collective Intelligence）將圖像、影音、書籤或文章的特色經由文字標籤標示出來，在網際網路中能讓其他使用者透過所下的標籤內容與類型來認知資訊。表 2-2： Folksonomy 與 Taxonomy 比較. 項目. 群眾分類法（Folksonomy）. 專家分類法（Taxonomy）. 內容分類. 平面化標記（Tag）. 階層式目錄. 詞彙使用方式. 使用者集體創作，使用自然語學科專家，使用系統化、專言，貼近生活使用詞彙 19. 門化敘述詞彙.

(28) 規則. 自由創作. 嚴謹、單純、唯一準則. 模式. 主觀. 客觀. 特性. 量決定質. 標準統一. 互動性. 高. 低. 架構. 由下而上產生的資訊架構，以網由上而下的傳統分類架構，路環境為主。. 為統一標準知識體系. 資料來源：研究整理由使用標籤平面化的分類資訊，代替原本侷限的詞彙量與分類法，可以讓使用者在檢索想要的資訊時可以更精確（卜小蝶、張淇龍，2009）。另外 West（2007）也認為使用不拘形式的標籤，輔以 Taxonomy 認知來增加資料庫的標記系統，可以讓使用者更能表達他們想要的檢索資訊，盧能彬與黃馨儀（2013）認為部落格使用者的標籤多以事實作為分類與描述，且標籤也是使用者領導部落格與社會性社群書籤重要的工具，吳筱玫與周芷伊（2009）更明確的指出 Folksonomy 所制定的標籤除了本身語意的關係，還有統計的關係，打破階層性的分類邏輯，透過分散型的標籤可以，知識傳播更進一步貼近便利性與共享性。本研究運用群眾分類法的概念將主題圖片分類，更能貼近於使用者對於該圖片的概括意象，以網頁設計領域而言，依據內田廣由紀（2010）於《共感力配色評鑑》專業配色書籍中提到圖片的顏色是配色的基本色，畫面的主角因為以圖片為主，所以根據照片的顏色來決定配色的主要元素，尋求顏色與照片的平衡，是很常見的設計方法。伊達千代（2008）在《色彩的準則》也提到從照片中抽取顏色來做配色能夠感受到整體的協調性，由於流行雜誌、平面設計、網頁設計都經常使用特定圖片作為視覺主題，因此利用圖片所出現的色彩來建構部落格模板配色，可以襯托出整體的協調性，也較貼近使用者文章內容所要表達的意涵。. 第三節. 色彩配置與調和理論. 色彩配置對於部落格網頁樣版有著舉足輕重的關係，了解色彩關係，可以從 20.

(29) 色彩變化的規則中，尋找出讓人舒適的色彩配置方法，提升觀看者的共感。由於生活環境的色彩並非都由單一顏色所組成，所以色彩學者們致力於將各種顏色排列起來比較與判斷，發展出色彩的系統與印象座標，以便進行特定目地的配色。首先對於色彩配置時會產生的知感覺是如何產生？又色彩相互之間的關係為何？需要先進行了解。. 一、色彩配置的知覺與感覺 (一) 生理知覺由於色彩是經由光線折射刺激大腦的視覺歷程產生，所以不同顏色會產生不同生理知覺的差異（魏碩廷.，2007）： 1.. 前進色與後退色. 反射波長較長的色彩聚焦點在視網膜後方，波長較短的色彩聚焦點在視網膜前方，產生眼睛調整後會有長波長的色彩感覺較近、短波長的色彩感覺較遠的影響。 2.. 色彩對比. 對比差異性出現在觀看兩種色彩的時候，第二種色彩會出現的現象，如圖 2-2： 2.1. 邊緣對比：由於大腦組織在處理相近或相鄰的色彩會有強化的效果，所以在不同色彩相接的地方會有明顯界線而產生有深淺的感覺，但其實每條色彩皆為同色。. 2.2. 明度對比：相同明度的顏色放於不同明度的背景色上，會感覺明度有落差。. 2.3. 色相對比：注視左邊紅色背景時，在觀看右邊的前景色會增加黃色的感覺。. 2.4. 彩度對比：相同顏色放於不同背景色會因為背景顏色的彩度高低，而有彩度高低不一的感覺。. 21.

(30) 圖 2-2：色彩對比資料來源：魏碩廷（2007）。數位色彩之設計與應用。（頁 24） 3.. 色面積面積大小會增強或減弱對顏色的感覺，深色調的顏色在大面積中會覺得色調更深，淺色調的顏色在大面積中會覺得色調更淺，反之，小面積的色彩會不容易分辨其色差，也就是說小面積的色彩對於整體色彩的影響度不大。. 4.. 色彩視認性由於色彩屬性（主要是明度）差異，不同顏色在同樣光線、大小、型態、距離下，會有較容易辨識與不容易辨識的特性。前景色與背景色的差異越大，視認性越高。. (二) 心理感覺色彩刺激透過大腦與其他區域連結，由於不同經驗、文化、背景會產生心理的色彩感覺差異： 1.. 色彩意象（color image）「色彩意象，簡言之就是色彩讓人產生的心理感覺與感情」（陳俊宏、楊東民，2008），我們對於色彩的情感與形容常會因為種族、文化背景與傳統習俗等…影響。比如：生活中，環境與季節都有相關的色彩聯想，使得色彩在 22.

(31) 感覺的意象上也會有所不同，紅色、橙色會聯想到太陽等等溫度較高的現象，故會有溫暖的感覺，聯想到血液，代表紅色有危險的意象。藍色、綠色則聯想到海水、綠蔭，所以會有寒冷的感覺。 2.. 色彩印象座標每個人對於色彩的印象形容詞不盡相同，為了實際生活使用方便，日本色彩研究所試圖將色彩感受具體化，將概念、語言、印象等抽象語彙，以直向標（SOFT─HARD）、橫向座標（WARM─COOL）整理出色彩印象座標（圖 2-3）與色彩語意意象尺度表（圖 2-4）提供設計配色參考範例。. 圖 2-3：色彩印象座標資料來源：伊達千代（2008）。色彩的準則。（頁 27）. 23.

(32) 圖 2-4：色彩語意意象尺度表（Color Image Scale System）資料來源：楊朝銘（譯）（2003）。web 好色-網頁色彩學（原作者：Image Research Institute Inc.）。（頁 30）. 日本色彩研究所並且在 1965 年開發實用的色彩配色系統（P.C.C.S，Practical Color Co-ordinate System），原本是應用於色彩教育為主，後來被廣泛使用於設計、生活色彩研究、商品開發、色彩印象等等…。使用色彩跟詞彙搭配的座標可以快速尋找出一般大眾對於該形容詞的色彩印象。. 二、色相的配色色彩的屬性有：色相、明度與彩度，色相就是指在色相環上不同的顏色，如圖所示，以紅色色相為基準，分為十等分，依序為：紅色、橙色、黃色、黃綠色、綠色、青綠色、藍色、錠色、紫色、紫紅色。類似的色相就是在色相環上相鄰的色彩，使用同一色相或是類似色相配，會給予人們安定、規律、沉穩的感覺。. 24.

(33) 圖 2-5：色相表資料來源：楊朝銘譯（2003）。web 好色-網頁色彩學（原作者：Image Research Institute Inc. ）。（頁 21）在色相搭配的方式可分為下列兩種： (一) 單一/類似色相：呈現優美、有條理的感覺，可以從色相環中選取順序的顏色，如三角形、正方形、或五角形，在明度與彩度統一的方式下，也可選出均衡的色彩搭配。 (二) 對比色相：呈現明快、強烈的感覺，從色相環中選擇對角線的色彩，或是對比色彩相鄰的兩色。. 三、色調的配色色調也稱為 Tone 調，較強調感覺，以明度與彩度差異所組合，其中以明度影響較大，這是色調配色的基本概念，使用亮色調會有鮮明活力的感覺，使用暗色調則有沉穩的印象，圖 2-3 是以 10 個色相為行，12 種 Tone 調為列，以 120 種色彩組成的色調概念表，該色彩是以美國國立標準局 ISCC-NBS（Inter-Society Color Council – National Bureau of Standards）制定的色彩命名為基礎。. 25.

(34) 圖 2-6： Inter-Society Color Council 色調概念圖資料來源：林美惠（譯）（2010）。玩美色計─教你一天學會色彩原理（原作者：金鎮漢）。（頁 106） (一) 以色調配色：必須限制顏色的數量才能呈現色調配色的感覺，使用色調搭配方式也可分為下列兩種： 1.. 類似色調：給人沉靜，有簡潔的感覺，運用色調相鄰的幾個色調可以呈現有次序的感覺。. 2.. 對比色調：此配色方法比類似色調更能給人強烈的印象，使用色調間差異較遠的顏色搭配。. (二) 漸層的配色：將顏色依照順序排列擺放，可以呈現出次序的感覺，表現漸層配色的效果，較常見的方式為下列兩種。 1.. 色調漸層：選取單一顏色後利用明度或彩度的差異（主要是明度），排序後可以有效率地呈現出漸層配色。. 2.. 色相漸層：以色相環為基礎，依序選取顏色後做排序，使用此配色方式時，使用類似色相內的兩個顏色做漸層，較能呈現調和的感覺。. 26.

(35) 圖 2-7：色調漸層與色相漸層範例圖資料來源：研究整理這些配色方法廣泛使用於目前生活環境中，組成方法受色彩學調和理論影響極深，將由下段探討之。. 四、色彩調和理論生活中常有兩種或兩種以上顏色搭配的情況，色彩與色彩如何調和出令人心理上產生美感的效果，一直以來都是色彩學者所關心的議題。為了進行有次序並且讓人感到愉悅地的配色，比起單純靠使用者喜好度與感覺，使用色彩調和理論配色會是比較容易在龐大的色彩體系組織中找出適當搭配顏色的方法。剛剛提過配色通常是以色相（Hue）、明度（Value）、彩度（Chroma）三種屬性所構成，色相環（color circle）為圓周型態呈現色彩立體化的方式，是設計師配色時方便使用的工具，不同的理論呈現的色相環也不盡相同。現在網頁在螢幕呈現的色彩是以三原色色光（紅、綠、藍）混合而成，最早在 1802 年由英國湯瑪士‧楊格（Thomas Young）所發現，然後 19 世紀初法國雪佛勒（Michel Engine Chevreul），研究色彩與調和之間的關係，認為有「類似性的調和」以及「對比性的調和」，自此色彩調和理論陸續萌芽，現代色彩應用以曼賽爾（Alber H.Munsell）及奧斯華德（Wihelm Ostwald）兩位學者所研發的色彩體系為最普遍被使用的理論。 (一) 曼塞爾（Munsell）美國美術教育學者曼賽爾（Albert H. Munsell, 1912）在色彩空間以色相（H）、明度（V）、彩度（C）表示的曲線與直線關係中找到調和色彩。如圖 2-8 所示，認為在色彩系統的球體中間值線當作是色彩的平衡點，任何通過中心線的色彩都會互相調和，在此規則下顏色的彩度越高，所使用的範圍必須越小的定性原理， 27.

(36) 也被後來研究調和理論的學者採用，在曼賽爾色彩空間，首先使用十進位來表示彩度，每個色彩的彩度不同，因此形成的色立體會有不規則的狀態，目前日本工業規格（JIS）就是以曼賽爾的色彩體系為基礎發展出來的。. 圖 2-8：曼塞爾色彩系統簡圖資料來源：研究整理自鄭柏左（2004）。色彩理論與數位影像。（頁139）. (二) 慕恩（Moon, P.）和史賓賽（Spencer）慕恩 Moon 與他的助理史賓賽 Spencer（1923）嘗試在以曼賽爾色立體為基礎的 Omega 色彩空間中，以過去主觀的美術家經驗為基礎輔以科學性操作研究，建立色彩幾何學關係而得到的配色調和理論。主要認為調和配色有三種：單一調和（identity）、類似調和（dimilarity）、對比調和（contrast）三種，他認為小面積宜用高彩度的色彩，大面積宜用低彩度的色彩，容易獲得色彩上的平衡。他們以定量的角度計算出色彩調和的程度，如圖 2-9 所示，C1、C7 為第一不調和範圍，C3、C5 為第二不調和範圍，在實際配色上需要在調和的色彩之外加一的平衡點也就是 C4 的範圍，才能產生心理性愉快的配色效果。. 28.

(37) 圖 2-9：色相的調和與不調和範圍資料來源：研究整理自林美惠（譯）（2010）。玩美色計─教你一天學會色彩原理（原作者：金鎮漢）。（頁 139）. (三) 奧斯華德（Ostwald）化學家奧斯華德在 1922 年發表的色彩調和理論，認為「調和是有秩序的」，配色是可以依照系統定量化的規則進行，顏色的 3 個屬性要有秩序的排列，才能產生愉快的感覺，因為是以白（W）、黑（B）、純度（C）關係來等分配色系統，所以相對上實用且容易瞭解，並且因為 CHM 以此為基礎的解說書「Basic Color」大量發行，讓奧斯華德的色彩調和論更為廣泛被大眾了解，進而被運用在各個領域中，歸納其色彩調和理論規則如下： 1.. 無彩色中的等距三色可以調和。. 2.. 任何色彩都和白與黑可以調和。. 3.. 色彩調和須要有一定秩序排列。. 4.. 明度彩度相同，色相不同的顏色可以調和。. 5.. 配合兩個以上的顏色，強調色在主要色彩正對面的位置，顏色會調和。. 如圖 2-10 所示，在奧斯華德的色立體剖面中，g-ig-lg-ng-pg（等黑系列）、 i-lg-ie-ic-ia（等白系列）與 ia-lc-ne-pg（等純系列），此線上的任何顏色皆可調和，目前德國工業規格（DIN）的色彩表示法就是以奧斯華德的色彩體系為基礎發展而來的。. 29.

(38) 圖 2-10：奧斯華德色立體與等色相三角形資料來源：鄭柏左（2004）。色彩理論與數位影像。（頁 150）. (四) P.C.C.S 色彩體系（Practical Color Coordinate System） 1965 年日本色彩研究所屏棄奧斯華德完美的幾何錐形色立體，而按照明度差異設定彩度的色彩體系─「日本色彩研究所配色體系」（Practical Color Coordinate System，簡稱 P. C. C. S），其呈現傾斜橢圓體的形狀，如圖 2-11，色相（Hue）是由色光三原色(橙紅、綠、青紫)與色料三原色(紫紅、黃、綠青)等六色為基礎發展按照視知覺等距概念組成 24 色相環，明度（Lightness）分成 18 級為縱軸，彩度（Saturation）分為 9 級為橫軸。其色調位置關係有奧斯華德體系的概念，由於 PCCS 色彩體系將色調概念用平面圖示取代色立體呈現，如圖 2-12，且色相環中對角線色彩互為對比色，將明度與彩度一起討論，稱之為色調，讓實用性提升不少。（魏碩廷，2007）. 30.

(39) 圖 2-11：PCCS 色彩體系圖資料來源：魏碩廷（2007）。數位色彩之設計與應用。（頁 53）色調顏色命名方式則參考前述美國國立標準局的色彩名稱規定，明度以色調分為 9 階，白色（9.5）在上，黑色（1.0）在下，中間以 7 個灰色階補充，彩度也分為 9 階，從無彩色（1S）到純色（9S），表色方式是以「色相─明度─彩度」（H-V-C）的順序來以數值標列色彩。. 圖 2-12：PCCS 體系的色調名稱及色相色分布圖資料來源：日本色研事業株式会社網站。取自：http://www.sikiken.co.jp/pccs/pccs04 .html 相同色相也會因為不同明度或彩度產生深淺、明暗、濃淡的色調變化，不同色相運用色調也能產生調和的變化，因此使用便利成為 PCCS 色彩體系的特色。色調與色相的變化產生的色彩搭配對於觀看者心理產生的色彩意象，會由於觀看者對色彩的觀念、判斷、喜好態度做綜合解釋，並非每個人對於同一色彩感受的標準相同（陳俊宏、楊東民，2008），因此色彩搭配喜好的研究常以年齡層或是應用類別區分來作探討，如：對於消費者喜好色彩組合研究指出，由於類似 /單一色相調和配色讓人感覺到穩定、有次序，所以消費者喜歡的色彩組合傾向類似/相同單一色向調和配色（Deng, Hui & Hutchinson, 2010）；配色使用於園藝的草花上，則以對比色的黃紫色最受青睞（黃照婷、林晏州，2007）。對於兩色色彩差異研究，莊明振與葉青林（1998）認為兩色色差愈相近時其色彩調和度愈高。在色彩對於心理反應上，張輔鈴與管倖生（2012）使用心電圖實驗，圖案與 31.

(40) 配色的關係，研究提到高彩度對比會有難以集中精神、複雜、眼睛不舒服的感覺，所以在需要長時間閱覽的部落格網頁樣版中，應該盡量將文字背景色彩的彩度降低，以增加適讀性。以國人為主軸的色彩印象研究有戴孟宗、廖信等人楊宜瑄（2010），研究 26 個色彩形容詞與網頁安全色彩（216 色）的對應關係，林伯賢（1999）對於國人調查過 90 種色彩的偏好，發現 16 歲~40 歲的受測者以淡色調→明色調→鮮明色調為遞增，以地區來分，臺灣北、中、南縣市以淡色系、明色系為主要偏好，東部則以明色系、鮮明色調為主。從上述研究發現色彩認知會因為不同的族群有所差異，而色彩調和理論呈現各種配色的邏輯方法，以網頁設計而言，部落格網頁樣版的配色可使用調和與實用的配色方案，從理論中發現有次序的色彩搭配會產生色彩協調的感受，而使用色調配色與單色/類似配色較容易呈現簡潔、一致、柔和的印象，以部落格內容多為圖文夾雜，內容繁多，在樣版配色上應該傾向簡潔性以及文章閱讀性。網頁樣版第一印象會以圖片為主，圖片呈現的意象多半會影響觀看者判斷網頁類別的主要依據，圖片色彩與網頁配用又極其相關，運用主要色彩，輔助色的色相配色，可以做為系統選色來源依據。. 五、. 數位色彩空間與編碼. 電腦螢幕為現在人們傳達資訊重要的媒介，在電腦模板網頁呈現是以數位色彩呈現在螢幕上為主，所以此節主要介紹數位色彩呈現的理論與編碼技術內容，以便之後研究實作時，色彩空間編碼置換作為基礎。 (一) 表色系螢幕顯示色彩在傳達中需要測量單位，使用數學符號描述色彩的體系稱之為表色系，色彩學就如同物理學一樣需要基本的量測體系，由於顏料、塗裝、印刷、照明、彩色照片、電腦、電視螢幕等等領域都需要運用到色彩體系以呈現客觀、準確的色彩，於是不同運用範圍的表色系應運而生。 1931 年國際照明委員會（法語：Commission internationale de l'éclairage，法語簡稱為 CIE）根據實驗將三原色：紅色、綠色、藍色透過混製作出各種顏色，並制定了 RGB 表色法，然而因為 RGB 表色法中出現的負數增加計算的困擾， 32.

(41) 所以將座標置換產生 XYZ 表色法，其他常見的色彩表色方式如 HSB（HSV）、 HLS、RGB、CMYK、Lab、Luv（CIE 色彩空間），其間數值也可以經由計算轉換成近似同色的色碼數值。其中因電腦螢幕組成原理，較常被設計者使用的為 HSB（HSV）、RGB、CMYK 幾種表色系。 1.. RGB：以紅（Red），綠（Green），藍（Blue）色光三原色組成，在電腦螢幕色顯示以 0~255 個色階表示，總和在色光強度上為 256 階，色彩數位編碼常用 8-bit 方式組成，最多可以呈現 256 X 256 X 256 （約 1680 種色彩），在 HTML 色碼則以十六進位（Hex）00～ff 來表示，是屬於加法混合（additive color mixture）：指混合顏色會比原本顏色明度高。. 2.. CMYK：以青（Cyan)、洋紅（Magenta）、黃色（Yellow）以及黑色（Black）組成，在印刷上習慣以濃度 0~100% 來表示，是屬於減法混合（subtractive color mixture）：混合顏色會比原本顏色明度低。. 3.. HSB：以色相（Hue）、彩度（Saturation）以及明度（Brightness）所組成，有時也會稱呼為 HSV ，這時候的 V 指的是亮度（Value），為了統一用詞，以下都稱作 HSB。. 而在人類對於色彩的直覺上，使用者用 HSB 的方式選色更接近人們的知覺模式，例如：想要選比這個紅色再暗一點的顏色，使用 RGB 或是 CMYK 都無法快速尋找出來，但是使用 HSB 只要調整 B 值就可以尋找出來。 HSB 色彩空間如圖 2 所示，中央軸線為明度（B），明度最高為 100，最低為純黑色 0。以中央軸線畫圓一圈為色相（H），0°為紅色，120°為藍色，整圈 360°分成 6 個色相，而飽和度（S）為各色點距離中央軸線的值，距離越近中央軸線越接近 0，飽和度與明度數值一樣都是介於 0 與 100 之間。. 33.

(42) 圖 2-13：HSB 色彩空間模型 (二) RGB 與 HSV（HSB）轉換公式數位圖片主要是由許多色點構成，每一個色點為一個像素（pixel），一個像素可以呈現的顏色由bit深度決定，如8-bit時，一個像素有28 種可能顏色，由於配色系統需求，在圖片使用median-cut方式產生RGB數值時，會需要將RGB與HSV （HSB）的色彩空間轉換，假設（r,g,b）分別是紅綠藍的座標，值為0到1之間的實數，max為最大值，min為最小值，要找到HSV中的(h,s,v)值，這邊的h ∈ [0, 360] 是色相的角度，s, v ∈ [0,1]是飽和度與明度，計算公式如下： Max=max(r,g,b) Min=min(r,g,b). 公式 (2.1). 公式 (2.2). 當 h 或是 s 為 0 的時候，為無彩色，顏色即為灰階色，當 v 為 0 的時候，則明度為 0，顏色為黑色（Cédras & Shah, 1995），由於系統中會應用 Linux 系統建構程式，所以簡介各個應用程式軟體的 HSV 範圍表，請見表 2-3。表 2-3：應用程式軟體 HSV(HSB)範圍表 34.

(43) 應用程式. 色彩空間. 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%. 資料來源：周耀庭（2010）。網站配色決策支援系統設計與實作-以企業識別系統商標標準色為例。（頁 52）. (三) HTML 十六進位色碼在網頁語法HTML中為了要標定電腦編碼看得懂的色碼，所以有十六進位的色碼標示法，其為RGB演算的標示方法，在RGB色彩空間中中，黑色標示為0，255 為白色，在HTML色碼中，黑色標示為00，白色為FF，白色在網頁語法中標示方式為”color=#FFFFFF”，這十六進位碼數值介於000000到FFFFFF之間，前兩位數為R的數值，中間兩位為G的數值，後面兩位為B的數值。. 第四節. 電腦輔助配色相關研究. 生活中網路科技已成為不可或缺的一環，在網路系統與應用上，有許多自動配色的軟體以及協助配色的系統研究，期望提供非本科系專業工程師，作為開發電腦輔助配色系統的參考與改進，增加系統開發的速度與效率。自動化電腦輔助配色，最早出現在 ACE （A Color Expert）系統（Meier，1988）， XEROX 與早期的麥金塔電腦曾經引進這樣的技術，當時的圖形介面設計普遍受到使用者的喜愛，由於人機介面溝通範圍越來越廣，我們相信應該會有更多使用者介面（Graphical User Interface,簡稱 GUI）需要自動化的輔助工具，將機器學習可以累積的知識，如：配色、智慧辨識等等…運用電腦程式計算取代。. 35.

(44) 一、. Quantitative evaluation of color harmony via linguistic-based. image scale for interior design Shen、Chen 等人（1996）使用流行色彩趨勢數據庫，將色彩語意分布（color linguistic distribution，簡稱 CLD），運用慕恩（Moon, P. ）和史賓賽（Spencer）的調和配色方法應用於室內設計的電腦配色系統，他們認為色調影響室內設計效果頗大，以色彩語彙評價方式對室內設計個案進行色彩調和之美度意象量化評估，提升室內設計配色效能。. 二、. Computational production of colour harmony. Part 1: A. prototype colour harmonization tool Moretti、Lyons、Marsland 等人（2013）提出網頁色彩配色工具，可以運用色相與明暗度調整，搭配出具有調和感受的網頁配色模型，其中提到文章可讀性主要來自於明度的差異，並且可以根據選擇的主色自動調配網頁中其他區塊的色彩，並且保持文字可讀性，如圖 2-14。. 圖 2-14：Colour Harmoniser 自動配色系統說明圖資料來源：Moretti, G., Lyons, P., & Marsland, S. (2013). Computational production of colour harmony. Part 1: A prototype colour harmonization tool. Color Research and Application, 38(3), 203-217.. 三、. 應用電腦輔助色彩調和配色於膚色與衣料色彩配色之研究. 許心怡（2005）使用 PCCS 色調配色規則為主的電腦配色系統，研究目的想要將膚色與衣料顏色用配色系統可以選擇出較適合膚色的衣服色彩配合，使用審美度公式應用，研究指出膚色淺的實驗樣本較適合明度差異較大的暗色調與灰色調，膚色深者則為淺色調、淡色調，不過該研究僅以單色彩搭配，較不符合實際 36.

(45) 使用狀態。. 圖 2-15：衣料色彩配色系統說明圖資料來源：許心怡（2005）。應用電腦輔助色彩調和配色於膚色與衣料色彩配色之研究。（頁 60）. 四、. 電腦輔助產品色彩配色審美度評估模型之研究. 邱富源（2008）發展傳統的色彩審美度模型與改良式色彩審美度模型來設計電腦輔助色彩選擇系統，用在產品設計前期的色彩計畫規劃，不過由於該系統缺乏人文色彩意象資料庫，需要再透過機器學習將系統優化。. 37.