1. NCCU Academic Hub
  2. Publications
  3. College of Communication
  4. Theses
  5. Item

Publications-Theses

Article View/Open

Publication Export

Google ScholarTM

NCCU Library

Citation Infomation

Related Publications in TAIR

題名 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_14
Landay, 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.223910
Lin, J., & Landay, J. A. (2008a). Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces. . doi:10.1145/1357054.1357260
Lin, 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.1357260
Neil, 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.175288
Rudd, J., Stern, K., & Isensee, S. (1996). Low vs. High-fidelity prototyping debate. interactions, 3(1), 76–85. doi:10.1145/223500.223514
Segura, 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.2254564
Segura, 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.2254564
Snyder, 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.2388732
Yahoo 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-Linen_US
dc.contributor.author (Authors) 利淑惠zh_TW
dc.contributor.author (Authors) Li, Shu-Huien_US
dc.creator (作者) 利淑惠zh_TW
dc.creator (作者) Li, Shu-Huien_US
dc.date (日期) 2017en_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) G1034620052en_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 (描述) 103462005zh_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
第一節 元件產生式原型設計工具 15
Balsamiq 15
Axure RP、Cacoo 17
Blueprint 18
Proto.io, UXPin 19
小結 20
第二節 影像聯結式原型設計工具 21
介面設計工具 21
POP 23
Concept.ly, inVision 24
Flinto 25
Adobe Experience Design 25
小結 26
第三節 線稿式設計工具 27
SILK 28
UISKEI 30
Xketch 31
小結 32
第四節 介面設計庫 34
Yahoo Design Pattern Library 34
Mobile Design Pattern Gallery 35
UXPin 36
Damask 37
小結 38
第三章 Xketch+ 39
第一節 概念說明 39
第二節 系統及介面 41
第二節 擬真度轉換 44
Lo-fi階段 46
Hi-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/#G1034620052en_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 appen_US
dc.subject (關鍵詞) Prototypingen_US
dc.subject (關鍵詞) Toolkitsen_US
dc.subject (關鍵詞) Sketch-Baseden_US
dc.subject (關鍵詞) Iterative design processen_US
dc.subject (關鍵詞) UI patternen_US
dc.subject (關鍵詞) User experienceen_US
dc.title (題名) Xketch+以線稿式原型設計工具加速 行動應用程式之設計流程zh_TW
dc.title (題名) Xketch+: Accelerating Mobile App Design Process by Using a Sketch-Based Prototyping Toolen_US
dc.type (資料類型) thesisen_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_14
Landay, 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.223910
Lin, J., & Landay, J. A. (2008a). Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces. . doi:10.1145/1357054.1357260
Lin, 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.1357260
Neil, 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.175288
Rudd, J., Stern, K., & Isensee, S. (1996). Low vs. High-fidelity prototyping debate. interactions, 3(1), 76–85. doi:10.1145/223500.223514
Segura, 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.2254564
Segura, 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.2254564
Snyder, 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.2388732
Yahoo design pattern library. Retrieved October 11, 2016, from https://developer.yahoo.com/ypatterns/
徐嘉駿. (2014). Xketch - 線稿式原型設計工具於行動應用開發之研究。國立政治大學數位內容碩士學位學程碩士論文。		zh_TW