3.2 系統原型設計
3.2.3 介面與互動設計
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
表 8 進階元件的筆畫指令列表（本研究整理）
元件類型 圖樣 備註
TableView
在第一版Xketch 僅支 援元件的生成，並無提
供太多可調整的參數。
WebView
MapView
Picker
3.2.3 介面與互動設計
從過去的文獻探討中發現，設計師認為使用筆畫圖樣作為生成元件的指令，
以及透過Storyboard 模式設定原型的使用流程，都是相當直覺的功能設計；本研 究也從案例探討與設計師過去相關的原型製作工具使用經驗中得知，什麼樣的介
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
面與互動設計的接受度較佳。Xketch 將編輯區介面分為三個部分：左側的頁面 元件列表、中間的筆畫指令繪製區以及右側的元件設定（屬性、行為、類型）列 表；若透過初學者模式的筆畫指令生成之元件會優先顯示可切換類型的列表，而 專家模式的筆畫指令生成之元件會直接顯示屬性列表。
每個元件都有其特有的屬性，但在原型設計階段時通常不會做太精細的設定，
因此Xketch 目前僅提供一些常用的屬性或樣式；本研究根據屬性內容形式的不 同，設計較適用於觸控螢幕的互動方式。例如：利用上下滑動的方式控制數字的 變化、狀態切換的開關（0/1）、透過動態預覽圖選擇元件的樣式…⋯…⋯等。
圖 33 編輯區－可切換元件列表（本研究整理）
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 34 編輯區－元件屬性列表（本研究整理）
圖 35 編輯區－行為設定列表（本研究整理）
‧
師檢查原型設計的完整性。設計師在點選元件後可以利用編輯區的行為（Action）列表，設定要連結的頁面與動畫效果；也可在編輯區使用Pinch 手勢切換至 Storyboard 模式（圖 36）；在此模式下可以透過長按（Long Pressed）移動頁面
（圖37），在 A 頁面觸碰並拖移至 B 頁面後放開，即可選擇要透過 A 頁面的哪 個元件會觸發轉頁至B 頁面（圖 38），在兩頁面間的連線間畫條垂直線即可取 消連結（0.5 秒內）（圖 39）。
圖 36 透過 Pinch 手勢切換至 Storyboard 模式（本研究整理）
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 37 頁面浮起代表可移動該頁面（本研究整理）
圖 38 畫線連結頁面與選擇觸發元件與動畫（本研究整理）
圖 39 取消頁面連結的示意圖（本研究整理）
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y 3.2.4 小結
本研究擬透過第一版Xketch 的使用者測試，收集設計師對於操作介面與互 動設計的回饋，並於下一個章節對實驗結果進行討論與分析。本次實驗目的為：
1. 筆畫指令的設計是否容易學習？
2. 筆畫指令是否容易記憶的？
3. Xketch 整體的介面與互動設計是否適合？
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
第4章 系統評估
第一版Xketch 以支援原型設計階段為主，故將評估重點放於探討筆畫指令 的設計規則，以及Xketch 整體介面與互動方式是否符合設計師的期望。本章第 一節為實驗流程說明，定義過程中各個階段欲觀察的重點與進行方式。第二節為 受測者資訊說明，將受測者分為初學者與專家兩個族群。第三節論述實驗結果與 討論，以及在實驗過程中額外發現到的洞見。第四節說明Xketch 的整體性評估 與假設驗證結果。
本研究擬透過問卷、訪談與使用者操作記錄，搭配實驗過程的觀察結果做分 析，並預期得到的受測回饋應符合以下幾點假設：
1. 筆畫指令生成的元件類型不正確，可以透過元件列表快速地選取修正。
2. 設計師經過一定時間的練習，將能使用筆畫指令隨著腦海中的構圖完成 頁面設計。
3. 設計師經過一定時間的練習，將會偏好使用專家模式的筆畫指令。
4. 設計師要建立頁面連結時，將會偏好在 Storyboard 模式下設定。