指導教授：許永真臺灣大學：資訊工程學研究所王鈞奕Wang, Chun-IChun-IWang2014-11-262018-07-052014-11-262018-07-052014http://ntur.lib.ntu.edu.tw//handle/246246/261505隨著智慧型手機以及行動網路的普及,人們可以在各地透過手機應 用程式方便的獲取所需資訊,由手機應用的龐大需求所驅,越來越多 開發者投入與手機應用程式的開發與設計。然而,手機介面設計因為 多重使用情境以及手機的螢幕大小等特殊的限制,有截然不同的設計 考量,對於新手設計師,要做出好的手機介面設計是相對比較困難的。 在這篇論文裡,我們實現了 Dmatch: 一套以線稿圖來搜尋設計範例的 系統。我們深入的探討如何運用 Amazon Mechanical Turk 群眾外包平 台豐沛的人力,精確有效的還原每張截圖中使用者界面的原件組成, 以提供線稿圖式的探索。其中,“標注使用者界面的原件” 這項工作不 但需要專業的辨別能力,標注本身也是一件耗時費工的事。為了讓未 經訓練的工作者可以精確地完成任務,我們用範例學習的方式提升工 作者認知能力,並結合智慧標注工具減輕其標注負擔。透過 “標注,驗 證” 兩階段的機制,我們的實驗結果顯示 Dmatch 產生的介面標注可以 達到不錯精確度和招回率。The ubiquitous availability of smart phones have made it easier than ever for people to acquire information through apps. Driven by the huge demand in mobile apps, more and more designers and developers are entering the area of mobile app design. However, due to the context of use and limited screen size, it becomes difficult for novice designers or developers to design a good mobile app. In this work, we introduce Dmatch: a wireframe-based design exploration tool to help designers visually query mobile designs for inspiration. Dmatch crowdsources UI element annotations of mobile design images through crowds using Amazon Mechanical Turk. The core challenge is to facilitate crowd of non-experts to generate UI element annotations precisely. Our key observation is that “drawing UI element annotations” requires expertise to recognize and it is much more time-consuming. Therefore, we pro- vides in-hit guiding example aid to enhance their knowledge and a semi-auto intelligent annotation tool to alleviate the workload. Using the “Draw-Verify” workflow design, the experiment result demonstrates that Dmatch can interpret UI element with high precision and recall.1 Introduction 1 1.1 Motivation.................................. 1 1.2 Challenges.................................. 2 1.3 Proposed Method .............................. 3 2 Related Work 5 2.1 Computer Vision .............................. 5 2.1.1 Edge-based Approach ....................... 5 2.1.2 Template Matching-based Approach. . . . . . . . . . . . . . . . 6 2.2 Crowdsourcing ............................... 6 2.2.1 Pros and Cons of Mechanical Turk Platform. . . . . . . . . . . . 6 2.2.2 Crowdsourcing Workflows..................... 7 2.2.3 Quality Control for Image Annotation . . . . . . . . . . . . . . . 7 3 Methodology 9 3.1 Pilot Test .................................. 9 3.2 Design Decisions .............................. 10 3.3 Workflow Overview ............................ 11 3.4 Drawing Task................................ 12 3.4.1 Instruction ............................. 12 3.4.2 In-Hit Annotation Aid ....................... 12 3.5 Verification Task Design .......................... 14 3.6 Precision Verification Task ......................... 15 3.6.1 Instructions............................. 15 3.6.2 Quality Control........................... 16 3.7 Recall Verification Task........................... 16 3.7.1 Quality Control........................... 17 4 UI Candidate Detection 21 4.1 UIElement Candidates Extraction ..................... 22 4.1.1 Connected Component Analysis.................. 22 4.1.2 X-Y-cut for grid........................... 22 4.2 Textline Extraction ............................. 23 4.3 UI Element Candidates Elimination .................... 23 4.4 Evaluation.................................. 24 4.4.1 Dataset ............................... 24 4.4.2 Evaluation Metrics ......................... 24 4.4.3 UI Candidate Detection Result................... 25 5 Wireframe-based Design Example Retrieval 27 5.1 Ranking Function.............................. 27 6 Experiment 31 6.1 Dataset ................................... 31 6.2 Experiment I: Comparison between an expert and non-expert crowds . . . 31 6.2.1 Annotation Quality Comparison .................. 32 6.2.2 Cost Comparison.......................... 34 6.3 Experiment II: Effect of In-hit Annotation Aid on Draw Task . . . . . . . 34 6.3.1 Annotation Quality Comparison .................. 34 6.3.2 Workers’ behavior ......................... 35 6.3.3 Efficiency.............................. 36 7 Conclusion and Future Work Bibliography .....39 Bibliography...................................413535992 bytesapplication/pdf論文公開時間：2014/08/25論文使用權限：同意無償授權人力運算標注工具thesishttp://ntur.lib.ntu.edu.tw/bitstream/246246/261505/1/ntu-103-R01922132-1.pdf