國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y 第三節 Xketch 的簡介與分析
因為本研究創作於 Xketch 之上，應保持互動設計的一貫性，於是在第三節 做 Xketch 簡單的介紹與分析。
一、簡介 Xketch
Xketch 是一款在 iPad 上針對行動應用的線稿式原型設計工具(徐嘉駿, 2015) 。系統具備四大工作區：專案管理、流程圖、原型設計、測試，使用流程 如圖 36 所示。選擇專案後鳥瞰完整流程圖，點擊欲編輯頁面進行該頁原型設計，
設計過程中隨時可切換至測試工作區以進行迭代原型設計。
圖 36 Xketch 系統架構圖（本研究整理）
1. 線稿式設計
線稿式設計的概念最早由 James A. Landay (1995) 提出，結合設計師手繪發 想的習慣以及數位工具易於調整和版本管理的優勢，在後續的研究中也證實線稿 式設計不限於某種表達方式，設計師可以嘗試各式設計的可能性，而手繪與數位 工具也具有一定的互補性 (Coyette, Faulkner, Kolp, Limbourg, & Vanderdonckt,
‧
Xketch 採線稿式設計的概念，於編輯區繪製筆畫指令後，系統會依形狀、
位置、大小猜測可能元件，並在一旁顯示元件推薦清單提供其他可能元件以供設 計師替換，而筆畫指令的位置、大小直接決定元件的佈局。
圖 37 Xketch 生成元件流程（本研究整理）
3. Xketch 推測元件的方式
透過初步研究發現設計師會使用特定線稿代表元件，並以此設計筆畫指令，
Navigation bar 、Tab bar、Slider、Label、Button、Line
Image、TextView、Shape、Textfield、Button
代表字 ：Table 、 ：Map 、 ：Web
TextView
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
筆觸的位置與大小會影響元件的推測清單，利淑惠 (2017) 根據 iOS 官方提 供的使用者介面設計規範（HIG, Human-Interface Guideline），依照元件佈局的限 制，將元件推測清單中官方不建議使用的元件刪除，一來提升猜測準確率，二來 盡可能避免設計師違背介面設計的規範。
圖 38 Xketch+ 依佈局提供推薦清單的規則示意圖 (利淑惠, 2017)
Vin 的研究中提到，在已產生元件上繪製筆畫指令，其相對位置可能涵蓋了 父元件與子元件的關係 (Vin et al., 2012)，依此參考 HIG 關於父子元件的配置規範，
設計子元件筆畫指令。
表 4 Xketch+表格子元件筆畫規則表 (利淑惠, 2017)
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
4. Xketch 修改元件與建立連結的方式
Xketch 依據筆畫指令生成對應尺寸的元件，元件可以透過手動調整大小、
位置與樣式，並且能替元件建立頁面連結，進而模擬頁面切換，如圖 39 所示。元 件可被操作的行為，如可調整屬性（Property）以及可否進行頁面轉換的行為
（Action），皆是根據 Apple App Framework UIKit 所規範的元件互動性做設計。
圖 39 線稿式數位工具的使用流程（本研究整理）
Xketch 將屬性（Property）與頁面轉換（Action）的選項收納於編輯區的左 方列表，透過點擊圖示展開設定對話框，主要是方便設計師在右手拿筆的前提下，
也可同時使用左手修改樣式以及設定轉換頁面。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
二、小結
單頁互動歷程有有三項要素：觸發因素、介面型態、離開方式。在 Xketch 上點擊元件產生的觸發事件，可以透過元件行為（Action）來設定。在 Xketch 上 能被設定行為（Action）的元件整理至表 5：
表 5 可設定行為（Action）的元件列表
元件圖示 元件名稱
Navigation bar item 位在導覽列上的按鈕
Button 按鈕
Textfield 可輸入文字的對話框
Table 表格
Image 圖片
Xketch 以繪製線稿圖案的方式生成元件，速度快、且適合初期發想階段。
因此要在 Xketch 製作單頁互動，比起提供各式各樣的單頁互動模板，更偏好於生 成空白的單頁互動介面，讓使用者能自由地在空白介面中做原型發想。