第三章 系統規劃與設計
3.2 系統架構
本研究之系統架構如圖3-2：
外部資料庫 模式庫
處理單元
對話單元
圖3-2 系統架構圖
46
1. 對話單元：使用者介面負責與使用者溝通，可輸入資料與顯示結果。
2. 處理單元：包含伺服器、資料處理與轉換作業，連結資料庫、模式庫與使 用者。
3. 外部資料庫：儲存企業色票資料，提供色彩比對建議之用。
4. 模式庫：儲存配色規則模式。本研究建構模式有：
(1) 色彩空間轉換模式 (2) 基本配色模式
(3) 明度與彩度調整模式 (4) 色彩面積比例模式
(5) 類似與對比色彩調和模式 (6) 色票比對與建議模式 3.3 使用者介面設計
戴嘉成(2001)歸納一個好的使用者介面應具備四個條件：
1. 讓使用者減少錯誤的發生
2. 介面能提供正確的文字或是圖像資訊 3. 系統即時性的反應
4. 介面和程式功能有著緊密的連結
一個可信度高的軟體，最重要的是使用時軟體正常運作與回應，達到介面一 致性，避免造成使用者的混淆不清，提供詳細且易於理解的介面工具或按鈕，只 要使用者點選該按鈕，即可馬上正確無誤的執行該程式功能。
本系統延續一般網頁瀏覽者由上而下的使用習慣，與高視覺化的互動操作流 程，依序為：
1. 輸入色彩數值欄位
2. 點選功能鈕，呼叫決策模型
47
3. 系統傳回回應值
4. 其他附加功能，如：產生色票、資料庫查詢功能 3.4 配色模式設計
常用的HSV(HSB)屬性數質，雖容許非整數，但色彩數值不似數理科學需達 非常精準，且一般繪圖軟體通常使用整數表示，此系統中預設輸出值以四捨五入 取整數表示。符號與範圍說明如下：
1. H：色相值，0~360˚
2. S：彩度值，0~100 3. B：明度值，0~100 3.4.1. 以色相為主的配色
一般以色相為主的配色，大多以色相環為依據，按照色彩在色相環上的位置 所形成的角度，可分為同一色相配色、近似色相配色、對比色相配色、互補色相 配色。
1. 同一色相配色：同一色相中的顏色，包括明度的深淺變化，所構成的配色 效果，稱之為同色相配色。此配色範圍需配合明暗、深淺變化。
H ≅ H and |B − B | > 1 明度階
2. 近似色相配色：在色相環中距離主色 60˚之間的每一個顏色，均可稱之為 近似色。近似色的配合，距離的角度愈大，愈顯得活潑而富朝氣。距離的 角度愈小，愈具有穩定感和統一性。
|H − H | = 60 or 300
3. 對比色相配色：在色相環中距離主色呈 120˚至 150˚左右兩色關係，稱為對 比關係。對比色配色，角度大會產生活潑、跳躍、華麗…等的效果，如果 兩色都同屬於高彩度配置的話，對比過高，會產生眩耀的不調和感。
48
49
(1) 同一色調配色：色調屬於同一明度、彩度區，故範圍皆為 3 個階段內。
0 ≤ |S − S | ≤ 33 & 0 ≤ |B − B | ≤ 33 (2) 類似色調配色：相鄰的明度或彩度區塊。
33 ≤ |S − S | ≤ 67 or 33 ≤ |B − B | ≤ 67
or |S − S | = 33 & |B − B | = 33 2. 以彩度配色
分為類似彩度配色與對比彩度配色。彩度之心理作用不如明度強烈，配色 時，彩度的影響通常遠低於明度，在此系統中，除明度與色相為極端值時，
再以彩度平衡色彩協調。其餘狀況，以彩度變化為輔，明度為主。
調和色彩的彩度與其它屬性關係式如下：
(1) 色相差與彩度差成正比的關係。即色相差小，彩度差也要小；反之則 大。
When |H − H | ≤ 180 | H − H | ∝ |S − S | 𝑥 When |H − H | ≥ 180 360 − |H − H | ∝ |S − S |𝑦
(2) 彩度差與明度差成反比的關係。即彩度差小，明度差要大；彩度差大，
明度差小。
|S − S | ∝ 1
|B − B | 𝑥
(3) 彩度與面積成反比的關係。即彩度強時，面積要小。
S S ∝ A
A 𝑥
50
(4) 二色皆為高彩度的配色，有鮮豔、強烈的感覺，若將色相或明度變小，
便可得到較為柔和、穩重的感覺。
當S , S 越大時，越鮮艷
若降低 H , H , B , B ，則較柔和、穩重
(5) 二色皆為低彩度的配色，有樸素、穩重的感覺，若將色相或明度變大，
便可得到較為活潑、舒適的配色效果。
表示當 S , S 越小，越有樸素穩重感覺；
若增加H , H , B , B ，則較活潑、舒適 (6) 避免彩度與明度差同時為 0。
當 S = S ，B ≠ B 當B = B ， S ≠ S (7) 類似彩度
3
14× 100 ≤ |S = S | ≤ 5
14× 100 (8) 對比彩度，但需避免眩耀造成的不調和
7
14× 100 = 50 ≤ |S = S | ≤ 9
14× 100 3. 以明度配色
Moon & Spencer 主張明度是配出色彩美感的主要因素，認為明度需有 明顯對比的色彩才會調和，若色彩屬於同一明度或產生眩耀(glare)，便不 調和。Munsell 將明度分為 11 階，Ostwald 將明度分為 8 階，日本 PCCS 系統則分為9 階，林磐聳(1985)以 PCCS 系統為例，指出明度差為 8 個階
51
段以上，兩色便會產生不調和的現象；Moon & Spencer 主張 Munsell 明度 表示法在曖昧明度差時，產生不調和。
52
53
個案推理(case-based reasoning, CBR)是以案例的方式描述專家過去的經驗，
存於資料庫中以供日後使用(Laudon & Laudon, 2006)，當使用者在新案件中遇到 相似參數時，系統可經由此資料庫，搜尋比對類似案例，將相似的解決方案或經 驗回饋給系統使用者。
系統色票資料庫儲存了數百個知名企業之網站配色，使用者可將色彩輸入，
經本軟體以色彩調和條件總和評判，輸出建議色彩的參考值，亦可依使用者需求 自行擴增。
54
資料庫實體關聯圖，如圖3-3：
圖3-3 資料庫實體關聯圖 COLORMATCH
Color_ID
Main_Color
Second_Color
Corp_Name
TimeStamp COLORNAME
ID
Color_ID Year
TimeStamp
55
2. 資料表與欄位對照
(1) COLORNAME：儲存企業色票年份基本資料。
COLORNAME
鍵值 欄位名稱 欄位說明
PK ID 識別編號
FK Color_ID 色票編號 Year 使用年份
TimeStamp 時間戳記
表3-2 COLORNAME 資料表欄位 (2) COLORMATCH：儲存色票色彩資訊。
COLORMATCH
鍵值 欄位名稱 欄位說明
PK Color_ID 色票編號 Main_Color 主要標準色 Second_Color 次要標準色
Corp_Name 企業或組織名稱
Website 企業或組織網址
TimeStamp 時間戳記
表3-3 COLORMATCH 資料表欄位 3. 資料庫資料須滿足下列條件：
(1) 入選2010 Fortune Global 500、Rebrand 100 Global Awards企業或組織。
(2) 商標標準色為一或二色組成。
(3) 商標設計為純粹平面。
(4) 若商標為單色，則挑選識別系統中另一或第二色彩為次要色彩。
56 4.1.1 Apache Server
Apache 伺服器為開放原始碼，可免費使用，且全球資訊網上市占率最高的伺 服器軟體，據Netcraft 統計，2010 年 6 月，全球占有率為 54.02%。
4.1.2 PHP 與 AJAX
PHP 最早由 Rasmus Lerdorf 在 1995 年發明，據統計，網路上使用 PHP 建構 網站的網域超過2000 萬個(php.net, 2007)。2008 年，PHP 在網路伺服器使用率達 35%。根據維基百科說法，PHP 是一種在電腦上執行的 Script 語言，主要用途是 在於處理動態網頁，也包含了命令列執行介面(command line interface)，或者產生 圖形使用者介面(GUI)程式。
PHP 的應用範圍相當廣泛，尤其是在網頁程式的開發上。一般來說 PHP 大 多執行在網頁伺服器上，透過執行PHP 程式碼來產生使用者瀏覽的網頁。可在多 數的伺服器和作業系統上執行，且使用上是完全是免費的。
AJAX 是 Asynchronous JavaScript and XML 的縮寫。McLaughlin(2005)將之 定義為由HTML、JavaScript™ 技術、DHTML、DOM 等組成，可以傳統網頁將 資料送出，再接收的換頁過程轉換成高互動性的AJAX 應用程式。
本系統使用的AJAX 應用程式技術：
1. HTML 與 CSS：用於建立各式表單、色彩與按鈕等使用者介面。
57
2. JavaScript：執行系統核心模式庫，如配色規則、運算等。
3. Dynamic HTML：用於動態即時更新與顯示運算結果。
4.1.3 MySQL
用以存放色票資料庫。這是一種開放原始碼的關聯式資料庫系統。使用最通 用、標準的SQL 來新增、存取及處理資料庫的資料。任何人都可以下載使用 MySQL，也可以視需求，在公共授權(GPL)的規範下進行修改。根據 MySQL 官 方說法，MySQL 是一種可容許多使用者、多執行緒的 SQL 資料庫伺服器。以 Client/Server 結構，快速和靈活的存取記錄文字和圖像資料。在預設情況下，
MySQL 建立的 MyISAM 資料表允許的最大容量可達 4GB(Orable Corp., 2010)。
4.1.4 CSS
為Cascading Style Sheets(串聯樣式表)的縮寫，網站建置時，透過 CSS 控制 顯示層，指定使用者介面樣式的呈現。
CSS 的基本語法結構：選擇器 { 屬性 : 設定值 } 1. 選擇器：組成要素，以此指定需套用樣式的要素。
2. 屬性：指定套用的樣式種類。
3. 設定值：組成要素的屬性設定值。
4.2 使用者介面設計
4.2.1 輸入介面
輸入介面包括色彩屬性質輸入區域、功能按鈕。提供RGB 滑桿、10 進位 RGB、
16 進位 RGB、HSV 色彩空間及直接點選色票，五種屬性數值輸入方法，供使用 者使用者方便使用，免除自行轉換困擾。
1. 色彩輸入欄位
分為(1)R、G、B 值；(2)RGB(16 進位)值；(3)H、S、V 值，三組欄位。
58
2. 色彩滑桿
4.2.2 輸出介面
本介面顯示色彩的區域、色票產生功能按鈕，色彩預覽與結果值的顯示資料如 下：
1. 顯示輸入值色彩預覽介面
顯示於RGB 輸入欄位和 RGB 滑桿左側，如圖 4-3，橘色區域。
Red Green
Blue
圖4-3 色彩預覽介面概念圖 Red
Green Blue
圖4-2 色彩滑桿介面概念圖
Red Green Blue
RGB(HEX)
H S V(B)
圖4-1 色彩輸入欄位概念圖
59
2. 基本配色結果預覽介面
以設計與印刷領域知名的色彩系統「PANTONE」色票的樣式，清晰又符合 設計師習慣的檢視方式來顯示色彩資訊。
3. 進階配對與演算結果色彩預覽介面
色彩個數和組數配置與「基本配配色結果預覽介面」相同。本區域分為A、
B、C 三組，各三個顏色，顯示進階配色結果的預覽和色彩屬性值。
(1) A 組：顯示輸入色彩的類似配色。若進行企業色票搜尋，則 A-2 顯示企 業色票配對結果，A-3 顯示類似色彩。
(2) B 組：B-1 顯示輸入色彩的類似或對比配色，B-2 及 B-3 顯示 B-1 類似 色。若進行企業色票搜尋，則B-2 顯示企業色票配對結果，B-3 顯示建 議色彩。
(3) C 組：顯示灰階建議色彩。
A-1 A-2 A-3 B-1 B-2 B-3 C-1 C-2 C-3
A 組 B 組 C 組
圖4-5 進階配色結果顯示介面概念圖 圖4-4 基本配色結果顯示介面概念圖
… … … ...
60
4. 數值顯示介面
分別顯示10 進位 RGB、16 進位 RGB、HSV(HSB)色彩空間各屬性數值，
供使用者方便使用，免除轉換之困擾。
5. 匯出色票功能介面
使用滑鼠點選欲產生的檔案形式的按鈕。
4.3 系統模組建立
4.3.1 色彩空間轉換模組
本研究之系統內，色彩空間轉換模組如下：
1. RGB 轉 HSV
假設 (𝑟, 𝑔, 𝑏) 為顏色的紅、綠和藍坐標，它們的值是在 0 到 1 之間的實數。
假設𝑚𝑎𝑥為 𝑟, 𝑔, 𝑏 中的最大值，𝑚𝑖𝑛為最小值。HSV 空間值( , 𝑠, 𝑣)，色相角 度 ∈ [0, 360)，彩度 𝑠 ∈ [0,1], 明度 𝑣 ∈ [0,1]，( , 𝑠, 𝑣)之值為：
匯出色票： 產生Photoshop 色票檔 產生Photoshop 色票檔 產生色票文字檔
圖4-7 匯出色票功能介面概念圖
# FFFFFF R: 255 G: 255 B: 255 H: 0 S: 0 B: 100
%: 25%
圖4-6 數值顯示介面概念圖
61
max , otherwise
𝑣 = 𝑚𝑎𝑥
62 結果，與Photoshop、Illustrator 轉換結果比較，證實正確無誤。程式概述如下：
(1) 計算出每單位 h, s, v 值，若此色彩為無彩色，即彩度 s=0，以此演算法計