國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 57 以 Facebook 登入按鈕觸發後續流程的示意圖 資料來源：http://chinese.engadget.com/2013/08/23/facebook-login/
5.2 研究貢獻
原型在Iterative Design Process 中是不可或缺的部分。對於設計師而言，原 型必須得具備快速地設計與修改的特性，才能有效與原型測試與資料分析階段配 合；原型設計的發展週期通常是從紙面原型逐步轉化到互動式原型，並各自有其 適用的設計時期與流程，但是在視覺與互動設計的轉化過程卻是相當耗時費工。
因此，本研究之動機為簡化設計師對原型的設計流程，降低視覺與互動設計的溝 通與磨合期，將原型設計的過程化繁為簡，改善原型的設計體驗，進而加速 Iterative Design Process 的循環。
本研究從初步探討時的設計師觀察與訪談結果，以及原型設計的工具與相關 文獻中得知，基於快速與易於設計的因素，設計師偏好使用紙筆繪製草圖並製作 原型。因此，本研究提出的系統原型「Xketch」是一款在 iPad 上使用的線稿式 原型設計工具，繪製線稿圖樣作為筆畫指令即可生成元件篩選清單，挑選元件類
‧
型後可設定其屬性、樣式與行為，以及利用Storyboard 模式檢視各個頁面與原型 使用流程，並可實際測試設計完的互動式原型。為了驗證第一版Xketch 設計的 的流程會從紙面原型開始再逐步轉化成互動式原型，Xketch 在數位化工具上延 續了紙面原型的線稿式設計手法，直接繪製線稿圖樣即可生成元件，提供元件常 用的設計樣式與頁面連結的功能，設計完成後即可做初步的互動式原型測試；藉 此降低原型開發的次數，改善原型的設計體驗。
目前Xketch 已具備原型設計階段所需要的基本功能，但仍需進行多次的迭 代設計流程優化各項功能。例如調整Lo-fi 與 Hi-fi 的樣式與功能切換，確保能做 一次的設計即可做出不同的時期與測試目的之原型。然而，Iterative Design Process 尚有原型測試與資料分析兩個階段，如何將設計完的原型發送給使用者 測試，測試的同時紀錄使用者操作行為與think-aloud 口述資料，並彙整每次的 原型版本與測試資料。本研究的願景為創造一個Iterative Design Process 流程適 用的整合性平台與服務，讓有志於開發App 的人都能夠輕鬆的做出原型，快速 評估App 的設計概念與可用性，降低團隊溝通的磨合期，創造更好的設計體驗。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
‧
Carolyn Snyder. (2003). Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. Morgan Kaufmann.
Coyette, A., Faulkner, S., Kolp, M., Limbourg, Q., & Vanderdonckt, J. (2004). SketchiXML : Towards a Multi-Agent Design Tool for Sketching User Interfaces Based on U SI XML. TAMODIA 2004.
Egger, F. N. (2000). Lo-Fi vs. Hi-Fi Prototyping: how real does the real thing have to be? Retrieved October 2, 2014, from
http://www.telono.com/en/articles/lo-fi-vs-hi-fi-prototyping-how-real-does-the-real-thing-have-to -be/
Gould, J., & Lewis, C. (1985). Designing for usability: key principles and what designers think.
Communications of the ACM, 28(3), 300–311.
Herbsleb, J., & Kuwana, E. (1993). Preserving knowledge in design projects: What designers need to know. CHI ’93 & INTERACT '93, 7–14.
iOS Human Interface Guidelines: Designing for iOS. (2014). Retrieved October 16, 2014, from https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/
Landay, J., & Myers, B. (1995). Interactive sketching for the early stages of user interface design.
CHI ’95. Retrieved from http://dl.acm.org/citation.cfm?id=223910
Newman, M., Lin, J., Hong, J., & Landay, J. (2003). DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice. CHI ’13, 18(3), 313–320.
doi:10.1207/S15327051HCI1803_3
Rettig, M. (1994). Prototyping for tiny fingers. Communications of the ACM.
Rudd, J., Stern, K., & Isensee, S. (1996). Low vs. high-fidelity prototyping debate. Interactions.
Segura, V., Barbosa, S., & Simões, F. (2012). UISKEI: a sketch-based prototyping tool for defining and evaluating user interface behavior. AVI ’12, 18–25.
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
Vatavu, R., Anthony, L., & Wobbrock, J. (2012). Gestures as point clouds: a $ P recognizer for user interface prototypes. Proceedings of the 14th ACM …, 0–7. doi:10.1145/2388676.2388732
Vinod Goel. (1995). Sketches of Thought. Cambridge, MA: The MIT Press.
Walker, M., Takayama, L., & Landay, J. a. (2002). High-Fidelity or Low-Fidelity, Paper or Computer?
Choosing Attributes when Testing Web Prototypes. HFES ’02, 46(5), 661–665.
doi:10.1177/154193120204600513
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
附錄一 實驗流程說明
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
‧
‧
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
非常不同意 1 2 3 4 5 非常同意 辨識率
非常不同意 1 2 3 4 5 非常同意
Xketch 的整體性評估
1. Xketch 整體操作介面的視覺回饋是否清楚？
非常不同意 1 2 3 4 5 非常同意 2. Xketch 整體使用起來相當流暢
非常不同意 1 2 3 4 5 非常同意
3. Xketch 製作的互動原型（Interactive Prototype）是否符合你的期待？
非常不同意 1 2 3 4 5 非常同意
4. Xketch 是否能幫助你快速製作互動原型（Interactive Prototype）？
非常不同意 1 2 3 4 5 非常同意
5. 以 Storyboard 模式建立頁面間的連結是很直覺的操作方式 非常不同意 1 2 3 4 5 非常同意
6. Xketch 的整體滿意度
非常不同意 1 2 3 4 5 非常同意
‧
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
對於頁面連結的方式偏好：
1. 從編輯區的 Action 列表選擇 2. 從 Storyboard 用拉線方式選擇
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
Xketch 最令您感到滿意的設計或概念？
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
Xketch 操作起來仍有待改進的部分？
_____________________________________________________________________
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
_____________________________________________________________________
_____________________________________________________________________
團隊合作時通常會使用哪些雲端工具做檔案與文件的共享？
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
對於Xketch 中的介面與互動設計的看法？
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
期望未來加入的Design Pattern？
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________