第三章 研究方法
第二節 系統架構
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
27
選擇活動（在各種措施／方案中作一選擇）：使用低尺度的評量工具可以降 低使用者疲勞情形（Takagi, 2001），因此，系統設計的評分介面，採十點尺度，
也就是從最低分一分到最高分十分。
回饋活動（評估過去的選擇）：超互動演化式計算讓決策者有極高的參與設 計體驗（Bush & Sayama, 2011），故而，論文除參考其作法外，也出出回顧過去 滿意解的功能，讓受測者對整體設計的脈絡更加清楚與掌控。突變可能會破壞良 好的染色體結構（Kant & Bharadwaj, 2013; Kim & Ahn, 2012; Kim et al, 2011），然 而，若能善加利用突變機制，對於演化的改善是有幫助的。雖然系統以我的最愛 方式讓受測者保留喜歡的方案（Geyer-Schulz et al., 2000），但是卻少有研究將此 概念再次利用以協助後續方案的設計。因此，系統除了保留受測者的滿意解之外，
還提供以滿意解取代現有方案的功能，讓回饋活動真正的發揮作用，也是本論文 對全域解（global solution）的重新認識與操作。
本論文以互動演化式計算為核心，提出一個自助式電子賀卡系統（self-design greeting card system, SDGCS），隨後深入探討此系統的架構與功能。
第二節 系統架構
本論文提出的系統架構圖如圖 14 所示，處理程序有資料前處理、初始化、
重組機制、DIY 之影像拖曳、DIY 之回顧、DIY 之取代、DIY 之影像改變與 DIY 之框選擇與賀詞填入。本論文依序介紹系統架構圖裡每個程序的設計概念與內部 處理執行流程。
圖 14 系統架構圖
系統介面，主要做為系統與使用者溝通的橋樑，根據使用者提出的各項需求，
設計不同介面與訊息內容。
資料前處理程序，進行影像處理（尺寸修正、貼標籤、分類、色彩分析等）
與影像之間的相似度計算。海量資料除了結構良好的資料庫資料外，還包含無結
‧
的溝通意涵。Hsieh 與 Shannon（2005）介紹並比較三種質性內容分析方式，分 別是傳統內容分析、定向式（directed）內容分析與總和式（summative）內容分 文字資料，有時被用於處理影像資料（Koletsis & Petrakis, 2010）；標籤被廣泛的 應用是社群網站－臉書11（facebook）的人名標籤。影像資料除了基本的資訊（如 色彩、格式、大小）外，最重要的其實是它內含的意義，而這個意義是很難被系HSL 等。RGB 是由紅（red）、綠（green）與藍（blue）三個色光組成，又稱為 色光三原色。在電腦全彩顯示分別以 0~255 個色階表達，有時以 16 進位（hex）
11 臉書，http://www.facebook.com/，社群網站。
‧
00~ff 來表示。CYMK 被稱為印刷四原色，由青（cyan）、黃色 yellow、洋紅（magenta）
與黑色（black）所組成，通常用於印刷，以濃度 0~100%來表示。HSV（或 HSB）
由色彩（hue）、飽和度（saturation）以及色調 value 所組成，稱作 HSB 的時候，
b 指的是亮度（brightness）。
RGB 在三維空間裡可以用一個點來表示，三個維度之間並不是互相獨立的 關係，在點與點的相似度計算上，可能差異性不大。例如，有三個色彩（見圖 16），如果利用歐幾里德距離平方（squared Euclidean distance）的公式，計算色 彩 1 與色彩 2、色彩 3 的相似度。色彩 1 與色彩 2 的相似度距離為 4096，色彩 1
RGB to HSV Algorithm (Hexcone Model) Given: R, G, and B, each on domain [0, 1]
Desired: The equivalent H, S, and V, each on range [0, 1].
1. V ≔ max(R, G, B) ; 2. Let X ≔ min(R, G, B);
3. S ≔𝑉−𝑋𝑉 ; if S = 0 return;
‧
achromatic, axis of the hexcone. Hue is not defined along this axis. Often the hue is simply immaterial at such a gray point. A practice which frequently succeeds is to define H at a singularity to be what is was as a result of the last call to the transform.Smooth traversals of the gamut tend to leave H at a reasonable definition using this technique.
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
31
圖 17 影像的二維矩陣區塊與一維轉置結果
依據數值的不同特性（Carey, 2012），所採用的相似度計算方式也不一樣。
連續型數值（如區間型、比率型）採餘弦（cosine）方式來計算相似度，二元型 數值（如名目型）採 SSOKAL&MICHENER（Choi, Cha, & Tappert, 2010）或稱 Matching coefficient（Chay, Lee, Lee, Oon, & Ling, 2010），也是著名統計軟體 IBM SPSS 裡 的簡單配對（simple matching）法12。簡單配對指的是為相符者佔總值的比率，
其中，相符和不相符的加權值相等。
二元型資料採公式 2 計算，公式 2 裡的 a、b、c、d 與表 5 的 a、b、c、d 定 義是一樣的。表 5 裡，i 與 j 是兩個不同的實例，1 表示有，0 表示沒有，利用不 同計算方式來計算兩個不同實例之間的相似度。
𝑆𝑆𝑂𝐾𝐴𝐿&𝑀𝐼𝐶𝐻𝐸𝑁𝐸𝑅 = 𝑎 + d 𝑎 + 𝑏 + 𝑐 + 𝑑
公式 2 二元型相似度計算
表 5 二位元實例 i 與 j 的 OTUs 表達式
j i 1 (Presence) 0 (Absence) Sum 1 (Presence) a = i ∙ j b = 𝑖̅ ∙ 𝑗 a + b 0 (Absence) c = i ∙ 𝑗̅ d = 𝑖̅ ∙ 𝑗̅ c + d
Sum a + c b + d n = a + b + c + d
資料來源：Choi 等人（2010）
本論文利用統計軟體 IBM SPSS 的工具來協助計算，圖 18 與圖 19 是 IBM SPSS 的操作畫面。圖 11 裡，選擇 between cases 與 similarities 裡的簡單配對。
12 IBM SPSS 簡單配對說明網頁，
http://pic.dhe.ibm.com/infocenter/spssstat/v21r0m0/index.jsp?topic=%2Fcom.ibm.spss.statistics.help%
2Falg_proximities_simple.htm。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
32
圖 18 統計軟體 IBM SPSS 相似度計算參數設置
圖 19 統計軟體 IBM SPSS 相似度計算方式參數設置
連續型資料採餘弦方式計算（見公式 3），A 與 B 是兩個不同的實例，n 表 示維度。
cosine(𝜃) = 𝐴𝐵
‖𝐴‖‖𝐵‖= ∑𝑛 𝐴𝑖𝐵𝑖 𝑖=1
√∑𝑛𝑖=1(𝐴𝑖)2√∑𝑛𝑖=1(𝐵𝑖)2 公式 3 餘弦相似度
影像有兩種資料可用來計算相似度，一是二元型資料（標籤資料轉置成一維 矩陣），另一是連續型資料（RGB 轉 HSV 的資料轉置成一維矩陣），本論文分別 指派 0.5 的權重，其最後相似度的方式（見公式 4）將被用於影像與影像之間的 相似度。
similarity(𝐴, 𝐵) = 0.5 × 𝑎 + 𝑑
𝑎 + 𝑏 + 𝑐 + 𝑑+ 0.5 × ∑𝑛𝑖=1𝐴𝑖𝐵𝑖
√∑𝑛𝑖=1(𝐴𝑖)2√∑𝑛𝑖=1(𝐵𝑖)2
公式 4 影像 A 與影像 B 的相似度計算
公式 4 的前半段，變數 a 是影像 A 與影像 B 都有的標籤數量，變數 d 是影 像 A 與影像 B 都沒有的標籤數量，變數 c 是影像 A 有而影像 B 沒有的標籤數量，
變數 d 是影像 A 沒有而影像 B 有的標籤數量。公式 4 的後半段，變數 n 是影像
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
33
區塊的數量，以本論文為例，n 會被設置為 100。
資料庫，儲存與使用者有關的輪廓資料、評估資料與回饋資料，這些資料可 以幫助系統過濾與提供受測者正確的資訊。
初始化程序，系統在一開始便參考設計人員所設計的四種賀卡版型與受測者 的輪廓資料（賀卡色彩與壽星生肖）來產生最初的六個方案。
重組機制程序，在受測者完成方案的評分後，系統對方案進行天擇、交配與 突變處理。天擇的方案處理採菁英法與競賽法兩種模式，菁英法強迫在每一代的 演化中保留適應值最高的方案至下一代，避免沒有被挑選到而消失。競賽法從族 群裡隨機挑選二個方案，然後將適應值較高的方案送至交配池中，重複的挑選、
競賽，直到交配池中的方案個數與族群大小相同。交配採單點交配，其操作概念 是隨機在兩個染色體（A、B）中挑一個切割點，將 A 的前半段與 B 的後半段結 合（染色體 C），將 B 的前半段與 A 的後半段結合（染色體 D），然後染色體 C 與染色體 D 用來取代原本的染色體 A 與染色體 B（見圖 20）。突變通常是依據 一個很小的機率值來讓染色體中的某個基因反轉，例如 0 變 1 或 1 變 0。交配或 是突變的進行需要滿足交配率（rate）與突變率，交配率指的是從交配池裡取出 進行交配的染色體總數與所有交配池裡染色體數量的比率，例如，族群大小為 100，0.8 的交配率的意思是有 80 個染色體需要進行交配。交配率與突變率的設 置無特定準則（Lee & Cho, 1999; Masui, 1992），視研究者的需求而定。
圖 20 染色體單點交配
DIY 之影像拖曳程序，受測者可以請求系統開放影像拖曳功能，如此一來，
受測者可以透過影像的拖曳來降低方案與內心方案之間的設計距離。影像的拖曳 分成賀卡內與賀卡外兩種拖曳模式，賀卡內的拖曳就是影像在單一賀卡內進行移 動，賀卡外的拖曳指的是賀卡內的影像拖曳到另外一張賀卡裡。因為每張賀卡的 影像數量是被限定的（每張賀卡都只能有 18 個影像），因此當賀卡 1 的影像移到 賀卡 2 時，賀卡 2 的影像會自動移到賀卡 1 裡（見圖 21）。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
34
圖 21 賀卡外的影像拖曳模式
DIY 之回顧程序，系統保留受測者過去高於門檻的賀卡設計內容，受測者可 以回顧，讓整體設計主題不脫離原有設計概念。
DIY 之取代程序，受測者可以將過去的賀卡設計內容取代目前設計區內的任 一張賀卡，修正系統重組機制的演化方向。
DIY 之影像改變程序，突變機制，存在多樣性與創新。突變顧名思義是讓原 有內容進行差異性大的改變，然而，差異性過大的內容可能造成演化方向再次失 焦。所以，系統提供十一種影像改變幅度，從最小的 0%（也就是不改變）幅度 到最大的 100%幅度，讓受測者可以指定賀卡內的影像進行改變。如此一來，如 果受測者改變後發現原有影像比較合適於設計主題時，就可以選擇 0%的幅度回 到原影像。要使用此功能，受測者需要先開放拖曳功能，如此一來，才能指定影 像進行改變。系統收到受測者的請求後，會依據影像的變更幅度（相似度）的值 來進行搜尋（見圖 22），搜尋後再進行指定影像的改變。
圖 22 系統以受測者提供的影像與改變幅度進行搜尋
DIY 之框選擇、賀詞填入程序，賀卡設計分為封面與內頁，內頁的部分著重 於框選擇與賀詞填入。框選擇的部分，系統提供近 50 種內框供受測者選擇。賀 詞填入部分，受測者可以自行設計賀詞內容（字型的大小、色彩、字體與位置）。
下一章節將說明本論文的實驗設計過程。
‧
（usefulness）與易用性（ease of use）的認知（Davis, 1989）。系統的開發環境、
系統的參數設計與實驗內容介紹如下。
壹、系統建置硬體與軟體設備描述
硬體設備，CPU 為 Intel Pentium CPU G840 8.80GHz、記憶體是 8G、750G SATA3 大容量硬碟、NVIDIA GeForce GT610 2GB 獨立顯示卡。
軟體設備，作業系統為 Windows 7 Home Premium 64bit、以 Adobe Flash Professional CS6 軟體開發系統、以 xampp v3.2.1 套件建構網路伺服器環境。
壹、實驗對象與實驗期間