用户界面（User Interface,UI）原型设计是以用户为中心的应用软件开发过程中必不可少的一步。在界面原型设计的早期阶段,设计人员并不知道界面应该是什么样的,此时通常会使用线框图（Wireframe）进行探索。线框图是用户界面的图形化骨架,按照细节实现的程度,可分为低保真线框图和高保真线框图。低保真线框图是线框图的粗糙和基础表示版本,通常在纸上进行绘制,用于试验设计人员最初的想法,传达设计人员的意图。高保真线框图是对最终产品更完整的表述,需要花费更多的精力来创建,通常使用原型软件工具来创建。高保真线框图有助于传达美学特征和理解基本功能,但是创建高保真线框图是耗时耗力的,此外使用原型工具也需要额外的学习成本。因此,本文研究了如何利用深度学习技术来检测手绘UI草图中的组件（Component）,并根据检测结果来自动生成高保真线框图,最后本文设计并实现了一个原型工具插件来实现从手绘UI草图到高保真线框图的自动转换,节省了设计人员创建高保真线框图的时间,提高了原型设计效率。自动生成高保真线框图最关键的一步就是准确地识别出手绘UI草图中各个组件的类型和位置大小,这是一个特定领域的目标检测任务。在现有的用户界面组件检测研究中,通常使用传统的计算机视觉方法或者基于深度学习的方法。前者需要手动提取特征,并根据经验来设置启发式规则,过程繁琐复杂,准确率也较低。而后者是一种端到端的学习模型,利用神经网络自动提取特征,准确率更高。因此,本文对基于深度学习的UI组件检测方法进行了研究,并总结了现有的深度学习方法在手绘UI草图检测中存在的问题:（1）手绘UI草图数据集收集需要耗费大量人力,成本昂贵,因此训练数据量较少,在使用深度学习进行UI组件检测时,通常会使用在自然图像上预训练好的模型,而草图与自然图像的特征差异较大,造成了在训练检测网络时收敛较慢,准确率较低;（2）草图中有用的像素点较为稀疏,存在大量无用的背景信息,在使用卷积网络进行特征提取时,在分层卷积过程中,会造成稀疏的笔划信息丢失,使得对草图的识别变得困难;（3）用户界面各个组件使用频率差别很大,导致训练数据集中类别不平衡的问题,使得网络模型容易偏向样本量较大的组件,进而使得样本量较小的组件识别准确率较低。针对以上问题,本文改进了Faster R-CNN目标检测算法来检测手绘UI草图中的组件,并为原型软件工具Adobe XD开发了一款插件来帮助设计人员通过手绘UI草图快速创建高保真线框图。本文的主要工作如下:（1）针对草图与自然图像差异过大,使用基于自然图像的预训练模型导致检测模型准确率较低的问题,本文构建了一个大规模的UI草图组件数据集,并用其对本文的目标检测网络进行了预训练,加快了网络的收敛速度,使模型的m AP增加3.6%。（2）针对卷积过程中,存在草图稀疏的笔划信息丢失的问题,本文提出了采用基于置换注意力机制的残差网络来提取手绘UI草图的特征,它融合了通道注意力和空间注意力,可以帮助网络学习到更有用的特征,忽略不重要的信息,使模型的m AP提高了4.6%。（3）针对训练数据中类不平衡问题,本文使用了焦损失（Focal Loss）来改进Faster R-CNN中的多分类交叉熵损失,使得网络更关注分类困难的样本,减轻对易分类样本的过拟合,提高了对困难样本的检测精度。（4）本文为现有流行的原型软件工具Adobe XD开发了一款基于手绘UI草图的高保真线框图自动生成插件,并将改进后的手绘UI草图检测模型应用于该插件当中,通过该插件缩短了设计人员创建高保真线框图的时间,提高了原型设计效率。综上所述,本文通过改进Faster R-CNN目标检测算法,使其在手绘UI草图检测中的m AP达到了88.5%。最后,本文设计并实现了一款原型软件工具插件,帮助设计人员通过手绘UI草图自动生成高保真线框图。