2.2 App 原型製作的案例探討
2.2.2 元件產生器的原型製作工具案例
Blueprint
Blueprint 是由 Groosoft 團隊在 2010 年所開發，特別針對 iOS 平台設計的原 型製作工具，它提供許多iOS 原生的元件給設計師使用，而元件圖形化的表示法 可幫助設計師更直覺地使用，並以拖曳方式新增至頁面。並可以透過動作（Action）
設定對應的事件或行為，與其他的頁面進行連結，元件的手繪模式可讓設計師做 一些元件額外的設計修改或說明；專案設計完時，可以透過E-mail、DropBox、
iTunes 匯出成 Blueprint 專有格式、PDF 或圖片，若匯出為 Blueprint 時可以透過 另一個App : Blueprint Viewer 進行開啟與進行原型測試，並回報使用心得。而整 個App 最大的特點莫過於提供了頁面之間的架構流程圖，這一功能讓設計師可 以更方便地與開發團隊說明原型的概念與期望的結果。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 24 Blueprint 提供 iOS 元件樣式，並透過 Storyboard 連接各個頁面 資料來源：https://itunes.apple.com/us/app/blueprint-ios-mockup/id405203705?mt=8
Mockups.me Wireframes
Mockups.me Wireframes 是一款將元件用偏手繪風格呈現的原型製作工具，
也因為如此它所提供的元件樣式並不會被行動裝置平台限制，元件的設計原則是 以常用的樣式當作群組元件（Group Component），甚至還有支援到圖表的樣式，
再透過屬性設定元件的文字、數量、條件等…⋯…⋯。
相較於其他元件模式的原型製作工具，它是先選取元件再透過選取範圍的方 式將元件放置到頁面中，並根據選取範圍設定其預設大小；除此之外，其提供了
“Sketch Mode”可辨識使用者繪製的圖樣，產生出對應的元件，其缺點是圖樣 與元件對應關係並不直覺，需要額外記憶這些圖樣，且繪製的位置並不等同元件 產生的位置，使得設計師必須多做一個調整的步驟。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 25 Mockups.me 以 Wireframe 方式呈現，可透過 Stroke Gesture 產生元件 資料來源：https://itunes.apple.com/us/app/mockups.me-wireframes/id473617271?ls=1&mt=8
EzoApp
EZoApp 是中冠資訊與華碩合作開發的一個前端 UI 設計工具，以 jQuery Mobile Component 為基礎，適合開發行動裝置上的行動應用，以純 HTML5 輸出 原型將不受限於行動裝置的作業系統。目前可以透過網路服務JQMdesigner 讓設 計師可以在線上直接以拖曳的方式將元件加入，並同時於右側可以觀看到HTML、
Javascript 和 CSS 的語法已進行進一步的設定，也可透過開發團隊持續在新增額 外元件庫中使用圖表、內嵌YouTube 和 Google Map 等…⋯…⋯。
開發完畢之後可透過EZoApp LiveView 掃描 QRCode 直接在行動裝置上測 試，亦或者輸出HTML 程式碼跟產出 Android APK 檔供人測試。而以 Web 為基 礎架構的狀況下，可以消除非原生的行動應用工程師額外的學習門檻。此外，透 過ASUS 雲端儲存與共用的服務，可以讓開發團隊中共同編輯，更提供了一個管 道讓設計與開發者可以分享自己的作品給他人。但Web 開發的 App 背後仍有一 些困難尚未解決，如硬體支援、網路連線品質要求較高。
‧
Blueprint Mockups.me EzoApp 元件風格 iOS Wireframe jQuery Mobile
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y 2.2.3 小結
從上述的案例探討中可發現影像連結式的原型製作工具比較適用於設計初 期，因為它可以快速將紙面原型轉為互動式原型，同時具備紙面原型的設計彈性，
又能改善紙面原型測試體驗不佳的問題。而元件產生器的原型製作工具則適用於 中後期，因為這個階段比較注重的在於App 的視覺效果與操作體驗，因此會比 較注重在這些細節的設計。這兩種類型的工具都有其各自的使用流程與適用的時 期，本研究希望能將這些過程化繁為簡，同時維持手稿繪製的自由度，並可讓設 計師只需做一次的設計，即可轉換不同階段需求的介面樣式。
‧
集回饋，再評估如何修改原型的步驟，此過程即稱為Iterative Design Process。在 過程中原型是不可或缺的要件，必須根據收集到的使用者回饋，快速地設計與修 改原型，才能加快Iterative Design Process 的循環。因此，本研究決定從改善原 型設計的體驗開始。因此，本研究提出「Xketch」，一個加速 Iterative Design Process 各階段循 環的線稿式原型設計工具，並分別協助原型設計（Prototyping）、測試（Testing）
與分析（Analyzing）三個階段的發展。其核心價值在於：讓設計師能維持線稿 式設計的習慣，但能降低生成元件的複雜度與時間，並透過容易編輯的屬性與轉 換頁面設定，可以快速地製作出互動式原型；其次，可將專案匯出給不同的行動 裝置進行測試並提供良好的互動體驗，同時記錄受測者的操作行為與聲音並上傳