系統及介面

根據初步研究及文獻探討可得知設計師慣用紙筆及線段、矩形進行原型繪製，並認為 以畫筆產生元件相當直覺易懂的設計，因此本研究基於Xketch的設計概念：藉由線段、矩 形、部分元件的字首為筆畫基礎，將iOS官方提供的使用者介面設計規範（HIG,

Human-Interface Guideline）為元件產生規則，對筆劃所產生的元件進一步分類，讓設計師 可於iPad上以筆畫產生元件的互動模式，設計iPhone行動應用程式的原型。

本研究之原型系統Xketch的檔案結構由大至小為：呈現所有專案的專案列表頁面、每 一專案下有呈現所有頁面的Storyboard，於Storyboard點擊頁面後則進入該頁的編輯頁面

（圖32）。Xketch擬以上述專案結構之由上而下（Top-down）的基礎，以具備指向性的轉 場動畫，如：Slide以及圖標（icon）所提供的預設用途（Affordance），使設計師初次使用 即可流暢的理解互動模，建構使用Xketch的心智模式，降低初次使用的學習門檻。

圖33 Xketch+系統架構圖。（本研究整理）

圖34 Xketch+專案列表頁面。以左側加號新增專案。（本研究整理）

圖35 Xketch的Storyboard頁面。

顯示該專案中所有的頁面及其流程，並可利用右上的Menu icon編修專案資訊，以左側加號新增頁面。

（本研究整理）

圖36 Xketch 編輯頁面。中間為畫筆指令繪製區，當指令繪製後，左側的工具區將出現該元件可編輯之屬性、可 操作之功能。右側是預設為收合狀態的圖層列表。（本研究整理）

Xketch的編輯頁面包含四個主要的區域，分別為：

● 上方的導覽控制列

由左至右功能依序為：返回 Storyboard、頁面名稱、新增頁面、開啟iPhone 模擬遮罩、進行原型測試、擬真轉換。此區域的控制項多屬對整個專案進行調整，故 一併放置於上方，與下方的頁面編輯區域有所區隔。

● 左側的工具列

元件產生後，系統會工具列上方顯示可編輯之屬性，點擊後則以工具列下方則 顯示通用的編輯功能，如：複製、貼上、刪除元件等。

● 中間的繪製區

繪製區分別為：可供暫存、繪製使用的灰色背景區域，以及放置實際內容的白 色顯示區域，兩者皆可進行繪製，但原型測試時僅呈現顯示區域。

● 右側的圖層列表

顯示畫面中所有元件的垂直關係，可利用右上角的群組圖示將元件進行群組或 者解散群組。圖層列表中分為浮動圖層（Floating layer）以及固定圖層（Fixed layer

）（圖37）。浮動圖層內的元件顧名思義，該元件將浮於內容之上，不論固定圖層的 內容如何垂直捲動，都將保持在螢幕的相對位置，常見的此類元件有：Navigation bar、Tab bar以及Material design guidelines中的Floating Action Button；固定圖層 即為內容圖層，當內容超過一個畫面可顯示的高度時即可垂直滾動。

圖37 Xketch右側工具列與圖層。（本研究整理）