學術產出-Theses
Article View/Open
Publication Export
-
題名 Xketch+以線稿式原型設計工具加速 行動應用程式之設計流程
Xketch+: Accelerating Mobile App Design Process by Using a Sketch-Based Prototyping Tool作者 利淑惠
Li, Shu-Hui貢獻者 余能豪<br>陳百齡
Yu, Neng-Hao<br>Chen, Pai-Lin
利淑惠
Li, Shu-Hui關鍵詞 行動應用程式
原型製作
開發工具
線稿式設計
迭代設計
介面設計模式
使用者經驗
Mobile app
Prototyping
Toolkits
Sketch-Based
Iterative design process
UI pattern
User experience日期 2017 上傳時間 9-Apr-2018 16:06:19 (UTC+8) 摘要 使用者體驗在行動應用 app 開發中扮演相當重要的角色。欲達到較佳的使 用者體驗，設計師常利用原型進行測試以收集使用者回饋，並根據回饋改善原 型再進行多次測試，反覆更迭的過程稱之為迭代設計。本創作分析整理迭代設 計流程中設計師常用之工具，發現從低擬真至高擬真之原型發展階段雖有不同 的工具，卻需要設計師花費許多時間在軟體操作上，無法讓設計師流暢且快速 地將腦中思考的設計繪製為數位版本，再者，各階段所使用之工具彼此並不相 容，設計師也需耗費額外的成本轉換各階段的產出。本創作提出一套提升原型建置速度，促進迭代過程的線稿式原型設計 工具「Xketch+」。在原型設計階段，設計師可利用紙面原型的繪製經驗，以繪 製筆劃指令生成元件並設定頁面、元件間的互動行為。此外，本創作導入行動 介面設計模式，設計師能利用已具備共識的之介面設計模式做為範本，進行自 定義修改，滿足設計任務，快速完成原型製作，儘早進入測試及修正的流程， 提升原型迭代速度，設計出更符合使用者需求的行動應用程式。 參考文獻 Alexander, C. (1978). The timeless way of building (24th ed.). New York: Oxford University Press, USA.appShopper. (2015a). IPad apps, iPhone apps, deals and discovery at app shopper - popular recent changes for iOS/. Retrieved October 21, 2016, from http://appshopper.com/appShopper. (2015b). IPad apps, iPhone apps, deals and discovery at app shopper - popular recent changes for iOS/. Retrieved November 9, 2016, from http://appshopper.com/Ariel. (2015, January 13). App Stores growth accelerates in 2014. Retrieved October 21, 2016, from http://blog.appfigures.com/app-stores-growth-accelerates-in-2014/Bank, C., & Zuberi, W. (2014). Mobile UI Design Patterns. UXPin.Cerejo, L. (2010, June 16). Design better and faster with rapid Prototyping – smashing magazine. Retrieved September 30, 2016, from smashin gmagazine, https://www.smashingmagazine.com/2010/06/design-better-faster-with-rapid-prototyping/Engelberg, D., & Seffah, A. (2002). A framework for rapid mid-fidelity Prototyping of web sites. In Usability (pp. 203–215). doi:10.1007/978-0-387-35610-5_14Landay, J. A., & Myers, B. A. (1995). Interactive sketching for the early stages of user interface design. Proceedings of the SIGCHI conference on Human factors in computing systems - CHI ’95. doi:10.1145/223904.223910Lin, J., & Landay, J. A. (2008a). Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces. . doi:10.1145/1357054.1357260Lin, J., & Landay, J. A. (2008b). Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces. Proceeding of the twenty-sixth annual CHI conference on Human factors in computing systems - CHI ’08. doi:10.1145/1357054.1357260Neil, T. (2014). Mobile design pattern gallery: Ui patterns for mobile applications (2nd ed.). United States: O’Reilly Media, Inc, Usa.Rettig, M. (1994). Prototyping for tiny fingers. Communications of the ACM, 37(4), 21–27. doi:10.1145/175276.175288Rudd, J., Stern, K., & Isensee, S. (1996). Low vs. High-fidelity prototyping debate. interactions, 3(1), 76–85. doi:10.1145/223500.223514Segura, V. C. V. B., Barbosa, S. D. J., & Simões, F. P. (2012a). UISKEI. Proceedings of the International Working Conference on Advanced Visual Interfaces - AVI ’12. doi:10.1145/2254556.2254564Segura, V. C. V. B., Barbosa, S. D. J., & Simões, F. P. (2012b). UISKEI: A Sketch-based Prototyping Tool for Defining and Evaluating User Interface Behavior. Proceedings of the International Working Conference on Advanced Visual Interfaces - AVI ’12. doi:10.1145/2254556.2254564Snyder, C. A. (2003). Paper Prototyping: The fast and easy way to design and refine user interfaces. San Diego, CA: Morgan Kaufmann Publishers In.Treder, M. (2014, April 11). Wireframes vs. Prototypes: What’s the difference? Retrieved October 1, 2016, from User Experience (UX), http://sixrevisions.com/user-experience-ux/wireframes-vs-prototypes-difference/Vatavu, R.-D., Anthony, L., & Wobbrock, J. O. (2012). Gestures as point clouds. Proceedings of the 14th ACM international conference on Multimodal interaction - ICMI ’12. doi:10.1145/2388676.2388732Yahoo design pattern library. Retrieved October 11, 2016, from https://developer.yahoo.com/ypatterns/徐嘉駿. (2014). Xketch - 線稿式原型設計工具於行動應用開發之研究。國立政治大學數位內容碩士學位學程碩士論文。 描述 碩士
國立政治大學
數位內容碩士學位學程
103462005資料來源 http://thesis.lib.nccu.edu.tw/record/#G1034620052 資料類型 thesis dc.contributor.advisor 余能豪<br>陳百齡 zh_TW dc.contributor.advisor Yu, Neng-Hao<br>Chen, Pai-Lin en_US dc.contributor.author (Authors) 利淑惠 zh_TW dc.contributor.author (Authors) Li, Shu-Hui en_US dc.creator (作者) 利淑惠 zh_TW dc.creator (作者) Li, Shu-Hui en_US dc.date (日期) 2017 en_US dc.date.accessioned 9-Apr-2018 16:06:19 (UTC+8) - dc.date.available 9-Apr-2018 16:06:19 (UTC+8) - dc.date.issued (上傳時間) 9-Apr-2018 16:06:19 (UTC+8) - dc.identifier (Other Identifiers) G1034620052 en_US dc.identifier.uri (URI) http://nccur.lib.nccu.edu.tw/handle/140.119/116795 - dc.description (描述) 碩士 zh_TW dc.description (描述) 國立政治大學 zh_TW dc.description (描述) 數位內容碩士學位學程 zh_TW dc.description (描述) 103462005 zh_TW dc.description.abstract (摘要) 使用者體驗在行動應用 app 開發中扮演相當重要的角色。欲達到較佳的使 用者體驗，設計師常利用原型進行測試以收集使用者回饋，並根據回饋改善原 型再進行多次測試，反覆更迭的過程稱之為迭代設計。本創作分析整理迭代設 計流程中設計師常用之工具，發現從低擬真至高擬真之原型發展階段雖有不同 的工具，卻需要設計師花費許多時間在軟體操作上，無法讓設計師流暢且快速 地將腦中思考的設計繪製為數位版本，再者，各階段所使用之工具彼此並不相 容，設計師也需耗費額外的成本轉換各階段的產出。本創作提出一套提升原型建置速度，促進迭代過程的線稿式原型設計 工具「Xketch+」。在原型設計階段，設計師可利用紙面原型的繪製經驗，以繪 製筆劃指令生成元件並設定頁面、元件間的互動行為。此外，本創作導入行動 介面設計模式，設計師能利用已具備共識的之介面設計模式做為範本，進行自 定義修改，滿足設計任務，快速完成原型製作，儘早進入測試及修正的流程， 提升原型迭代速度，設計出更符合使用者需求的行動應用程式。 zh_TW dc.description.tableofcontents 摘要 i目錄 ii表目錄 vi圖目錄 vii第一章 緒論 1第一節 創作背景 1第二節 原型（Prototypes） 2低擬真原型（Low-fidelity Prototype, Lo-fi Prototype） 3中擬真原型（Mid-fidelity Prototype, Mi-fi Prototype） 4高擬真原型（High-fidelity Prototype, Hi-fi Prototype） 5第三節 先期專家訪談 8第四節 創作目的 13第二章 相關案例探討 15第一節 元件產生式原型設計工具 15Balsamiq 15Axure RP、Cacoo 17Blueprint 18Proto.io, UXPin 19小結 20第二節 影像聯結式原型設計工具 21介面設計工具 21POP 23Concept.ly, inVision 24Flinto 25Adobe Experience Design 25小結 26第三節 線稿式設計工具 27SILK 28UISKEI 30Xketch 31小結 32第四節 介面設計庫 34Yahoo Design Pattern Library 34Mobile Design Pattern Gallery 35UXPin 36Damask 37小結 38第三章 Xketch+ 39第一節 概念說明 39第二節 系統及介面 41第二節 擬真度轉換 44Lo-fi階段 46Hi-fi階段 47第三節 筆劃指令 49基礎元件 49複合元件（一）表格 57複合元件（二）地圖 60複合元件（三）彈出控制項 62自定義彈出視窗（Custom Pop View） 62操作列表（Action Sheet） 63通知（Alert） 64選擇器（Picker） 65第四節 模式庫 67流程模式（Flow Pattern） 68導覽模式（Navigation Pattern） 72列表模式（List Pattern） 73第五節 小結 76第四章 結論與討論 77第一節 設計建議 77筆劃與元件連結性 78筆劃擴充 79具備方向性的筆劃辨識 79繪製簡易圖標 80刪除筆劃 80第二節 限制 82元件及樣式 82筆畫彈性 83第三節 未來展望 84流程模式的增刪與分享 84測試與分析 84自由手繪 85參考文獻 86 zh_TW dc.format.extent 33656301 bytes - dc.format.mimetype application/pdf - dc.source.uri (資料來源) http://thesis.lib.nccu.edu.tw/record/#G1034620052 en_US dc.subject (關鍵詞) 行動應用程式 zh_TW dc.subject (關鍵詞) 原型製作 zh_TW dc.subject (關鍵詞) 開發工具 zh_TW dc.subject (關鍵詞) 線稿式設計 zh_TW dc.subject (關鍵詞) 迭代設計 zh_TW dc.subject (關鍵詞) 介面設計模式 zh_TW dc.subject (關鍵詞) 使用者經驗 zh_TW dc.subject (關鍵詞) Mobile app en_US dc.subject (關鍵詞) Prototyping en_US dc.subject (關鍵詞) Toolkits en_US dc.subject (關鍵詞) Sketch-Based en_US dc.subject (關鍵詞) Iterative design process en_US dc.subject (關鍵詞) UI pattern en_US dc.subject (關鍵詞) User experience en_US dc.title (題名) Xketch+以線稿式原型設計工具加速 行動應用程式之設計流程 zh_TW dc.title (題名) Xketch+: Accelerating Mobile App Design Process by Using a Sketch-Based Prototyping Tool en_US dc.type (資料類型) thesis en_US dc.relation.reference (參考文獻) Alexander, C. (1978). The timeless way of building (24th ed.). New York: Oxford University Press, USA.appShopper. (2015a). IPad apps, iPhone apps, deals and discovery at app shopper - popular recent changes for iOS/. Retrieved October 21, 2016, from http://appshopper.com/appShopper. (2015b). IPad apps, iPhone apps, deals and discovery at app shopper - popular recent changes for iOS/. Retrieved November 9, 2016, from http://appshopper.com/Ariel. (2015, January 13). App Stores growth accelerates in 2014. Retrieved October 21, 2016, from http://blog.appfigures.com/app-stores-growth-accelerates-in-2014/Bank, C., & Zuberi, W. (2014). Mobile UI Design Patterns. UXPin.Cerejo, L. (2010, June 16). Design better and faster with rapid Prototyping – smashing magazine. Retrieved September 30, 2016, from smashin gmagazine, https://www.smashingmagazine.com/2010/06/design-better-faster-with-rapid-prototyping/Engelberg, D., & Seffah, A. (2002). A framework for rapid mid-fidelity Prototyping of web sites. In Usability (pp. 203–215). doi:10.1007/978-0-387-35610-5_14Landay, J. A., & Myers, B. A. (1995). Interactive sketching for the early stages of user interface design. Proceedings of the SIGCHI conference on Human factors in computing systems - CHI ’95. doi:10.1145/223904.223910Lin, J., & Landay, J. A. (2008a). Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces. . doi:10.1145/1357054.1357260Lin, J., & Landay, J. A. (2008b). Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces. Proceeding of the twenty-sixth annual CHI conference on Human factors in computing systems - CHI ’08. doi:10.1145/1357054.1357260Neil, T. (2014). Mobile design pattern gallery: Ui patterns for mobile applications (2nd ed.). United States: O’Reilly Media, Inc, Usa.Rettig, M. (1994). Prototyping for tiny fingers. Communications of the ACM, 37(4), 21–27. doi:10.1145/175276.175288Rudd, J., Stern, K., & Isensee, S. (1996). Low vs. High-fidelity prototyping debate. interactions, 3(1), 76–85. doi:10.1145/223500.223514Segura, V. C. V. B., Barbosa, S. D. J., & Simões, F. P. (2012a). UISKEI. Proceedings of the International Working Conference on Advanced Visual Interfaces - AVI ’12. doi:10.1145/2254556.2254564Segura, V. C. V. B., Barbosa, S. D. J., & Simões, F. P. (2012b). UISKEI: A Sketch-based Prototyping Tool for Defining and Evaluating User Interface Behavior. Proceedings of the International Working Conference on Advanced Visual Interfaces - AVI ’12. doi:10.1145/2254556.2254564Snyder, C. A. (2003). Paper Prototyping: The fast and easy way to design and refine user interfaces. San Diego, CA: Morgan Kaufmann Publishers In.Treder, M. (2014, April 11). Wireframes vs. Prototypes: What’s the difference? Retrieved October 1, 2016, from User Experience (UX), http://sixrevisions.com/user-experience-ux/wireframes-vs-prototypes-difference/Vatavu, R.-D., Anthony, L., & Wobbrock, J. O. (2012). Gestures as point clouds. Proceedings of the 14th ACM international conference on Multimodal interaction - ICMI ’12. doi:10.1145/2388676.2388732Yahoo design pattern library. Retrieved October 11, 2016, from https://developer.yahoo.com/ypatterns/徐嘉駿. (2014). Xketch - 線稿式原型設計工具於行動應用開發之研究。國立政治大學數位內容碩士學位學程碩士論文。 zh_TW
