跳到主要內容

簡易檢索 / 詳目顯示

研究生: 利淑惠
Li, Shu-Hui
論文名稱: Xketch+以線稿式原型設計工具加速 行動應用程式之設計流程
Xketch+: Accelerating Mobile App Design Process by Using a Sketch-Based Prototyping Tool
指導教授: 余能豪
Yu, Neng-Hao
陳百齡
Chen, Pai-Lin
口試委員: 詹力韋
Chan, Li-Wei
學位類別: 碩士
Master
系所名稱: 傳播學院 - 數位內容碩士學位學程
Digital Content and Technologies
論文出版年: 2017
畢業學年度: 106
語文別: 中文
論文頁數: 88
中文關鍵詞: 行動應用程式原型製作開發工具線稿式設計迭代設計介面設計模式使用者經驗
外文關鍵詞: Mobile app, Prototyping, Toolkits, Sketch-Based, Iterative design process, UI pattern, User experience
相關次數: 點閱:43下載:9
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 使用者體驗在行動應用 app 開發中扮演相當重要的角色。欲達到較佳的使 用者體驗,設計師常利用原型進行測試以收集使用者回饋,並根據回饋改善原 型再進行多次測試,反覆更迭的過程稱之為迭代設計。本創作分析整理迭代設 計流程中設計師常用之工具,發現從低擬真至高擬真之原型發展階段雖有不同 的工具,卻需要設計師花費許多時間在軟體操作上,無法讓設計師流暢且快速 地將腦中思考的設計繪製為數位版本,再者,各階段所使用之工具彼此並不相 容,設計師也需耗費額外的成本轉換各階段的產出。
    本創作提出一套提升原型建置速度,促進迭代過程的線稿式原型設計 工具「Xketch+」。在原型設計階段,設計師可利用紙面原型的繪製經驗,以繪 製筆劃指令生成元件並設定頁面、元件間的互動行為。此外,本創作導入行動 介面設計模式,設計師能利用已具備共識的之介面設計模式做為範本,進行自 定義修改,滿足設計任務,快速完成原型製作,儘早進入測試及修正的流程, 提升原型迭代速度,設計出更符合使用者需求的行動應用程式。


    摘要 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

    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 - 線稿式原型設計工具於行動應用開發之研究。國立政治大學數位內容碩士學位學程碩士論文。

    QR CODE
    :::