4.2 共同創作平台介面設計
4.2.1 系統介面
國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
29
4.2.1 系統介面 4.2.1.1 系統分區圖
iCAP 的系統介面主要分五個區塊(如圖 14)：
(1) 上方橘色區塊為基本讀取、儲存按鈕，可以讀取故事腳本以及動畫腳本。
(2) 左方紫色區塊為共同創作編輯工具，顯示目前腳本編劇資訊、共同創作紀錄。
(3) 中間藍色區塊為主要的 Story Pool 視覺化呈現區域，顯示整個故事的流程及所 有故事元素節點。
(4) 右方紅色區塊為故事片段節點資訊及動畫腳本設定，顯示資訊為故事片段特有 的 ID、簡短的描述、節點狀態等(章節 4.1 所提到的 Fragment 資訊)。
(5) 最下方黃色區塊顯示系統資訊，如檔案儲存狀態、錯誤訊息及警告提示等。
圖 14. 共創系統功能分區示意圖
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
30
4.2.1.2 Story Pool 故事池節點視覺化呈現
介面色調設計主要為灰階純色系列，畫面中央的故事片段節點、可輸入資訊的區塊、按 鈕的點選變化才會有亮色系的顏色出現，目的是希望讓腳本編劇專注在故事劇情上，不 會被其他按鈕的花色所影響產生混淆。故事節點以顏色區分層級關係：
圖 15. 故事片段點選畫面
(1) 紫色節點：代表整個故事腳本(Graph)的名稱與原作者資訊。
(2) 紅色節點：代表所有故事子路線節點(Move)，點選 Move 可以觀看其包含的所 有故事片段以及其串接方式，如圖 15 中黃色連線即為故事片段之間的連線 (Transition)，連線左方為起始情節，連線右方為目標情節
(3) 綠色節點：為了展示現在畫面所繪製的故事連線屬於哪個 Move，我們將該 Move 的顏色轉變為綠色以區別是否為正在觀看的 Move 節點。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
31
(4) 藍色節點：代表所有故事片段的節點(Fragment)。
(5) 黃色節點：點選到的故事節點顏色會變為黃色，方便腳本編劇快速知道自己正 在觀看的節點是哪一個。腳本編劇可以點選中間區塊中的任何故事節點，介面 最右方的區塊會隨著點選到的故事節點立即更新其內容資訊。
在此區塊(系統介面分區圖中的藍色區塊)中的故事節點皆可以用滑鼠任意拖動擺放，
排列成腳本編劇方便觀看的樣貌。點選介面最上方區塊的按鈕 Function List，畫面會彈 跳出長條型視窗，列出此故事池中所有的故事元素節點，並以按鈕的形式呈現，腳本編 劇可以任意移動該視窗至畫面中任何方便觀看的地方。點選代表該節點的按鈕可以直接 跳至該節點的所在位置並直接觀看其內容，且點選 Move 節點的按鈕後，中央畫面會更 新成只顯示包含在該 Move 下的故事片段，幫助腳本編劇遮蔽不包含在此 Move 之下的 情節，過濾不必要的資訊(如圖 16)。
圖 16. Function List 顯示所有故事池元素，點選可過濾不必要的節點資訊
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
32
4.2.1.3 故事節點編輯工具
介面最左方的區塊(系統介面分區圖中的紫色區塊)可以建立新的故事片段(Create Node)，
新建立或複製的故事片段會直接出現在畫面中間區塊(如圖 17)，腳本編劇可至右方區塊 填入新節點的相關資訊，並將節點加入故事子路線之中。
圖 17. 故事片段新增，左上方會顯示創造該節點的作者
故事節點可以編輯的內容分為兩大項：該故事節點的劇情片段描述資訊(Properties)，
以及該故事節點的動畫腳本設定(Scenario Settings)。點選想要編輯的故事節點後，該節 點顏色變為黃色，並將其內容顯示在右方的資訊區塊(如圖 15 及圖 18 右方的編輯畫面)。
圖 18. 右方區域顯示故事節點 Elope 的動畫腳本設定資訊
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
33
4.2.1.4 故事連線及故事邏輯編輯工具
介面左下方的功能為設定故事子路線內的故事節點之間的轉接連線(Transition)。設定步 驟為：設定要增加連線的子路線(Set Move)設定起始故事片段節點(Set Source)設定 目標故事片段節點(Set Target)確定增加故事轉接連線(Add Transition)。(如圖 19)
圖 19. 設定故事節點之間的轉接連線(Transition)
為確保 Transition 產生的正確性，在設定的過程中系統會自動檢查，並提出警告，
顯示在介面最下方的 Control Tips 提示上：
(1) 必須先設定要加入轉接連線的故事子路線(Move) (2) 起始節點與目標節點不可以為同一個節點
(3) 不小心建立重複的轉接連線(Transition)時
(4) 連線的過程中出現 2 個以上無起始節點的 Transition 時
關於 Transition 的設定方式，除了介面左下方的功能按鈕外，我們也設定了直接以 右鍵設定的功能，讓設定過程更直覺快速。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
34
在故事邏輯(Condition)的編輯部分，我們將 Condition 編輯按鈕設置在故事轉接連線 (Transition)中間，如圖 18 黃色連線中間的紅色長方形按鈕(Condition 編輯按鈕)，點選 Condition 編輯按鈕後會彈出小視窗進行編輯(如圖 20)。
圖 20. 設定故事節點之間的邏輯條件(Condition)
故事邏輯的新增方式為點選 Add New Condition 下方的五種類型按鈕來新增故事邏 輯條件。前三個按鈕為可以增加的條件判斷類型：AND(所有條件判斷需同時成立)、
OR(只需其中一項條件判斷成立)、NOT(條件狀態的反向結果)。後兩個按鈕為條件判斷 的內容型態：Boolean 值或參數數值，若為 Boolean 值型態，變數後方出現 Boolean 值切 換按鈕，若為參數數值型態，變數後方出現填寫區域，供腳本編劇填入數值，修改後系 統會自動檢查並轉存成數字儲存。