學術產出-Theses
Article View/Open
Publication Export
-
題名 基於 Xketch 原型工具快速開發單頁互動模式之研究
A study of creating single-page interactive prototype with Xketch app作者 張智雅
Chang, Chih-Ya貢獻者 余能豪<br>陳宜秀
Yu, Neng-Hao<br>Chen, Yi-Hsiu
張智雅
Chang, Chih-Ya關鍵詞 行動應用程式
單頁互動
原型製作
開發工具
線稿式設計
Mobile application
Single-page interaction
Prototyping
Toolkits
Sketch-Based日期 2018 上傳時間 5-Sep-2019 17:26:24 (UTC+8) 摘要 單頁互動在行動介面中是一種常見的手法，為求有效地運用有限的空間，次要功能及資訊會待至使用時機才顯現，採用單頁互動同時可見背景內容，一來有助於使用者掌握當前位置，二來操作結束後即回到當前內容繼續原先操作，因不中斷原先操作而帶來連貫的使用體驗。 在行動應用程式App開發時相當注重使用者體驗，利用原型收集使用者回饋是常見的作法，然而，市面上常見的原型工具卻未能以有效率的方式製作單頁互動。故本研究簡化單頁互動在原型上的製作步驟，預期加速原型生成，並設計適用於單頁互動的流程圖，在線稿式原型工具Xketch上實作。 經受測者評估後，認為此研究設計的方法在製作「連續產生的單頁互動」上有不錯的表現，流程圖的呈現方式也能幫助受測者掌握整體設計。最後，本研究將分析受測者的操作記錄、問卷、訪談回饋，總結Xketch的實驗結果與討論，探討在原型工具上設計單頁互動的未來發展與改善方向。
In order to use limited display space efficiently, single-page interaction is widely used in the mobile application. In single-page interaction, the minor functions and information won’t be displayed until the necessary timing for operation. And the background of single-page interaction is transparent for the reason that the user can still perceive the previous stage and proceed the operations at the previous stage immediately once the single-page interaction ends. Thus, the user experience can be continuous.The user experience is very important while developing a mobile application, thus using prototypes to collect the user’s feedback is a common method. However, there’s no suitable developing kit to build prototypes with single-page interactions easily and efficiently. In this circumstance, the simplified developing methods of single-page interaction are discussed in this study to simplify the flowcharts of single-page interaction designing and reduce the developing time of prototypes with single-page interaction and implement it in Xketch.According to the experimental subjects, the method of single-page interaction in this study is easy to learn and can generate single-page interaction continuously with high efficiency. And the flowchart presentation conduces overall design management for the experimental subjects.Overall, all the operation behaviors of experimental subjects and the test results in Xketch will be discussed and analyzed in this study to improve the single-page interaction design methods in prototype development.參考文獻 網路資源Google Material Desing. (2018) fromhttps://material.io/guidelines/material-design/introduction.htmliOS Human Interface Guidelines. (2018) fromhttps://developer.apple.com/ios/human-interface-guidelines/overview/themes/中文文獻池田拓司. (2013). 智慧手機 App UI・UX 設計鐵則: 旗標出版股份有限公司.利淑惠. (2017). Xketch+以線稿式原型設計工具加速行動應用程式之設計流程. (碩士), 國立政治大學, 台北市.徐嘉駿. (2015). Xketch-線稿式原型設計工具於行動應用開發之研究. (碩士). 國立政治大學, 台北市.陳信慈. (2010). 互動感知體驗設計之健康照護提醒裝置. 政治大學數位內容碩士學位學程學位論文, 1-149.彭其捷, & 楊淑涵. (2013). 那些 APP 好用的祕密: 黏住使用者的魅力 &UX 好感度設計: PG21352: 博碩文化股份有限公司.劉又嘉. (2012). 探討 iPad 的使用者介面元件之使用性評估. 清華大學工業工程與工程管理學系學位論文, 1-76.英文文獻Coyette, A., Faulkner, S., Kolp, M., Limbourg, Q., & Vanderdonckt, J. (2004). SketchiXML: towards a multi-agent design tool for sketching user interfaces based on USIXML. Paper presented at the Proceedings of the 3rd annual conference on Task models and diagrams.Herbsleb, J. D., & Kuwana, E. (1993). Preserving knowledge in design projects: What designers need to know. Paper presented at the Proceedings of the INTERACT`93 and CHI`93 conference on Human factors in computing systems.Hermes, D. (2015). Navigation. In Xamarin Mobile Application Development (pp. 217-296): Springer.Landay, J. A., & Myers, B. A. (1995). Interactive sketching for the early stages of user interface design. Paper presented at the Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, Denver, Colorado, USA.Neil, T. (2014). Mobile design pattern gallery: UI patterns for smartphone apps: " O`Reilly Media, Inc.".Newman, M. W., Lin, J., Hong, J. I., & Landay, J. A. (2003). DENIM: An informal web site design tool inspired by observations of practice. Human-Computer Interaction, 18(3), 259-324.Sauro, J., & Lewis, J. R. (2016). Quantifying the user experience: Practical statistics for user research: Morgan Kaufmann.Vin, #237, Segura, c. C. V. B., Barbosa, S. D. J., Sim, F. P., #245, & es. (2012). UISKEI: a sketch-based prototyping tool for defining and evaluating user interface behavior. Paper presented at the Proceedings of the International Working Conference on Advanced Visual Interfaces, Capri Island, Italy.Walker, M., Takayama, L., & Landay, J. A. (2002). High-fidelity or low-fidelity, paper or computer? Choosing attributes when testing web prototypes. Paper presented at the Proceedings of the human factors and ergonomics society annual meeting. 描述 碩士
國立政治大學
數位內容碩士學位學程
104462012資料來源 http://thesis.lib.nccu.edu.tw/record/#G0104462012 資料類型 thesis dc.contributor.advisor 余能豪<br>陳宜秀 zh_TW dc.contributor.advisor Yu, Neng-Hao<br>Chen, Yi-Hsiu en_US dc.contributor.author (Authors) 張智雅 zh_TW dc.contributor.author (Authors) Chang, Chih-Ya en_US dc.creator (作者) 張智雅 zh_TW dc.creator (作者) Chang, Chih-Ya en_US dc.date (日期) 2018 en_US dc.date.accessioned 5-Sep-2019 17:26:24 (UTC+8) - dc.date.available 5-Sep-2019 17:26:24 (UTC+8) - dc.date.issued (上傳時間) 5-Sep-2019 17:26:24 (UTC+8) - dc.identifier (Other Identifiers) G0104462012 en_US dc.identifier.uri (URI) http://nccur.lib.nccu.edu.tw/handle/140.119/125904 - dc.description (描述) 碩士 zh_TW dc.description (描述) 國立政治大學 zh_TW dc.description (描述) 數位內容碩士學位學程 zh_TW dc.description (描述) 104462012 zh_TW dc.description.abstract (摘要) 單頁互動在行動介面中是一種常見的手法，為求有效地運用有限的空間，次要功能及資訊會待至使用時機才顯現，採用單頁互動同時可見背景內容，一來有助於使用者掌握當前位置，二來操作結束後即回到當前內容繼續原先操作，因不中斷原先操作而帶來連貫的使用體驗。 在行動應用程式App開發時相當注重使用者體驗，利用原型收集使用者回饋是常見的作法，然而，市面上常見的原型工具卻未能以有效率的方式製作單頁互動。故本研究簡化單頁互動在原型上的製作步驟，預期加速原型生成，並設計適用於單頁互動的流程圖，在線稿式原型工具Xketch上實作。 經受測者評估後，認為此研究設計的方法在製作「連續產生的單頁互動」上有不錯的表現，流程圖的呈現方式也能幫助受測者掌握整體設計。最後，本研究將分析受測者的操作記錄、問卷、訪談回饋，總結Xketch的實驗結果與討論，探討在原型工具上設計單頁互動的未來發展與改善方向。 zh_TW dc.description.abstract (摘要) In order to use limited display space efficiently, single-page interaction is widely used in the mobile application. In single-page interaction, the minor functions and information won’t be displayed until the necessary timing for operation. And the background of single-page interaction is transparent for the reason that the user can still perceive the previous stage and proceed the operations at the previous stage immediately once the single-page interaction ends. Thus, the user experience can be continuous.The user experience is very important while developing a mobile application, thus using prototypes to collect the user’s feedback is a common method. However, there’s no suitable developing kit to build prototypes with single-page interactions easily and efficiently. In this circumstance, the simplified developing methods of single-page interaction are discussed in this study to simplify the flowcharts of single-page interaction designing and reduce the developing time of prototypes with single-page interaction and implement it in Xketch.According to the experimental subjects, the method of single-page interaction in this study is easy to learn and can generate single-page interaction continuously with high efficiency. And the flowchart presentation conduces overall design management for the experimental subjects.Overall, all the operation behaviors of experimental subjects and the test results in Xketch will be discussed and analyzed in this study to improve the single-page interaction design methods in prototype development. en_US dc.description.tableofcontents 第一章 緒論 1第一節 研究背景 1一、滾動模式（Scrolling Pattern） 4二、側邊滑出介面（Side Drawer） 5三、彈跳介面（Popover） 5第二節 研究動機與目的 6第三節 研究步驟 7第二章 文獻及案例探討 8第一節 單頁互動模式 8一、互動類型 91. 側邊選單（Navigation Drawer） 92 切換選單（Toggle Menu） 113. 動作條列清單（Action Sheet） 124. 動作格狀清單（Grid List） 135. 彈出式選單（Menu） 146. 通知（Alert） 157. 對話框（Dialog） 168. 挑選器（Picker） 179. 確認（Confirmation） 1810. 回饋狀態列（Snackbar） 1911. 上拉式介面（Slide－up） 2012. 彈出式介面（Popover / Popup） 21二、小結 22第二節 行動應用原型工具 25一、紙面原型 25二、數位原型 261. 影像連結式原型設計工具（Image-Based Prototyping Tool） 262. 元件產生式原型設計工具（Component-Based Prototyping Tool） 28三、小結 31第三節 Xketch 的簡介與分析 33一、簡介Xketch 331. 線稿式設計 332. Xketch 製作元件的方式 343. Xketch推測元件的方式 344. Xketch修改元件與建立連結的方式 36二、小結 37第三章 系統設計與實作 38ㄧ、建立單頁互動 38二、編輯單頁互動 40三、流程圖 42第四章 系統評估與討論 45一、評估方法 45二、評估對象 46三、評估內容與流程 47四、評估結果與分析 49第五章 結論 54一、研究貢獻 54二、未來發展 54參考文獻 56附錄一 實驗流程說明 58附錄二 問卷與訪綱 62 zh_TW dc.format.extent 27574030 bytes - dc.format.mimetype application/pdf - dc.source.uri (資料來源) http://thesis.lib.nccu.edu.tw/record/#G0104462012 en_US dc.subject (關鍵詞) 行動應用程式 zh_TW dc.subject (關鍵詞) 單頁互動 zh_TW dc.subject (關鍵詞) 原型製作 zh_TW dc.subject (關鍵詞) 開發工具 zh_TW dc.subject (關鍵詞) 線稿式設計 zh_TW dc.subject (關鍵詞) Mobile application en_US dc.subject (關鍵詞) Single-page interaction en_US dc.subject (關鍵詞) Prototyping en_US dc.subject (關鍵詞) Toolkits en_US dc.subject (關鍵詞) Sketch-Based en_US dc.title (題名) 基於 Xketch 原型工具快速開發單頁互動模式之研究 zh_TW dc.title (題名) A study of creating single-page interactive prototype with Xketch app en_US dc.type (資料類型) thesis en_US dc.relation.reference (參考文獻) 網路資源Google Material Desing. (2018) fromhttps://material.io/guidelines/material-design/introduction.htmliOS Human Interface Guidelines. (2018) fromhttps://developer.apple.com/ios/human-interface-guidelines/overview/themes/中文文獻池田拓司. (2013). 智慧手機 App UI・UX 設計鐵則: 旗標出版股份有限公司.利淑惠. (2017). Xketch+以線稿式原型設計工具加速行動應用程式之設計流程. (碩士), 國立政治大學, 台北市.徐嘉駿. (2015). Xketch-線稿式原型設計工具於行動應用開發之研究. (碩士). 國立政治大學, 台北市.陳信慈. (2010). 互動感知體驗設計之健康照護提醒裝置. 政治大學數位內容碩士學位學程學位論文, 1-149.彭其捷, & 楊淑涵. (2013). 那些 APP 好用的祕密: 黏住使用者的魅力 &UX 好感度設計: PG21352: 博碩文化股份有限公司.劉又嘉. (2012). 探討 iPad 的使用者介面元件之使用性評估. 清華大學工業工程與工程管理學系學位論文, 1-76.英文文獻Coyette, A., Faulkner, S., Kolp, M., Limbourg, Q., & Vanderdonckt, J. (2004). SketchiXML: towards a multi-agent design tool for sketching user interfaces based on USIXML. Paper presented at the Proceedings of the 3rd annual conference on Task models and diagrams.Herbsleb, J. D., & Kuwana, E. (1993). Preserving knowledge in design projects: What designers need to know. Paper presented at the Proceedings of the INTERACT`93 and CHI`93 conference on Human factors in computing systems.Hermes, D. (2015). Navigation. In Xamarin Mobile Application Development (pp. 217-296): Springer.Landay, J. A., & Myers, B. A. (1995). Interactive sketching for the early stages of user interface design. Paper presented at the Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, Denver, Colorado, USA.Neil, T. (2014). Mobile design pattern gallery: UI patterns for smartphone apps: " O`Reilly Media, Inc.".Newman, M. W., Lin, J., Hong, J. I., & Landay, J. A. (2003). DENIM: An informal web site design tool inspired by observations of practice. Human-Computer Interaction, 18(3), 259-324.Sauro, J., & Lewis, J. R. (2016). Quantifying the user experience: Practical statistics for user research: Morgan Kaufmann.Vin, #237, Segura, c. C. V. B., Barbosa, S. D. J., Sim, F. P., #245, & es. (2012). UISKEI: a sketch-based prototyping tool for defining and evaluating user interface behavior. Paper presented at the Proceedings of the International Working Conference on Advanced Visual Interfaces, Capri Island, Italy.Walker, M., Takayama, L., & Landay, J. A. (2002). High-fidelity or low-fidelity, paper or computer? Choosing attributes when testing web prototypes. Paper presented at the Proceedings of the human factors and ergonomics society annual meeting. zh_TW dc.identifier.doi (DOI) 10.6814/NCCU201901134 en_US
